All Your BoxQuest Are Belong To Us

Game Development

Recently a new sample was released to the BB10-WebWorks-Community-Samples repository on BlackBerry®’s Github space. The sample itself is an early take on a 2D platformer as you can see below.



It’s important to note that the term early take really does mean early; we’re still missing sound, level completion, and a number of other game components. However, there are a number of key 2D concepts implemented and I want so share a little bit more about those.


At the heart of the graphical rendering is Cocos2d-HTML5, a web port of the proven Cocos2d-x framework. This framework is a 2D game engine at heart, thus provides HTML5 developers with functionality beyond your standard Canvas2D frameworks; things like sprite animation, TMX (tile map) support, keyboard/mouse/touch input, and more.

In our case we are primarily leveraging the framework for its sprite and TMX rendering components, however there is a lot of room for improvement and expansion on this front.

For more information, please refer to the Cocos2d-HTML5 with BlackBerry 10 section of the BoxQuest


Box2DWeb is an HTML5 port for developers looking to get the Box2D physics capabilities available to C++ developers. The sample provides an implementation of Box2DWeb that allows the user control our Hero in the world while reacting to objects in the environment. Whether that means teetering on the edge of a platform, jumping, colliding, or even (down the line) interacting with environment surfaces like ice, water, or lava.

The physics implementation was done with the help of Web Workers to ensure accurate and consistent calculations. For more information, please refer to the Box2DWeb and Web Workers sections of the BoxQuest


Tiled is a graphical tool that simplifies the creation of tile maps. Specifically, Tiled permits us to export those tile maps in TMX format; a format supported by Cocos2d-HTML5. With Tiled, we can draw our map, place objects like loot, portals, and walls, and export that data in a convenient file (or image) for use in our application.

By having a standardized format like TMX, we can actually create any number of maps with Tiled and have the application process it programmatically, creating physics fixtures at runtime, to allow for customized worlds to be created through a visual interface.

For more information on leveraging Tiled to create TMX files, and importing those TMX files into a Cocos2d-HTML5 application, please refer to the TMX Importing and Custom Level Creation sections of the BoxQuest


Finally, we must have a way to control the movement of our Hero within the world. Freewill.js is a framework that has seen a few iterations (and ultimately, improvements) since my initial PeaksAndValleys contribution to Github.

Freewill.js is aimed at providing a simple way to add Joystick and Button controls to HTML5 applications through standard touch events. The implementation itself is framework agnostic, meaning it can be used in any HTML5 application with little to no modifications necessary.

For more information on leveraging Freewill.js, please refer to the Virtual Controls section of the BoxQuest


While BoxQuest is still very much a work in progress, I wanted to share to both Cocos2d-HTML5 and BlackBerry developers a sample implementation of a common idea, as well as my findings on specific BlackBerry nuances. For instance, renaming TMX files to XML to support loading in Ripple.

The sample is presented to developers in the same way that PeaksAndValleys is; it is intended to be a learning resource, a starting point, and a compilation of components that can individually be used.

As always, if you have any questions or feedback feel free to leave a comment here or reach out to me directly on Twitter via @WaterlooErik. If you’re working on a project that’s leveraging pieces from this sample, I would ecstatic to hear about it and provide what support I can to help with your development. Happy coding!

Join the conversation

Show comments Hide comments
+ -