Extending EaselJS Display Objects - Beginning HTML5 Games with CreateJS - page 181

Figure 8-3. Pulsing Orbs canvas exported to PNG
This should give you an idea of the benefits with writing reusable classes. Next, we'll look at some practical uses
of extending EaselJS by creating some UI components.
Creating Reusable UI Components
You'll often need UI elements in your games for user interaction between game play, such as buttons in menu screens
and load indicators. In this section, you'll create a highly extendable button that can be used throughout this topic.
You'll also revisit the preloader that was started in Chapter 2.
Creating Buttons
Creating reusable buttons is easy to do in EaselJS by extending Container . These containers will contain a border,
background, and text object. Colors and sizes should also be adjustable. Start by extending Container in a file called
SimpleButton . js (see Listing 8-6).
Listing 8-6. SimpleButton.js, SimpleButton Class Declaration
(function () {
window.ui = window.ui || {};
var SimpleButton = function (label) {
this.label = label;
this.initialize();
}