Combining Bitmaps and Sound - HTML5 Canvas - page 450

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 counter-
clockwise 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 topic, but you can view them
by downloading the files from this topic'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 the player ship starting in the 0-degree angle,
or “pointing right” direction. Each of the remaining 35 tiles displays the ship rotating
in 10-degree increments.
If we would like to display tile 19 (the ship pointing to the left, or in the 190-degree
angle), we first need to find the x and y coordinates for the top-left corner of the tile,
by calculating sourceX and sourceY .