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

This example simply creates a new Preloader instance and calls on its update method with a value of 60 percent.
This should give you an idea of how to use it with future games. Figure 8-6 demonstrates the loader object at
60 percent complete.
Figure 8-6. Preload class showing a loader at 60 percent
With a reusable button and a preloader nicely built and packaged into custom display objects, you now have a
simple UI component set. These components will be used in several examples throughout the remainder of this topic.
However, extending EaselJS for UI is only a small example of the power of inheritance in your games. You can use this
same approach to extend Sprite , which will make creating your game sprites much more manageable.
Creating Custom Sprites
The Sprite class will most likely be the EaselJS class you extend the most when building your games. As you know,
the Sprite class handles all of the heavy lifting of drawing and cycling through your sprite sheet frames. In games,
these sprites have much more responsibility than to just look good. They need to attack, move around, jump, dodge,
and die. They need special properties such as health, power, and point values.
Extending the Sprite Class
So far, you've extended Shape and Container. Sprite is pretty much the same with the exception that it needs
SpriteSheet data passed into its constructor to work properly. This shouldn't be a surprise to you since this is how
you've built sprites so far. Listing 8-14 demonstrates the template code for extending Sprite .
Listing 8-14. Code Template for Extending Sprite
(function () {
window.sprites = window.sprites || {};
var Ship = function (spritesheet) {
this.initialize(spritesheet);
}