Combining Bitmaps and Sound - HTML5 Canvas - page 448

Figure 9-1. Geo Blaster Extended
First, let's look at the tile sheets we will use for our new game.
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 will apply the concepts
from Chapter 4 to optimizing the rendering of the Geo Blaster Basic game. We will do
this by prerendering all of our game graphics and transformations as bitmaps. We will
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 will 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.