[Re:PixiJS - Day44] pixi-particles 粒子效果 2/2：实作应用

接续昨天的介绍，再加入一些控制与互动

• 今日 Demo / 参考效果：奇异博士

只要能用程序控制的，就可以拿来做动态与互动

• 昨天调整了 emitter 的位置，这次试着调整 rotation

用来测试的是 火焰效果：

emitter.rotation = 90;

很好，可以转！

emitter实体 的 rotation 单位是角度， PixiJS 里的 rotation 是弧度，单位不同需留意

既然可以转，接上滑鼠/手指触控座标就能调整角度

[Demo1]

步骤1： 使用 Math.atan2 方法，取得 滑鼠 / 手指触控 与画面中心的弧度
步骤2： 将弧度转成角度後 加上90 (emitter 实体的 rotation: 0 为 12点钟 位置)
步骤3： 将火焰效果的 rotation 指定为上述角度

hitArea.on("pointermove", (e) => {
  // 取得 滑鼠 / 手指触控 座标
  const pointerCoordinate = e.data.getLocalPosition(hitArea);

  const xDist = pointerCoordinate.x - app.screen.width * .5;
  const yDist = pointerCoordinate.y - app.screen.height * .5;

  // 留意使用方式为 Math.atan2(y, x); y 在前
  const radian = Math.atan2(yDist, xDist);
  // console.log("radian: ", radian, radian * (180 / Math.PI));
  
  emitter.rotation = radian * (180 / Math.PI) + 90;
});

• MDN Math.atan2 使用方法：
  回传 (x, y) 与 (0, 0) 的弧度，用法为 Math.atan(y, x); // y 在前

其他效果都是火焰效果预设，做起来不太困难又有感觉！

然後就想到了很喜欢的游戏 Overcooked

出处： Overcooked! 2 / Steam 社群 :: Overcooked! 2

刚好截图Gif上用到了三种粒子，都可以用 Pixi Particles 来做！

• 火焰
• 灭火器 (嗯...奶泡罐)
• 下雪

emitter 的重力会受到旋转影响吗？

• 这是一个喷泉粒子效果范例： Fountain

问题： 将 emitter 逆时钟旋转 90 度，结果为何？
选项1(左)： 整个容器旋转，结果为逆时钟转了90 度的喷泉
选项2(右)： 重力仍然向下，粒子向下发射

答案： 选项2(右)，维持相同重力，粒子向下发射

这样就能直接做很多有趣的事情了！

其他可以控制的项目：

• Class Emitter 说明页：
  emitter 的各种属性都可透过 API 更新，能做的效果就更多了！

移动 emitter：x 与 y 更新、旋转更新：

• emitter.startSpeed.value 可调整，速度变慢後会觉得变小圈与密集
  (上图: 速度600 / 下图: 速度200)

// 用法：直接指派数值即可
emitter.startSpeed.value = 200;

有点有棱有角的感觉：

[ Demo2 ]

因为只有一个 emitter，即使一秒 60FPS，跑再快也不会 平均落在 360 度 上

[ Demo3 ] - 3个 emitter！有棱有角的感觉好多了

由於 gif 图会有些格数不足的感觉，直接点开 Demo 较准确

没提到的部分：

• pixi-particles 也可以使用连续图或 sprite sheet 做粒子效果

今日心得：
Pixi-Particles 能玩的还有很多，也许用法上不会差异太多
效果组合与搭配适合的主题会更有感