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.
26 replies on “HTML5/JavaScript platform game optimised for iPad”
Great Work! The div/CSS approach sounds similar to the AVES engine: //ajaxian.com/archives/aves-game-engine. Also this demo: //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 //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 (//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 🙂
[…] HTML5/JavaScript platform game optimised for iPad […]
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!
Good one “creative developers”. I just discovered you. I’m using the same approach for edugame i’m developing for a customer. So i’m not the only one that thinks: damn, the DOM is powerful, event programming is awesome, CSS3 effect also… why, and why we have to use canvas? Canvas sucks, it’s a sort of low level programming without the advantages of low level programming: canvas is low level programming with poor performances!! Think just at this: how do you detect a click on a moving object on a canvas? Pixel level collision detection (between touch point and shape)??? Instead with this DIV technique we can use the awesome and performing DOM Event Model…. .on(“click”) rocks!
PS. and this is HTML5! HTML5 is just a more creative conception of the old standards…
We’re now in 2013, and still there is not one decent HTML game on the web to be found. A few half-baked demos that look worse than old Commodore 64 games, but nothing else. Hmmmm… and people were so excited about HTML5 and all the wonderful Flash-like things it was promising.
Where is it? Not even the new strategy-shifting Adobe HTML tools come close to the capabilities needed for good games. And programmers are staying well away from JS games because they’re too busy making native apps or normal websites.
At best, you can create a nice slideshow in HTML, with sliding panels and things that hide and show and slide around. That’s still great for HTML.. that’s what HTML and JS and CSS is good for – fancy documents, and little gadgets and page structure and simple functions.
We know now why Steve was so excited about HTML5. He was excited about his native app store which everyone would flock to because there would be NOTHING on the web even close to the game performance of native apps. Except for Flash, which Steve (and therefore his followers) wanted dead.
@Fred I have created an HTML5 game, and it doesn’t look like a half baked C64 demo. It looks like a classic arcade game, and I’m pretty proud of it. Games.com also has several cool HTML5 games that aren’t slow, and they even work well on an iPhone. The Canvas is getting better every day, and now even the mobile Apple devices are starting to do a better job of rendering the canvas, as well as their JS speeds.
While I too was not crazy about the hackaround done in this demo (it begs the question why they even bothered using Canvas when they could have used a normal div as a background), I do see the merit in what was supposed to be accomplished. The authors would be happy to see speed improvements in both desktop and mobile environments since this article was written almost 2 years ago.
To top it off, Flash was useful, but never anything super special. It was pretty fast, but NEVER capable of native machine language speed – it was always byte code interpreted by the Flash player, similar to how Java would be interpreted. New things are being created for JS every day… Mozilla and Google are even working together to bring us a gamepad/joystick API which is partially built.
I used to agree with you on the Flash stuff, but now, as software engineers/front end engineers/programmers, we have a lot to look forward to in HTML5 & JavaScript. As long as we know how to get the most out of the language (as really good programmers could), then we have more to look forward to than not.
A link to my game:
//www.brooklyncodebits.com/webapp/huoli-arcade/ – Double click to make the game run fullscreen.