Learn Pixi.js by Rex Spuy

Author:Rex Spuy
Language: eng
Format: epub
Publisher: Apress, Berkeley, CA

Grouping Sprites

It’s sometimes useful to be able to group sprites, text, and shapes together. You can group things together to make compound objects or use groups to organize sprites into different game scenes or for different display screens in your application. Pixi gives you two ways to make groups: using a Container object or using a high-performance ParticleContainer.

Using a Container

A practical example is the best way to learn how to group sprites using a Container. Imagine that you want to display three sprites: a cat, hedgehog, and tiger. Create them and set their positions—but don’t add them to the stage.

//The cat

cat = new Sprite(id["cat.png"]);

cat.position.set(0, 0);

//The hedgehog

hedgehog = new Sprite(id["hedgehog.png"]);

hedgehog.position.set(32, 32);

//The tiger

tiger = new Sprite(id["tiger.png"]);

tiger.position.set(64, 64);

Next, create a Container (PIXI.Container) called animals to group them together, like this:

animals = new Container();

Then use addChild to add the sprites to the animals group.

animals.addChild(cat);

animals.addChild(hedgehog);

animals.addChild(tiger);

Finally, add the animals group to the stage.

stage.addChild(animals);

Figure 3-18 shows what this code produces. What you can’t see on Pixi’s canvas is that there’s an invisible box, called animals, that’s grouping all the sprites together.

Figure 3-18.Grouping the sprites

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.