Making and Animating Graphics - Beginning HTML5 Games with CreateJS - page 17

As you can see, this paused property can be accessed via the event passed into the event handler. You simply only
update the stage when the Ticker is not set to paused . This is a handy feature to prevent unnecessary rendering in
static moments in your game, or when you simply want to pause the level.
You can also retrieve this property directly from the Ticker class.
var paused = createjs.Ticker.getPaused();
Now that you see how the stage is set up you can finally move on to creating fun and exciting things to add on to
it. Unlike the main game chapters in this topic, many examples will assume that you have a global stage set up and are
running its updates. If at any time you try to replicate an example and nothing shows up, there's a good chance your
stage is either not set up correctly or it's not being updated.
Creating Graphics
Now that you've got your stage properly set up, let's start adding some graphics to it. Graphics in EaselJS are either
vector or bitmaps. Vectors can be easily drawn with code and used in many gaming and application scenarios. In this
section, you'll learn how to create and animate vector graphics. You'll also explore a handy tool that can convert your
Illustrator drawings into code, which can then easily be brought into your application.
Graphics
The Graphics class consists of an API for generating vector drawings. It's extremely easy to use and comes with shape
drawing methods as well as path building functionality. The following example shows how easy it is to create a red
square with a black stroke:
var g = new createjs.Graphics();
g.beginStroke('#000');
g.beginFill('#FF0000');
g.drawRect(0,0,100,100);
Much like the previous Tween examples, the Graphics methods all return the instance so you can conveniently
chain them together.
var g = new createjs.Graphics().beginStroke('#000').beginFill('#FF0000').drawRect(0,0,100,100);
Once you have your graphics constructed, you need to display them. Since Graphics is not a display object, you
are not able to simply add it to the stage. The vessel used to hold and display your created graphics is a simple display
object called Shape .
Shapes
The Shape class is used to display vector graphics in the display list. Once you've created a graphics instance, you
can pass it directly into the constructor of Shape . The following code creates a square and passes it in through the
constructor of a new Shape object, which then gets added to the stage. Figure 2-1 shows the result.
var g = new createjs.Graphics().beginStroke('#000').beginFill('#FF0000').drawRect(0,0,100,100);
var square = new createjs.Shape(g);
square.x = square.y = 100;
stage.addChild(square);