HTML and CSS Reference
In-Depth Information
Listing 5-5.
Drawing the sprites in the scene
function drawSprites()
{
//note that zIndex = i here, so this rendering is correct according to depth
for(var i =0; i < spriteInstances.length;i++)
{
var sp = spriteInstances[i];
var ps = sp.spriteHandle;
ctx.drawImage(ps.imgHandle,sp.pos.x, sp.pos.y);
}
}
See Figure
5-1
for an example of this code in action. Note that this is NOT the way you should be doing rendering
in your production code. Real games have various types of restrictions and orderings for depth from their sprites. It's a
complex dance between artist-generated content and runtime performance achieved by sorting of sprites. This simple
example avoids all this, since a discussion of that size is beyond the scope of this chapter.
Figure 5-1.
The results of rendering sprites onto the canvas
