PixiJS V5 教學 (17) - Text+HP

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

前言

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

前言回顧

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

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

文字

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

1
2
3
4
5
6
7
8
9
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，所以這邊要針對一些地方做調整改用變數傳入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 更新目前血量

1
2
3
4
5
6
7
8
app.ticker.add(() => {
  container.hpStatus.width = nowHp -= 1;
  HpText.text = `${nowHp}/300`;
  
  if (nowHp === 0) {
    nowHp = 300;
  }
});

參考文獻