血條（Health Bar）的預製設計

要求

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

相關理論

Unity UI

UI 即 User Interface（使用者介面）的簡稱，在許多軟體中狹義地指 窗體、皮膚、按鈕、文字框等人們熟悉的人機互動元素 及 其組織與風格（也稱皮膚），而 Unity UI 系統採用的就是上述的狹義概念。

Unity 目前支援三套完全不同風格的 UI 系統：

• 4.0 及以前：IMGUI（Immediate Mode GUI）及時模式圖形介面，是程式碼驅動的 UI 系統，沒有圖形化設計介面，只能在 OnGUI 階段用 GUI 系列的類繪製各種 UI 元素，因此其 UI 元素只能浮在遊戲介面之上；
• 5.0 及以後：Unity GUI / UGUI 是物件導向的 UI 系統，即所有 UI 元素都是遊戲物件，有友好的圖形化設計介面， 可在場景渲染階段渲染這些 UI 元素；
• 2018.3 及以後：UXML（unity 擴充套件標記語言），基於 IMGUI 的 AXML 包裝，方便移動應用開發者入門。

IMGUI

IMGUI 的存在符合遊戲程式設計的傳統，即使在今天它依然沒有被官方宣判為遺留（將要淘汰的）系統（Legacy Systems）。在修改模型，渲染模型這樣的經典遊戲迴圈程式設計模式中，在渲染階段之後，繪製 UI 介面無可挑剔（參考 Execution Order of Event Functions）。這樣的程式設計即避免了 UI 元素保持在螢幕最前端，又有最佳的執行效率，一切控制掌握在程式設計師手中，這對早期計算和儲存資源貧乏的遊戲裝置來說，更是彌足珍貴。當然，早年 UI 互動手段就是繪製圖片和文字，檢測輸入事件等基本任務。

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

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

如果不做複雜的介面，IMGUI 簡單易用的程式碼是程式設計師喜歡的，對於新手 UI 入門容易，可以幫助新手理解引擎的遊戲迴圈；對於高階程式設計師可以建立線上除錯環境；對於工具開發者定義了 Unity 新的程式設計工具。

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

UGUI

現代遊戲 UI 滿足：

• 簡單的地圖編輯器、選單編輯器等工具使設計師沒有程式設計師的幫助也能參與程式開發，可以直接創造遊戲元素，乃至產生遊戲程式；
• 跨裝置執行，自動適應不同解析度；
• UI 元素與遊戲場景融為一體的互動；
• 支援複雜的佈局；
• 多攝像機支援。

傳統程式碼驅動的 UI 有著開發效率低下，難以除錯等問題。而 UGUI 的優勢有：

• 所見即所得（WYSIWYG）設計工具；
• 支援多模式、多攝像機渲染；
• 物件導向。

UGUI 的基礎使用

參考：UI 系統

畫布 是繪圖區域，是 UI 元素的容器，UI 元素及其子 UI 元素都將繪製在其上。畫布區域在場景檢視中顯示為矩形。UI 元素採用畫素單位表示位置和尺寸。

畫布中的UI元素按照它們在層次結構中出現的順序繪製。如果兩個UI元素重疊，後面的元素將出現在較早的元素之上，最後一個孩子顯示在最上面。

渲染模式 設定可用於使其在螢幕空間或世界空間中渲染。將 UI 元素放置在場景頂部渲染的螢幕，畫布會自動更改大小匹配螢幕（Canvas 預設中心點為螢幕中心）。

UI 佈局基礎：每個UI元素都被表示為一個矩形，為了相對於 Canvas 和 其他 UI 元素實現定位，Unity 在 Transform 基礎上定義了 RectTransform （矩形變換） 支援矩形元素在 2/3D 場景中變換。
矩形工具

矩形工具：有移動、旋轉、比例、矩形四個工具。在選擇矩形工具時，設定為“旋轉”和“區域性”檢視，通常便於操作。

矩形變換：像常規變換一樣具有位置，旋轉和比例，也具有寬度和高度表示矩形的尺寸。

UI 元件與元素

UI 部件都是用 Script 開發的自定義元件。包括在 UI、Layout 和 Rendering 等分類中。

1、視覺化元件：

• Text：顯示的文字的文字區域，可設定字型，字型樣式，字型大小及文字是否具有豐富的文字功能；
• Image：顯示圖片的區域。可以設定GUI精靈、色彩；
• Raw Image：原始影像採用紋理，進行 UV 矩形貼圖；
• Mask：不是一個可見的 UI 控制元件，遮罩將子元素限制（掩蔽）為父元素的形狀嗎，若子元素比父控制元件大，則只有適合父節點遮罩的部分是可見的；
• Effects：應用各種簡單的效果，例如簡單的投影或輪廓。

2、UI 互動元素：

是 GameObject，它擁有 UI 互動元件、UI視覺化元件、及相關元件的組合，以及一些 UI 子元素構成，以便於使用者在設計場景中建立互動介面。

• Button
• Toggle
• Toggle Group
• Slider
• Scrollbar
• Dropdown
• Input Field
• Scroll Rect (Scroll View)

詳細資訊參見官方：UI 元素

圓形遮罩、動畫、富文字、血條

都是選單製作，初步理解 Text，Image，RowImage，Mask 等的基本使用技巧。

圓形遮罩：

參考：使用透明度實現 Mask 遮罩的 Unity Shader

動畫：

動畫與按鈕的整合，參見官方： 動畫整合

富文字：

為了顯示格式複雜的文字，Unity 提供了類似 HTML 的標籤，控制字型、字號、顏色。

• 在 Canvas 下新增 Text 元素
• 在 Text 元件輸入： We are <color=green>green</color> with envy

詳細參見官方：Rich Text

血條：

參考資源：Faking World Space for monster health bars in Unity

實現過程

IMGUI 實現

將水平滾動條的寬度作為血量來顯示，設定了變數 Healthval，並利用Math.Lerp插值計算血量，使血條值變化平緩。

程式碼：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class healthBar: MonoBehaviour
{
    // 血量
    public float healthval = 0.0f;
    // 用來調整血條的臨時變數
    private float temp;
    private Rect barpos;//血條的位置
    private Rect addpos;//加血按鈕的位置
    private Rect minuspos;//減血按鈕的位置
    void Start()
    {
        barpos = new Rect(30, 0, 140, 80);
        addpos = new Rect(55, 15, 45, 15);
        minuspos = new Rect(100, 15, 45, 15);
        temp = healthval;
    }
    void OnGUI()
    {
        if (GUI.Button(addpos, "+"))
        {
            temp = temp + 0.1f > 1.0f ? 1.0f : temp + 0.1f;
        }
        if (GUI.Button(minuspos, "-"))
        {
            temp = temp - 0.1f < 0.0f ? 0.0f : temp - 0.1f;
        }
        //插值計算
        healthval = Mathf.Lerp(healthval, temp, 0.05f);
        // 顯示血條
        GUI.HorizontalScrollbar(barpos, 0.0f, healthval, 0.0f, 1.0f);
    }
}

將該指令碼掛載到空物件上，執行即顯示血條與加血減血按鈕。

可以通過更改變數 Healthval（0~1）來改變初始血量的比例，比如在 Healthval = 0.5 時：


將掛載指令碼的空物件拖入下方的project視窗，生成預製。

UGUI實現

下載並import unity提供的standard assets中的characters。將第三人稱的預製拖入場景，命名為Ethan，Position設為（0，0，0），Rotation設為（0，180，0）。

新建一個Plane，Position設為（0，0，0）。

main camera的position設定為（0，1，-10）。

在Ethan上右擊新增畫布，在畫布上右擊新增slider作為血條。
設定畫布的render mode為world space。更改rect transfom和scale

禁掉slider的handle slider area和background

把fill area裡fill的image改成綠色。

設定slider元件的value。

執行，發現雖然此時血條會隨著Ethan移動，但人物轉向血條也會反轉，所以給畫布新增一個指令碼，讓它能一直朝向照相機。

實現結果

優缺點

IMGUI：
IMGUI更符合程式設計習慣，在渲染階段之後，繪製UI效果更好，效率更高。缺點是除錯起來更困難，不支援視覺化開發，無法在UI上新增3D模型的效果。

UGUI：
UGUI相比IMGUI在功能上還不夠成熟，但官方在不斷開發中，有取代NGUI的趨勢。更適合沒有程式設計基礎的人在遊戲製作過程中操作UI，降低了門檻。UGUI的錨點很方便適應螢幕。
缺點是物件過多時需要很多畫布，不夠靈活。

預製的使用方法

IMGUI血條直接將healthBar預製體拖入場景，點選±按鈕可以修改血量。
UGUI血條先按照上述操作匯入Ethan，生成場景，再將Canvas預製體拖入Ethan物件成為子物件。