Create JS: Usage of "containers"

Question

I'm creating a RPG and would like to add all of my sprites to a spriteContainer, and NPCs to a npcContainer, etc... The reason being is so I can simply add the container and their associated labels to the stage instead of each individual sprite.

I would be using the create js container object.

I want to set an initial x,y for the container, but then set each element in the container to a different x,y with their labels. Should I just not use a container? What is the reason for containers?

Thanks

Edit: I call addNPCs at the beginning which creates a bunch of stuff then adds them to a container:

        function addNPCs() {
            var NPCs = [];
            spriteContainer = new createjs.Container();

            spriteContainer.x = spriteContainerX-camX;
            spriteContainer.y = spriteContainerY-camY;  

            spriteBMP = new createjs.Bitmap("myBmp.png");           
            spriteBMP2 = new createjs.Bitmap("myBmp.png");
            spriteBMP3 = new createjs.Bitmap("myBmp.png");  

            spriteLabel = new createjs.Text("Hey kitty! Come talk to me!", "14px Arial", "white");
            spriteLabel.y = -70;    

            NPCs.push(spriteBMP, spriteBMP2, spriteBMP3);   

            for (npcs in NPCs) {
                spriteContainer.addChild(npcs);
                console.log("added " + npcs);
            }

        }

Then add that container:

stage.addChild(spriteContainer);

check out createjs's documentation. if it looks like containers would make your work easier, use them. if not, don't bother. javascript has constructors and object instantiation similar to many other object-oriented languages (it just uses prototypal inheritance rather than classes). — user428517, Aug 06 '13 at 15:37

score 2 · Accepted Answer · answered Aug 07 '13 at 15:37

Containers provide a really easy way to group objects, and control them as one object. This makes it simple to:

Transform/translate a group of items all at once (move, rotate, and scale the container, set alpha, compositeOperation, shadow, etc)
Cache a group of objects as one (container.cache(0,0,w,h) for faster performance
Maintain different sorting orders, such as adding all foreground elements to a container, and all game sprites to a container, and all background elements to a container -- then sorting within each container - but not worrying about elements in the different layers mixing up

In short, its just a helpful way to manage groups of content. You don't need to use it, but it doesn't have a huge performance impact - so its definitely recommended for anything complex.

Thanks, Lanny! I think I'll stick to using them. Can I throw all of my sprites into one container, then manipulate them independently? Or does that defeat the purpose of the container? — user3871, Aug 07 '13 at 16:06

Create JS: Usage of "containers"

1 Answers1