UI系統——作業與練習

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

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

IMGUI製作血條

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Blood : MonoBehaviour
{
    public float blood;
    public float res;
    public Rect rect;
    public Rect add;
    public Rect minus;
    public Rect layout;

先定義好需要用到的變量，包括血量blood和用於計算的結果res，以及血條UI的框架，加血和減血的按鈕，以及背景layout。

    void Start()
    {
        res = blood;
        rect = new Rect(200, 100, 200, 15);
        add = new Rect(420, 100, 20, 20);
        minus = new Rect(160, 100, 20, 20);
        layout = new Rect(150, 70, 300, 50);
    }

在start函數中進行變量的初始化。

    private void OnGUI()
    {
        
        if (GUI.Button(add, "+"))
        {
            res = res + 0.1f > 1 ? 1 : res + 0.1f;
        }
        if (GUI.Button(minus, "-"))
        {
            res = res - 0.1f < 0 ? 0 : res - 0.1f;
        }
        GUI.Box(layout, "Blood");
        blood = Mathf.Lerp(blood, res, 0.05f);
        GUI.HorizontalScrollbar(rect, 0, blood, 0, 1);
    }

OnGUI函數中進行UI界面的加載，定義好加血和減血按鈕的相應事件，爲了防止血量溢出，這裏要進行相應的判斷。最後血量的變化使用了lerp插值來實現血條的平滑變化。然後將其配合水平滾動條組件來實現血條界面的加載。

最後的運行結果：

UGUI製作血條

先從asset store中導入人物對象。

導入canvas畫布對象，然後添加slider作爲血條子對象。

設置 Canvas 組件 Render Mode 爲 World Space，設置 Rect Transform 組件的 (PosX, PosY, Width, Height) 爲 (0,2,160,20)，設置 Rect Transform 組件的 Scale（x, y）爲 (0.1,0.1)。

展開slider，選擇 Handle Slider Area和 Background，禁灰（disable）這兩個元素。

選擇 Fill Area 的 Fill，修改 Image 組件的 Color 爲 紅色。設置 Rect Transform 組件的Rotation = (0,180,0)，Slider 組件的 MaxValue 爲 1。

爲了使血條面向攝像頭，需要爲canvas添加如下的代碼：

void Update()
    {
        this.transform.LookAt(Camera.main.transform.position);
    }

接着在之前IMGUI的腳本基礎上進行修改，使其能適合UGUI，只需增加一個slider變量，然後將blood值賦給slider.value就可以了：

   public float blood;
    public float res;
    public Rect add;
    public Rect minus;
    public Slider slider;
    // Start is called before the first frame update
    void Start()
    {
        res = blood;
        add = new Rect(420, 100, 20, 20);
        minus = new Rect(160, 100, 20, 20);
    }

    private void OnGUI()
    {

        if (GUI.Button(add, "+"))
        {
            res = res + 0.1f > 1 ? 1 : res + 0.1f;
        }
        if (GUI.Button(minus, "-"))
        {
            res = res - 0.1f < 0 ? 0 : res - 0.1f;
        }
        blood = Mathf.Lerp(blood, res, 0.05f);
        slider.value = blood;
    }

將canvas拖入文件夾中即可生成預製體。

運行結果：

IMGUI的優點：

• 實現較爲簡單
• 既避免了 UI 元素保持在屏幕最前端，又有最佳的執行效率
• 沒有UI狀態維護所以使用起來很容易上手

IMGUI的缺點：

• 不利於動畫或佈局的配置，因爲IMGUI沒有狀態， 通常佈局算法都需要兩遍遍歷所有UI組件，但是 imgui 只會運行一遍這樣就會對佈局造成困難

UGUI的優點：

• 面向對象
• 支持多模式多攝像機渲染
• 出現了錨點的概念，更方便屏幕自適應
• 沒有圖集的概念，可以充分利用資源，避免重複資源

UGUI的缺點：

• 不支持圖文混排
• 事件需要實現事件系統的接口
• 沒有 UIWrap 來循環 scrollview 內容
• 暫時沒有Tween組件

預製使用方法

• 對於IMGUI預製，使用時直接拖入場景中即可。
• 對於UGUI，使用時先構建遊戲對象和基本場景，然後將canvas預製拖入該對象子對象中，再將腳本中Slider對象設爲相應slider，點擊運行即可。