Game Development Reference
In-Depth Information
Figure 11-6.
The sprite frames for the HUD elements
The first large set of frames might look a little odd. This is the health meter animation that will increase in a
clockwise animation as the hero takes damage. It will be placed over the health icon, shown in the bottom right corner
of Figure
11-6
. These items are separated so the sequence can be used above the other bonus HUD elements provided
in the sprite sheet.
The ship icon indicates a life in the life box, and will represent one life in the number of lives left in the game. It
includes a series of frames to show an animation of the ship icon blurring out when the hero ship explodes. Lastly, the
numbers 0 through 9 are used for the bitmap font that will be used for the score.
Creating the Health Meter
The health meter represents the amount of health left in the current life of the ship. It consists of an animated sprite
that gradually covers a static sprite underneath. The health meter is shown in action in Figure
11-7
.
Figure 11-7.
The HealthMeter sprite diplaying damage
The
HealthMeter
class extends
Container
and controls the behavior of the health meter (see Listing 11-8).
Listing 11-8.
The HealthMeter Class, Declared in HeroMeter.js
(function (window) {
window.game = window.game || {}
function HealthMeter() {
this.initialize();
}
var p = HealthMeter.prototype = new createjs.Container();
