导航

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

侧边栏
热门文章
1博文
如何使用Docker一键部署猛男自用的维基萌博客lite版
热度
390
2推文
去年换的NURO手机卡居然已经满9个月了,时间可过得真快呀! 在顺利领取13000日元的返现后把套餐从每个月2699日元20GB的套餐换成了990日元5GB套餐。毕竟这9个月以来我几乎都是2~7GB左右的流量使用,这20GB真的太奢侈了。在年底还赠送了一堆流量叠到了80GB是真的浪费😅。 不过对比20GB的套餐5GB的套餐不仅流量低了,速度其实也低了。前者最高可以有100Mbps左右的速度后者就只有30Mbps左右了,在中午高峰时期倒是都差不多只有个位数。 就目前来说对于我这种轻度手机用户已经非常够用了。大流量反而因为不用就浪费的心态养成了上下班刷社交媒体软件的坏习惯,现在换回小流量后又可以静下心来读小说和漫画啦! 截图是新套餐在不同时间的测试结果。
热度
285
3页面
程序员老黄历&求签
热度
273
4博文
让智能AI(waifulabs)来为你生成老婆吧!
热度
169
5页面
游戏
热度
117
6推文
一晃眼正式进入2025年的蛇年春节了呢。祝各位大佬新春快乐!
热度
104
7博文
记录第一次在日本进行携号转网(MNP)
热度
104
8博文
探访《蜡笔小新》老家——春日部游记
热度
91
9博文
《泰拉瑞亚》1.4 突然无法拾取/捡取物品怎么办?
热度
91
10博文
Live2d模型合集分享 | FaceRig | 海王星系列 | 初音未来 | 雷姆 | 凉风青叶 | 尼禄 | 薇尔莉特 | 小埋 | 樱花庄 | 玉藻前
热度
91
最新评论
广树管理员
2025-02-07 19:30
@Xia:这个暂时没有写成配置项,有这个需求吗?
Xia
2025-02-07 18:56
广树大大,我有个小问题,维基萌博客系统,邮件的发件人和标题该如何设置? ∠( ᐛ 」∠)_
火喵酱
2025-02-07 18:54
@广树:开心开心!!
广树管理员
2025-02-07 18:46
@火喵酱:尽量满足大佬的需求
火喵酱
2025-02-07 18:40
期待支持armv7,现在只有amd64没法用qaq
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

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

donate.png

1210 x 50(蓝底).png

cloudcone