Seb Lee-Delisle

Menu

HTML5/JavaScript platform game optimised for iPad

HTML5 canvas! Hailed as a competitor to Flash, so much so that Apple is using it as an excuse not to allow the plug-in on iOS. But what everyone overlooks is that canvas is horribly slow and pretty much unusable on these devices. Is it even possible to create a Flash-like in-browser gaming experience on iPads and iPhones?

To answer that question I ran a JavaScript hack day for the finest programming minds at Plug-in Media where we had a single day to make a retro platform game : Infector!


Infector!

Play it for yourself here.

So of course, with only a day to complete, it’s fairly unfinished but it works as a proof of concept and the performance is good, even on the iPad 1 (with the pre iOS update slower JavaScript engine).

It also works on Safari, Firefox and Chrome. Naturally with such a limited time scale we weren’t too worried about writing perfect code or cross browser issues. It was more to see what’s possible. And in theory, we should be able to get this working on older IE browsers (famous last words, I know 🙂 )

Coders hard at work...

So what’s the answer to getting the performance on iOS? Forget HTML5 canvas, all the moving objects in this game are HTML div elements, we’re just moving them around by controlling CSS properties with JavaScript.

And of course, fantastic home made cookies. 😀

Yes please!

But there’s one more trick that’s fairly well known amongst the JS community. With CSS3 came 3D transformations – you can now move your HTML stuff around in 3 dimensions, in browsers that support it of course. As soon as you set any of the 3D properties of an element in a webkit browser, it’s rendered using the GPU, and this makes a massive difference on mobile Safari.

Our game framerate doubled just by setting the “-webkit-transform:translateZ(0px)” property of our HTML elements.

The animated objects are HTML divs with a sprite sheet (like the picture above) for the background. We change which frame we’re on by simply offsetting the background position (again, adjusting CSS properties).

The background is a canvas, but we only render the non-moving platforms once at the start. HTML5 canvas is only slow when you draw stuff into it, when you’re not updating it, it’s no more CPU intensive than an ordinary image.

Creating the bugs

It was a great day working with a fun and very talented team, and I believe we’ve proved that we could provide a pretty good experience on iPads in the browser.

If you want to learn more about creative programming with JavaScript and HTML5, you could do worse than attend one of my courses! I’ll also be writing a tutorial for an upcoming .net magazine all about using these 3D CSS transformations.

This entry was posted in HTML5 Canvas, iOS, javascript. Bookmark the permalink.

26 Responses to HTML5/JavaScript platform game optimised for iPad