Game Development Reference
In-Depth Information
this.labelTxt.textBaseline = 'top';
this.width = this.labelTxt.getMeasuredWidth() + 30;
this.height = this.labelTxt.getMeasuredHeight() + 20;
this.labelTxt.x = this.width / 2;
this.labelTxt.y = 10;
this.background = new createjs.Shape();
this.background.graphics.beginStroke(this.borderColor)
.beginFill(this.buttonColor)
.drawRect(0,0,this.width,this.height);
this.addChild(this.background,this.labelTxt);
}
p.setButtonListeners = function (){
this.cursor = 'pointer';
this.on('rollover',this.onButtonOver);
this.on('rollout',this.onButtonOut);
}
p.onButtonOver = function(){
this.buttonColor = this.overColor;
this.drawButton();
}
p.onButtonOut = function(){
this.buttonColor = this.upColor;
this.drawButton();
}
All children are removed from the container when the
drawButton
method is called. This is to clear any old
graphics when needing to change or update the current state. The text object is created so you can set the width and
height of the button. The
getMeasuredWidth
and
getMeasuredHeight
methods are called on the text field to get the
size properties, which are then set to the instance variables with a bit of padding. The text is positioned in the center
before drawing the button's shape. Lastly, the background and text object are added to the container.
The
setButtonListener
method sets the event listeners for when the mouse rolls on and off the button. The
color of the button shape always takes the value of
buttonColor
, so each handler sets this to the appropriate value
before calling on
drawButton
to redraw the button.
The following is an example of how you can use this button:
var btn = ui.SimpleButton('button 1');
var btn2 = ui.SimpleButton('button 2');
stage.addChild(btn);
btn2.y = btn.y + btn.height + 20;
stage.addChild(btn2);
Figure
8-4
demonstrates the button in both its up and over state.
