Bye World

On the Berlin Mini Jam of August 2103 I took the opportunity to get a first impression of Cocos2d-x.  It’s an open source, multiplatform c++ port of the Cocos2D game engine, which was written for iOS apps.

One of the themes was “The world ends in 2 minutes”.  I took that literally and made a simple game where you get to choose how do you spend the last 2 minutes before the planet gets destroyed by an asteroid.

Being the first time I was using the library, my approach was to take the example HelloWorld app and hack it, looking up things in the online reference as I needed.  I wasn’t left very happy with the online documentation though.  In the official site, at least, it amounts to one simple tutorial and what looks like a dump of Doxygen generated documentation.  I missed little snippets of code showing examples on how to use each class, like you have with Löve2D or Qt.  On the other hand, the library itself seems to be quite well written, it was nice to use.  Specially because using the C++ version meant that the IDE I was using (QtCreator in my case) would help me figure out things through the autocompletion feature.  Speaking of which, Cocos2d-x comes with Qmake project files ready to use straight away, which was a very pleasant surprise.

This game engine comes with bindings for Javascript and Lua.  You don’t need to get your hands dirty with C++, even though I chose to do so.  Not only that, but the latest version has experimental support for emscripten, which is a C++ to Javascript compiler.  You write an application with C++, it gets compiled into an HTML5 page that can run in a browser.

Once the game was done, I decided that for such a small game I didn’t want to recompile for multiple platforms.  People are more likely to try a game if it just runs in their browser rather than download an executable binary.  So, I decided to give the emscripten port a try.  Generating the webapp did work out of the box, without any need for tweaks.  Unfortunately, it was quite buggy.  There was a weird problem with the colors (everything appeared red), the way fonts were rendered, but worst of all, the performance was terrible.

In addition to the C++ port, there is an HTML5 port called Cocos2d-html5.  As I said, the multiplatform support of this engine is quite good.  The API is almost the same.  Even though it meant rewriting the application, in practical terms I only had to replace the function calls with their Javascript equivalent.  After all, my game is just a glorified HelloWorld, with a minimal complexity.  Quick and easy.

Having it running properly, though, was not exactly a piece of cake.  I encountered different problems on each browser that I tried.  TrueType fonts were rendered in green (at least in Firefox), which meant that I had to replace all the labels and use a bitmap font (fortunately, I could find a freeware app online to convert ttf to bitmap fonts).  Support for the WebAudio API is kind of broken on several browsers (Problems with Chrome and Safari), so I had to hack into the Cocos2d-html5 library and implement workarounds with the particular problems on each one of those browsers.  And so is texture management with WebGL (Problems in Opera and Chromium).  I spent almost as much time working around the different issues on each particular browser as I spent writing the app on the first place.  My feeling after this work is of admiration for the developers of this game engine, because most of the stuff worked right away after all, with these few exceptions.  They must have had to do tons of work to fix all the countless issues on the different browsers.

Here you can play the result of the port, online.  The song is called “Duet Musette“, by Kevin MacLeod.  You play the game by clicking on the options at the bottom right corner.  The sound might still be broken depending on the browser you’re using, I am sorry about that.

Bye World

  • Source code (the master branch is the html5 implementation, there is a cpp branch with the original implementation)
Advertisements
This entry was posted in Berlin Mini Jam, Cocos2d-x, Finished Games, HTML5, JamGames. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s