Using and Managing Bitmap Images - Beginning HTML5 Games with CreateJS - page 94

Figure 5-12. Rotating animation applied to a container
Figure 5-12 should give you an idea on how helpful containers can be in your games. In fact, they are actually
pretty essential. You'll also run into to situations where you may need several containers that that contain the same
visuals. The clone method can be used to accomplish this.
If you recall, the clone method was used on a text object during the word game in Chapter 3. This was very
helpful in that it prevented you from having to recreate the styles and properties needed to create the same text object.
With containers, there will often times be several objects added and positioned inside it. You really only need to build
this once and then take advantage of the clone method to duplicate it. Listing 5-21 shows this being done.
Listing 5-21. Cloning a Container
var container = new createjs.Container();
var pepper = new createjs.Bitmap('img/pepper.png')
var txt = new createjs.Text("Green Pepper", "20px Arial", "#000");
var bg = new createjs.Shape(new createjs.Graphics().beginStroke('#000')
.drawRect(0, 0, 250, 250));
txt.x = txt.y = 10;
pepper.x = pepper.y = 80;
container.regX = container.regY = 125;
container.x = 150;
container.y = 200;
container.addChild(bg, txt, pepper);
container2 = container.clone(true);
container2.x = 430;
container2.y = 200;
stage.addChild(container,container2);
The first container is built by populating its display objects. A new container is then built and is created by
using the clone method on the first container. Its positioning is set, and both containers are then added to the stage.
Figure 5-13 shows two identical containers on the stage.