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!
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.
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
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.
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.