前言
前一篇我們學會如何製作血條,但是文字呢?所以這一篇就來講簡單一點的如何補上文字~
前言回顧
我們先回顧一下我們做了那些事情
- 製作兩個圓角矩形
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; } });
|
參考文獻