Energy Bar Toolkit 教學

Energy Bar Toolkit 是一套 Unity 血條製作套件,功能強大且易用,快速製作多種樣式與功能的 Unity 血條與進度條。主要特色:

‧ 提供多種視覺效果

‧ 可附加在遊戲物件

‧ 可自訂血條的標籤

‧ 可輕鬆設定在 3D 空間的位置

‧ 支援單機與行動裝置遊戲製作

相關連結 [官方網站] [展示網頁] [線上文件]

 

開啟資源商店將 Energy BarTool kit 下載到遊戲專案。

匯入 Energy Bar Toolkit 資源包後將會顯示更新訊息,提醒升級 Energy Bar Toolkit 版本時記得備份專案。

 

展示場景

開啟 [ Energy Bar Toolkit > Example ] 資料夾,即可找到 6 個展示場景。

Example 1 - uGUI Bars 展示以 uGUI 製作的各種血條樣式。

Example 2 - Instantiate 動態生成的角色,下方顯示血量。

Example 3 - uGUI Follow Objects - Screen Space 下方顯示血量。

Example 4 - uGUI Follow Objects - World Space 上方顯示血量。

Example 5 - Repeated Bar Icon Animation 血量的圖示動畫。

Example 6 - Sliced Bar 提供 3 種血條,當血量即將耗盡將會閃爍提示。

 

基本教學

首先執行 [ File > New Scene ] 建立一個新的遊戲場景,再執行 [ GameObject > UI > Canvas ] 建立新的 Canvas 畫布。

因為 Energy Bar Toolkit 建立的是 UI 物件,若場景缺少畫布將會出現以下提示訊息。

執行 [ GameObject > UI > Energy Bar Toolkit > Filled Bar ] 建立一個 Progress bar 進度條,可透過 Rect Transform 調整外觀。

現在透過 Inspector 屬性編輯器可以看到 Energy Bar 元件與 Filled Renderer UGUI 元件,用於設定 Value Current 目前數值、Value Min 最小值、Value Max 最大值。

 

 

改變血條外觀

下方的 Appearance 可設定血條的外觀。

Bar Color Type = Solid(單色)、Gradient(視血量變化而呈現不同的色彩)

Grow Direction 數值增加時的方向(預設值 Left To Right 從左而右)

Effects
- Smooth Effect 動態平滑效果。
- Burn
- Blink 閃爍提示效果。
- Tiled
- Follow 開啟跟隨後可以設定跟隨的物件,通常是遊戲角色。

 

 

加入文字標籤

執行 [ GameObject > UI > Text ] 加入文字,透過 Inspector 屬性編輯器可以調整文字的顏色或尺寸。

將 Hierarchy 階層視窗的 Text 文字物件拖曳到 Filled Bar 的 Label 欄位,遊戲畫面上即可看到進度條上顯示數值。

您可以透過下面的 Format 修改顯示的格式,語法可參閱下方的 Label Format Help 內容。

 

撰寫互動腳本

Scripting Basics 連結

使用 Energy Bar Toolkit 製作 Unity 血條只需要撰寫少量的腳本,例如玩家補血或被攻擊時,必須撰寫互動腳本。

Basic Access

若使用 UGUI 或 NGUI 需要存取稱為 EnergyBar 的元件。

EnergyBar bar = barGameObject.GetComponent<EnergyBar>();

設定血條數值最簡單的方法是使用 ValueF 屬性,可接受從 0.0 到 1.0 的數值 regardless of min and max value of bar. Setting bar value as float is helpful when minimum and maximum bar value are not important and your bar must be filled to specified % value.

bar.ValueF = 0.7f;

Of course if you want to set bar value as raw integer you can do it too. You will do this when minimum and maximum value are important and so current value must be precise; the number of health hearts for instance.

bar.valueCurrent = 25;


設定最小值與最大值

您可能需要調整血條的最小值與最大值,只需設定 valueMin 與 valueMax 欄位,例如遊戲角色升級時需要用到,例如:

bar.valueMin = 0;

bar.valueMax = 10;

 

匯入 Characterrs 角色與 ParticleSystems 粒子系統資源包,藍色標示的項目是以下教學使用的資源。

製作炸彈與補血的遊戲物件。加入玩家的 HP 血條。

例如 [ Tools > Energy Bar Toolkit > uGUI > Create Sliced Bar ]

 

使用錨點對齊、移動工具、縮放工具調整血條的位置。您也可以嘗試使用不同的血條外觀。

 

撰寫炸彈物件的腳本,命名為「Bomb」,當玩家接觸炸彈時,動態生成爆炸的粒子效果,然後刪除炸彈物件。

同時透過 GetComponent 取得玩家角色的 playerHP 扣除設定的數值,此時尚未建立 PlayerStats 腳本,請忽略錯誤。

給玩家角色使用的 PlayerStats 腳本。

將 Bomb.cs 腳本套用到炸彈物件。設定玩家角色的 Tag 標籤。

 

製作第一人稱的玩家角色,增加與減少 HP 並顯示的範例:

 

製作跟隨角色移動的血條

Sha /ExampleTextures