HTML and CSS Reference

In-Depth Information

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;