20
September
Tags:
Berts Breakdown
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. | ||
|
Jerome Says: Very cool! Any idea why it runs so sluggishly in Firefox 3.5? Bert looks remarkably similar to Berk from the classic claymation series ‘The Trapdoor’. http://www.youtube.com/watch?v=iDs8VMz-cuc | ||
|
Daniel Says: yep, agree to maarten, respect! | ||
|
Paul Brunt Says: @Jerome It seems Firefox 3.5 is better at the vector graphics and maths stuff when it comes to canvas. Webkit seems much faster at manipulating images which is what the game depends on. I’ve not done any tests to be certain though it’s just an observation. | ||
|
James Says: Neat! Quite playable in Safari on my 2.4ghz mac. Slightly quirky physics, but still cool. Sadly doesn’t load on an iPhone, but then again even if it did i think the Canvas would be far too slow for fluid gameplay. | ||
|
Jerome Says: @Paul Thanks for the reply. I wondered if it was a Javascript vs. Canvas implementation thang, with the bottleneck in Canvas. Anyway, keep up the great work | ||
|
alex Says: Very nice indeed! | ||
|
Jean Says: Sluggish on FF 3.5 ? | ||
|
Jerome Says: @Jean Ah, mais oui, I think you have the answer. I should have thought of that. Thanks! | ||
|
GeoNomad Says: Truly an awesome job. Very enjoyable and smooth on Chrome. It’s going to be a fun world when all the browsers execute that quickly. Couldn’t get it to load on mobile Safari on the iphone, but that would be an interesting conversion… | ||
|
GMC Says: I’m very impressed. May I ask a question about the code? Looking through the .js files, you frequently call a method called “addTick”, which appears to behave somewhat like the standard Javascript “setTimeout”, but I can’t find its definition in any of the files. I’m curious to see how it works, since you seem to be getting many more frames per second than possible with “setTimeout”. | ||
|
admin Says: all the addTick does it append a function to be called on each tick, the game calls each of the added functions when it’s called using setTimeout in the main game loop. You should be able to get ~60fps max using setTimeout(at least in my experience). If you are experiencing slow frame rates when working with canvas I would recommend that you don’t draw anything at fractions of pixels, it nearly tripled the frame rate of the game! | ||
|
窄多之Blog » Blog Archive » FLash与HTML5 Says: [...] nifty game [...] | ||
|
SAM Says: Buy:Actos.Valtrex.Synthroid.Nexium.Human Growth Hormone.Prednisolone.Mega Hoodia.100% Pure Okinawan Coral Calcium.Zovirax.Zyban.Retin-A.Accutane.Prevacid.Petcam (Metacam) Oral Suspension.Lumigan.Arimidex…. | ||
Maarten Says:
Very impressed!
Monday, September 28, 2009