I’m Mark Knol, I work as Game Developer at MediaMonks Games. and we were asked to build 42 games as part of the O Brasil Inteiro Joga project, a website for Google Zoo. On the website users can create an avatar, interact with thematic sports games, read daily recaps, view playlists of videos available on YouTube and view custom maps with points of interest in Rio de Janeiro. A great and exciting project to work on.
This is a technical breakdown of some interesting parts of the game development side of the project.
TLDR; Play the games now!
That’s right, a marathon of game development
42 multi-platform multi-language browser-based mobile-first mini games. This sounds huge. A small calculation told me we maybe had to finish a game a week. Now I follow people who work hard to finish one game a month, so this was quite a challenge. When you start such a project the feature list seems huge when you read it all at once. We had to break it down into pieces.
Tech / development environment
We choose to use HTML5, of course; Because we all ♥ the web. With WebGL and 2D Canvas as fallback we can get the most out of it to create mobile browser games. The framework we used is called Flambe. We have already created several games using this lightweight game framework, so after some internal discussions we decided to continue using it for this project. While Flambe has a minimal API, it provides asset loading, fast rendering, animation and a gameloop with an entity/component system, all build-in. This is perfect for the games we needed to build.
We used HaxeDevelop as the coding editor of choice. It is a relatively new editor from the Haxe Foundation created by the FlashDevelop team.
Side note: I am a big fan of Haxe toolkit because of all the features it brings for modern development. I also personally contribute to the platform, since it’s all free + open source, has a lot of free libraries and in my opinion deserves more attention than it gets.
Breaking everything into pieces
Before such a project starts, it’s good to define what you want and how to approach everything. We decided to split all 42 game into categories, aka “engines”. The idea we had was to create several game engines with general features, which then should be easily translated into specific games by changing its settings and animations. We came up with these engines:
- Button mash —Tap as fast as you can to reach the finish.
- Open field — Play with a team, try to pass and shoot at a goal.
- Net team—Play with team, pass and smash over the net.
- Net single player — Beat one opponent by smashing in the correct direction.
- Follow a sequence — Tap on the right moment while the player performs tricks.
- Throwing — Tap at the right moment to throw as far as you can.
- Keep in sync — Tap at left and right side of screen to reach the finish.
- Aim and Shoot —Aim at the goal, release and shoot as close as possible to the target.
- Fighting attack defend — Attack an opponent, make sure you don’t get hit.
- Fighting defend throw — Defend from opponent moves, throw him on the ground.
- Strength — Lift weights by tapping as fast as you can.
- Sailing — React to the wind direction, sail a certain path.
All games are composed out of one of these engines. Some games have additional features build on top of the engine, some translate by changing the environment, animations and settings. We created several components that are reused in other games, this allowed us to develop some games really fast and spend more time on the others.
Personal character customization
How cool would it be if you create a personal character which you can use over all 42 games on this great platform? I’ve never seen such thing on HTML5 games before. It was a challenge to set it up at first, but we did it and the result is surprisingly fun. It also brought new possibilities: For team games, we could create some “mutated” versions of your customized character and nice contrasting opponents.
The animation process
For each game we created different skeleton animations. Each game has its own parts, which are replaced by customized parts, like different hair or beard types, glasses and fat bodies. All animations are created in Adobe Flash / Animate CC, but exported using Flump. This converts Flash files and outputs a texture atlas with a JSON-file that contains the timeline transformations. When we load a character animation, we replace placeholder colors with the customized colors directly in the texture. This allows to use any hair, skin and clothing color, which makes the customization possibilities way larger. We share some assets across all games for faster loading times. We modified some internals to be able to colorize and swap parts at run-time. The animation setup allows exceptions; ie. swimming games don’t have customized hair, fencing has its own suit etc etc.
This technique gave us very small optimized textures, which load fast and perform well enough to use on mobile. The overall workflow was also very friendly for both developer and animator to work with.
To increase the fun, some special games have funny animated-gif like cutscene animations. There are some variations, I hope you will spot them.
Taking the customization a step further: rich media
Since we closely work with the Google team we managed to use the character customization inside of the rich media campaign we also created. Once the player has created their own character on the site, this will be used in campaign banners across the web. A nice bit of personalization!
What we learned about tutorials and controls
To streamline all games we created a uniform interface for all games, that also works on a mobile browser. The controls are mostly keys on desktop, touch on mobile and should be easy to understand, while the games are sometimes hard to master.
We explain each game with tutorials. We didn’t want to create very complex tutorials but we learned a valuable thing after extensive play testing: People don’t read tutorials. Even if the design is good. People are focused on the game itself and skip whatever to start. So we kept them very simple. Sometimes we stop for a moment to show an animation which explains what to do and copy that explains what happens, like “tap to shoot”. We felt it was needed to have different animations/copy on mobile. We’ve learned that tutorials need real work; each explanation needs to be as clear as possible and you need play testing to spot confusion. This also forced us to use as few controls as possible and (hopefully) leads into easy to understand games.
Games are all about fun! We worked so hard to make these games!
Enjoy playing the games as much as we liked building them!
Play the games now! \o/
football, basketball, hockey, handball, waterpolo, beach volleyball, volleyball, badminton, tennis, table tennis, boxing, fencing, taekwondo, judo, wrestling greco, wrestling freestyle, diving, pommel horse, gymnastics artistic, gymnastics rhythmic, synchronised swimming, equestrian dressage, swimming, cycling bmx, cycling track, rowing, canoe sprint, canoe slalom, running, hurdles, relay, rugby, equestrian jumping, archery, shooting, golf, javelin, shot put, hammer, discus, weightlifting and sailing
.. and don’t forget to unlock the secret game after you finished athe marathon missions!