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?
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 🙂 )
And of course, fantastic home made cookies. 😀
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.
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.