HTML and CSS Reference
In-Depth Information
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() {
function drawScreen() {
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
context.drawImage(tileSheet, 32*counter, 0,32,32,50,50,64,64);
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
Search WWH ::

Custom Search