PixiJS V5 教學 (16) - Game HP
前言
前一篇開始我們開始有那麼一點像是在製作遊戲,所以接下來會來介紹一下遊戲中的血條該如何製作。
起手式
首先血條的製作我們必須自己繪畫,通常血條是一個矩形填滿,舉例來講仙境傳說的 HP 血條是這樣子(曝露年齡惹)
若依照上方圖片來講的話,我們會使用到 幾何圖形 以及 文字。
血條外框
首先我們要先製作血條的外框,這邊剛好在前兩篇有介紹,這邊我們將會使用 圓角矩形 drawRoundedRect
1 | let graphics = new PIXI.Graphics(); |
血條其實是兩個矩形疊在上面所呈現的,所以我們還要再寫一個圓角矩形
1 | let graphics2 = new PIXI.Graphics(); |
接下來你應該會看到一個類似血條的外框,但沒有填滿,所以接下來要替它填滿
1 | graphics2.beginFill(0xFF0000); |
這邊我們還會替 graphics2
新增一個屬性,我們將會透過該屬性來控制 graphics2
的長度
1 | container.hpStatus = graphics2; |
使用這種方式閱讀性會比較高,也比較清楚該如何控制血條寬度
1 | container.hpStatus.width = 50; |
而這個長度代表著你的血量百分比,也就是 drawRoundedRect
的第三個參數 300
,若你希望血量全滿則輸入 300
1 | container.hpStatus.width = 300; |