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.

The ship_tiles.png tile sheet

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.

The ship_tiles2.png tile sheet

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 ...

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.