Space Runner - HTML5 Game Development - page 107

3. We calculated the duraion in the ick funcion. Therefore, inside the gameScene.
tick funcion, we tell the player to update the animaion duraion:
game.player.updateAnimationDuration(duration);

Objective complete - mini debriefing
A sprite sheet animaion creates an illusion by playing a set of graphics very fast.
The spritesheet is a large image file that contains all the frame graphics. In this game,
we have two frames for the running animaion.

We can set a mask, or frame, to display only one part of the image at a ime. Then several
milliseconds later, we show another frame. The following figure explains how the large
spritesheet with two frames shifts left:

time ratio background-position The player element.

0.0 x=0 frame A frame B

0.5 x=-1xwidth frame A frame B

1.0 x=-2xwidth frame A frame B

Creating the spritesheet image
The spritesheet graphic contains muliple frames. Certainly, we can put the individual images
together using an image editor. There are different tools that will help us generate a sprite
sheet image. The following are some examples of sprite sheet generaion tools. These are
just suggesions and you can actually use any tool on the Web as long as they add all the
frames into one image file:

F Instant Sprite ( http://instantsprite.com )
F SpritePad ( http://spritepad.wearekiss.com )
F Texture Packer
F Flash CS6 along with a spritesheet generator