Lab 8: Sprite Sheet Animation


1. Download all of the files for the SpriteRunner program from this directory (
to the folder where you will write your HTML5/JavaScript program. Notice that there is a sub-folder for the images. You may use WinSCP or a similar program to transfer the entire folder to your own computer.

2. Check that you can run the program in your browser (Firefox or Chrome) by loading the SpriteRunner .html page.


Write a program that will simulate a dog chasing a cat, where they are both running from right to left across the canvas.

1. Use the SpriteRunner program as your starting point. Make a copy of the files for SpriteRunner .html and example-move.js. You should not need to make changes to the library files: sprites.js and requestNextAnimationFrame.js.

2. Instead of using a single running-sprite-sheet, change your JavaScript to create two different sprite sheets: one for the cat, and another for the dog. Load these sprite sheets from the files CatRunningSpriteW .jpg and DogRunningSpriteW .jpg.

3. The following changes will need to be made to set up the animation for both cat and dog. It will be easiest to work through the steps once for cat and test your program. After the cat is running correctly, you will need to make similar changes to get the dog running.

4. Similar to the runnerCells array, you will need to create two new arrays to locate the frames within the cat sprite sheet and dog sprite sheet. Use an image editor, such as IrfanView , to identify the boundaries of each frame within the sprite sheet. Notice that the cat sheet has 6 frames, but the dog sheet has 5 frames.

5. To simulate a dog chasing a cat, make the cat start at a position left of the center of the canvas, and the dog start at a position right of center.

6. Change the animate function, so it will paint both the cat and dog and advance their frames when necessary. Notice that the existing animate function simply decrements the left position of a sprite by one pixel each time the animation is drawn. Change this to use two different variables (catSpeed and dogSpeed) to determine how far the left position of each object should move. If you want the dog to catch the cat, then the dogSpeed should be set to a larger value than the catSpeed.

7. Test your animation, and adjust as needed until both the cat and dog are running and see if the dog catches the cat.

8. Make the animation stop automatically when the dog catches the cat. If you have time, you can use some special effect to notify the viewer that the chase is over.

-- RobertKasper - 2015-03-25

Topic revision: r1 - 2015-03-25 - RobertKasper
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback