PixiJS V5 教學 (17) - Text+HP

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);

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;

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