Game Project: The Villager RPG - Beginning HTML5 Games with CreateJS - page 353

this.quantityTxt = new
createjs.BitmapText(this.quantity.toString(), spritesheet);
this.quantityTxt.x = xPos;
this.quantityTxt.y = yPos;
this.addChild(this.quantityTxt);
}
}
p.updateQuantity = function (quantity) {
this.quantity += quantity;
this.removeChild(this.quantityTxt);
this.uncache(0, 0, this.getBounds().width, this.getBounds().height);
this.setQuantity();
this.cacheButton();
}
p.cacheButton = function () {
this.cache(0, 0, this.getBounds().width, this.getBounds().height);
}
p.enableButton = function () {
this.mouseEnabled = true;
this.alpha = 1;
this.resetButton();
}
p.disableButton = function () {
this.mouseEnabled = false;
this.alpha = .3;
this.scaleX = this.scaleY = 1;
}
p.selectButton = function () {
this.scaleX = this.scaleY = .9;
this.mouseEnabled = false;
}
p.resetButton = function () {
createjs.Tween.get(this).to({scaleX:1, scaleY:1}, 100);
}
window.game.BattleButton = BattleButton;
}());
The BattleButton class is a container, which holds one sprite and one bitmap text object to display the quantity
of the item that the button represents. The button's type, which is a string that also represents the sprite sheet frame, is
passed into the constructor along with the quantity.
Once the sprite is added, setBounds is used on the container class so its size can easily be accessed when
caching. Caching is a good technique to use on containers when no display objects inside it are changing. However,
as you can see in updateQuantity , you need to uncache the container so that quantityTxt can be updated. You'll also
notice that you check that quantity is above 0 before creating a quantityTxt object at all. Remember that attack has
an infinite quantity, which is represented with the value -1, and a textual representation of that is not needed. The
potion action button, with a quantity of 9, is shown in Figure 14-14 .