Porting our HTML5 canvas game to mobile devices using AppMobi's DirectCanvas

So I had worked on "go away, norman" as part of the Babycastles game jam. I wrote it in HTML5 directly using the Canvas and Audio APIs without using any of the game engines. But now I wanted it to run it as an App on Mobile devices - mainly iOS and Android. There are already frameworks like PhoneGap which allow you to package HTML5 games as an App on mobile devices. These frameworks just wrap the WebView inside an App and provide extra APIs to access native device features(like accelerometer etc.). So it should be easy to port my game to the mobile device, right?

Wrong - the problem is that the game uses HTML5 Canvas and the default implementation of Canvas in the iOS and Android browsers(and hence the WebView) is pretty bad. Even though the speed of Javascript has been improved in these mobile platforms the performance of Canvas has not improved by much.

So how does one get their HTML5 Canvas game involving lot of drawing and fast action onto mobile devices?

Enter DirectCanvas from AppMobi.

DirectCanvas from AppMobi provides an HTML5 runtime environment with an OpenGL accelerated Canvas implementation(plus a better Audio implementation based on OpenAL and a native Box2D implementation for Physics simulation).

The iOS implementation of DirectCanvas was recently open sourced by AppMobi(A big thanks to them!). So I downloaded the DirectCanvas source from github and after a week of hacking was able to get my game working on the iPad (Most of the time was spent on getting it to work in landscape mode and understanding the sandboxed Javascript context for DirectCanvas - More on this in the next post). DirectCanvas provides almost a drop in replacement for the HTML5 Canvas and Audio API. Also my game had regular HTML elements for the very basic UI I had implemented and Canvas for the game area. DirectCanvas allowed me to use the accelerated Canvas as well as a WebView for the regular HTML elements (with some caveats - Again in the next post)

I ran the ported App on a first generation iPad running iOS 4.3. The performance boost was huge compared to the mobile browser!! The game was very  responsive and played just like a game written as a native App. I don't have FPS numbers but the video at the end of this post should make the performance boost very clear.

I am really excited about the future of DirectCanvas for indie game development not only because it works but because it is open source! (The Android implementation should also be going Open Source soon according to AppMobi) Any framework out there which allows you to develop cross platform and especially on mobile devices costs some non-trivial amount of fixed or recurring amount of money. I can probably afford it but it definitely cuts off some other people from developing cross-platform (Students, people in countries with unfavorable exchange rates etc.).

More than the cost, open source means faster improvements to the framework. I can't wait to see what people will do with this. Here is my list

• Port all sorts of free HTML5 game engines to run on it and now you can automatically run them on the iOS (and soon on the Android)
• Get Processing.js running again on iOS using DirectCanvas and allow sketches to be published to the App Store without running into restrictions by Apple.
• Add WebGL support to DirectCanvas and get three.js running on it - How about some HTML5 3D action on mobile devices ?!!

If anyone is interested in collaborating on the above projects drop me a line here or on twitter(@vikerman).

(And if you do have some money to spend and not so much time do checkout AppMobi's XDK - It provides an easy way to develop your games using the ImpactJS game engine and build and publish it on different platforms without the hassles of going through the SDK for each platform)

And now here is a badly recorded video that shows the performance boost I got on my iPad by using DirectCanvas. The video shows how the game was unplayable on mobile Safari (which is what I would have got with something like PhoneGap) but plays smoothly as an App powered by DirectCanvas.

(I should have captured more time towards the end when the game was getting a bit faster to show that the performance and responsiveness does not drop - but I was having a difficult time playing the game and shooting it through the phone camera). I will try to upload a better one in the future - I just couldn't wait to share this with everyone!!