Images on the Canvas - HTML5 Canvas - page 132

Example 4-4. A simple sprite animation
var counter = 0;
var tileSheet = new Image();
tileSheet.addEventListener('load', eventShipLoaded , false);
tileSheet.src = "ships.png";
function eventShipLoaded() {
startUp();
}
function drawScreen() {
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
context.fillRect(0,0,500,500);
context.drawImage(tileSheet, 32*counter, 0,32,32,50,50,64,64);
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