HTML5 Canvas [167]
In the second half of this chapter, we will create another small turn-based strategy game using bitmaps. This game will be roughly based on the classic computer game Daleks.
Geo Blaster Extended
We will create a new game, Geo Blaster Extended, by adding bitmaps and sound to the Geo Blaster Basic game from Chapter 8. Much of the game logic will be the same, but adding bitmaps to replace paths will enable us to optimize the game for rendering. Optimized rendering is very important when you are targeting limited-processor devices, such as mobile phones. We will also add sound to Geo Blaster Extended, and apply an object pool to the particles used for game explosions. Figure 9-1 shows an example screen of the finished game.
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.
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 will 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 that 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).
Figure 9-4. The largerocks.png tile sheet
Figure 9-5. The mediumrocks.png tile sheet
Figure 9-6. The smallrocks.png tile sheet
These three tile sheets only need to be five tiles each. Since the rock is a square, we can simply repeat the five frames to simulate rotation in either the clockwise or counterclockwise direction.
The saucer that attempts to shoot the player is a single tile, saucer.png, shown in Figure 9-7.
Figure 9-7. The saucer.png tile
Finally, parts.png (Figure 9-8), is a tiny 8×2 tile sheet that contains four 2×2 “particle” tiles. These will be used for the explosions and missiles fired by the player and the saucer.
Figure 9-8. The parts.png tile sheet
You cannot see the colors in a black-and-white printed book, but you can view them by downloading the files from this book’s website. The first tile is green, and it will be used for the small rock and saucer explosions. The second tile is light blue, and it will depict the player’s missiles and the player explosion. The third tile is reddish pink (salmon, if you will), and it will illustrate the large rock explosions. The final, purple tile will be used for the medium rock explosions.
Now that we have our tiles in place, let’s look at the methods we will use to transform Geo Blaster Basic’s immediate-mode path, rendering it to Geo Blaster Extended’s tile-based bitmap.
Refresher: Calculating the tile source location
In Chapter 4, we examined the method to calculate a tile’s location on a tile sheet if we know the single-dimension id of that tile. Let’s briefly look back at this, as it will be reused to render all the tiles for the games in this chapter.
Given that we have a tile sheet such as ship_tiles.png, we can locate the tile we want to display with a simple math trick.
ship_tiles.png is a 36-tile animation with