Professional HTML5 Mobile Game Development

Using CocoonJS to Accelerate Your App

CocoonJS is a native wrapper created by Ludei that enables you to create native iOS and Android apps from your HTML5 games. Its claimed value proposition is particularly attractive: Without making any changes to your game, you can package it into a native app and get performance increases of several orders of magnitude.

The fine print is that Cocoon supports a limited subset of HTML and primarily works by exposing an API in JavaScript that mimics the Canvas API. The full list of features that CocoonJS supports is available on the Wiki at http://wiki.ludei.com/cocoonjs:featurelist.

As of this writing, the DOM support is limited to elements that are useful for games: Canvas, image, and sound elements.

Getting a Game Ready to Load into CocoonJS

Despite Ludei’s claim, depending on how your HTML5 game is written, you may need to make some modifications for the game to load in CocoonJS. The primary consideration is how you put a Canvas onto the page. CocoonJS parses your index.html file, but only to load the JavaScript files mentioned therein. This means that you need to make sure you generate your <canvas> element via JavaScript and not via a <canvas> tag in your HTML.

The CocoonJS <canvas> tag also supports a special option you can apply to make the <canvas> element scale up to fill the size of the screen while still maintaining its aspect ratio.

To modify the Alien Invasion game from Chapter 3, “Finishing Up and Going Mobile,” to work with CocoonJS, ...