文章

了解Unity的UI系統

發布於 更新於
作者 Ned Hsu 7 分鐘閱讀

Unity 的 UI 系統是一個強大且靈活的工具集，使開發者能夠輕鬆地在遊戲中創建和管理用戶界面。無論是建立主選單、遊戲內的狀態顯示（如血量條、分數等），還是各種交互界面，Unity 的 UI 系統都提供了直觀的方式來實現這些功能。

1. UI 系統的基礎結構

Unity 的 UI 系統主要基於一個名為 Canvas 的組件。所有 UI 元素都是 Canvas 的子物體。

  • Canvas（畫布）：所有 UI 元素的容器。它可以設置為不同的渲染模式，確保 UI 元素以正確的方式顯示在遊戲中。

  • RectTransform：UI 元素的位置、大小和對齊方式的管理工具。每個 UI 元素都有一個 RectTransform 組件，取代了 3D 對象使用的普通 Transform 組件。

  • UI 元素：包括文本（Text）、圖片（Image）、按鈕（Button）、滑桿（Slider）等，這些都是用於構建用戶界面的基礎組件。

2. 創建一個簡單的 UI

步驟：

  1. 創建 Canvas：
    • 在 Hierarchy 視圖中右鍵，選擇 UI > Canvas。
    • 這將自動創建一個 Canvas 和一個 EventSystem。EventSystem 用於管理 UI 事件（如點擊、拖動等）。
  2. 設定 Canvas：
    • 選擇 Canvas，在 Inspector 視圖中可以看到 Canvas 組件和 Canvas Scaler 組件。
    • Render Mode 可以設置為 Screen Space - Overlay（默認值，UI會渲染在屏幕之上）、Screen Space - Camera（UI會渲染在特定的攝影機前），或 World Space（UI作為3D物體存在於場景中）。
  3. 添加 UI 元素：
    • 右鍵 Canvas，選擇 UI > Text，這將在 Canvas 下創建一個 Text 元素，用於顯示文字。
    • 同樣的方法，選擇 UI > Button，可以添加一個按鈕。

配置 UI 元素：

  • Text：選擇 Text 元素，可以在 Inspector 視圖中更改文字內容、字體大小、字體顏色等。
  • Button：選擇 Button 元素，可以設置按鈕的圖片、交互行為，並且可以指定當按鈕被點擊時觸發的事件。

3. RectTransform 的使用

RectTransform 是管理 UI 元素位置和尺寸的核心工具。

  • Anchor（錨點）：用於指定 UI 元素的對齊參考點。錨點可以設置為父容器的某個角落、邊緣或者中心，從而控制 UI 元素在屏幕尺寸改變時的自動縮放或移動。

  • Pivot（樞軸）：這是 UI 元素的旋轉和縮放的參考點，通常位於元素的中心，但也可以根據需求進行調整。

  • Pos X / Pos Y：用來調整元素在Canvas中的位置。

  • Width / Height：調整元素的寬度和高度。

4. UI 元素的交互

Unity 的 UI 系統不僅可以用來顯示信息，還可以通過 Button、Slider 等控件與用戶進行交互。

Button（按鈕）：

  1. 添加事件：
    • 選擇按鈕，在 Inspector 視圖中找到 Button 組件。
    • 在 OnClick() 部分，點擊 + 來添加一個事件。
    • 將需要觸發事件的對象拖放到 Object 欄位中，然後選擇需要調用的方法。
  2. 設置方法：
    • 你可以在 C# 腳本中編寫方法，然後將此方法與按鈕的點擊事件綁定。例如：
1
2
3
4
5
6
7
8
9
10

using UnityEngine;
using UnityEngine.UI;

public class ButtonClickExample : MonoBehaviour
{
    public void OnButtonClick()
    {
        Debug.Log("Button Clicked!");
    }
}

將這個腳本附加到一個遊戲物體上，然後將該遊戲物體拖到按鈕的 OnClick() 事件欄中，並選擇 ButtonClickExample > OnButtonClick。

5. UI 的動畫與過渡

Unity 的 UI 系統還支持動畫和過渡效果，讓UI顯得更加動態。

Button 的過渡效果：

  1. 選擇按鈕，在 Inspector 視圖中的 Button 組件下，可以看到 Transition 設置。
  2. 你可以設置按鈕的過渡方式，如 Color Tint（顏色變換）、Sprite Swap（精靈替換）或 Animation（動畫）。

使用Animator：

  1. 你可以使用 Animator 組件來為 UI 元素設置複雜的動畫。例如，讓一個面板滑動進入或淡出。

6. Canvas Scaler 的使用

Canvas Scaler 是用來控制 Canvas 如何隨著不同的屏幕尺寸進行縮放的組件。

  • UI Scale Mode：
    • Constant Pixel Size：UI元素以固定像素大小顯示，屏幕尺寸改變不會影響UI的縮放。
    • Scale With Screen Size：UI元素根據屏幕尺寸進行縮放，這是為了適應不同設備屏幕大小的常用選項。
    • Constant Physical Size：UI元素根據物理尺寸進行縮放，通常用於不同DPI設置的設備。

小結

Unity 的 UI 系統提供了豐富的工具來創建各種用戶界面，從基本的文本和按鈕，到複雜的動態介面。通過了解 Canvas、RectTransform 和各種 UI 元素的使用，你可以輕鬆地在遊戲中實現直觀且美觀的界面。這些 UI 元素還可以與 Unity 的動畫系統結合使用，為用戶提供更加豐富的交互體驗。

Software, Unity
Unity
本文章以 CC BY 4.0 授權