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