给精灵分组

Container，它可以帮你做这些工作。让我们弄清楚它是怎么工作的。 但是不要把它们添加到舞台上。

  1. //The catlet cat = new Sprite(id["cat.png"]);cat.position.set(16, 16);//The hedgehoglet hedgehog = new Sprite(id["hedgehog.png"]);hedgehog.position.set(32, 32);//The tigerlet tiger = new Sprite(id["tiger.png"]);tiger.position.set(64, 64);

animals容器像这样去把他们聚合在一起：

  1. let animals = new Container();

addChild 去把精灵图 添加到分组中 。

  1. animals.addChild(cat);animals.addChild(hedgehog);animals.addChild(tiger);

最后把分组添加到舞台上。

  1. app.stage.addChild(animals);

stage对象也是一个Container。它是所有Pixi精灵的根容器。） 这就是上面代码的效果： animals分组的。它仅仅是个容器而已。 animals分组。你可以把Container当作是一个特殊类型的不包含任何纹理的精灵。 animals包含的所有子精灵，你可以用它的children数组获取。

  1. console.log(animals.children)//Displays: Array [Object, Object, Object]

animals有三个子精灵。 animals分组跟其他精灵一样，你可以改变它的x和y的值，alpha, scale和其他精灵的属性。所有你改变了的父容器的属性值，都会改变它的子精灵的相应属性。所以如果你设置分组的x和y的位置，所有的子精灵都会相对于分组的左上角重新定位。如果你设置了 animals的x和y的位置为64会发生什么呢？

  1. animals.position.set(64, 64);

整个分组的精灵都会向右和向下移动64像素。 animals分组也有它自己的尺寸，它是以包含的精灵所占的区域计算出来的。你可以像这样来获取width和height的值：

  1. console.log(animals.width);//Displays: 112console.log(animals.height);//Displays: 112

如果你改变了分组的宽和高会发生什么呢？

  1. animals.width = 200;animals.height = 200;

所有的孩子精灵都会缩放到刚才你设定的那个值。 Container 里嵌套许多其他Container，如果你需要，完全可以创建一个更深的层次。然而，一个 DisplayObject （像 Sprite 或者其他 Container）只能一次属于一个父级。如果你用 addChild 让一个精灵成为其他精灵的孩子。Pixi会自动移除它当前的父级，这是一个不用你操心的有用的管理方式。

局部位置和全局位置

Container添加一个精灵时，它的x和y的位置是 相对于分组的左上角 的。这是精灵的局部位置，举个例子，你认为这个猫在这张图的哪个位置？ 让我们看看：

  1. console.log(cat.x);//Displays: 16

16？是的！这因为猫的只往分组的左上角偏移了16个像素。16是猫的局部位置。 全局位置 。全局位置是舞台左上角到精灵锚点（通常是精灵的左上角）的距离。你可以通过toGlobal方法的帮助找到精灵图的全局位置：

  1. parentSprite.toGlobal(childSprite.position)

animals分组里找到猫的全局位置：

  1. console.log(animals.toGlobal(cat.position));//Displays: Object {x: 80, y: 80...};

x和y的值为80。这正是猫相对于舞台左上角的相对位置，也就是全局位置。 parent 能告诉你精灵的父级是什么。在上面的例子中，猫的父级是 animals。这意味着你可以像如下代码一样得到猫的全局位置：

  1. cat.parent.toGlobal(cat.position);

即使你不知道猫的当前父级是谁，上面的代码依然能够正确工作。 getGlobalPosition方法。这里展示如何用它来找到老虎的全局位置：

  1. tiger.getGlobalPosition().xtiger.getGlobalPosition().y

x和y的值为128。 特别的是，getGlobalPosition是高精度的：当精灵的局部位置改变的同时，它会返回给你精确的全局位置。我曾要求Pixi开发团队添加这个特殊的特性，以便于开发精确的碰撞检测游戏。（谢谢Matt和团队真的把他加上去了！） toLocal方法。它的工作方式类似，但是通常是这种通用的格式：

  1. sprite.toLocal(sprite.position, anyOtherSprite)

toLocal 找到一个精灵和其他任何一个精灵之间的距离。这段代码告诉你如何获取老虎的相对于猫头鹰的局部位置。

  1. tiger.toLocal(tiger.position, hedgehog).xtiger.toLocal(tiger.position, hedgehog).y

x值和一个32的y值。你可以在例子中看到老虎的左上角和猫头鹰的左上角距离32像素。

使用 ParticleContainer 分组精灵

ParticleContainer（PIXI.ParticleContainer）。任何在ParticleContainer 里的精灵都会比在一个普通的Container的渲染速度快2到5倍。这是用于提升游戏性能的一个很棒的方法。 可以像这样创建 ParticleContainer ：

  1. let superFastSprites = new PIXI.particles.ParticleContainer();

addChild 去往里添加精灵，就像往普通的 Container添加一样。 ParticleContainer你必须做出一些妥协。在 ParticleContainer 里的精灵图只有一小部分基本属性：x, y, width, height, scale, pivot, alpha, visible - 就这么多。而且，它包含的精灵不能再继续嵌套自己的孩子精灵。 ParticleContainer 也不能用Pixi的先进的视觉效果像过滤器和混合模式。每个ParticleContainer 只能用一个纹理（所以如果你想让精灵有不同的表现方式你将不得不更换雪碧图）。但是为了得到巨大的性能提升，这些妥协通常是值得的。你可以在同一个项目中同时用 Container 和 ParticleContainer，然后微调一下你自己的优化。 Particle Container 的精灵图这么快呢？因为精灵的位置是直接在GPU上计算的。Pixi开发团队正在努力让尽可能多的雪碧图在GPU上处理，所以很有可能你用的最新版的Pixi的 ParticleContainer 的特性一定比我现在在这儿描述的特性多得多。查看当前以获取更多信息。 ParticleContainer，有四个参数可以传递， size, properties, batchSize 和 autoResize。

  1. let superFastSprites = new ParticleContainer(maxSize, properties, batchSize, autoResize);

maxSize是 15,000。所以，如果你需要包裹更多的精灵，把它设置为更高的数字。配置参数是一个拥有五个布尔值的对象：scale, position, rotation, uvs 和 alpha。默认的值是 position 为 true，其他都为 false。这意味着如果你想在 ParticleContainer改变精灵的rotation, scale, alpha, 或者 uvs，你得先把这些属性设置为 true，像这样：

  1. let superFastSprites = new ParticleContainer(  size,  {    rotation: true,    alphaAndtint: true,    scale: true,    uvs: true  });

false 以实现出更好的性能。 uvs 是什么呢？只有当它们在动画时需要改变它们纹理子图像的时候你需要设置它为 true 。（想让它工作，所有的精灵纹理需要在同一张雪碧图上。） UV mapping 是一个3D图表展示术语，它指纹理（图片）准备映射到三维表面的x和y的坐标。U 是 x 轴， V 是 y 轴。WebGL用 x, y 和 z 来进行三维空间定位，所以 U 和 V 被选为表示2D图片纹理的 x 和 y 。） batchSize 和 autoResize，如果你知道，就赶紧提个Issue吧！)