How we made an awesome Gyroscope based web game in a few weeks
Guest Contribution
One month till Easter
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 times.
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 Ron.
During lunch I suggested all joking that we should do something with the gyroscope in phones.
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 demo. AWESOME, it was possible.
Ron created a small demo to test the possibilities. He was able to make a red block move using the gyroscope. Cool, it worked … time to “catch” something.
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’s addictive as hell.
Let’s advance this game even more. Skinning, parallax and sounds are already being discussed. It’s hard to keep focused on the core with all of these awesome ideas. First things to tackle are:
- Polishing gameplay with levelling
- Update scores in various ways (counters and when catching)
- Variables (rocks, eggs, lives)
- Generate discounts
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 holiday.
1 week till Easter
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 screens.
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 game.
5 days till Easter
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 done!
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 rabbit.
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.
3 days till Easter
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’s get rid of the score numbers and only focus on the percentage discount (that is what will matter the most). This was a quick fix.
Second were the overlays. The initial idea was to give it a bit more style with wood and logo’s. 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.
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!).
Saturday night 2AM
It’s 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 checked.
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’s hope the players also like it!
The moment was finally there. 4:30 AM Saturday night we went live!
https://medium.com/media/29ff6e12cc4298418eef82d86f4cea21/href
Aftermath & learnings
Like always. The testing was the most important part. Keep going through the levels, check everything .In just two days the game was played over 36.000 times. A great result, people loved it!
And f#ck yeah, this was really awesome to do! :)
Powered by WPeMatico
