{"id":11864,"date":"2014-07-14T19:50:00","date_gmt":"2014-07-14T18:50:00","guid":{"rendered":"http:\/\/zygm0nt.github.com\/blog\/2014\/07\/14\/super-confitura-man"},"modified":"2014-07-24T09:17:47","modified_gmt":"2014-07-24T08:17:47","slug":"super-confitura-man","status":"publish","type":"post","link":"https:\/\/touk.pl\/blog\/2014\/07\/14\/super-confitura-man\/","title":{"rendered":"Super Confitura Man"},"content":{"rendered":"<h2 id=\"how-super-confitura-man-came-to-be\">How Super Confitura Man came to be :)<\/h2>\n<p>Recently at TouK we had a one-day hackathon. There was no main theme for<br \/>\nit, you just could post a project idea, gather people around it and hack<br \/>\non that idea for a whole day &#8211; drinks and pizza included.<\/p>\n<p>My main idea was to create something that could be fun to build and be<br \/>\nuseful somehow to others. I\u2019d figured out that since Confitura was just<br \/>\naround a corner I could make a game, that would be playable at TouK\u2019s<br \/>\nbooth at the conference venue. This idea seemed good enough to attract<br \/>\nRafa\u0142 Nowak <a href=\"https:\/\/twitter.com\/RNowak3\">@RNowak3<\/a> and Marcin Jasion<br \/>\n<a href=\"https:\/\/twitter.com\/marcinjasion\">@marcinjasion<\/a> &#8211; two TouK employees, that with me<br \/>\nformed a team for the hackathon.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zygm0nt.github.com\/assets\/confitura-2014-01.jpg\" alt=\"Confitura 01\" \/><\/p>\n<p><!-- more --><\/p>\n<p>The initial plan was to develop a simple mario-style game, with<br \/>\npreceduraly generated levels, random collectible items and enemies. One<br \/>\nof the ideas was to introduce Confitura Man as the main character, but<br \/>\ndue to time constraints, this fall through. We\u2019ve decided to just choose<br \/>\na random available sprite for a character &#8211; hence the onion man :)<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zygm0nt.github.com\/assets\/confitura-2014-02.jpg\" alt=\"Confitura 02\" \/><\/p>\n<h2 id=\"how-the-game-is-played\">How the game is played?<\/h2>\n<p>Since we wanted to have a scoreboard and have unique users, we\u2019ve<br \/>\nprinted out QR codes. A person that would like to play the game could<br \/>\npick up a QR code, show it against a camera attached to the play booth.<br \/>\nThe start page scanned the QR code and launched the game with username<br \/>\nread from paper code.<\/p>\n<p>The rest of the game was playable with gamepad or keyboard.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zygm0nt.github.com\/assets\/confitura-2014-04.png\" alt=\"Confitura game screen\" \/><\/p>\n<h2 id=\"technicalities\">Technicalities<\/h2>\n<p>Writing a game takes a lot of time and effort. We wanted to deliver, so<br \/>\nwe\u2019ve decided to spend some time in the days before the hackathon just<br \/>\nto bootstrap the technology stack of our enterprise.<\/p>\n<p>We\u2019ve decided that the game would be written in some Javascript based<br \/>\nengine, with Google Chrome as a web platform. There are a lot of HTML5<br \/>\ngame engines &#8211; <a href=\"http:\/\/html5gameengine.com\/\">list of html5 game engines<\/a> and you could easily create a<br \/>\ngame with each and every of them. We\u2019ve decided to use <a href=\"http:\/\/phaser.io\/\">Phaser IO<\/a><br \/>\nwhich handles a lot of difficult,  game-related stuff on its own. So, we<br \/>\ndidn\u2019t have to worry about physics, loading and storing assets,<br \/>\nanimations, object collisions, controls input\/output. Go see for<br \/>\nyourself, it is really nice and easy to use.<\/p>\n<p>Scoreboard would be a rip-off from <a href=\"http:\/\/blog.gengo.com\/jira-survivor\/\">JIRA Survivor<\/a><br \/>\nwith stats being served from some web server app. To make things harder,<br \/>\nthe backend server was written in Clojure. With no experience in that<br \/>\nlanguage in the team, it was a bit risky, but the tasks of the server<br \/>\nwere trivial, so if all that clojure effort failed, it could be<br \/>\nrewritten in something we know.<\/p>\n<h2 id=\"statistics\">Statistics<\/h2>\n<p>During the whole Confitura day there were 69 unique players (69 QR codes<br \/>\nwere used), and 1237 games were played. The final score looked like<br \/>\nthis:<\/p>\n<ol>\n<li>Barister Lingerie 158 &#8211; 1450 points<\/li>\n<li>Boilerdang Custardbath 386 &#8211; 1060 points<\/li>\n<li>Benadryl Clarytin 306 &#8211; 870 points<\/li>\n<\/ol>\n<p>And the obligatory scoreboard screenshot:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zygm0nt.github.com\/assets\/confitura-2014-03.png\" alt=\"Confitura 03\" \/><\/p>\n<h2 id=\"obstacles\">Obstacles<\/h2>\n<p>The game, being created in just one day, had to have problems :) It<br \/>\nwasn\u2019t play tested enough, there were some rough edges. During the day<br \/>\nwe had to make a few fixes:<\/p>\n<ul>\n<li>the server did not respect the highest score by specific user, it was just overwritting a user\u2019s score with it\u2019s latest one,<\/li>\n<li>there was one feature not supported on keyboard, that was available on gamepad &#8211; turbo button<\/li>\n<li>server was opening a database connection each time it got a request, so after around 5 minutes it would exhaust open file limit for MongoDB (backend database), this was easily fixed &#8211; thou the fix is a bit hackish :)<\/li>\n<\/ul>\n<p>These were easily identified and fixed.<br \/>\nUnfortunately there were issues that we were unable to fix while the<br \/>\nevent was on:<\/p>\n<ul>\n<li>google chrome kept asking for the permission to use webcam &#8211; this was very annoying, and all the info found on the web did not work &#8211; <a href=\"http:\/\/stackoverflow.com\/questions\/16835421\/how-to-allow-chrome-to-access-my-camera-on-localhost\/16929608#16929608\">StackOverflow thread<\/a><\/li>\n<li>it was hard to start the game with QR code &#8211; either the codes were too small, or the lighting around that area was inappropriate &#8211; I think this<br \/>\nissue could be fixed by printing larger codes,<\/li>\n<\/ul>\n<h2 id=\"technology-evaluation\">Technology evaluation<\/h2>\n<p>All in all we were pretty happy with the chosen stack. Phaser was easy<br \/>\nto use and left us with just the fun parts of the game creation process.<br \/>\nFinding the right graphics with appropriate licensing was rather hard.<br \/>\nWe didn\u2019t have enough time to polish all the visual aspects of the game<br \/>\nbefore Confitura.<\/p>\n<p>Writing a server in clojure was the most challenging part, with all the<br \/>\nnew syntax and new libraries. There were tasks, trivial in java\/scala,<br \/>\nbut hard in Clojure &#8211; at least for a whimpy beginners :) Nevertheless<br \/>\nClojure seems like a really handy tool and I\u2019d like to dive deeper into<br \/>\nits ecosystem.<\/p>\n<h2 id=\"source-code\">Source code<\/h2>\n<p>All of the sources for the game can be found here<br \/>\n<a href=\"https:\/\/github.com\/TouK\/confitura-man\">TouK\/confitura-man<\/a>.<\/p>\n<p>The repository is split into two parts:<\/p>\n<ul>\n<li>game &#8211; HTML5 game<\/li>\n<li>server &#8211; clojure based backend server<\/li>\n<\/ul>\n<p>To run the server you need to have a local MongoDB installation. Than in<br \/>\nserver\u2019s directory run:<br \/>\n<code><br \/>\n$ lein ring server-headless<br \/>\n<\/code><br \/>\nThis will start a server on <code>http:\/\/localhost:3000<\/code><\/p>\n<p>To run the game you need to install dependencies with bower and than<br \/>\nrun<br \/>\n<code><br \/>\n$ grunt<br \/>\n<\/code><br \/>\nfrom game\u2019s directory.<\/p>\n<p>To launch the QR reading part of the game, you enter<br \/>\n<code>http:\/\/localhost:9000\/start.html<\/code>. After scanning the code you\u2019ll be<br \/>\nredirected to <code>http:\/\/localhost:9000\/index.html<\/code> &#8211; and the game starts.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Summing up, it was a great experience creating the game. It was fun to<br \/>\nwatch people playing the game. And even with all those glitches and<br \/>\nstupid graphics, there were people vigorously playing it, which was<br \/>\nawesome.<\/p>\n<h2 id=\"thanks-to-rafal-and-michal-for-great-coding-experience-and-thanks-to-all-the-players-of-our-stupid-little-game-if-youd-like-to-ask-me-about-anything-feel-free-to-contact-me-by-mail\">Thanks to Rafa\u0142 and Micha\u0142 for great coding experience, and thanks to all the players of our stupid little game. If you\u2019d like to ask me about anything &#8211; feel free to contact me by mail or twitter <a href=\"https:\/\/twitter.com\/zygm0nt\">@zygm0nt<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"\nHow Super Confitura Man came to be :)\nRecently at TouK we had a one-day hackathon. There was no main theme for\nit, you just could post a project idea, gather people around it and hack\non that idea for a whole day &#8211; drinks and pizza included.\nMy main idea was to create something that could be fun to build and be\nuseful somehow to others. I&rsquo;d figured out that since Confitura was just\naround a corner I could make a game, that would be playable at TouK&rsquo;s\nbooth at the conference venue. This idea seemed good enough to attract\nRafa&#322; Nowak @RNowak3 and Marcin Jasion\n@marcinjasion &#8211; two TouK employees, that with me\nformed a team for the hackathon.\n\n\nThe initial plan was to develop a simple mario-style game, with\npreceduraly generated levels, random collectible items and enemies. One\nof the ideas was to introduce Confitura Man as the main character, but\ndue to time constraints, this fall through. We&rsquo;ve decided to just choose\na random available sprite for a character &#8211; hence the onion man :)\n\nHow the game is played?\nSince we wanted to have a scoreboard and have unique users, we&rsquo;ve\nprinted out QR codes. A person that would like to play the game could\npick up a QR code, show it against a camera attached to the play booth.\nThe start page scanned the QR code and launched the game with username\nread from paper code.\nThe rest of the game was playable with gamepad or keyboard.\n\nTechnicalities\nWriting a game takes a lot of time and effort. We wanted to deliver, so\nwe&rsquo;ve decided to spend some time in the days before the hackathon just\nto bootstrap the technology stack of our enterprise.\nWe&rsquo;ve decided that the game would be written in some Javascript based\nengine, with Google Chrome as a web platform. There are a lot of HTML5\ngame engines &#8211; list of html5 game engines and you could easily create a\ngame with each and every of them. We&rsquo;ve decided to use Phaser IO\nwhich handles a lot of difficult,  game-related stuff on its own. So, we\ndidn&rsquo;t have to worry about physics, loading and storing assets,\nanimations, object collisions, controls input\/output. Go see for\nyourself, it is really nice and easy to use.\nScoreboard would be a rip-off from JIRA Survivor\nwith stats being served from some web server app. To make things harder,\nthe backend server was written in Clojure. With no experience in that\nlanguage in the team, it was a bit risky, but the tasks of the server\nwere trivial, so if all that clojure effort failed, it could be\nrewritten in something we know.\nStatistics\nDuring the whole Confitura day there were 69 unique players (69 QR codes\nwere used), and 1237 games were played. The final score looked like\nthis:\n\nBarister Lingerie 158 &#8211; 1450 points\nBoilerdang Custardbath 386 &#8211; 1060 points\nBenadryl Clarytin 306 &#8211; 870 points\n\nAnd the obligatory scoreboard screenshot:\n\nObstacles\nThe game, being created in just one day, had to have problems :) It\nwasn&rsquo;t play tested enough, there were some rough edges. During the day\nwe had to make a few fixes:\n\nthe server did not respect the highest score by specific user, it was just overwritting a user&rsquo;s score with it&rsquo;s latest one,\nthere was one feature not supported on keyboard, that was available on gamepad &#8211; turbo button\nserver was opening a database connection each time it got a request, so after around 5 minutes it would exhaust open file limit for MongoDB (backend database), this was easily fixed &#8211; thou the fix is a bit hackish :)\n\nThese were easily identified and fixed.\nUnfortunately there were issues that we were unable to fix while the\nevent was on:\n\ngoogle chrome kept asking for the permission to use webcam &#8211; this was very annoying, and all the info found on the web did not work &#8211; StackOverflow thread\nit was hard to start the game with QR code &#8211; either the codes were too small, or the lighting around that area was inappropriate &#8211; I think this\nissue could be fixed by printing larger codes,\n\nTechnology evaluation\nAll in all we were pretty happy with the chosen stack. Phaser was easy\nto use and left us with just the fun parts of the game creation process.\nFinding the right graphics with appropriate licensing was rather hard.\nWe didn&rsquo;t have enough time to polish all the visual aspects of the game\nbefore Confitura.\nWriting a server in clojure was the most challenging part, with all the\nnew syntax and new libraries. There were tasks, trivial in java\/scala,\nbut hard in Clojure &#8211; at least for a whimpy beginners :) Nevertheless\nClojure seems like a really handy tool and I&rsquo;d like to dive deeper into\nits ecosystem.\nSource code\nAll of the sources for the game can be found here\nTouK\/confitura-man.\nThe repository is split into two parts:\n\ngame &#8211; HTML5 game\nserver &#8211; clojure based backend server\n\nTo run the server you need to have a local MongoDB installation. Than in\nserver&rsquo;s directory run:\n\n$ lein ring server-headless\n\nThis will start a server on http:\/\/localhost:3000\nTo run the game you need to install dependencies with bower and than\nrun\n\n$ grunt\n\nfrom game&rsquo;s directory.\nTo launch the QR reading part of the game, you enter\nhttp:\/\/localhost:9000\/start.html. After scanning the code you&rsquo;ll be\nredirected to http:\/\/localhost:9000\/index.html &#8211; and the game starts.\nConclusion\nSumming up, it was a great experience creating the game. It was fun to\nwatch people playing the game. And even with all those glitches and\nstupid graphics, there were people vigorously playing it, which was\nawesome.\nThanks to Rafa&#322; and Micha&#322; for great coding experience, and thanks to all the players of our stupid little game. If you&rsquo;d like to ask me about anything &#8211; feel free to contact me by mail or twitter @zygm0nt\n\nRecently at TouK we had a one-day hackathon. There was no main theme for\nit, you just could post a project idea, gather people around it and hack\non that idea for a whole day &#8211; drinks and pizza included.\nMy main idea was to create something that could be fun to build and be\nuseful somehow to others. I&rsquo;d figured out that since Confitura was just\naround a corner I could make a game, that would be playable at TouK&rsquo;s\nbooth at the conference venue. This idea seemed good enough to attract\n>Conclusion\n\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":{"0":"post-11864","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-development-design"},"_links":{"self":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/comments?post=11864"}],"version-history":[{"count":5,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11864\/revisions"}],"predecessor-version":[{"id":11874,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11864\/revisions\/11874"}],"wp:attachment":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/media?parent=11864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/categories?post=11864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/tags?post=11864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}