BlackBerry 10 and Ludus HTML5 Platformer Engine

Game Development

A few days ago, Christer Kaitila (better known as @McFunkypants to some) dropped news regarding the HTML5 based platformer engine called Ludus. Initially, I was a little disheartened as it appeared the engine was targeted solely towards the Windows 8 platform, a peculiar thing for an engine that leverages cross platform technology. I was delighted to find this was not actually the case and that Ludus is in fact crafted in the true open spirit of the web.

Armed with this knowledge, I wanted to get a sense of how the engine performed on BlackBerry 10, and proceeded to build both of the sample applications, Rubba Rabbit and Gwendolynn, with our BlackBerry 10 WebWorks SDK.

TITLE_IMAGE



Rubba Rabbit running on a BlackBerry Z10. Not Pictured: The funkiest of sound tracks.

As the engine revolves around HTML5 technologies, the sample projects were already 90% of the way to being BlackBerry 10 applications. One missing component was the config.xml file which is leveraged during packaging to specify various components (application name, author, icon images, etc.) To simplify the process, I leveraged the BlackBerry WebWorks config.xml generator by Nuno Donato (@nunodonato). I was even able to set an appropriate icon and splash screen thanks to the image resources included with each project.

In fact, that’s another thing that’s pretty awesome about Ludus. If you visit the Woot Studio landing page, you’ll get a lot of good information, a behind the scenes look at the two samples, and something many game developers treasure: Free Game Art. Currently there are three themes (Outer Space, Steam Punk, and Zombie) ranging across a number of categories (characters, weapons, effects, etc.)

ludus2

Gwendolynn running on a BlackBerry Z10; satisfying my passion for looting and jumping.

With my config.xml files in hand and making no changes to the actual sample project files, the next step was to leverage the Ripple tools in packaging the HTML5 resources into a BlackBerry 10 application. Once packaged, I had a signed BlackBerry 10 application (BAR file) that I then deployed to both a BlackBerry Z10 and BlackBerry Q10.

Overall the process took maybe ten minutes download-to-deployment. For developers that don’t have a BlackBerry 10 WebWorks environment set up, there are a few things you will need for an initial setup:

1)      Download and install the BlackBerry 10 WebWorks SDK.

2)      Request and install BlackBerry 10 Code Signing keys.

3)      Leverage the command line or Ripple to package your HTML5 project.

Following this, creating BlackBerry 10 applications from your existing (or new) HTML5 projects down the line will take no time at all.

Some Things That Made Me Smile

One of the things that I was really happy to see was that I was able to deploy the same packaged application (BAR file) to both the BlackBerry Z10 and BlackBerry Q10 without modification. The game resources scaled well and both applications were playable on both devices.

In fact, on the BlackBerry Q10, I was very pleased to see that the WASD and space bar controls worked right out of the box! This left me with both touch screen and keyboard control options on the BlackBerry Q10 where screen real estate is more limited than the full touch BlackBerry Z10.

Aside from a few hiccups, performance was great, averaging approximately 55 frames per second. The fact that I didn’t need to change any code for my initial deployment was just icing on the cake.

Some Things to Look Out For

On a whole I’m very pleased with my initial look at the Ludus engine, but there were a few things that came up that developers may want to keep in mind. The first thing I noticed was that pinch to zoom was permitted, meaning if I was interacting with the touch screen, two controls at a time, occasionally the screen would rescale instead of processing my touch events. Luckily, we’re able to set the <meta> viewport element to disable user-scaling and there is a Knowledge Base article on how to accomplish this for BlackBerry 10.

Related to the above, there were a few instances where the screen resized which forced the application into a paused state. This appeared related to how the screen coordinates were being interpreted following the scaling and the pause button located in the center of the screen was inadvertently being “interacted with”. With the above viewport modification though, this issue went away.

Finally, I did notice a slight stutter on occasion if I was collecting multiple items at once. As best as I could tell, this was related to 3-4 sounds playing simultaneously on top of the background music. Once the Web Audio API lands in BlackBerry 10, we’ll be able to do a whole lot more.

That being said, the good far outweighs the above, and we have gameplay videos to prove it. Here we have a BlackBerry Z10 and BlackBerry Q10 playing both Rubba Rabbit and Gwendolynn.

All in all Ludus is looking to be a very promising platformer engine and I’m excited to see what the HTML5 community does with it. The next steps are to dive into a project of my own to get a sense for the actual development process; I’m looking forward to it already. If you’re doing any development yourself, or have any questions about the BlackBerry 10 aspect, I want to your feedback and insight! Don’t hesitate to reach out via Twitter (@WaterlooErik) or email (eoros@blackberry.com).

Lastly, a big thank you to Woot Studio, McFunkypants and PlexiPixel for their contribution to the HTML5 community with this project.

About Erik O.

HTML5 Application Development Consultant at BlackBerry.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus