Getting Animated - HTML5 Mobile Game Development - page 317

and a set of animations adds those to the animations available for that sheet. Calling Q.animation with
a name and an animation name returns the details for that animation.
Each animation is required to have an array of frames, but for additional flexibility you need to support a
number of other properties to make it easier to customize individual animations and chain animations together:
{
frames: [0,1,2,3], /* An array of frames in the sheet */
/* can be created with _.range(0,3) */
/* Optional Parameters */
sheet: 'sheetName', /* An override for the sheet, if used,
must be on all animations */
loop: false, /* Loop animation (default: true) */
rate: 1/30, /* Frame rate override for this animation */
next: 'animName', /* Animation to auto-play after this one */
trigger: 'event', /* Custom event to trigger when done */
trigerData: { .. } /* Optional custom trigger data */
}
The animation component adds only a single exposed method to the entity's interface: play , which as
already described, takes an animation name and an optional priority.
The play method extended onto the entity is just a proxy for the method directly on the component (listed
at the bottom). That method first checks that you're actually trying to change the animation, as a call to play
with the same animation that is already playing just continues to play that animation. Next if the animation has
changed and the priority passed in is higher than the currently running animation, the animation properties are
updated, and two anim events are triggered: one general one and one that's specific to the animation being
played.
The step method does the most work. It first checks if there is an animation being played, and if so it takes
over control of the sprite's frame property.
It then checks if this is the first frame of a new animation. If not it updates the animation time based on the
rate (either from the sprite or the per-animation rate override) and advances the animation by the required num-
ber of frames depending on the time step.
Next it checks if the animation has updated itself this frame. If so, it needs to do some more work. First, the
code checks if the current frame has reached the end of the animation. If so it checks if this is a single-loop an-
imation or if there is an animation to play next. If either of those conditions are true, the method sets the frame
to the last frame of the animation to be safe and then triggers two animEnd events. It then resets the animation
and animationPriority to default values. Finally it triggers a custom event or plays the next animation if
either of those properties is set.
If it's a looping animation, the method triggers animLoop events to signal an individual loop has played
through and then uses the modulus operator to ensure the animationFrame is within the range of frames.
Finally, when everything else is done, the method sets the sprite's frame property and optionally the anim-
ation sheet if the animation has that property set.
Testing the Animation
To test the animation functionality, create a simple animated sprite that can meander around the stage. To start,
create a new HTML file called animation.html , and enter the code in Listing 16-4 :