HTML and CSS Reference
In-Depth Information
Choosing the Tile to Display
We will use the frameIndex of the animationFrames array to calculate the 32×32 source
rectangle from our tile sheet that we will copy to the canvas. First, we need to find the x and
y locations of the top-left corner for the tile we want to copy. To do this, we will create loc-
al variables in our drawScreen() function on each iteration (frame) to calculate the position
on the tile sheet. The sourceX variable will contain the top-left corner x position, and the
sourceY variable will contain the top-left corner y position.
Here is pseudocode for the sourceX calculation:
sourceX = integer ( current_frame_index modulo
the_number_columns_in_the_tilesheet ) * tile_width
The modulo (%) operator gives us the remainder of the division calculation. The actual code
we will use for this calculation looks like this:
var
var sourceX = Math . floor ( animationFrames [ frameIndex ] % 8 ) * 32 ;
The calculation for the sourceY value is similar, except we divide rather than use the modulo
operation:
sourceY = integer ( current_frame_index divided by
the_number_columns_in_the_tilesheet ) * tile_height
Here is the actual code we will use for this calculation:
var
var sourceY = Math . floor ( animationFrames [ frameIndex ] / 8 ) * 32 ;
Search WWH ::




Custom Search