Game Development Reference
In-Depth Information
stage.enableMouseOver();
createjs.Ticker.addEventListener("tick", stage);
addButtons();
}
function addButtons() {
var btn = new ui.SimpleButton('button 1');
var btn2 = new ui.SimpleButton('button 2');
var btn3 = new ui.SimpleButton('button 3');
btn.setColor('#FFF');
btn.setUpColor('#000');
btn2.setFontSize(40);
btn2.setUpColor('#A9BBC9');
btn3.setOverColor('#EEE');
btn.x = btn2.x = btn3.x = 130;
btn.y = 20;
btn2.y = btn.y + btn.height + 20;
btn3.y = btn2.y + btn2.height + 20;
stage.addChild(btn,btn2,btn3);
}
You can add many more methods to this button to make it even more extensible. Figure
8-5
shows these new
buttons in action.
Figure 8-5.
Three instances of SimpleButton class with custom appearance
Let's add one more addition to
SimpleButton
before moving on to the preloader component. Every EaselJS
display object comes with a handy method called
set
. To use this method, you pass in a generic object that contains
the properties and values you wish to set on the instance of the display object. You can tack onto this functionality
to create a shortcut method for creating custom buttons using
SimpleButton
. Add one more method after your final
method in the class (see Listing 8-11).
