HTML5 Canvas [50]
counter++;
if (counter >1) {
counter = 0;
}
}
function startUp(){
setInterval(drawScreen, 100 );
}
When you run this code, you will see the exhaust on the ship turn off and on every 100 milliseconds, creating a simple cell-based animation.
Advanced Cell-Based Animation
In the previous example, we simply flipped back and forth between two tiles on our tile sheet. Next, we are going to create a method that uses a tile sheet to play through a series of images. First, let’s look at the new tile sheet, created by using tiles from SpriteLib. Figure 4-7 shows the example sprite sheet, tanks_sheet.png; we will refer back to this figure throughout the chapter.
Figure 4-7. Example tile sheet
As you can see, it contains a number of 32×32 tiles that can be used in a game. We will not create an entire game in this chapter, but we will examine how to use these tiles to create a game screen. In Chapter 9, we will create a simple maze-chase game using some of these tiles.
Examining the Tile Sheet
The tile sheet is formatted into a series of tiles starting at the top left. As with a two-dimensional array, the numbering starts at 0—we call this 0 relative. Moving from left to right and down, each tile will be referenced by a single number index (as opposed to a multidimensional index). The gray square in the top left is tile 0, while the tank at the end of the first row (the rightmost tank) is tile 7. Moving down to the next row, the first tank on the far left of the second row is tile 8, and so on until the final tile on row 3 (the fourth row down when we start numbering at 0) is tile 31. We have four rows with eight columns each, making 32 tiles with indexes numbered 0 to 31.
Creating an Animation Array
Next, we are going to create an array to hold the tiles for the animation. There are two tanks on the tile sheet: one is green and one is blue. Tiles 1‒8 are a series that—when played in succession—will make it appear as though the green tank’s tracks are moving.
NOTE
Remember, the tile sheet starts at tile 0, but we want start with the first tank image at tile number 1.
We will store the tile ids we want to play for the tank in an array:
var animationFrames = [1,2,3,4,5,6,7,8];
We will use a counter to keep track of the current index of this array:
var frameIndex = 0;
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 local 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 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 animation loop.
Drawing the Tile
We will use drawImage() to place the new tile on the screen on each