Images on the Canvas - HTML5 Canvas - page 134

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 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 sourceY = Math.floor(animationFrames[frameIndex] / 8) *32;
Looping Through the Tiles
We will update the frameIndex value on each frame tick. When frameIndex becomes
greater than 7 , we will set it back to 0 :
frameIndex++;
if (frameIndex == animationFrames.length) {
frameIndex = 0;
}
The animationFrames.length value is 8 . When the frameIndex is equal to 8 , we must set
it back to 0 to start reading the array values over again, which creates an infinite ani-
mation loop.
Drawing the Tile
We will use drawImage() to place the new tile on the screen on each iteration:
context.drawImage(tileSheet, sourceX, sourceY,32,32,50,50,32,32);
Here, we are passing the calculated sourceX and sourceY values into the drawImage()
function. We then pass in the width ( 32 ), the height ( 32 ), and the location ( 50,50 ) to
draw the image on the canvas. Example 4-5 shows the full code.
Example 4-5. Advanced sprite animation
var tileSheet = new Image();
tileSheet.addEventListener('load', eventShipLoaded , false);
tileSheet.src = "tanks_sheet.png";
var animationFrames = [1,2,3,4,5,6,7,8];
var frameIndex = 0;