PixiJS V5 教學 (16) - Game HP

發表於 2020-05-25 分類於 JavaScript

Google AD

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

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

起手式

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

圖源:仙境傳說 & Google

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

血條外框

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

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

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

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;

參考文獻

血條製作