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

前言

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

起手式

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

撞擊效果

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

function hurtFu(status) {
  if(status === 'top') {
    ...
  }
}

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

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 來達到一個漸變效果，否則直接清除的使用者體驗很奇怪

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

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

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

前言

起手式

撞擊效果

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

起手式

撞擊效果

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

PixiJS V5 教學 (39) - 音樂

PixiJS V5 教學 (38) - TexturePacker

PixiJS V5 教學 (37) - 加入 stats.js

分享這篇文章

留言