HTML and CSS Reference
In-Depth Information
);
Q.input.bind('fire',this,"fire");
},
fire: function() {
this.play('fire',1);
},
step: function(dt) {
if(Q.inputs['right']) {
this.play('run_right');
} else if(Q.inputs['left']) {
this.play('run_left');
} else {
this.play('stand');
}
this._super(dt);
}
});
The player
init
method defines a
rate
property that sets the default speed with which animations on the
sprite play as well as a
sprite
property that defines the controlling animation sprite and the standard
sheet
property that ties the player to a spritesheet. Next it adds the
animation
component that adds the
play
meth-
od into the object. Then it defines a number of callbacks to play when specific animations are either finished
or have gone through a single loop of frames. The former can be useful to trigger other actions, whereas the
latter can be used to trigger periodic behavior, like a player running out of breath while running or running out
of oxygen slowly while underwater.
Separating out sprite animation maps from spritesheets makes it easy to swap one or the other. You could,
for example, have a number of spritesheets that match animation frames but have different characters.
The
step
method is set to play a specific animation at the lowest default priority level depending on the
user's movement actions. The
fire
method, on the other hand, plays the fire animation at a higher priority
level (1) so that it takes precedence over the movement animations. Because fire was set to be a nonlooping
animation, when it finishes the movement animation takes over.
Writing the Animation Module
With the API for animations defined, you can implement the module. The module will be called
Quin-
tus.Anim
and will consist of little more than some helper methods to define and retrieve animations and an
animation
component that can be added to Sprite objects (or actually anything with a
frame
property and a
step
method).
The animation component extends the Sprite with a
play
method that calls
animation.play
and sets
up the animation. It also ties in to the
step
event to update the current frame and trigger events as necessary.
The code for the module is shown in
Listing 16-3
.
It should be added to a new file called
quintus_anim.js
.
Listing 16-3:
The Quintus.Anim module
