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!!

Go away, norman at Babaycastles!

The nice people at Babycastles called us to setup "Go away, norman" as part of their closing party on Friday along with the winning games from the Parsons game jam. It was a pleasant surprise and I was totally kicked to show the game at Babycastles! (If you don't know what Babycastles parties are about here is an article from someone who can explain it much better - http://www.diedagain.com/a-laymans-take-on-babycastles)

We got one of the cabinets to setup our game and we hooked up my laptop to the monitor and one of the gamepad controller they had to my Mac. Made some last minute fixes to the code so that the game is centered on the screen and we were ready to go. Everything was looking ok when someone found a bug - if the mouse went off the screen on the right the game was essentially on a never ending loop and it could be easily reproduced. I had to go behind the cabinet and fix it in 'vi' to add  the extra check in the javascript. There is a charm with working with these physical things and hacked up code. Makes you feel more like Steve Jobs and Wozniack hacking on their first computer.

The party was a blast! There were performances by Ava Luna followed by the legendary Wu Tang clan. It was such a great feeling to see people walk up to our game and play it. The best part was when people actually got excited as they were almost caught by norman. We have some ways to go before it becomes a proper game - but it was nice to see people enjoy for what it is currently.

Thank You Babycastles.

go away, norman

Back from the dead. After two exciting years find myself in a different job and New York. A new start. Hopefully will not ignore my game creation itch this time.

It got rebooted thanks to the amazing folks at Babycastles and Parson school of design, who organized a game jam about a week ago.

Teamed up with the amazing geejay who handled everything from art to sound to level design as I floundered to finish the game code in 48 hours. I knew writing code from scratch in a game jam was bad idea - but I didn't have time to prepare on anything else. So just Javascript and HTML5 canvas it was. Spent a stupid amount of time on the collision detection. If I did it again I would probably just figure out some engine with basic collision detection before the game jam.

The theme of the game jam was any tweet from @Horse_ebooks and we picked "Solution to Cat behavior problems" and "It will catch up with you". So here it is our game - "go away, norman"

You can play it here.

We are continuing to work on it - Expect a more official release soon...