PixiJS V5 教學 (25) - Dust

前言

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

粒子效果

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

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

Dust

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

if (renderingEngine.ParticleContainer) {
  this.Container = renderingEngine.Container;
  this.renderer = "pixi";
}

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

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

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，你會發現粒子只會出現一次，若你希望可以一直重複出現那麼你就必須搭配粒子發射器

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() 來達到發射與停止的效果。

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

參考文獻

• dust
• 学习 PixiJS — 粒子效果
• [PixiJS - Day-22] PixiJS 粒子效果