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.
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
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.
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
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.
- 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.
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:
Some useful links and references for further reading:
- HTML5 Gaming: How to animate sprites in Canvas with EaselJS
- Guidelines for scaling to screens (Windows Store apps)