Game Development Reference
In-Depth Information
The speed constant controls the speed of the wait bar's progress. Next, a reference to the hero instance that was
created in the game is passed into the class and set to the hero property. The following three properties are display
objects used in the panel. When the progress bar is full, waitingToAttack will be set to true, will enable all available
action buttons in the panel, and will stop the bar's progress. Other than the potion, when a button is pressed, the
action isn't instantly triggered, but it is stored in the currentAttackButton property so it can be referenced when
clicking on an enemy.
The initialize method then calls a list of functions, which will be reviewed now, starting with the creation of
the wait bar, the panel's background, and the hero's avatar and stats (see Listing 14-26).
Listing 14-26. BattlePanel.js - Adding Display Objects to the Battle Panel
p.addWaitBar = function () {
var progressWidth = 365;
var progressBG = new createjs.Shape();
this.waitingToAttack = false;
this.waitBar = new createjs.Shape();
progressBG.graphics.beginFill('#b6b6b6').drawRect(0, 0, progressWidth,
40);
this.waitBar.graphics.beginFill('#45c153').drawRect(0, 0,
progressWidth, 40);
this.waitBar.scaleX = 0;
progressBG.x = this.waitBar.x = screen_width - progressWidth;
this.addChild(progressBG, this.waitBar);
}
p.addBG = function () {
var bg = new createjs.Sprite(spritesheet, 'battlePanel');
this.addChild(bg);
}
p.addHeroHP = function () {
var hero = new createjs.Sprite(spritesheet, 'hero');
hero.y = -15;
hero.x = 20;
this.addChild(hero);
this.hpTxt = new createjs.BitmapText('', spritesheet);
this.hpTxt.letterSpacing = 3;
this.hpTxt.x = 150;
this.hpTxt.y = 15;
this.addChild(this.hpTxt);
}
The wait bar is a simple progress indicator consisting of two shapes, much like the enemy health meter. One is
used for the background and one for the bar. The bar shape is set to the waitBar property so it can be scaled with the
panel updates. The background to the entire panel is a sprite and is added to the container on top of the wait bar in
the addBG method.
The hero's avatar is a small sprite that is added to the upper left of the panel. Alongside of it is the current hit
point status, which is displayed with a bitmap text object. The value of this text will be continuously updated when the
panel is updated from the game's ticker.
Now the action buttons need to be placed in the panel. Listing 14-27 shows the next three methods that deal with
the action buttons: addButtons , disableButtons , and enableButtons .
 
Search WWH ::




Custom Search