PixiJS V5 教學 (25) - Dust

前言

接下來認識一下粒子效果的部分,在這一篇將會直接介紹使用套件 Dust 來製作粒子效果。

粒子效果

在官方的 範例 Particle Container (有密集恐懼症的請慎點) 有提供一個粒子效果

官方提供了 new PIXI.ParticleContainer 讓我們可以達到粒子的效果,但是普遍開發時是比較少見使用這種方式,當然不是沒有,所以這邊一開始會使用 plugin 來製作爆炸、火焰、星星等等這類型的特效,其主要原因是使用原生的方式去製作是比較麻煩的。

Dust

這是一個相當棒的套件,在原始碼中他就是使用了 PIXI 的 ParticleContainer 方法來製作,我們在一開始的原始碼中前面就可以看到相關的程式

1
2
3
4
if (renderingEngine.ParticleContainer) {
this.Container = renderingEngine.Container;
this.renderer = "pixi";
}

只是 Dust 它簡化了許多流程與步驟,可以讓我們更簡易更方便的製作出粒子效果。

粒子效果

而它主要會使用到的參數為以下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
d.create(
250, // x 起始座標
250, // y 起始座標
() => new PIXI.Sprite( // 粒子效果渲染
PIXI.Texture.from('https://i.imgur.com/UEZBrqp.png'),
),
starParticleContainer, //粒子容器
20, // 粒子數量
0, // 是否重力,若為 1 粒子會往下掉,0 則為無重力
false, // 隨機間隔 (感覺不出來)
0, 9.28, // 最小/最大角度,角度若越小則粒子擴散的角度越小
30, 90, // 最小/最大尺寸,粒子的大小
1, 3 // 最小/最大速度
)

此外 Dust 還有一個東西叫做粒子發射器,通常若你只使用 create,你會發現粒子只會出現一次,若你希望可以一直重複出現那麼你就必須搭配粒子發射器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let particleStream = d.emitter(
100, // 毫秒,1000 代表一秒發射一次
() => d.create(
250, //x 起始坐标
250, //y 起始坐标
() => new PIXI.Sprite( //Sprite function
PIXI.Texture.from('https://i.imgur.com/UEZBrqp.png'),
// PIXI.utils.TextureCache['./star.png'],
),
starParticleContainer, //粒子的容器
20, //粒子数
0,//重力
false,//随机间隔
0, 9.28,//最小/最大角度
30, 90,//最小/最大尺寸
1, 3//最小/最大速度
)
)

接下來就可以透過 particleStream.play() 以及 particleStream.stop() 來達到發射與停止的效果。

以下範例為 五秒後發射粒子,並於十秒後停止粒子。

參考文獻