Sprites and Sprite Sheet Animations - Beginning HTML5 Games with CreateJS - page 119

Figure 6-8. BitmapText class displaying bitmap fonts on the stage
Sprite Sheet Animations
Sprite sheet animations are built using the Sprite class and using multi-frame animation data to display a sequence
of images. There are a few different approaches to creating this data, which we will go over next.
Animations Data
You've already built animation data to create single frame sprites. Let's pick back up on this area and extend it to
create animations. The following is an example of animation data that consists of one sprite animation labeled run :
animations: {
run: [0, 1, 2, 3, 4, 5]
}
In this example, there is one declared animation named run , which contains six frames. To run this animation,
you would create a sprite object exactly the same way as before.
var runner = new createjs.Sprite(spritesheet,'run');
stage.addChild(runner);
This will run through and loop the frames defined in the run animation. You can optionally make the sprite
initially paused on the first frame. This can be useful if you want to only display the first frame and later dictate when
the animation should play.
var runner = new createjs.Sprite(spritesheet,'run');
runner.paused = true;
stage.addChild(runner);
A handful of methods are available for animated sprites. The following demonstrates a few of these:
runner.play();
runner.stop();
runner.gotoAndStop(2); //stops at the third frame
runner.gotoAndPlay(3); //advances to the fourth frame and plays
The animations property can be alternatively set up as an object, which can give you more options on how you
want your sprites to play. The following example sets up an animation object with a few new properties, in addition to
the required frames array:
animations: {
run: {
frames:[0, 1, 2, 3, 4, 5],
next:'jump',
speed:.5
}