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!
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 
)
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. 
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.
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.
Related posts:
Great Work! The div/CSS approach sounds similar to the AVES engine: http://ajaxian.com/archives/aves-game-engine. Also this demo: http://www.dhteumeuleu.com/yoshis-island/
Fairly misleading article, there’s virtually no HTML5 here at all, unless you want to count CSS3…and thats a stretch.
This has certainly not proven that you can make flash like stuff with Canvas. Just that mobile safari, with some css hacks, can be forced to use GPU acceleration on Div’s. Very cool stuff, but I have a hard time believing this can scale in any meaningful way.
End of the day, Canvas is still broken on iOS, and as soon as the game gets more complex, I think this div approach will fall apart pretty quickly.
@Felix, you’re absolutely right, in fact I should have mentioned that it was Paul Bakaus (the AVES guy) that first inspired me to try this method, but of course it goes way way back. (DHTML Lemmings, anyone?) Interesting to note the date on that demo you posted!
@Shawn haha yeah I guess I’m not doing much to clarify the whole HTML5 terminology but I think it’s fair enough to label it as such on an article that discusses a canvas vs non-canvas methodology. And there is still a canvas in there
As for scaleability, I’m not exactly sure what you mean but I’ve seen some pretty complex games made in this way. As well as the aforementioned AVES engine, Plug-in Media has made a Facebook game called Utopia Kingdom that’s pretty complex. Or did you mean in terms of the number of moving objects? Interested to hear your thoughts!
from the customers perspective – i’m not sure why would they want to use a product that produces such an inferior experience, i mean are they likely to be impressed by someone hacking css and js together and then trying to pretend it’s html5..? clearly not if the the games look as dated as they always do, and in most cases don’t even work.
and why would devs want to spend their time ironing out cross-browser issues, when the customers and businesses aren’t interested
looking back, i’m not really sure why anyone would want to spend years of their precious life trying to stretch a web technology that is clearly great for static text and images… but not a great deal else.
even in areas like video where it really should have had every chance, it’s obviously failed.
it pains me to say, this but as it looks more and more likely that html5 isn’t going to get anywhere.
Hi Shane,
I have to say I’m surprised at the grumpy tone of some of these comments. This is just a hurried tech demo, and as far as I’m concerned, quite a successful one.
Flash initially was designed for vector animation, and I spent years of my precious life stretching it to do fast action gaming, realtime 3D and motion detection. Flash has come a long way, and I’m pretty sure that HTML5 (yes and CSS and JS) will do so too.
It has issues of course, but it’s way too early to say it’s failed. But I watch with interest.
But please, everyone, don’t be grumpy – it’s just a little demo!
Seb
Thanks for sharing. I’m also experimenting in the HTML5 game dev field, but I’m trying to do something in 3D (or 2.5). Have a look at the concept I’m working on http://bit.ly/h9Kcba
and as if to prove my point -
your stuff may look great on your apple kit Matteo, but you see not everyone owns apple kit.
those people that don’t own apple kit aren’t really going to want to drop flash just because apple says so (for reasons see *appstore.)
it’s almost as if apple users suffer are quite unable to see this – very odd really.
and unfortunately i think that this issue is what lies behind this whole html5 fiasco
sorry but i don’t mean to be grumpy Seb =) i just don’t think it’s fair to persist in encouraging people to take up a technology that is clearly a big step backwards and based almost solely on the marketing hype of a large corporation.
Hi Shane, this method works on all webkit browsers, even on Android and Playbook, so this time it’s a little unfair to single out Apple. But yeah 3D CSS isn’t really production ready across the board.
I’m not necessarily encouraging anyone to take up anything. I just wanted to know if I could get a game to work in mobile Safari. Which we did
And it’s not just one corporation that is pushing HTML5, there’s real momentum in this space from a variety of different parties.
I’m not even sure if I want mobile games on a browser, either in Flash or in HTML, but perhaps I’ll save that discussion for a separate blog post. And I’m sure that conversation will create a little heat, so I’d better do it when I’m feeling strong
nice one Seb – its good to see you can get this to run well on iOS devices. It all reminds me a bit of the good old Flash days where you had to come up with workarounds and hack stuff together to make it perform well.
Its fun for developers to do but not sure I’d recommend it for real world projects if there is an option to go with Flash and you need IE support.
For iOS this seems to be coming together, think my skepticism about it in the past has mainly been around Canvas performance but your approach here seems to work much better.
HTML5 is term often abused but in this case with CSS3 and JS think you’ve been fair calling it that.
Keep up the good work!
Found this pretty informative – and im interested to see these kind of experiments pooled together!
Next time im faffing around, i’ll know who to come to!
Great demo man, It is clearly too early in the morning for some. Looking forward to your presentation at #FITC
It seems to me the grumpy commenters are perhaps missing the point. Sure, if we were all happily living in Richard Stallman’s beard, then of course we shouldn’t abuse web technologies, and everything should be open and standards compliant, etc. etc.
However, this is the real world, and pushing web technology in new directions is always worthwhile.
Whether the approach used in the above hack is a viable competitor to a native iOS app is a whole other debate, and not one that Seb appears to be raising here…
It’s actually sorta amazing you can do anything like this using HTML considering it’s history as pure markup. As a quick tech demo, this is definitely a win!
Could other tech do this better or faster? Sure, but I don’t think that is the point of this article or the demo itself.
Today’s experiments are the seeds to tomorrows mainstream tech. Give it a little sunshine and water and it’ll grow
You should definitely checkout the HTML5 Game Engine Impact.js (http://impactjs.com).
Bravo Seb, runs beautifully on iPad/iPhone here. Haters are gonna hate, so pay no attention to the naysayers.
I’m still bored of this talk of technology A vs. technology B though. It’s our role as developers/designers to understand the differences between the technologies, to learn from them, and to use them appropriately for our clients (or for ourselves if we sell our own products). The user/customer couldn’t care less which technology or tool was used to make the end product. My mum would probably think “oh that’s a nice game” not “oh they should have used Flash, I hate HTML5″.
Quit moaning, start making!
Brilliant! I am looking on your works and it gives me great kick to continue learn Javascript and build my own silly games. Can’t get why some people instead of having fun and see others work only can advertise their’s crap and compare Flash vs JS.. yack..
Keep up good work!
Paul Neave +1.
Good work Seb – thanks for posting.
I think some of the negativity towards “HTML5″ stems from how far we’ve come with flash in terms of game play and animation. From the perspective of an animator, designer, and coder, what I’ve seen so far has been pretty vanilla. The animation lacks those nuances that really make an object come to life and most of the games are very simple. It all really feels like giant step backwards.
Now all of this is really in it’s infancy. As long as people realize this, and accept it for what it is, fine. But, if it starts getting widely adopted and becomes the standard because of a buzz word, we’ll all be missing out.
I think the point people are missing with the example you created here Seb, is that without building pieces like this, “html5″ will never get to where it needs to be. Pieces like this are the foundation for other people to build on. It gets them thinking and motivated to move things along. Great work.
Thanks Jake! It’s probably worth mentioning here that the art team made all of the assets in Flash! I think the reason most HTML5 games are lacking is because these are coders who are only starting out with visual programming. There are exceptions of course, (Mr doob?) and this can only improve over time as skills improve. Very glad you like it so thanks again
Pingback: JavaScript Magazine Blog for JSMag » Blog Archive » News roundup: Modern JavaScript, V8Monkey and SpiderNode, Adapt.js
HTML5 has been the term adopted by the masses when referring to JS, CSS, HTML, basically anything non-plugin/flash. While it is technically wrong and doesn’t make sense to developers, it is fine as a shorthand (better than having to mention each individual one) and it’s clearly being used. I personally don’t understand what all the fuss is about, and why people try to fight it. Especially when it’s great for marketing. Your “HTML5 game” or app is going to get a lot more attention than your “javascript game” or app, even if it’s just terminology.
I agree. Canvas on iOS devices runs very slowly if the redraw rate is high and the size of canvas is large. Manipulating CSS properties can achieve a faster result, especially if some or all effects can be achieved using CSS3 3D transform (which turns on hardware acceleration). I recently did a project and similarly used a mixed approach. I had some small canvases and some elements animated in CSS. The result was acceptable! Of course, I had to make sure that only one or two elements are animated at a time and redraw areas are small. Otherwise, lags were too noticeable. Hopefully, one day Canvas could run with hardware acceleration turned on. I’m sure it will.
@Shane: I have to agree with some of your points, even though they sound grumpy
Yes, people probably don’t want to run games in a browser, as they could get better/faster/smoother games natively. Practically speaking, the experiment would probably remain as an experiment. But, it’s hard to rule out some of the techniques you could learn from experiments like this that could be taken to a commercial project. Sometimes in a meeting, when everyone thinks that it’s not possible to do something, it really helps when you could put your hands up and say ‘hey, I have done an experiment like this before – not exactly the same, but the concept is similar and I’m confident that I could pull it off!’ Anyway, you could probably argue that people could just do these really dynamic stuff in flash and explain to their client that only a handful of people come to their website on iPads. Yes, I sometimes do that as well. But honestly, it does make me look good and fashionable if I’m allowed to opt for the html5 route. I guess it’s a trend thing. Anyway, experiments like this, IMO, are really helpful. Especially, when they are shared on blogs so that other people can see as well!
This is a really cool and fun experiment.
I can see plenty of Flash vs HTML points raised here, but from my point of view the article acts as great insight into what canvas can do (or not do as the case my be) and the hacks around this.
I had to create a complex line graphing tool last year using HTML5 and came across similar issues, if I had seen this blog before this I spent hours trying to get smooth canvas animations, I would have used alternative methods (as mentioned here)
Thanks for sharing this Seb!