I tried to do a demo of some of the SVG stuff I’ve been playing with recently at BrisJS, but due to a comedy of errors I was unable to do much more than talk about it. So I figured I’d write up some of my findings here.
SVG in Canvas
Basically what I’ve been doing recently is experimenting with SVG sprites for use in HTML5 Canvas games.
Here’s a SVG image so you can check it out. You can inspect it in the DOM inspector which will show you the elements and attributes we can manipulate with JS.
I drew it in Inkscape, but because it’s all XML-based we can adjust the colours and styles of the image dynamically in the browser.
A Quick Demo
I’ve put together a quick demo of the technique which shows a basic colourising of colour mapped images such as the one above.
Changing the colour of SVG images is a pretty simple feature which people use all the time in regular SVG operations. Generally this might be used to create a rollover effect or adjust the colour of a bar in a doughnut graph, but with this demo you can choose two colours and use them to colourise the entire SVG image.
How it works
I’ve used the colorbox library to perform colour modification operations on the input colours to generate highlights and shades, which correspond with the various key colours in the source image.
I’ve then performed a basic string search and replace on the targeted colours to make the changes to the image so it uses the colours you’ve chosen rather than the original colourmap. This something that could very nicely be done with jQuery selectors for instance, but isn’t something I’ve had time to do yet.
The demo also has a game time feature, which performs further colour modifications based on the in-game “hour” of the day. So for instance at midnight the colours you originally chose would be heavily desaturated and tinted with a blue colour to simulate night time. In the evening, sunset adjusts the colours to add oranges and reds before fading into night.
The final feature of the demo is a little logic which flicks lights on and off once it gets dark, and alternates neon signs on and off at intervals.
SVG tends to be a little slow in select browsers, and especially so with complex images which you can probably see in the demo. While this might be okay when you’re just displaying a static image, it becomes totally unacceptable in high-performance situations where you need to draw it sixty times per second.
We can get around this issue by pre-drawing the SVG images to another Canvas object (not pictured). This off-screen Canvas holds a bitmap representation of the image and consequently renders to our game canvas much faster because the heavy lifting has already been done.
We can take this a step further and render all the variations of a particular image if we have enough memory, resulting in a long initial load but a fast game once it’s done.
As a side note, using this method triggers additional security precautions in the browser which may prevent you from performing some game-related tasks.
Where from here?
Ultimately I’d like to implement this in my game engine and procedurally generate complex game worlds, but for now this is just a concept.
I’ve also been playing with transforming textures and applying them to objects within the SVG environment as a sort of 2D texture mapping, but I’m not especially happy with the results so I think I’m going to stick with vector graphics for now.
Anyway, if you like the idea you should totally have a play and see what you can come up with. You can also check out my code on GitHub if you’d like to see exactly what I’ve done.