Canvas Games: Part II - HTML5 Canvas - page 754

Geo Blaster Tile Sheet
In Chapter 4 , we examined applying bitmap graphics to the canvas, and we explored using
tile sheet methods torender images. In Chapter 8 ,we drew all ourgame graphics as paths and
transformed them on the fly. In this chapter, we apply the concepts from Chapter 4 to optim-
izing 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 Ex-
tended .
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.