Canvas Games: Part II - HTML5 Canvas - page 756

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 are used for the explosions and missiles the player and the saucer fire.
Figure 9-8. The parts.png tile sheet
Youcannotseethecolorsinablack-and-whiteprinted topic,butyoucanviewthembydown-
loading the files from this topic's website. The first tile is green, and it is used for the small
rock and saucer explosions. The second tile is light blue, and it depicts the player's missiles
and the player explosion. The third tile is reddish pink (salmon, if you will), and it illustrates
the large rock explosions. The final, purple tile is used for the medium rock explosions.
Now that we have our tiles in place, let's look at the methods we'll use to transform Geo
Blaster Basic 's immediate-mode path, rendering it to Geo Blaster Extended 's tile-based bit-
map.
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, because it is reused to
render all the tiles for the games in this chapter.
Giventhatwehaveatilesheetsuchas ship_tiles.png ,wecanlocatethetilewewanttodisplay
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 .
Here is pseudocode for the sourceX calculation:
sourceX = integer ( current_frame_index modulo
the_number_columns_in_the_tilesheet ) * tile_width