Betting on HTML5 for game development – Part 2

html5

One of the most attractive aspect of HTML5 for developing games is high portability. A question remains however as to whether the low portability costs are balanced with having to pay a high price in performance.

The right answer is: it all depends on the runtime. And this is where the disparities lie.

Although HTML5 apps running natively are often called “hybrid”, there is no structural difference between them and a web app. In both cases, the code runs client-side and the most relevant point is rather the runtime choice we are given in the second case; choice that means our HTML5 apps can run at native speed without compromising!

runtime

When delivering HTML5 content via the internet we have no control over the web runtime (Safari, Chrome, IE10, Firefox). In this scenario, there is not much that we can do besides providing graceful degradations – and this is probably fair enough. We may want to degrade the quality of our assets, disable some features, or ask the user to upgrade, use a modern browser. We have to compromise and as long as we do it in the most practical way, it is usually fine for the web.

When running natively however we have full control over the runtime. The webview for Android is well known for its current lack of support for canvas acceleration and it may struggle to render full screen graphics at 60fps but the good news is that there are several ready-made solutions available.

During the early tests of Zombies Can’t Jump on a PhoneGap build the results were not convincing with 20-25 fps on a Nexus 7, the game was completely unresponsive on an entry level phone such as the Samsung Galaxy Ace (512MB RAM). On the iPhone4, the game was playable but still not on par with native games featuring similar graphics quality.

After replacing the webview with a more efficient runtime – in this case the DirectCanvas from Intel XDK on iOS and CocoonJS from Ludei on Android), the game could run fine on Nexus7, Samsung Galaxy Ace, iPhone4 or even iPod Touch 4th Generation.

This short video illustrates not only the portability benefits of HTML5 for game development, it also proves that with an appropriate runtime there is no performance price to pay for such benefits.

Below is a bit more information on some of the frameworks I tried:

CocoonJS – Ludei

CocoonJS is currently free but for a limited time period. Contacting them about their future pricing model they replied “there are going to be models for any kind of companies”.

The framework is probably the best offering of the moment for accelerated canvas graphics with HTML5 across devices. The CocoonJS canvas is bound to OpenGL ES for native speed rendering. It features drop-in canvas replacement with virtually no code change (that is if your application does not use the DOM), very good debugging and testing tools with the CocoonJS Launcher and cloud compilation as well as store services for app monetization. They use Mopub as ads network mediator which offers flexible network options including Admob and Chartboost.

I have found some issues with the ads placement on some devices and few crashes related to OpenGL were reported from Google Play. Note also that a “Powered by Ludei” splash screen will be inserted at application start-up. I believe that premium accounts will be able to get rid of it once the pricing is in place.

Intel XDK

That would be my second choice and I currently use it for the iOS release of Zombies Can’t Jump. They offer a really comprehensive cloud service. If it was not for an incomplete API on Android it would be a close contender to CocoonJS.

The DirectCanvas does not come as a drop-in replacement of the HTML5 canvas which is a shame but on the good side they have better support for the DOM. The IDE emulator is mostly useless if your application uses DirectCanvas (emulation uses the browser canvas implementation so you won’t spot DirectCanvas issues before you run on the actual device), it is probably good however for DOM based apps.

Highly recommended if you only target iOS but the lack of support for core canvas functions on Android (no context transformations) makes it a poor choice on the latter OS.

Ejecta

I have only started with it and intend to use it for my next game on iOS as I need full access to the native layer. Open source, solid, well supported and powering the Impact game engine – apparently a good choice for targeting iOS. I had a quick look at EjectaX as well (the Android port of Ejecta) but it does not seem well supported at the moment.

PhoneGap Fast Canvas Plugin

An official PhoneGap plugin, I tried it earlier on with Zombies Can’t Jump; if your game only uses canvas to draw images this is not a bad solution for Android. Note however that the Fast Canvas API has no support for primitive drawing!

Similarly to CocoonJS or DirectCanvas it renders on an OpenGL ES surface.

Thanks and feel free to get in touch.