Game Development Reference
In-Depth Information
Chapter 2
Making and Animating Graphics
As you start building your games, you'll be loading in several graphical assets prepared externally in other graphics
and drawing applications. However, EaselJS comes bundled with a
Graphics
class that is built up of a drawing API that
you can use to create on-the-fly graphics.
In this chapter, we'll be taking a close look at how you can accomplish these graphics and the kinds of things you
can do with them when building your games. But before you start drawing, you need to get a bit more acquainted with
what you are drawing them
to
. In the previous chapter, you saw the use of a
stage
object in many situations, but you
don't yet know what it is and how to set it up. Let's do that now.
Stage
Stage
is the root level of your EaselJS application. Any display object you add directly to stage becomes a child of the
stage's display list. You've seen this in action already with your butterflies.
Setting Up the Stage
Before you can start using EaselJS, you need to set up your stage. This is done by creating an instance of
Stage
and
assigning it to an existing
canvas
element within your document. The following are some examples of how you set up
a stage instance for your games:
stage = new createjs.Stage(document.getElementById('canvas'));
Alternatively, you can simply pass in the
id
of the
canvas
element.
stage = new createjs.Stage('canvas');
These examples are really all there is to setting up your stage. You're now ready to start adding display objects to
it and start building your game. But before anything will be rendered to it and displayed, you need to invoke its
update
method.
stage.update();
This method will render all descendants of the stage to the display list. Any time you add or update a child to the
stage, or any of its descendants, you need to update the stage to see the changes. Of course, calling this method every
time you make an update to a display object would quickly become tedious. It's a much better idea to centralize the
stage updates in one function. A typical approach to this would be a timer that would constantly do this at a specified
rate. You can accomplish this by utilizing the built-in
Ticker
class.
