So I looked at some HTML 5 with JavaScript recently. I just wanted to see what the fuss was about. The first thing I did was to
animate Ryu.
Next I wanted to make something move a little bit, so I made this
bounce thingy. I looked at transparent Images. I didn’t see any special handling for them with the canvas. I got to play with Gimp a little bit to make it happen.
Then I kicked it up a notch with
Fight Face. I started to fall in love with my own creation so I kept tweaking it a little, then a little more, then a little more. My wife says it is boring, but whatever. Here’s what I’ve learned so far.
- Firefox and Chrome draw fonts way different with context.fillText(). Chrome’s is nearly unreadable. I’m probably doing it wrong.
- Drawing a bitmap on the canvas 1024x768 scaled down to 800x600 every frame can cause lag.
- Semi-transparency still looks cool. (context.globalAlpha) If using transparency be sure to context.clearRect() every time you want to re-draw.
- Image objects have an onload event that will be executed when the image file has been downloaded. I don’t think is anything special to HTML 5, but I hadn’t worked with images this way before so it’s worth a mention.
- Audio objects unlike Image objects do not have an onload event. In FireFox they get an oncanplaythrough event that doesn’t seem to be the case in Chrome.
- There is no common audio file type supported among the major browsers.
- Even though I have it set to execute the "game loop" at about 30 times per second with setInterval(), it seems much slower.
Here are some other things I learned that have little to do with HTML 5.
- Use the console in firebug to set variables to help with debugging.
- I can’t just drop files onto my godaddy web server (ftp) and expect them to be served up (http). The web server has to know about the MIME type. The only way I see to configure this is the web.config file. Initial attempts didn’t work. I’ve submitted an upgrade to IIS 7, it seems to have resolved the issue.