Energy Bar Toolkit 教學

Energy Bar Toolkit 是一套支援 Unity 的血條製作套件，可快速製作遊戲的血條與進度條，功能強大且容易上手，快速作出多種樣式與功能的 Unity 血條與進度條。主要特色：

‧ 提供多種視覺效果

‧ 編輯模式檢視外觀

‧ 可附加在遊戲物件

‧ 可自訂血條的標籤

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

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

‧ 整合 Inspector 屬性編輯器

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

開啟資源商店將 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 種血條，當血量即將耗盡將會閃爍提示。

基本教學

本章的 Energy Bar Toolkit 教學介紹使用 uGUI 做為著色方法，製作遊戲角色的血條。

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

因為 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;