Space InVectors in HTML5 and SVG

With IE9 becoming widely available and support for HTML5 and Scalable Vector Graphics (SVG) now available in the major browsers, it seemed like fun to exploit some of those new features. So I have implemented a version of Space Invaders using SVG and HTML5 called “Space InVectors” – an arcade game which frankly won’t excite anybody under the age of 40!

Space Invectors

SVG or Canvas?

You may be wondering why I would choose SVG and not HTML5 Canvas elements for a game like Space Invaders when a raster-based solution would be more obvious? On the other hand, why should you use Canvas? One reason for using SVG was that I was inspired by “SVG Oids” by Microsoft’s Andy Zeigler. For a broad comparison of both technologies and when to use each, I recommend this article by Patrick Dengler of Microsoft.

One consideration for choosing SVG over Canvas is device-independence. It would be nice to able to run the application on any device at any resolution without concern for scaling issues – even at “super high” resolutions. Of course you can scale canvases, but you still need an underlying default resolution onto which to place your pixels. With SVG every object is independently scalable so if an element has smooth edges at one resolution, it will at other resolutions.

Nevertheless I was aiming for look and feel authenticity with respect to the original arcade game, and so it would be sensible to use Canvas. But at some point I may wish to give the graphics a 21st century look, which I can do by changing a few paths in the SVG, safe in the knowledge that the paths will render smoothly.

For the “logo” graphics I used MS Word for the text effects, and converted to SVG. I also made use of Microsoft Expression Design and Gimp when working with the title and background images. But the actual gameplay is all done using SVG elements, including the lettering and scores.

Technical Challenges

The main challenge turned out to be in replicating the original gameplay (where necessary) rather than in any major technical obstacles. The code is just standard JavaScript and was designed to replicate the arcade game’s behaviour. The invaders even turn green on lower portion of the screen (which was achieved with plastic overlays in the original arcade version!). Aficionados of the original game can play spot the difference.

Graphic Design

The graphics were “transcribed” to SVG paths using InkScape. I was able to overlay elements onto actual screenshots of the original game to achieve “pixel perfect” renditions as SVG paths and elements. I was able to set the opacity to 50% so that the original screenshots were visible when drawing the elements. This process included “optimising” the paths themselves so that their origins were at zero, and the pixel’s and lines were exactly one “pixel” (or point) to minimise the resulting path data, and ensure the proportions were correct. The original screen size of the arcade game is 224×240 pixels and this was the drawing size that I used in InkScape.

HTML5 Audio Elements

The audio is achieved using HTML5 audio elements, and MP3 and Ogg files. There were some browser incompatibilities here. Annoyingly, for audio elements to work in Safari (on Windows 7), you need to install QuickTime – otherwise the JavaScript will just crash without warning. Firefox also stutters with the “loop” attribute, so the flying saucer sounds a little wonky – I believe it can be solved with JavaScript and so I may revisit this at some point.

HTML5 Local Storage

The high score is stored in HTML5 “local storage”, as is the user’s “background” preference. This all seems to work well. Although local storage is stored indefinitely, it is not shared between browsers -your high score in Chrome will be a different score to the one in IE9. I am toying with the idea of storing the images and sounds locally, for offline use, but this isn’t currently implemented.

Browser Comparison

The game has been tested on various browsers under Windows 7. Chrome seems to have some minor problems rendering fast-moving objects, causing objects to flicker (almost as though it’s dropping some rendering events) but the game is still playable.

Although barely noticeable, the graphics are rendered in IE9 with slightly soft edges, even though the “crisp edges” attribute is applied (which is not respected by IE9). I believe this is because IE9 is performing sub-pixel rendering – and how can you have a crisp edge at the sub-pixel level? I don’t think this is a flaw – I think IE9 is rendering correctly, and ideally the other browsers will catch-up.

In terms of performance, IE9 performs best (on Windows 7). Chrome and Firefox both perform well enough. Safari performs poorly (albeit on Windows). It cannot render the game at 60 frames per second as required. Hopefully it performs better on an Apple (untested).

Have a go

You can play Space InVectors here: http://alchemise.net/spaceinvectors (warning: it contains sound – hopefully). The keyboard controls are left/right and fire. The sound can be muted by pressing “M”. The background image is an “added extra” which can be hidden by any purists who find it distracting. And I recommend using IE9, at full screen.

I hope it serves to illustrate one way in which SVG and HTMl5 can be combined to produce highly interactive, graphical and scalable applications for the web.

Mike Panter.

Alchemise Limited

About Mike Panter

Mike Panter founded Alchemise Limited in July 2009 and is instrumental in building the company and shaping its culture. Mike has gained significant experience within the IT Industry, and with the latest technology, from a career that extends more than 18 years.
This entry was posted in Computers and Internet, HTML, HTML5, JavaScript, Source Code, SVG, Web Design and tagged , , , , , , , . Bookmark the permalink.

4 Responses to Space InVectors in HTML5 and SVG

  1. Peter says:

    How does it compare, in your eitsmate, to GIMP? I like GIMP, but my biggest problem is that (regardless of the operating system) it takes so darn long to load. And although the interface has gotten better over the years, it isn’t exactly intuitive.

  2. Mike Panter says:

    I think Inkscape, Gimp and Expression all serve different purposes. I prefer Inkscape for vector graphics, and GIMP for bitmap/photo manipulation. I think some of Gimp’s interface quirky-ness is because it tries to emulate Adobe Photoshop, and so is intuitive to those familiar with that. I find Expression appropriate for page design and layout, and relatively simple and intuitive.

    All just weapons in your armoury.

  3. Lesli says:

    It’s going to be finish of mine day, except before ending I am reading this impressive post to increase my knowledge.

  4. Leonardo says:

    Really liked what you had to say in your post, Space InVectors in HTML5 and SVG | Alchemise Technology Blog, thanks for the good read!
    — Leonardo