导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

2D WebGL renderer Pixi.js v4 入门【第四回】

作者:广树·时间:2018-08-31 13:36:36·分类:JavaScript/jQuery/Vue

前情回顾

上回链接: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 入门【第五回】

#pixi.js
侧边栏
最新评论
广树
2024-06-13
@老张博客:🤭没有被罚款喔,请大佬放心
老张博客
2024-06-13
翘班不怕被罚款呀
广树
2024-06-12
@YuanMoe:不,你已经没有沙发了
YuanMoe
2024-06-12
沙发
广树
2024-06-12
@mikusa:是的,整活类作品还是要靠动画这种形式。
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告