HTML5 Canvas, 2nd Edition

Geo Blaster Tile Sheet

In Chapter 4, we examined applying bitmap graphics to the canvas, and we explored using tile sheet methods to render images. In Chapter 8, we drew all our game graphics as paths and transformed them on the fly. In this chapter, we apply the concepts from Chapter 4 to optimizing the rendering of the Geo Blaster Basic game. We do this by prerendering all our game graphics and transformations as bitmaps. We then use these bitmaps instead of paths and the immediate-mode transformations that were necessary in Chapter 8 to create Geo Blaster Extended.

Figure 9-2 shows one of the tile sheets we use for this game (ship_tiles.png).

These tiles are the 36 rotations for our player ship. We are canning the rotations in a tile sheet to avoid spending processor cycles transforming them on each frame tick as we draw them to the canvas.

Figure 9-2. The ship_tiles.png tile sheet

Figure 9-3 shows a second set of tiles for the ship with the thruster firing (ship_tiles2.png). We use this set to depict the ship when the user is pressing the up arrow key.

Figure 9-3. The ship_tiles2.png tile sheet

The next three sets of tiles are for the rocks the player will destroy. We have three sheets for these: largerocks.png (Figure 9-4), mediumrocks.png (Figure 9-5), and smallrocks.png (Figure 9-6 ...