HTML and CSS Reference
In-Depth Information
fire: function() {'fire',1);
step: function(dt) {
if(Q.inputs['right']) {'run_right');
} else if(Q.inputs['left']) {'run_left');
} else {'stand');
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 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
Search WWH ::

Custom Search