Game Project: Space Hero - Beginning HTML5 Games with CreateJS - page 249

The buildMeter function creates two sprites, one for the health icon and another for the meter. The maxDamage
value is set to the number of frames in the meter animation. At the time of writing this topic, there is no method in the
API to access the number of frames in a sprite's current animation. You can still access this by chaining a few methods
and properties that are available.
this.maxDamage = this.meter.spriteSheet
.getAnimation(this.meter.currentAnimation)
.frames.length - 1;
You can access the sprite's SpriteSheet object by referencing its spriteSheet property. You can use then use
the getAnimation method to access any animation object in the sprite sheet object. To get this animation, you need
to pass in the string that defined the animation object. You could easily hard-code this value to suit your needs here,
but the string can also be retrieved by accessing the sprite's current animation. This is a better approach in case the
animation name changes in the future. Finally, with the animation object referenced, the length of its frames array is
set to the maxDamage property.
The takeDamage method will be called when a bullet hits the hero ship. It's written so it can take variable damage
and is instantly used to tack on to the damage property. Next, the new damage value needs to be used to determine the
percentage of total damage allotted to the ship. Remember, total damage is tied to the number of frames in the meter
animation, so this percentage can be used to find the appropriate frame in the sprite. If the last strike caused enough
damage to exceed its animation frames, it's set to the value of maxDamage , its last frame . Finally, the target frame
number on meter is tweened to using TweenJS.
createjs.Tween.get(this.meter)
.to({currentAnimationFrame:frame}, 100)
.call(this.checkHealth, null, this);
This demonstrates how dynamic TweenJS can be. Instead of simply tweening a display object's position or visual
property, you can tween an animation to a specific frame. When the tween is complete, the checkHealth function is
called, which will set the empty property to true if all of the meter's frames have been used up and the static health
sprite is completely covered by it.
Lastly, the reset function will reset the meter when a player starts a new life in the game.
Creating the Scoreboard
The scoreboard will use bitmap fonts to display the current score in the game. The Scoreboard class (see Listing 11-9)
will be a container that will create and add a BitmapText object when the score has been updated.
Listing 11-9. The Scoreboard Class, Declared in Scoreboard.js
(function (window) {
window.game = window.game || {}
function Scoreboard() {
this.initialize();
}
var p = Scoreboard.prototype = new createjs.Container();
p.scoreTxt;
p.score = 0;