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.