Images on the Canvas - HTML5 Canvas - page 130

context.fillRect(0,0,500,500);
context.drawImage(tileSheet, 32, 0,32,32,50,50,64,64);
}
As you can see, we have changed the name of our Image instance to tileSheet because
it represents more than just the source for the single ship image.
Figure 4-6. Using all of the drawImage() parameters
Now, let's use this same concept to simulate animation using the tiles on our tile sheet.
Simple Cell-Based Sprite Animation
With a tile sheet of images, it is relatively simple to create what seems like cell-based
or flip-book animation. This technique involves rapidly swapping images over time to
simulate animation. The term flip-book comes from the age-old technique of drawing
individual cells of animation in the top-left corner pages of a book. When the pages are
rapidly flipped through, the changes are viewed over time, appearing to create a car-
toon. Cell-based animation refers to a similar professional technique. Individual same-
sized cells (or pages) of images are drawn to simulate animation. When played back
rapidly with special devices in front of a camera, animated cartoons are recorded.
We can use the drawImage() function and the first two tiles on our tile sheet to do the
same thing.
Creating an Animation Frame Counter
We can simulate the ship's exhaust firing by rapidly flipping between the first two tiles
(or cells) on our tile sheet. To do this, we set up a counter variable, which is how we
track the tile we want to paint to the canvas. We will use 0 for the first cell and 1 for
the second cell.