How far can you take HTML5 and canvas?

Recently I won the IE9 Dev Unplugged award for ‘Most Innovative Use of Canvas & SVG’ for my game Arena5. Dev Unplugged was a Microsoft sponsored competition aimed at developers working in HTML5 to show what a modern web browser can do without the use of plug-ins.

I’ve been into web technology for a long time, writing web apps, 3D graphics and animations, stuff like that, and I’m also an avid gamer. So with the advent of HTML5 and canvas I wanted to explore the basics and find out if it was fast and powerful enough to create a game.

Asteroids

Arena5 wasn’t the first game I created. To test canvas and see how far I could push it before it slowed down gameplay too much, I decided to do a remake of Asteroids. Building it taught me canvas and improved my JavaScript skills – plus a version of it got runner up in the 10k Apart competition, so this spurred me on to enter Dev Unplugged. I’m a huge fan of Xbox 360 so if you play Arena5 you’ll probably notice I took my inspiration from ‘Geometry Wars: Retro Evolved’!

I don’t pretend to be a big innovator, I prefer to create variations of or expand on existing ideas using current technology. Some of the effects in original games are hard to recreate in a browser – canvas is pretty fast but none of the browsers can cope with too many flashy effects, there comes a point where it slows gameplay down too much. Arena5 hits the browser pretty hard with lots of glow effects and particle explosions and lots of effects are pre-rendered like the particle effects used for explosions. The smudges and small dots are pre-rendered images, so the more expensive elements are re-used to improve performance. Essentially, Arena5 was about seeing how far I could take stuff before canvas would crawl and I think it’s a good test of what canvas can do. All the code’s available to view and you can download it and try it yourself if you fancy playing around.

Arena5

So what’s HTML5 like to work with? I like the HTML5 and browser environment – it’s very accessible, you don’t have to invest in expensive software. The downside is that you don’t get an IDE like with Java or Eclipse, or .NET with Visual Studio, so if you’re used to code completion and having your documents all in line, just using a text editor for multiple JavaScript files can be fiddly. Without a compiler you only find you’ve broken something when you run the game. However, the test debug cycle is incredibly quick, you just refresh the browser, and most modern browsers have in built de-buggers. The real up-side is it makes you really strict so you don’t tend to write hacky, sloppy code, you write clean code to reduce the likelihood of something going wrong.

HTML5 is a standard, so it’s a moving target, but it’s hugely important to make things less fragmented and make sure everyone’s on the same page. All five browsers support canvas in at least 2D and that in itself is a very important stepping stone forward. In creating Arena5 I haven’t had to change anything to make it work across all browsers – I just had to build it once. Anyone can look at the code, there are no external libraries or hacks in there for any of the browsers, and that makes it feel as though the standard is really getting somewhere. I’m quite biased as far as I like to create flashy demos and effects for games, I think it’s great for that, but I’ve not explored the other things you can do with HTML5 like the Forms enhancements so couldn’t comment on other capabilities.

I don’t really consider my HTML5 games as complete, I hope to refine what I’ve done already. I’m not finished with Arena5, I want to make it better and add new features – perhaps adding some aspects of Geometry Wars: Retro Evolved²! I’d also like to explore effects, background rendering and real time stuff. As the performance of canvas improves then I’ll continue to play around with it and refine the game. There could be an ‘Asteroids 2’ game on the horizon as well, so watch this space! I’ve definitely caught the HTML5 bug.

Kevin Roast

Kevin Roast has been a professional software developer for 12 years and been developing J2EE and Enterprise applications for 10 years. His development experience ranges from customer facing kiosk applications to enterprise-scale application platforms and user interfaces based on innovative technology. Kevin is one of 8 founding developers of and UI Technical lead at Alfresco Software. Interests include HTML5, JavaScript, graphics, Java, iOS and Android tinkering as well as gadgets, tech and retro gaming.

See what HTML5 and canvas can do with the IE10 Platform Preview

Published by Ubelly

Ubelly is an author for ubelly. We don't have a bio filled out for Ubelly yet, but we'll have that up for you soon - don't worry!

5 Comments So Far, what do you think?

  1. SylvainPV

    “The downside is that you don’t get an IDE like with Java or Eclipse, or .NET with Visual Studio, so if you’re used to code completion and having your documents all in line, just using a text editor for multiple JavaScript files can be fiddly.”

    I am using Eclipse for Javascript developers for all my HTML5/JS projects, and autocompletion and autoindentation works fine. You should take a look : http://goo.gl/pSTVX

  2. Ender

    Aptana (Eclipse plugin or standalone version) is a dedicated IDE for Javascript programmers, I’m using it on my MacBook and it’s very good.

  3. thebeebs

    Visual Studio also does JS, HTMl5 and CSS3 code completion and JS debugging since the web standards update http://bit.ly/mja4ZY also WebStorm by Jetbrains is a good IDE that runs across Windows, MacOS and Linux http://www.jetbrains.com/webstorm/

  4. Martin Lewis

    Superb – a good ‘Stumble’. Thanks for sharing.

  5. minecraft demo

    Greetings! I know this is kinda off topic but I was wondering if you knew where I could get a captcha
    plugin for my comment form? I’m using the same blog platform as yours and I’m
    having problems finding one? Thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>