[Re:PixiJS - Day43] pixi-particles 粒子效果 1/2：plugin 安装与开始使用

来到这次系列最後想讲的主体：粒子效果

PixiJS 实现粒子效果有两种方式：

ParticleContainer
pixi-particles

主要讨论 pixi-particles，不过还是会介绍一些 ParticleContainer

ParticleContainer：

[ ParticleContainer 说明页 ]

放入 ParticleContainer 里的 sprite 与粒子只能使用 基本的变形如 position、scale、rotation 与 tint(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/[email protected]/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

没有初始化 PIXI.Application，那就自己建一个：

onst app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

就是最基本的 建立PIXI.Application

没有 container，建立一个并加到场景上

let emitterContainer = new PIXI.Container();
app.stage.addChild(emitterContainer);

粒子图

还行，先从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 ]