PixiJS V5 教學 (17) - Text+HP

發表於 2020-06-01 分類於 JavaScript

Google AD

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

前一篇我們學會如何製作血條，但是文字呢?所以這一篇就來介紹如何補上文字~

前言

前一篇我們學會如何製作血條，但是文字呢?所以這一篇就來講簡單一點的如何補上文字~

前言回顧

我們先回顧一下我們做了那些事情

製作兩個圓角矩形 drawRoundedRect 並重疊在上面
替血條增加寬度

文字

接下來文字的加入也是很簡單，也是重疊在上面

const HpText = new PIXI.Text('300/300', {
  fontFamily: 'Microsoft JhengHei',
  fontSize: 16,
  fill: [0xFFFFFF],
  align: 'center'
});
HpText.x = 120;
HpText.y = 15;
container.addChild(HpText);

接下來由於通常受到傷害都會減少一些 HP，所以這邊要針對一些地方做調整改用變數傳入

let nowHp = 200;
let graphics2 = new PIXI.Graphics();
graphics2.beginFill(0xFF0000);
graphics2.drawRoundedRect(0, 0, nowHp, 50, 20); // 改用變數傳入
graphics2.endFill();
container.addChild(graphics2);

const HpText = new PIXI.Text(`${nowHp}/300`, {  // 改用變數傳入
  fontFamily: 'Microsoft JhengHei',
  fontSize: 16,
  fill: [0xFFFFFF],
  align: 'center'
});
container.addChild(HpText);
container.hpStatus.width = nowHp;

最後我們可以使用 Pixi 中所謂的遊戲循環來達到受傷損血的效果，此外也會針對 Pixi Text 更新目前血量

app.ticker.add(() => {
  container.hpStatus.width = nowHp -= 1;
  HpText.text = `${nowHp}/300`;
  
  if (nowHp === 0) {
    nowHp = 300;
  }
});

參考文獻

血條製作