前情回顾

上回链接：《2D WebGL renderer Pixi.js v4 入门【第三回】》

精灵制作篇完结了，在前面我们尝试制作了一些（无限）动画呢。

然后还制作了根据方向键移动的精灵。

精灵的编组

所谓编组就是制作一个新的Container()，将出现在同一场景下的东西集中起来传到renderer中。

使得精灵的管理变得更加便捷了呢！

var id = resources["images/animals.json"].textures;

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

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

// 老虎
var tiger = new Sprite(id["tiger.png"]);

// 被称之为动物的类别
var animals = new Container();

// 把动物们塞进去
animals.addChild(cat);
animals.addChild(hedgehog);
animals.addChild(tiger);

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

<点击查看效果>

编组的animals贴付在了左上角。

也就是说每个小图的定位都基于animals的左上角了。

animals.position.set(64, 64);

<点击查看效果>

就算调整animals的位置，其内部内容的重叠情况也不会发生改变。

编组之后，animals在canvas内的位置就犹如local和global一样的关系。

所以这里

console.log(cat.x);
> 16

出现的是最初设定animals内的数值。（也就是说这里表示的是local的数值。）

cat.position.set(16, 16);

//parentSprite.toGlobal(childSprite.position)

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

使用父级精灵的toGlobal function的话就能知道相对于整体的绝对定位。

如果不知道父级精灵的名字，也可以如下面这样写。

console.log(cat.parent.toGlobal(cat.position));

// 也可以这么写
console.log(tiger.getGlobalPosition().x);
console.log(tiger.getGlobalPosition().y);

既然有toGlobal function，那么也就会有toLocal function。

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

console.log(tiger.toLocal(tiger.position, hedgehog).x);
console.log(tiger.toLocal(tiger.position, hedgehog).y);

上面的代码是老虎和刺猬之间的距离。

这在检测精灵距离的时候非常有用。

变更为粒子容器，使速度更上一层楼

至今为止我们一直不抱疑问去使用PIXI.Container()，其实还有一个比前者快2倍甚至5倍的Container（容器）。这就是PIXI.particles.ParticleContainer

为什么会更快，是因为设置比普通的Container更少。根据指定设置(position, scale, rotation)，将使用细化从而剔除不必要的运算。

制作ParticleContainer的时候，事先通过参数和设置来指定精灵的最大数。

var sprites = new PIXI.particles.ParticleContainer(10000, {

 scale: true,

 position: true,

 rotation: true,

 uvs: true,

 alpha: true

});

这里的设置如果全部设置为flase的话速度将会更快。

<点击查看效果>

这次对于精灵的编组进行了各种研究，在下回我们将说一下和精灵没有太大关系的东西，所以就先到这里。

我们下回见

本文翻译自：2D WebGL renderer Pixi.js v4【連載第四回】
翻译者：广树
转载请注明出处！

《2D WebGL renderer Pixi.js v4 入门【第五回】》