PIXI 分组 Sprite-PIXI文档翻译(5)

1、分组sprite
组可以创建游戏场景，并将类似的精灵一起管理为单个单元。Pixi有一个对象称为a Container ，让你这样做。让我们来看看它是如何工作的。

想象一下，你想显示三个精灵：猫，刺猬和老虎。创建它们，并设置他们的位置 - 但不要将它们添加到舞台上。

//The cat
var cat = new Sprite(id["cat.png"]);
cat.position.set(16, 16);

//The hedgehog
var hedgehog = new Sprite(id["hedgehog.png"]);
hedgehog.position.set(32, 32);

//The tiger
var tiger = new Sprite(id["tiger.png"]);
tiger.position.set(64, 64);

接下来，创建一个animals容器，将它们全部组合在一起，如下所示：

var animals = new Container();

然后使用addChild对精灵添加到该组。

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

最后将组添加到舞台。

stage.addChild(animals);
renderer.render(stage);

（你知道，stage对象也是一个Container。它是所有Pixi sprites的根容器。）
这里是这段代码产生：



在该图像中看不到animals的是包含精灵的不可见组。



您现在可以将animals组视为一个单元。你可以认为a Container是一种没有纹理的特殊类型的sprite。

如果你需要一个包含所有子sprite的列表animals，使用它的children数组来找出。

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

这告诉你animals有三个精灵作为孩子。

由于该animals组就像任何其他的精灵，你可以改变它的x和y值alpha，scale和所有其他的精灵属性。您在父容器上更改的任何属性值将以相对方式影响子精灵。所以如果你设置组x和y位置，所有的子精灵将相对于组的左上角重新定位。如果你将animals's x和y位置设置为64 会发生什么？

animals.position.set(64, 64);

整组精灵会向右移动64像素，向下移动64像素。




该animals组还具有其自己的维度，其基于由包含的精灵占据的面积。你可以找到它width和 height值如下：

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

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

如果更改组的宽度或高度会发生什么？

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

所有的子sprite将缩放以适应这种变化。




你可以嵌套任意多的Containers在其他 Containers内你喜欢，创建深层次结构，如果你需要。然而，DisplayObject（像一个Sprite或另一个 Container）一次只能属于一个父母。如果你使用addChild一个sprite是另一个对象的子对象，Pixi会自动将其从当前父对象中删除。这是一个有用的管理，你不必担心。

2、本地和全局位置
当您添加一个精灵到Container，其x与y 位置相对于集团的左上角。这是sprite的本地位置例如，你认为猫的位置在这个图像是什么？



让我们来看看：

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

16？是! 这是因为猫从该组的左上角只偏移了16个像素。16是猫的本地位置。

精灵也有一个全局位置。全局位置是从舞台的左上角到精灵的锚点（通常是精灵的左上角）的距离。你可以在toGlobal方法的帮助下找到精灵的全局位置。就是这样：

parentSprite.toGlobal(childSprite.position)

这意味着你可以在animals 组内找到猫的全局位置，如下所示：

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

这给你一个x和y的80位这正是猫的相对于舞台的左上角的全球地位。

如果你想找到一个精灵的全局位置，但不知道精灵的父容器是什么？每个sprite有一个称为的属性parent，将告诉你sprite的父母是什么。如果你直接添加一个sprite到stage，那么 stage就会是sprite的parent。在上面的例子中，cat父母是animals。这意味着你可以通过编写代码来获得猫的全球位置：

cat.parent.toGlobal(cat.position);

即使你不知道当前的父容器是什么，它也会工作。

还有一种方法来计算全球位置！而且，它实际上是最好的方式，所以挺身而出！如果你想知道从画布的左上角到精灵的距离，并且不知道或不在乎精灵的父容器是什么，请使用 getGlobalPosition方法。这里是如何使用它来找到老虎的全球位置：

tiger.getGlobalPosition().x
tiger.getGlobalPosition().y

在我们使用的例子中，这将给你x和y值128。特别的getGlobalPosition是，它是高度精确的：它会给你精灵的准确的全球位置，只要它的本地位置变化。我要求Pixi开发团队添加这个功能专门用于游戏的准确碰撞检测。

如果要将全局位置转换为本地位置，该怎么办？您可以使用该toLocal方法。它的工作方式类似，但使用这种一般格式：

sprite.toLocal(sprite.position, anyOtherSprite)

使用toLocal找到一个精灵和任何其他子画面之间的距离。这里是如何找到老虎的本地位置，相对于刺猬。

tiger.toLocal(tiger.position, hedgehog).x
tiger.toLocal(tiger.position, hedgehog).y

个x值为32，y值为32.你可以在示例图片中看到，老虎的左上角是32像素，左边是刺猬的左上角。

3、使用ParticleContainer来组合精灵

Pixi有一个替代的，高性能的方法来组合sprite称为ParticleContainer（PIXI.ParticleContainer）。任何精灵内部的 ParticleContainer渲染将比如果他们在一个常规的2至5倍快 Container。这是一个伟大的性能提升游戏。

创建一个ParticleContainer这样：

var superFastSprites = new ParticleContainer();

然后使用addChild添加精灵到它，就像你会与任何普通Container。

如果你决定使用，你必须做一些妥协 ParticleContainer。一个精灵里面ParticleContainer只有几个基本属性： x，y，width，height，scale，pivot，alpha，visible-这就是它。此外，它包含的精灵不能有自己的嵌套的孩子。A ParticleContainer也不能使用Pixi的高级视觉效果，如过滤器和混合模式。每个都ParticleContainer可以只使用一个纹理（所以你必须使用spritesheet，如果你想要Sprite有不同的外观）。但是对于你获得的巨大的性能提升，这些妥协通常是值得的。您可以在同一个项目中同时使用 Containers和ParticleContainers，因此您可以微调优化。

为什么sprite在Particle Container这么快？因为sprite的位置是直接在GPU上计算的。Pixi开发团队正在努力在GPU上卸载尽可能多的精灵处理，因此，您使用的最新版本的Pixi可能ParticleContainer比我在这里描述的功能丰富得多。有关详细信息，请查看当前ParticleContainer 文档。

在您创建的位置ParticleContainer，您可以提供两个可选参数：容器可容纳的sprite的最大数量，以及一个options对象。

var superFastSprites = new ParticleContainer(size, options);

大小的默认值为15,000。所以，如果你需要包含更多的精灵，设置它更高的数字。选项参数是可以设置5布尔值的对象：scale，position，rotation，uvs和 alpha。的默认值position是true，但其余的人都设置为false。这意味着，如果你想改变rotation， scale，alpha，或uvs在精灵的ParticleContainer，你要设置这些属性true，就像这样：

var superFastSprites = new ParticleContainer(
  size, 
  {
    rotation: true,
    alpha: true,
    scale: true,
    uvs: true
  }
);

但是，如果你不认为你需要使用这些属性，保持它们设置false为挤出最大的性能。

有什么uvs选择？只有设置它，true如果你有粒子，当他们的动画时改变他们的纹理。（所有的精灵的纹理也需要在相同的tileset图像为这个工作。）

（注：UV映射是一个三维图形显示的术语，指的是x与y正被映射到三维表面纹理（图像）的坐标。U是x轴和V是y轴WebGL的已经使用。x，y和z对于三维空间定位，因此U 和V被选为代表x，并y为2D图像纹理。）