One of the most successful apps I worked on is the Bumba App for iOS. I worked on this project in 2011 and it was launched in April 2011. Since the beginning the application has been in the Belgian App Store’s Paid Apps Top 100. It was also number 1 app for the first week after the launch. I can’t actually share the download numbers, but this graph from App Annie shows Bumba’s ranking since the launch of the app. To be honest the success was mostly due to the fact that this little clown Bumba is a very popular TV character for kids between 2 and 4 years old in Belgium and Holland.

bumba-history

With the launch of Windows 8 this year, we saw an opportunity to be present in the Windows Store from day one. And because we built the app using cocos2d for iOS which is a native iOS framework, we could not just reuse the code and compile to Windows 8 SDK. Another constraint was the timing. We had only a month to get our app ready and uploaded to the Windows Store. If not we would miss the launch. I will go through some of the choices we made before explaining the final solution.

The platform shift

cocos2dx_landscape

cocos2dx-win8

The obvious choice was cocos2d-x, the cross-platform version of the framework we used to build the original. Obvious, well not completely. I did some testing porting one of the mini games from Objective-C to C++ and that worked pretty well. I did not have a lot of C++ knowlegde, but I managed to create a working demo that worked on iOS.

We did not want to build a cross platform version of our app, but a Windows 8 version. And then I discovered that the main branch did not support Windows 8. There is however a separate repository for the Windows 8 version. But this version worked on older versions of the API. I had to re-write some code and got the demo working on Windows 8.

So not a bad solution. The framework was still a but unstable and I had to learn C++, but doable.

cocos2dx-html5

But wait, Windows 8 supports JavaScript/HTML apps out of the box, so why not use JavaScript. It’s hot and a lot more people at Nascom have some kind of knowledge of JavaScript.

I ported the same games from the original app to the JavaScript version of the Framework. After half a day I managed to hack together a workable demo. Next you can see 2 simple demos that I created to see what’s possible.

So that seemed to work fine in the browser, but after porting the code from a website to a Windows 8 App we got some errors. Also Windows 8 apps need to support Touch and this framework didn’t behave as expected. It looks like most of the code was optimized for Webkit based browsers, and because a Windows 8 JavaScript app uses IE 10 internally it cause some problems that were not that easy to fix. More info about cocos2dx-html5 can be found here.

Important: All images used in the demo’s are copyrighted to Studio 100.  These experiments are not fully functional mini games, you’ll have to buy one of our apps for that.

CreateJS

createJS

After talking to the Microsoft gaming specialist David Rousset, we decided to try out the CreateJS Framework from Grant Skinner. This framework fully supports the latest Microsoft browsers and some pretty impressive games are already available on the internet. Checkout Pirates Love. Daisies and Atari Arcade.

The framework is more lightweight because you can just use the libraries that you need. And it’s pretty easy to learn if you have a Flash background. We did some experiments and they all worked fine inside the context of a Windows 8 app, so we decided abandon the coco2d framework and port our code to CreateJS.

Developing the App

Development Environment

Our development environment was setup so that we could easily develop in the browser and and still run the app from Visual Studio on Windows 8. Most of the application’s functionality can be run in modern browsers like Chrome, Safari and Internet Explorer 9/10.

We only had to write specific code for Windows 8 specific logic such as handling the different states: Fullscreen, Filled, Snapped, … This also made it possible to have the functionality approved very quickly by the client.

Some tips & tricks

While developing the app we ran into some limitations, issues. Here are some tips and tricks:

  • The general application’s architecture was the first challenge. The cocos2d engine we used provided a mechanism to switch between different scene, but the CreateJS framework does not have something similar. We created a general framework that managed loading and unloading different scenes onto the <canvas> element.
  • Cleaning up is important. Our app uses one <canvas> element where we add and remove assets during the game. These assets are bitmaps, sounds and various JavaScript objects. CreateJS provides some cleanup methods, but we had to optimize the memory management at the end of the project. It’s basically the same as in iOS: what you create, you must destroy. The only difference is that it’s pretty hard to profile this in JavaScript without the proper tooling.
  • Testing on the device is essential. We did not have any Windows 8 Touch devices at the start of the project, but Microsoft was able to provide us a test machine which we could use.
  • Implement the platform specifics: Windows 8 provides some additional views that have to be supported: Full screen, Filled and Snapped. Because the game could not be played in snapped mode, we had to implement something special to indicate the user that this mode is not supported.
  • Different screen sizes and aspect ratios: we had to find a solution how to tackle the different aspect ratios. And we didn’t want to letterbox our game. So we decided that the playable area was always visible and we filled the rest of the screen with the background. This way the application always looks nice on all resolutions. We went for the resolution of 1366×768 as the standard supported resolution because this is the resolution most tablets will have.
  • Reusing assets: because both frameworks work with 2D assets we could reuse most assets in the game. This was a huge time saver because designing assets is a big part of the budget when you create a game.

Conclusion

We achieved the goal of being in the Windows Store before launch, so I would say mission accomplished.

  • CreateJS is a great framework for building small games. For heavy duty games, it’s still better to go for C++.
  • The app we now have can also run perfect in the browser with some minor changes.
  • It’s difficult to really know the limitations of the game you are building because at the time of development no real Devices are available. This is especially important for the low-end devices.

Presentation on Windows App Day

I also gave a little presentation about our Bumba app on the Windows App Day.

You can watch it here:

References

Some useful links and references for further reading: