{"id":18307,"date":"2017-04-28T03:10:09","date_gmt":"2017-04-28T10:10:09","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/04\/how-we-made-an-awesome-gyroscope-based-web-game-in-a-few-weeks\/"},"modified":"2017-04-28T03:10:09","modified_gmt":"2017-04-28T10:10:09","slug":"how-we-made-an-awesome-gyroscope-based-web-game-in-a-few-weeks","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/04\/how-we-made-an-awesome-gyroscope-based-web-game-in-a-few-weeks\/","title":{"rendered":"How we made an awesome Gyroscope based web game in a few weeks"},"content":{"rendered":"

One month till\u00a0Easter<\/strong><\/h3>\n

I have the pleasure of working with this great team called Guts & Gusto to design & build awesome new stuff. Every holiday we make something cool, like a small, online game for our customers. Last Christmas we designed a search & collect game. The more items you found, the more discount you got. The game was played over 26.000\u00a0times.<\/p>\n

With Easter coming up this year we decided to raise the bar a little higher. Ron, a front-end developer, recently started working at Guts & Gusto. He wants to learn more JavaScript and Canvas games, so this was the perfect project to start with for\u00a0Ron.<\/p>\n

\"\"
Look, that\u2019s Ron on the\u00a0left!<\/figcaption><\/figure>\n

During lunch I suggested all joking that we should do something with the gyroscope in\u00a0phones.<\/p>\n

Moving the character around by tilting your device, catching eggs, avoiding rocks with the possibility to accumulating a total discount of 15%. We took a look online and found this<\/a> demo. AWESOME, it was possible.<\/p>\n

Ron created a small demo to test the possibilities. He was able to make a red block move using the gyroscope. Cool, it worked\u00a0\u2026 time to \u201ccatch\u201d something.<\/p>\n

\"\"
Kind of a working\u00a0demo.<\/figcaption><\/figure>\n

After a few hours of coding, we were able to make the red block catch other things. Now we have a functional foundation and could try some skinning. The game should have an Easter skin with a crazy rabbit running around catching eggs falling from the sky. The more eggs you catch, the more discount you get. Same principle as Christmas, just more advanced. And trust me, it\u2019s addictive as\u00a0hell.<\/p>\n

\"\"
Some mock-up up and rapidly test it on mobile (yeah I get it, I still got a small\u00a05s)<\/figcaption><\/figure>\n

Let\u2019s advance this game even more. Skinning, parallax and sounds are already being discussed. It\u2019s hard to keep focused on the core with all of these awesome ideas. First things to tackle\u00a0are:<\/p>\n

    \n
  1. Polishing gameplay with levelling<\/li>\n
  2. Update scores in various ways (counters and when catching)<\/li>\n
  3. Variables (rocks, eggs,\u00a0lives)<\/li>\n
  4. Generate discounts<\/li>\n<\/ol>\n

    Make it fun, and an easy learning-curve. Part of why Guts & Gusto is so loved, is because the nerd team always tries to make an even cooler game each\u00a0holiday.<\/p>\n

    \"\"
    Testing\u00a0\u2026 oops, nothing to see here!\u00a0:)<\/figcaption><\/figure>\n

    1 week till\u00a0Easter<\/strong><\/h3>\n

    Thing got a bit stressy. Would it be finished in time with all of this awesomeness? The running part sound was already being tested, but only as background music. There was still a lot to do for the in between\u00a0screens.<\/p>\n

    \"\"
    An overview of the\u00a0states<\/figcaption><\/figure>\n

    But still, hey. Motion worked. Gameplay worked. Scores worked. Coupons worked. Just fine-tuning. We are using Trello to create a checklist and work-list for this\u00a0game.<\/p>\n

    \"\"
    Yeah, our Dutch\u00a0Trello<\/figcaption><\/figure>\n
    \"\"
    Demo gameplay as it was 1 week before\u00a0Easter<\/figcaption><\/figure>\n

    5 days till\u00a0Easter<\/strong><\/h3>\n

    This week Willem joined to our Easter team to help to optimize the code for optimal performance. There was quite a lot of work left to be\u00a0done!<\/p>\n

    Today we did our first small test to check the basics of the game. People did not notice inmediatly that the gyroscope was used to move the\u00a0rabbit.<\/p>\n

    Second insight was that the rabbit was moving quite fast. Precise catching was a bit difficult, so we had to slow the rabbits movements down.<\/p>\n

    \"\"
    Testing with some colleagues<\/figcaption><\/figure>\n

    3 days till\u00a0Easter<\/strong><\/h3>\n

    The in-between states and score were not clear for users. So shit, we have to make it less fuzzy. First of all, the score. Let\u2019s get rid of the score numbers and only focus on the percentage discount (that is what will matter the most). This was a quick\u00a0fix.<\/p>\n

    \"\"
    Levelling between the percentages with a progress indicator<\/figcaption><\/figure>\n

    Second were the overlays. The initial idea was to give it a bit more style with wood and logo\u2019s. But due to the lack of space on small devices this was a bit more difficult and we had to work with overlay scrolls etc. We also forgot some stages in the first round (like the confirmation after sending yourself the discount code). So together with the copywriter we fixed all of the states and made them also available for multi language in the back-end.<\/p>\n

    \"\"<\/figure>\n
    \"\"
    Left the first idea, right the new style with more\u00a0space<\/figcaption><\/figure>\n

    And of course test how far we were able to push a device. By rendering with tens of eggs per seconds the FPS was dropping a little lower (and damn, draining the battery!).<\/p>\n

    \"\"
    Performance testing with the\u00a0eggies<\/figcaption><\/figure>\n

    Saturday night\u00a02AM<\/strong><\/h3>\n

    It\u2019s already Easter. Few more minutes until we go live. Willem is working his ass off for the final code. Last tweaks and finishing touches using Whatsapp & Trello. In the meantime I was annoying Willem with my findings during the testing of the game. Every time he fixed something on the list I added a new finding that had to be\u00a0checked.<\/p>\n

    The confirmation mail of the coupon code was still a bit sober but there was no time for it sadly. The game had our main focus and that worked out quite well. Let\u2019s hope the players also like\u00a0it!<\/p>\n

    The moment was finally there. 4:30 AM Saturday night we went\u00a0live!<\/p>\n

    https:\/\/medium.com\/media\/29ff6e12cc4298418eef82d86f4cea21\/href<\/a><\/p>\n

    \"\"
    Yeah, it\u2019s working at 4:30\u00a0AM!!<\/figcaption><\/figure>\n

    Aftermath & learnings<\/strong><\/h3>\n
    \"\"
    Facebook post for the\u00a0girls<\/figcaption><\/figure>\n

    Like always. The testing was the most important part. Keep going through the levels, check everything\u00a0.In just two days the game was played over 36.000 times<\/strong>. A great result, people loved\u00a0it!<\/p>\n

    And f#ck yeah, this was really awesome to do!\u00a0:)<\/p>\n

    \"\"<\/figure>\n

    <\/p>\n

    Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

    One month till\u00a0Easter I have the pleasure of working with this great team called Guts & Gusto to design & build awesome new stuff. Every holiday we make something cool, like a small, online game for our customers. Last Christmas we designed a search & collect game. The more items you found, the more discount… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":18308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[174,377],"tags":[],"class_list":["post-18307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games-media","category-gaming"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t