Game Development Reference
In-Depth Information
Figure 8-4.
Two instances of the SimpleButton class in its default appearance
This would make for a decent, reusable button, but you can do better by allowing more functionality to change
its appearance. You can create a method for every attribute of the button you wish to make unique with each button
instance. We'll cover a few here, shown in Listing 8-9.
Listing 8-9.
SimpleButton Set Methods to Customize Appearance
p.setUpColor = function(color){
this.upColor = color;
this.buttonColor = color;
this.drawButton();
}
p.setOverColor = function(color){
this.overColor = color;
}
p.setColor = function(color){
this.color = this.labelTxt.color = color;
}
p.setFontSize = function(size){
this.fontSize = size;
this.drawButton();
}
Each method can be called on any instance of
SimpleButton
. Each method simply changes the appropriate
property, and with the exception of the
setOverColor
, the button is then immediately redrawn. Listing 8-10
demonstrates how you can now change these properties to make unique buttons in your application.
Listing 8-10.
SimpleButton Objects Created and Customized
var stage;
// onload
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
