Game Development Reference
In-Depth Information
Chapter 8
Extending EaselJS Display Objects
So far, you've used EaselJS display objects to add graphical game elements to the stage. You've seen situations where
you have needed to add some custom properties and methods to these display objects to help program the game
logic around them. So far, the process of
dynamic injection
has been used to accomplish this. With this approach,
you are essentially extending the functionality of these objects, but when doing this
on-the-fly
approach, your game
can quickly become messy and hard to manage. In this chapter, you'll learn how to build and organize new, custom
objects that inherit from EaselJS display objects.
Inheritance
Inheritance
is a term used in object-oriented programming that refers to the process of creating an object or class
that inherits the behavior and attributes from a pre-existing class. The class you inherit from is typically referred to as
the
super class,
or
base class.
This lets you create new classes that will carry their own, unique behavior, but also use
common functionality that has been already written.
EaselJS and Inheritance
Classical Inheritance is not the only way to accomplish this type of behavior in JavaScript. Many developers prefer
other types of
extending
objects, but we'll be focusing on classical inheritance because the EaselJS library itself uses
this method.
■
Technically, there are no
classes
in JavaScript. However, when referring to reusable objects that contain
class-like behavior, this term is often used to describe them.
Note
When we speak of display objects, we are actually referring to the base class that all visual objects inherit from.
This base class is the
DisplayObject
class. The
DisplayObject
class defines properties such as
alpha
and
x
, methods
like
draw
and
hitTest
, and all mouse handlers. Another behavior of a display object is that it is allowed to be added to
the stage or any other container.
Sprite
, for instance, is a
subclass
of
DisplayObject
. It carries all of its behaviors, but needs more of its own
unique attributes, such as the
play
method and the
currentFrame
property. We won't be diving into the source
code for EaselJS in this topic, although it is open and perfectly acceptable to do so. However, you can easily see what
classes extend what, if any, by viewing the online documentation. Figure
8-1
demonstrates how you can refer to the
documentation to easily see that the
Sprite
class extends
DisplayObect
.
