Game Development Reference
In-Depth Information
Building Containers
The
Container
class is used to build container objects. Once a container is made, you can add and remove children to
it exactly in the same manner as you have been with
Stage
. The following is an example of how to create a container,
add a few shapes to it, and ultimately add it to the stage:
var group = new createjs.Container();
group.addChild(shape1);
group.addChild(shape2);
group.x = container.y = 100;
stage.addChild(group);
In this code, the new
group
object has two children added to it,
shape1
and
shape2
. It is then added to the stage,
which now has
group
as its only child. The stage is now the parent of
group
, and can be accessed via the group's
parent
property. Likewise,
group
is now the parent of both
shape1
and
shape2
.
var parent = group.parent; //Stage
parent = shape1.parent; //group
Let's put this into a working example, which creates two containers and is shown in Listing 5-19.
Listing 5-19.
Two containers, Populated with Various Display Objects
var container1 = new createjs.Container();
var container2 = new createjs.Container();
var pepper = new createjs.Bitmap('img/pepper.png')
var circle = new createjs.Shape(new createjs.Graphics().beginFill('#FF0000')
.drawCircle(0, 0, 50));
var square = new createjs.Shape(new createjs.Graphics().beginFill('#00FF00')
.drawRect(0, 0, 50, 50));
var txt = new createjs.Text("Hello Containers", "20px Arial", "#000");
var bg = new createjs.Shape(new createjs.Graphics().beginStroke('#000')
.drawRect(0, 0, 250, 250));
container1.addChild(bg);
bg = new createjs.Shape(new createjs.Graphics().beginStroke('#000')
.drawRect(0, 0, 250, 250));
container2.addChild(bg);
txt.x = txt.y = 10;
circle.x = circle.y = 125;
container1.addChild(txt, circle);
square.x = square.y = 10;
pepper.x = pepper.y = 100;
container2.addChild(square, pepper);
container1.x = 20;
container2.x = 320;
container1.y = container2.y = 40;
stage.addChild(container1, container2);
stage.update();
Two containers are created and then populated with various display objects, including shapes, text, and bitmaps.
Each container shares the same background shape, which acts as its visual bounds. The result is shown in Figure
5-11
.
