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;

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

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