PixiJS V5 教學 (20) - 碰撞邊界(2)
前言
接下來我們可以試著來製作撞到牆壁後出現數字的效果。
起手式
在這一篇將會使用到的範例程式碼是前一篇的程式碼
撞擊效果
通常撞擊效果大多都是類似星形的圖案,所以我們可以使用幾何圖形中的 drawStar()
來繪畫,由於我們會透過 if(status === 'top' || status === 'bottom') { ... }
來判斷目前碰到的是上邊界還是下邊界,然後再透過 sprite.vy *= -1;
來反轉結果,所以我們就可以建立一個 function 叫做 hurtFu
並將 status
傳入,當圖形碰到上邊界時才出現文字訊息以及星形圖案,所以前面就很簡單直接看程式碼就可以了
1 | function hurtFu(status) { |
接下來這邊才是正式開始撰寫的程式碼,由於每一次碰到上邊界就會繪畫一個新的圖形以及文字
1 | const containerEffect = new PIXI.Container(); |
接下來我們會希望傷害出現之後會自動消失,那麼就會在建立一個 function 並將 container 傳入到另一個地方做處理,但是過程將會使用 alpha
並搭配 setInterval
來達到一個漸變效果,否則直接清除的使用者體驗很奇怪
1 | function removeContainer(item) { |
最後成果就可以看到成果了