http://ecom.armourhome.co.uk/brochures/armour_hotel/

You can view the final SVG version here:

http://www.paulbrunt.co.uk/svgflip/

Big thanks for the benderart peeps for letting me use blenderart magazine in this demo.

You can download all the code for this demo here:

http://www.paulbrunt.co.uk/svgflip/svgflip.zip

If you want to use and change the pages simply edit the config.xml file.

For anyone wanting to learn from the code, I must sincerely apologise, I wasn’t even sure where I was going to end up in this project so the code turned into a complete mess, so lets call it a “proof of concept”.The transforms work but even I can’t figure out what I was thinking when I wrote them. For that reason, I’m not worried about the copyright on this code, use it, abuse it, do whatever you want, I give you my permission; since I don’t think it’s maintainable enough to warrant an open source license. My only hope is that it inspires someone to do something better. If you really want to see how the effect is achieved there is an excellent tutorial at: http://oreilly.com/javascript/archive/flashhacks.html. It’s written from the perspective of flash but the same principles apply to SVG.

Comments and observations:

• I was originally going to be using SVG masks. Thankfully, I didn’t as the performance was far slower than clipping paths and in the end it wouldn’t have been usable, but I may not have noticed until too late.
• For some reason chrome was rendering the masks offset. I have a feelling it’s applying the transforms in a different order from firefox and opera, so the mask was being applied at a different point.
• Although the performance seems the best in chrome/webkit, I’m putting this down mainly to the fact that chrome seems to render clipping paths with no anti-aliasing by default. Although, there are “render” options within the SVG spec none of the browsers seemed to render any differently no matter what I set. It was also a little unclear as to where you would apply said render options when it came to clipping paths and masks.
• Firefox really needs to have a decent font implementation, webkit’s was also lacking but seems much further advanced. Opera was nearly perfect with their SVG font implementation. In the end I ended up converting the fonts to paths just to make it display consistently across the browsers.
• Chrome doesn’t seem to be too great with filters at the moment,and importantly it’s missing Gaussian blur. It would have been really useful and allowed much more eye candy had I been able to use it.
• From a performance point of view I would say SVG would benefit greatly from having a cache as bitmap option to indicate when the browser doesn’t need to re-render everything from scratch when animating through the DOM. As it was I ended up using proxy images during most of the animation just to get the speed to a decent level.
• It would have been far better if SVG and Canvas were more tightly integrated, there where many points during the development where using a bitmapped version of the SVG would have been far more preferable, unfortunately it seems that as yet you can’t just draw SVG onto the canvas like other image formats.

Conclusion, SVG is getting there very slowly. Hopefully, all the recent press around SVGWeb and the recent SVG Open will spur people on to use it more and we can get out of the chicken and egg situation we seem to be in at the moment.

As a learning exercise and an attempt to push the latest browsers I decided to create a platform game using the new HTML5 canvas element. Although I did encounter a few minor issues, things generally went quite smoothly and surprisingly quickly.  The whole game, graphics and all, only took about 100 hours.

>>Play Berts Breakdown Now<<

I’m sure the game could be faster I can see glaring optimizations that could be made but to be honest it seems to run more than okay on the machines I’ve tested it on, which was a little bit of a shock. Chrome was particularly impressive and was managing an extraordinary 120fps with Firefox 3.5 coming in a not too shabby second at 85fps, admittedly that is on a quad core (though the game only used one) machine with 4 gig of ram etc. But it seemed to be just about playable on a 900MHz eee.

Here is an open question to anyone out there in the game dev world.  How do you make tiles effectively?  I did the majority of the graphics using blender (with a little tweaking occasionally with the gimp) and extracting tiles from the rendered maps was proving to be very time consuming when doing it manually. So, I did what any programmer would do and wrote a script that attempted to identify unique tiles within the rendered images but it was proving very difficult to automate effectively. In the end I decided to go with the automated method even though it doubled (estimate) the number of tiles required to reproduce the maps. I will have to go back and work on that script at some point; no doubt such a thing will come in useful in future.

I’ve not tried the game with explorer canvas yet but I’m not holding out much hope that it’ll perform at any sort of usable level though I would really like to be surprised. Unfortunately, the game isn’t working on IE without modification (what a surprise). I know IE has improved a lot but it’s still lagging so far behind the other browsers in so many ways, I’m at a complete loss as to why anyone anywhere would run it voluntarily (rant over). Anyway, I’ll see if I can get it working in IE at some point but I’m not going out my way on this one, perhaps the next game.

>>Play Berts Breakdown Now<<

UPDATE: The wonderfull folks over at google have made life so much easier today; Berts breakdown will now work in ie6+ thanks to Google Chrome Frame. Get it from http://code.google.com/chrome/chromeframe/ or simply follow the prompt when you try and play the game.

PS, given this news I’m no longer going to bother adapting for excanvas.

[View with PicLens]

I know the blinking eye in the corner is a little creepy,I just wanted some sort of animation up there and a blinking eye was the least amout of work. I do plan on periodically changing the logo animation, I was thinking maybe a UFO (inspired by google recent forray into UFO banners) next time. I’ll try and post some of the scripts as small tutorials when I have a bit more of a chance to work on them, but I’m currently working on a canvas based mini game (fingers crossed that this time the game will be fast enough to work with explorercanvas). There is still some work to do I’ve not optimised anything yet so expect a faster site in the next few weeks.

This one is cross browser and will retrive and xmldoc from a given url:


function loadXMLDoc(url) {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.open("GET", url, false);
req.send("");
}
return req.responseXML
}


This will send a doucment to a url and return a textstring responce:


function sendXMLDoc(url,doc) {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.open("POST", url, false);
req.send(doc);
}
return req.responseText
}


Note: I can’t remember where these came from I don’t remember writing them.
So, if you think you did and you would like me to credit or remove please let me know.