Unity學習記錄——UI設(shè)計

前言

? 本文是中山大學軟件工程學院2020級3d游戲編程與設(shè)計的作業(yè)8

編程題：血條制作

1.相關(guān)資源

? 本次項目之中的人物模型來自Starter Assets - Third Person Character Controller | 必備工具 | Unity Asset Store

? 此處使用了以下路徑的PlayerArmature預制，這個預制人物模型可以進行行走奔跑跳躍等動作，很適合血條的演示

? 由于這個人物預制件之中掛載了一些實現(xiàn)動作的代碼，其中實現(xiàn)了隱藏鼠標光標，會影響后續(xù)的演示，所以需要找到以下路徑的代碼，打開它

? 注釋掉函數(shù)SetCursorState()中的代碼，以方便后續(xù)血條UI之中點擊按鈕

private void SetCursorState(bool newState)
{
	// Cursor.lockState = newState ? CursorLockMode.Locked : CursorLockMode.None;
}

2.基本介紹

? 以下介紹(中英雙語)均來自unity官方手冊，闡述了IMGUI與UGUI的大致內(nèi)容。

? 此處給出，目的是為了快速定位并了解本次課程以及作業(yè)的主要知識內(nèi)容。

(1)IMGUI

? The “Immediate Mode” GUI system (also known as IMGUI) is an entirely separate feature to Unity’s main GameObject-based UI System. IMGUI is a code-driven GUI system, and is mainly intended as a tool for programmers. It is driven by calls to the OnGUI function on any script which implements it.

? “即時模式”GUI 系統(tǒng)（也稱為 IMGUI）是一個完全獨立的功能系統(tǒng)，不同于 Unity 基于游戲?qū)ο蟮闹?UI 系統(tǒng)。IMGUI 是一個代碼驅(qū)動的 GUI 系統(tǒng)，主要用作程序員的工具。為了驅(qū)動該系統(tǒng)，需在實現(xiàn)腳本上調(diào)用 OnGUI 函數(shù)。

(2)UGUI

? Unity UI is a set of tools for developing user interfaces for games and applications. It is a GameObject-based UI system that uses Components and the Game View to arrange, position, and style user interfaces.

? Unity UI是一組用于開發(fā)游戲和應用程序用戶界面的工具。它是一個基于GameObject的UI系統(tǒng)，可使用組件和 Game 視圖來排列和定位用戶界面并設(shè)置其樣式

3.題目要求

血條 (Health Bar) 的預制設(shè)計。具體要求如下：

• 分別使用 IMGUI 和 UGUI 實現(xiàn)
• 使用 UGUI，血條是游戲?qū)ο蟮囊粋€子元素，任何時候需要面對主攝像機
• 分析兩種實現(xiàn)的優(yōu)缺點
• 給出預制的使用方法

4.操作與代碼詳解

(1)IMGUI

? 較為簡單。血條為水平滾動條，通過按鈕綁定加血扣血的函數(shù)，線性插值實現(xiàn)血條的平滑變化。

? 部分API調(diào)用：

• 水平滾動條：GUI-HorizontalScrollbar - Unity 腳本 API
• 線性插值實：Mathf-Lerp - Unity 腳本 API

代碼如下:

public class Blood_IMGUI : MonoBehaviour
{
    public float now = 10f;         //現(xiàn)在的血量
    private float target = 10f;     //將要達到的目標血量
    private Rect blood_area = new Rect(20, 20, 200, 50);        //血條所處位置
    private Rect up_area = new Rect(20, 50, 40, 20);            //加血按鈕所處位置
    private Rect down_area = new Rect(180, 50, 40, 20);         //扣血按鈕所處位置
    // 加血函數(shù)
    public void blood_up(float num)
    {
        target = target + num > 10f ? 10f : target + num;
    }
    //扣血函數(shù)
    public void blood_down(float num)
    {
        target = target - num < 0f ? 0f : target - num;
    }

    private void OnGUI()
    {
        if (GUI.Button(up_area, " + "))
            blood_up(1);
        if (GUI.Button(down_area, " - "))
            blood_down(1);
        // 線性插值
        now = Mathf.Lerp(now, target, 0.1f);
        // 創(chuàng)建水平滾動條,此處即血條
        GUI.HorizontalScrollbar(blood_area, 0f, now, 0f, 10f);
    }
}

? 最終效果如下：

(2)UGUI

操作

在Scene之中右鍵新建一個Plane作為地面(這里我順便做了平臺的下四面圍墻)，再將之前所說的人物預制件PlayerArmature拖入其中

右鍵PlayerArmature，選擇UI，Canvas，新建一個Canvas

? 修改Canvas的部分屬性

? 重點：將Canvas的Render Mode改為World Space，其余屬性即為調(diào)整Canvas的大小(Width，Height)以及縮放(Scale)，旋轉(zhuǎn)(Rotation)

? 右鍵Canvas，選擇UI，Slide，新建一個Slide

?

? 此時可以看到血條的雛形，如下：

? 為了進一步讓血條成型，需要進行進一步的操作，如下：

1. 禁用Handle Slide Area

? 此時可以發(fā)現(xiàn)：血條上的圓球消失

2. 修改其他部件(包括BackGround，F(xiàn)ill Area，F(xiàn)ill)的Rect Transform屬性，同時將Fill中img控件的color修改為血條的顏色，此處我選擇了紅色

? 此時拖動Slide的Value屬性，就可以看到血條的平滑變化

? 至此血條的制作基本完成，為了演示血條的變化，我再在CanVas上添加了兩個button子類，來控制血條的增加減少

? 添加button之后仍舊需要修改Rect Transform中對應的屬性，如下

? button中的文本可以通過button中的子對象text修改，此處改為 ‘+’ ‘-’ 號就可以

? 最終效果如下圖所示：

代碼

? 編寫加血扣血的按鈕事件代碼，如下：

public class Blood_UGUI : MonoBehaviour
{
    private float now = 10f;        //現(xiàn)在的血量
    private float target = 10f;     //將要達到的目標血量
    public Slider blood;            //Slider,即血條
    GameObject up_button, down_button;  //控制加血扣血的兩個按鈕
    private void Start()
    {
        // 綁定按鈕
        up_button = GameObject.Find("Button_up");
        Button a = up_button.GetComponent<Button>();
        down_button = GameObject.Find("Button_down");
        Button b = down_button.GetComponent<Button>();
        a.onClick.AddListener(delegate ()
        {
            this.OnClick(up_button);
        });
        b.onClick.AddListener(delegate ()
        {
            this.OnClick(down_button);
        });
    }
    // 按鈕點擊事件
    private void OnClick(GameObject sender)
    {
        if (sender.name == "Button_up")
            blood_up();
        if (sender.name == "Button_down")
            blood_down();
    }
    // 加血函數(shù)
    public void blood_up()
    {
        target = target - 1f < 0f ? 0f : target - 1f;
    }
    // 扣血函數(shù)
    public void blood_down()
    {
        target = target + 1f > 10f ? 10f : target + 1f;
    }

    void Update()
    {
        // 線性插值
        now = Mathf.Lerp(now, target, 0.1f);
        // 更新血量，此處為sliper的value
        blood.value = now;
        // 設(shè)置血條一直朝向攝像機
        transform.rotation = Quaternion.LookRotation(Vector3.forward);
    }
}

? 最終得到的效果如下：

5.分析

? 兩種UI的優(yōu)缺點分析：

IMGUI

? IMGUI是一個基于事件的，代碼驅(qū)動GUI系統(tǒng)。

? 可知，IMGUI顯然更加符合程序員的邏輯。即可以通過代碼在頁面上創(chuàng)建各種功能GUI，通過IMGUI，無需創(chuàng)建游戲?qū)ο螅謩佣ㄎ贿@些對象并編寫一個處理對象功能的腳本，只需幾行代碼即可立即執(zhí)行所有操作。對于程序員來說，這顯然是非常靈活，易于使用的。

? 同時在IMGUI之中，每一幀的UI都會被重新繪制。由此，當頁面上的UI組件過多時，IMGUI的性能效率將會大打折扣，同時，IMGUI的調(diào)試工作也會更加困難。這也是unity官方不推薦將 IMGUI 用于游戲內(nèi)運行時UI的原因。

? 通過此特性，unity官方給出了IMGUI的用途如下：

即時模式 GUI 系統(tǒng)常用于：

• 創(chuàng)建游戲內(nèi)調(diào)試顯示和工具。

• 為腳本組件創(chuàng)建自定義檢視面板。

• 創(chuàng)建新的編輯器窗口和工具以擴展 Unity 本身。

from 即時模式 GUI (IMGUI) - Unity 手冊

UGUI

? UGUI是一個基于GameObject的UI系統(tǒng)。

? 可知，UGUI通過使用Canvas來組織和渲染UI元素。由此，UGUI不僅僅可以使用層級結(jié)構(gòu)來組織 UI 元素，并且可以使用多種布局方式來自動調(diào)整 UI 元素的位置和大小。所以，簡單的開發(fā)方式和所見即所得的性質(zhì)，使得UGUI成為更加易于沒有編程的設(shè)計師入手的開發(fā)模式。

? 同時，在面對創(chuàng)建復雜的UI時，UGUI的層級結(jié)構(gòu)可能會變得過于復雜，難以維護。

演示

? 演示視頻已經(jīng)上傳至B站UI系統(tǒng)——血條_嗶哩嗶哩_bilibili

代碼位置

? 代碼以及文檔均已經(jīng)上傳至hw8· XiaoChen04_3/3D_Computer_Game_Programming - gitee文章來源地址http://www.zghlxwxcb.cn/news/detail-759788.html

經(jīng)上傳至B站UI系統(tǒng)——血條_嗶哩嗶哩_bilibili

代碼位置

? 代碼以及文檔均已經(jīng)上傳至hw8· XiaoChen04_3/3D_Computer_Game_Programming - gitee

到了這里，關(guān)于Unity學習記錄——UI設(shè)計的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！