PixiJS V5 教學 (16) - Game HP

前言

前一篇開始我們開始有那麼一點像是在製作遊戲,所以接下來會來介紹一下遊戲中的血條該如何製作。

起手式

首先血條的製作我們必須自己繪畫,通常血條是一個矩形填滿,舉例來講仙境傳說的 HP 血條是這樣子(曝露年齡惹)

圖源:仙境傳說 & Google

若依照上方圖片來講的話,我們會使用到 幾何圖形 以及 文字

血條外框

首先我們要先製作血條的外框,這邊剛好在前兩篇有介紹,這邊我們將會使用 圓角矩形 drawRoundedRect

1
2
3
4
5
let graphics = new PIXI.Graphics();
graphics.beginFill(0x000000);
graphics.drawRoundedRect(0, 0, 300, 50, 20);
graphics.endFill();
container.addChild(graphics);

血條其實是兩個矩形疊在上面所呈現的,所以我們還要再寫一個圓角矩形

1
2
3
4
let graphics2 = new PIXI.Graphics();
graphics2.drawRoundedRect(0, 0, 300, 50, 20);
graphics2.endFill();
container.addChild(graphics2);

接下來你應該會看到一個類似血條的外框,但沒有填滿,所以接下來要替它填滿

1
graphics2.beginFill(0xFF0000);

這邊我們還會替 graphics2 新增一個屬性,我們將會透過該屬性來控制 graphics2 的長度

1
container.hpStatus = graphics2;

使用這種方式閱讀性會比較高,也比較清楚該如何控制血條寬度

1
container.hpStatus.width = 50;

而這個長度代表著你的血量百分比,也就是 drawRoundedRect 的第三個參數 300,若你希望血量全滿則輸入 300

1
container.hpStatus.width = 300;

參考文獻