iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 43

[Re:PixiJS - Day43] pixi-particles 粒子效果 1/2:plugin 安裝與開始使用

來到這次系列最後想講的主體:粒子效果

PixiJS 實現粒子效果有兩種方式:

  • ParticleContainer
  • pixi-particles

主要討論 pixi-particles,不過還是會介紹一些 ParticleContainer


ParticleContainer:

[ ParticleContainer 說明頁 ]

  • 放入 ParticleContainer 裡的 sprite 與粒子只能使用 基本的變形positionscalerotationtint(v4.5.6起),因此速度較快
  • 無內建發射器,需手動處理所有粒子效果

官方 Demo (密集注意):DEMOS-BASIC / Particle Container


pixi-particles:

pixi-particles ,PixiJS 官方另一個專案

  • 有說明文件
  • 有粒子編輯器可使用,可輸出調整好的 JSON 檔給開發者
  • 有現成範例可參考如何實作


pixi-particles 說明頁:

  • 文件結構與 PixiJS 本身不太相同
  • 說明頁與 Pixi Particles 主頁幾乎一樣,多了右方各個類別與方法的說明

PixiParticlesEditor

相當實用的一頁,可直接看參數的影響


開始實作會遇到的問題

- 安裝 pixi-particles:

Installation

  • PixiParticles can be installed or NPM.
npm install pixi-particles
  • 沒有提到透過 cdn 安裝
  • cdnjs沒有 pixi-particles,但在 jsdelivr 上有

<script src="https://cdn.jsdelivr.net/npm/pixi-particles@4.3.0/dist/pixi-particles.js"></script>

或者,也可透過範例直接找到 pixi-particles.js 這隻檔案


- 無法直接使用 pixi-particles 範例:

範例上的程式碼已封裝成 ParticleExample 類別

雖然不到看不懂,但無法直接使用


1. 直接從說明開始改寫:

pixi-particles 說明頁:

  • PIXI.particles.Emitter 的範例程式,但也無法直接使用

無法直接做成 Demo,缺少了幾樣東西:

  • 沒有初始化 PIXI.Application,只提到了怎麼建立 PIXI.particles.Emitter
  • 缺少 container
  • 缺少 image.jpg
  1. 沒有初始化 PIXI.Application,那就自己建一個:
onst app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

就是最基本的 建立PIXI.Application

  1. 沒有 container,建立一個並加到場景上
let emitterContainer = new PIXI.Container();
app.stage.addChild(emitterContainer);
  1. 粒子圖

還行,先從Dmoe 上複製下來就好,是個放射狀半透明的粒子

等等,火焰用的粒子本體是這個?

  • 這個範例實際上用了 particle.png(粒子狀) 與 Fire.png(片狀) 兩種

沒問題的話可看到在位置 (0, 0) 放射狀,顏色從紅到橘色的粒子效果 (僅發射一次)
[ Demo1 ]


2. 繼續調整與接上 PixiParticlesEditor 的設定:

  • 說明頁使用 requestAnimationFrame 更新
// Update function every frame
var update = function () {

    // Update the next frame
    requestAnimationFrame(update);

    var now = Date.now();

    // The emitter requires the elapsed
    // number of seconds since the last update
    emitter.update((now - elapsed) * 0.001);
    elapsed = now;

    // Should re-render the PIXI Stage
    // renderer.render(stage);
};
// Start the update
update();
  • 改寫為透過 app.ticker 更新
app.ticker.add((delta) => {
    var now = Date.now();
    // The emitter requires the elapsed
    // number of seconds since the last update
    emitter.update((now - elapsed) * 0.001);
    elapsed = now;
});
  • 接上 PixiParticlesEditor:

PixiParticlesEditor 預設是一段淺藍到深藍的放射狀例子效果

點了 Download 後會下載一個 .json 檔,
將其內容放入 PIXI.particles.Emitter() 的建構式即可

[ Demo2 ]

3. 更改中心點:

ParticleExample.js 上可看到定位更新粒子位置的方法

  • 初始位置在舞台中心
  • 滑鼠放開時,粒子位置更新到滑鼠座標上
// Center on the stage
this.emitter.updateOwnerPos(window.innerWidth / 2, window.innerHeight / 2);

// Click on the canvas to trigger
canvas.addEventListener('mouseup', (e) =>
{
  if (!this.emitter) return;

  // right click (or anything but left click)
  if (e.button)
  {
    if (testContainers)
    {
      if (++parentType >= 3) parentType = 0;
      const oldParent = emitterContainer;
      [emitterContainer, containerName] = getContainer();
      if (containerType) containerType.innerHTML = containerName;
      this.stage.addChild(emitterContainer);
      this.emitter.parent = emitterContainer;
      this.stage.removeChild(oldParent);
      oldParent.destroy();

      if (this.containerHook)
      {
        this.containerHook();
      }
    }
  }
  else
  {
    this.emitter.emit = true;
    this.emitter.resetPositionTracking();
    this.emitter.updateOwnerPos(e.offsetX || e.layerX, e.offsetY || e.layerY);
  }
});

調整我們的程式碼:

  • 設定粒子初始位置,放置於畫面中間
emitter.updateOwnerPos(app.screen.width / 2, app.screen.height / 2);
  • 畫面縮放時,重設粒子位置
window.onresize = function (event) {
    var w = window.innerWidth;
    var h = window.innerHeight;

    app.view.style.width = w + "px";
    app.view.style.height = h + "px";
    app.renderer.resize(w, h);

    emitter.resetPositionTracking();
    emitter.updateOwnerPos(app.screen.width / 2, app.screen.height / 2);
};
onresize();

[ Demo3 ]

完成基本準備!


大致上的準備工作差不多到這,接著

  • 就能根據 PixiParticlesEditor 放上自己想要的效果了
  • 也可根據 example 來做接著想做的事情

今日心得:

覺得 pixi-particles 的起步並不容易開始,希望這篇有幫到大家


上一篇
[Re:PixiJS - Day42] dat.gui 小技巧 .name() / .listen() / .remember(obj)
下一篇
[Re:PixiJS - Day44] pixi-particles 粒子效果 2/2:實作應用
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言