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

前言

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

起手式

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

撞擊效果

通常撞擊效果大多都是類似星形的圖案,所以我們可以使用幾何圖形中的 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 中導致效能低落
}

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

參考文獻