iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

2
Modern Web

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

[Re:PixiJS - Day44] pixi-particles 粒子效果 2/2:實作應用

接續昨天的介紹,再加入一些控制與互動


只要能用程式控制的,就可以拿來做動態與互動

  • 昨天調整了 emitter位置,這次試著調整 rotation

用來測試的是 火焰效果

emitter.rotation = 90;

很好,可以轉!

emitter實體 的 rotation 單位是角度, PixiJS 裡的 rotation 是弧度,單位不同需留意


既然可以轉,接上滑鼠/手指觸控座標就能調整角度

[Demo1]

步驟1: 使用 Math.atan2 方法,取得 滑鼠 / 手指觸控 與畫面中心的弧度
步驟2: 將弧度轉成角度後 加上90 (emitter 實體的 rotation: 012點鐘 位置)
步驟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 能玩的還有很多,也許用法上不會差異太多
效果組合與搭配適合的主題會更有感


上一篇
[Re:PixiJS - Day43] pixi-particles 粒子效果 1/2:plugin 安裝與開始使用
下一篇
[Re:PixiJS - Day45] 不同時期的學習 PixiJS 的過程與真完賽心得
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言