PixiJS V5 教學 (20) - 碰撞邊界(2)

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
接下來我們可以試著來製作撞到牆壁後出現數字的效果。

前言

接下來我們可以試著來製作撞到牆壁後出現數字的效果。

起手式

在這一篇將會使用到的範例程式碼是前一篇的程式碼

撞擊效果

通常撞擊效果大多都是類似星形的圖案，所以我們可以使用幾何圖形中的 drawStar() 來繪畫，由於我們會透過 if(status === 'top' || status === 'bottom') { ... } 來判斷目前碰到的是上邊界還是下邊界，然後再透過 sprite.vy *= -1; 來反轉結果，所以我們就可以建立一個 function 叫做 hurtFu 並將 status 傳入，當圖形碰到上邊界時才出現文字訊息以及星形圖案，所以前面就很簡單直接看程式碼就可以了

1
2
3
4
5
function hurtFu(status) {
  if(status === 'top') {
    ...
  }
}

接下來這邊才是正式開始撰寫的程式碼，由於每一次碰到上邊界就會繪畫一個新的圖形以及文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const containerEffect  = new PIXI.Container();
const graphics = new PIXI.Graphics();

const startText = new PIXI.Text('1000');

graphics.lineStyle(5, 0x000000, 1);

graphics.drawStar(0, 0, 10, 100);
graphics.endFill();

graphics.x = 150;
graphics.y = 150;
startText.x = 120;
startText.y = 120;

containerEffect.addChild(graphics);
containerEffect.addChild(startText);

app.stage.addChild(containerEffect);

接下來我們會希望傷害出現之後會自動消失，那麼就會在建立一個 function 並將 container 傳入到另一個地方做處理，但是過程將會使用 alpha 並搭配 setInterval 來達到一個漸變效果，否則直接清除的使用者體驗很奇怪

1
2
3
4
5
6
7
8
9
function removeContainer(item) {
  const s = setInterval(() => {
    item.alpha -= 0.05; // 減少透明度
  },100);
  setTimeout(() => {
    clearInterval(s);
    app.stage.removeChild(item);
  },10000); // 十秒後直接清除這個 container 避免結構太多整個塞在 PIXI 中導致效能低落
}

最後成果就可以看到成果了

參考文獻