分別使用IMGUI和UGUI實現血條的預製設計

血條（Health Bar）的預製設計。具體要求如下：

• 分別使用 IMGUI 和 UGUI 實現
• 使用 UGUI，血條是遊戲物件的一個子元素，任何時候需要面對主攝像機
• 分析兩種實現的優缺點
• 給出預製的使用方法

IMGUI實現

思路：用HorizontalScrollbar（水平滾動條）的寬度作為血條的顯示值。
直接上程式碼：

using UnityEngine;

public class IMGUI : MonoBehaviour
{
    // 當前血量
    public float health = 0.0f;
    // 增/減後血量
 

    private float resulthealth;

    private Rect HealthBar;
    private Rect HealthUp;
    private Rect HealthDown;

    void Start()
    {
        //血條區域
        HealthBar = new Rect(50, 50, 200, 20);
        //加血按鈕區域  
        HealthUp = new Rect(105, 80, 40, 20);
        //減血按鈕區域
        HealthDown = new Rect(155
 
, 80, 40, 20);
        resulthealth = health;
    }

    void OnGUI()
    {
        if (GUI.Button(HealthUp, "加血"))
        {
            resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
        }
        if (GUI.Button(HealthDown, "減血"))
        {
            resulthealth = resulthealth - 0.1f
 
 < 0.0f ? 0.0f : resulthealth - 0.1f;
        }

        //插值計算health值，以實現血條值平滑變化
        health = Mathf.Lerp(health, resulthealth, 0.05f);

        // 用水平滾動條的寬度作為血條的顯示值
        GUI.HorizontalScrollbar(HealthBar, 0.0f, health, 0.0f, 1.0f);
    }
}

裡面多了一個resulthealth，是為了用Mathf.Lerp插值計算health，以實現血條值平滑變化，而不是突變。

寫好指令碼後，在層次檢視，Create -> Create Empty，重新命名為IMGUI-H-Bar，然後將IMGUI.cs指令碼拖到該物件，執行即可。執行成功後，在Assets中建立新資料夾Perfabs，將IMGUI-H-Bar物件拖到該資料夾中，即可生成預製體。

UGUI實現

因為要求使用 UGUI時，血條是遊戲物件的一個子元素，所以需要先建立一個遊戲物件，這裡匯入資源裡面的Characters，並構建基本場景：

• 選單 Assets -> Import Package -> Characters，匯入資源
• 在層次檢視，Create -> 3D Object -> Plane，新增 Plane 物件
• 資源檢視展開 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefabs
• 將 ThirdPersonController 預製拖入場景，改名為 Ethan
• 檢查以下屬性
  
  • Plane 的 Transform 的 Position = (0,0,0)
  • Ethan 的 Transform 的 Position = (0,0,0)，Rotation = (0,180,0)
  • Main Camera 的 Transform 的 Position = (0,1,-10)
• 執行檢查效果

這樣就完成了資源的匯入，接下來就是給人物加上血條，步驟如下：

• 選擇 Ethan 用上下文選單（滑鼠右鍵） -> UI -> Canvas，新增畫布子物件
• 選擇 Ethan 的 Canvas，用上下文選單 -> UI -> Slider，新增滑條作為血條子物件
• 選擇 Ethan 的 Canvas，在 Inspector 檢視
  
  • 設定 Canvas 元件 Render Mode 為 World Space
  • 設定 Rect Transform 元件的 (PosX, PosY, Width, Height) 為 (0,2,160,20)
  • 設定 Rect Transform 元件的 Scale（x, y）為 (0.01,0.01)
• 展開 Slider
  
  • 選擇 Handle Slider Area，禁灰（disable）該元素
  • 選擇 Background，禁灰（disable）該元素
  • 選擇 Fill Area 的 Fill，修改 Image 元件的 Color 為 紅色
• 選擇Slider，在 Inspector 檢視
  
  • 設定 Rect Transform 元件的Rotation = (0,180,0)
  • 設定Slider 元件的 MaxValue 為 1
• 執行檢查結果，發現人物運動時（用方向鍵控制），血條會跟著人物旋轉，沒有面對主攝像機
• 故需要給 Canvas 新增以下指令碼 LookAtCamera.cs

using UnityEngine;

public class LookAtCamera : MonoBehaviour
{
    void Update()
    {
        this.transform.LookAt(Camera.main.transform.position);
    }
}

將指令碼拖入Canvas物件，執行，這個時候血條就會一直面向主攝像機了。

接下來考慮血條值的變化，為了方便，利用IMGUI.cs中的按鈕來互動。
先在指令碼中新增一個變數：

public Slider healthSlider;

在OnGUI函式中設定Slider的值：

healthSlider.value = health;

改完後，把Canvas的子物件Slider拖入IMGUI-H-Bar物件的IMGUI.cs元件中的HealthSlider屬性，執行，點選按鈕就能實現兩條血條同時增減血量。
同樣，將Canvas物件拖入Perfabs資料夾，即可生成預製。

兩種實現的優缺點

IMGUI

優點：

• IMGUI 的存在符合遊戲程式設計的傳統
• 在修改模型，渲染模型這樣的經典遊戲迴圈程式設計模式中，在渲染階段之後，繪製 UI 介面無可挑剔
• 這樣的程式設計既避免了 UI 元素保持在螢幕最前端，又有最佳的執行效率，一切控制掌握在程式設計師手中

缺點：

• 傳統程式碼驅動的 UI 面臨效率低下
• 難以除錯等

按 Unity 官方說法，IMGUI 主要用於以下場景：

• 在遊戲中建立除錯顯示工具
• 為指令碼元件建立自定義的 Inspector 面板。
• 建立新的編輯器視窗和工具來擴充套件 Unity 環境。

IMGUI系統通常不打算用於玩家可能使用並與之互動的普通遊戲內使用者介面。為此，應該使用 Unity 的基於 GameObject 的 UGUI 系統。

UGUI

• 所見即所得（WYSIWYG）設計工具，設計師也能參與程式開發
• 支援多模式、多攝像機渲染
• UI 元素與遊戲場景融為一體的互動
• 面向物件的程式設計

預製的使用方法

• 直接將IMGUI-H-Bar預製體拖入場景
• 按照前面提到的方法匯入資源，用預製體生成遊戲物件Ethan，構建基本場景
• 將Canvas預製體拖入到Ethan物件，成為其子物件
• 將Canvas的子物件Slider拖入IMGUI-H-Bar物件的IMGUI.cs元件中的HealthSlider屬性
• 執行後點擊增/減血按鈕即可實現兩種血條的同時增/減血

演示視訊