Building 42 games within a year — Insane game development

7 min readAug 3, 2016

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.

Teaser animations

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.

A powerful development toolset to make HTML5 games.

Instead of coding plain JavaScript, we transpile our code to JavaScript using Haxe, an open source, object oriented programming language with expressive features and a fast compiler. Because Haxe has an optimizing compiler we could profit from features like inlining, dead-code elimination and extend the language using macros (meta programming). We minified the code using the Google Closure Compiler.

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.

Game design

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.

Animations in Adobe Flash/Animate CC > Exported with Flump > Tinted and decorated in-game

Having character customization allows to create a nice variety of team- and opponent players.

Even with the same hair color, you can achieve very different looking characters while keeping the same style.

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.