July 9, 2011

Things I learned about html5 canvas


WebGL is awesome and all, but it's far less portable. For example, my AMD card has been blacklisted on linux. So I figured I'd revisit trying to make a real-time game with 2D canvas.
Check out the game so far.

Off-Screen Rendering

Off-screen rendering is both cheep and easy to use. Here I'm using it to render map tiles to a single image. Since the tiles are (mostly) static I don't need to be redrawing them individually each frame.

setInterval is not guaranteed to call at an exact interval

So I already knew this, but I forget how much accurate timing matters for real-time games. To the point, calculate time-past yourself with the getTime function:
var dt = new Date().getTime() - last_time;
Still use setInterval for scheduling logic and render functions, just don't expect the timeout values to be consistent with actual times.

Keep an eye on object allocation/deallocation

You don't normally have to think about allocating memory in javascript like you would in C. The problem comes when you're creating a real-time game and you notice it periodically skipping a beat, resulting in jerky rendering. This is caused by javascript's garbage collector, basically, blocking your program as it cleans up unused memory.
The way to avoid this problem is to limit the number objects you create and then discard. Or an easy solution; just use Chrome. It's significantly better about it.

It's better on Google Chrome

Simply put, Google Chrome is better for canvas based games. Dramatically better in some situations (or rather, Firefox is dramatically worse in some situations).

No comments:

Post a Comment