Unity UI 教學

使用者介面 (UI, User Interface) 提供遊戲的互動功能，傳遞各種訊息給玩家，例如分數、金錢或物品，或是製作供操作的選單。Unity UI 包括 Canvas, Text, Image, Panel, Toggle, Slider, Scrollbar, Scroll View, Button, Dropdown, Input Field ，來看看如何使用吧！

相關連結 [音量控制]

Canvas（畫布）

Canvas 是 UI 的容器，新增的 UI 元素將會放在 Canvas 下方，成為 Canvas 的子物件。

遊戲場景可同時擁有多個 Canvas 畫布，新增 UI 元素時，若場景中沒有 Canvas 將會自動建立。

Render Mode = Screen Space - Overlay 預設的渲模式 UI 覆蓋遊戲畫面。

Render Mode = Screen Space - Camera

Render Mode = World Space 可讓 UI 顯示於 3D 空間，例如遊戲物件上顯示的使用者界面，此外，適用於製作 VR 遊戲。

Text（文字）

執行 [ GameObject > UI > Text ] 增加文字，可設定文字內容、字型、尺寸、對齊、顏色等屬性。

新版 Unity 改為使用 TextMesh Pro (TMP) 文字，而舊版將標示 Legacy，屬性設定如下圖所示：

設定 UI 的對齊 Rect Transform > Anchor Presets

Alt: Also Set position 按著 Alt 可同時設定位置

Shift: Also Set pivot 按著 shift 可同時設定軸心

字型可以匯入 TTF ( TrueType font ) 或 OTF ( OpenType font ) 字型，拖曳至遊戲專案的 Assets 資料夾。

Image（影像）

執行 [ GameObject > UI > Image ] 增加影像。

Source Image = None(Sprite) 支援 Sprite 精靈

Raw Image（原始影像）

執行 [ GameObject > UI > Raw Image ] 增加原始影像。

Texture = None (Texture)

Image 或 Raw Image 的差異性

Image 支援不同的 Image Type (Simple, Sliced, Tiled, Filled)

可快速製作血條、指示器等效果，而 Raw Image 無法直接使用此功能。

Button（按鈕）

執行 [ GameObject > UI > Button ] 即可建立按鈕物件。

按鈕的 Image Type 可以選擇 Simple（簡易）、Sliced（切片）、Tiled（拼貼）、Filled（填滿）。

實際上，按鈕的文字是一個按鈕的子物件，修改的方式與一般文字是相同的。

按鈕的 Transition 可以選擇 Color Tint、Sprite Swap、Animation 模式。

Transition 設為 Color Tint 時，與按鈕互動時會改變顏色。

Transition 設為 Sprite Swap 時，與按鈕互動時將會更換成不同的 Sprite。

Transition 設為 Animation 時，與按鈕互動時將會產生動畫效果。

Toggle ()

核取方塊

Slider ()

滑桿，製作設定數值（例如調整音量）等功能。

面板 ( Panel )

面板可用於編排 UI 元素，集合相關功能的 UI 增加更多的互動，例如選單的開啟關閉、選單的動畫效果等。

設定 Panel 外觀。

按鈕

複製按鈕，修改按鈕的文字。

增加 Grid Layout Group 元件

按鈕大小的改變，是因為 Cell Size 設定的影響。

調整 Cell Size, Spacing, Child Alignment

設定排列的方式 (Kai Middle Center) 預設 Start Corner = Upper Left

互動功能

製作按鈕互動功能。 GameObject.SetActive

播放動畫 Animator.Play

控制燈光亮度 Light.intensity

控制攝影機 Camera.orthographic

新增一個 C# 腳本並將此腳本套用到 Canvas 畫布，雖可將腳本套用到按鈕物件，不過隨著按鈕的數量增加，會讓腳本的位置分散在不同的地方。若套用到單一物件（例如畫布或是特定物件）可讓腳本集中易於管理。

開啟腳本編輯器，修改腳本的內容後存檔。

注意！Clicked () 前有加上 public 否則不會出現在下拉選單。

On Click () 的對象選擇 Canvas 畫布，然後從右側的下拉選單，選擇適當的選項。

跳到指定場景

遊戲場景必須預先加入 Build Settings 的 Scenes In Build 清單，否則將無法順利載入。

製作關閉遊戲的按鈕

使用 Application.Quit 讓玩家關閉進行中的遊戲。

回到 Unity 並選取 Button 按鈕，我們將透過 Inspector 屬性編輯器 Button (Script) 下方的 On Click () 設定按鈕的事件。

目前顯示 List is Empty 代表空白，點選下方的 + 圖示。

製作彈出視窗

使用 Panel 製作遊戲中的彈出視窗。

透過調整 Rect Transform 設定視窗的大小與位置。

@White/UnityUI

Copyright © 2024 CG Digital Corp. All rights reserved.