Getting Animated - HTML5 Mobile Game Development - page 313

straightforward: You need a way to set the frames that make up the animation as well as any additional details
about the animation. Listing 16-1 shows how this can work.
Listing 16-1: The animation api
Q.animations('player', {
run_right: { frames: _.range(0,10) },
run_left: { frames: _.range(10,20) },
stand: { frames: _.range(30,25), rate: 1/5 },
fire: { frames: _.range(25,30), loop: false, rate: 1/30 },
die: { frames: _.range(30,45), rate: 1/5, next: 'dead' },
dead: { frames: [ 45 ] }
});
In the preceding code, Q.animations creates a sprite animation map called player and passes in a hash
defining the frames and any additional details about the animation, including whether it shouldn't loop, whether
it has a rate override, and whether another animation should play after it is done.
As a shortcut to pass in a long array of frames, such as [ 0, 1, 2, 3, 4, 5, 6 ] , you can use
the underscore shortcut method _.range to do the same by calling _.range(0,7) . (Notice that _.range
goes up, too, but does not include the second number.)
In the preceding case, the player has left and right running animation that loops as well as a looping standing
animation that plays at a slower rate. A fire animation runs at a faster rate and doesn't loop. Next is a die anim-
ation that automatically plays a 1-frame dead animation when it's done.
With the animations defined, it's now time to figure out how they should be played. Because play is the
term often associated with animation, a simple play method takes the name of the animation to play along with
an optional priority value. Adding in a priority to play allows animations that are higher priority (such as an
attack) to override lower priority animations (such as a run or walk).
Listing 16-2 shows what a player sprite might look like powered by animations.
Listing 16-2: An animated player sprite
Q.sheet('player_animations', 'dummy.png',{ tilew: 96, tileh: 96});
Q.Player = Q.Sprite.extend({
init:function(props) {
this._super(_(props).extend({
sprite: 'player',
sheet: 'player_animations',
rate: 1/15
}));
this.add('animation');
this.bind('animEnd.fire',this,function() { console.log("Fired!");
});
this.bind('animLoop.run_right',this,function() {
console.log("run right");
});
this.bind('animLoop.run_left',this,function() {
console.log("run left"); }