Professional HTML5 Mobile Game Development

Building Apps with the AppMobi XDK and DirectCanvas

AppMobi is an alternative to CocoonJS for packaging up HTML5 apps as native apps on iOS and Android. AppMobi built its technology on top of the open-source PhoneGap project, which uses a native web-browser component augmented with native device APIs, such as audio and video recording and access to contacts stored on the device.

As mentioned in the last chapter, work done during Impact.js development to create iOSImpact was used to develop the initial version of AppMobi’s DirectCanvas, which replaces the standard <canvas> object with a custom, OpenGL ES accelerated implementation.

Understanding DirectCanvas

DirectCanvas works a little differently from CocoonJS in that it requires that you split your game into two parts. The first part is an initial HTML file that connects to the primary PhoneGap web view, which has a normal DOM and can accept user input. The second component is JavaScript only and consists of the main portion of your game that draws to the hardware-accelerated Canvas. This second component cannot bind any listeners to get touch input however, so you need to pass that information manually from the first piece to the second using a bridge that DirectCanvas provides.

Installing the XDK

The AppMobi XDK is a powerful Java application and Chrome browser extension that enables you to build and test your application in an emulator and then send it to be built in the cloud, all without requiring you to install local copies ...