Unity UI 教學

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

相關連結 [音量控制]

練習檔案 [Popup-R-128-R20] [Popup-G-128-R20] [Popup-B-128-R20]

練習檔案 [對話汽球.psd] [對話汽球.png] [對話汽球箭頭.png]

Canvas（畫布）

Canvas 是 Unity UI 系統中最重要的基礎容器，所有介面元素，例如 Text、Button、Image、Slider 都需要放在 Canvas 底下才能正常顯示。當我們在場景中新增 UI 物件時，如果還沒有 Canvas 畫布，Unity 會自動建立，並將該 UI 元素放入其中。Canvas 可以想像成一張專門用來繪製介面的透明畫布，負責管理 UI 的顯示位置、縮放方式與渲染模式。一般遊戲場景可以同時存在多個 Canvas，例如主選單、遊戲 HUD、提示視窗或彈出式介面都可以分開管理。這樣做的好處是能讓 UI 結構更清楚，也方便日後控制顯示、隱藏或播放動畫。製作 UI 時，建議先確認 Canvas 的 Render Mode 與 Canvas Scaler 設定，確保在不同解析度仍能保持良好的版面比例。

Render Mode 是 Canvas 用來決定 UI 如何顯示在畫面中的重要設定。

Screen Space - Overlay 預設模式，UI 會直接覆蓋在遊戲畫面最上層，無需指定攝影機，常用於主選單、血量條、分數、按鈕等。

Screen Space - Camera 則需要指定一台 Camera，UI 會依照該攝影機的畫面進行渲染，適合需要搭配攝影機景深、特效、排序或特定鏡頭顯示的介面。

World Space 則會讓 Canvas 變成場景中的 3D 物件，UI 可以放在角色、看板或互動物件旁邊，隨著場景位置與角度一起顯示。特別適合製作 3D 場景內的操作面板、物件提示資訊，以及 VR 遊戲的空間介面，讓玩家能像看見真實面板一樣與 UI 互動。

Text（文字）

文字元件是 Unity UI 中最常見的介面元素，可用來顯示標題、說明、按鈕文字、分數或提示訊息。Unity 早期提供的 Legacy Text 屬於舊版文字系統，操作簡單、適合快速測試，但在字體品質、縮放清晰度、描邊、陰影與排版控制上較有限，放大後也較容易出現模糊或鋸齒。TextMesh Pro（TMP） 則是目前較推薦使用的文字系統，文字邊緣更清晰，支援更細緻的字距、行距、對齊、描邊、陰影、漸層與材質效果。首次使用 TMP 時，Unity 通常會提示匯入 TMP Essentials，匯入後即可使用 TextMeshPro - Text 元件。實務上，若只是臨時測試可使用 Legacy Text；正式專案或需要支援多解析度的 UI，建議優先使用 TextMesh Pro。

設定 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 都可以在 Canvas 中顯示圖片，但使用目的不同。Image 是最常用的 UI 影像元件，執行 GameObject > UI > Image 後即可建立，預設的 Source Image = None (Sprite)，代表它主要使用 Sprite 精靈圖。Image 適合製作按鈕圖示、背景框、血量條、介面裝飾等 UI 圖片，也支援常見的 UI 顯示方式，例如 Simple、Sliced、Tiled、Filled，其中 Filled 很適合用來製作進度條或技能冷卻效果。Raw Image 則是透過 GameObject > UI > Raw Image 建立，預設欄位是 Texture = None (Texture)，主要用來顯示一般 Texture 貼圖，不一定需要轉成 Sprite。Raw Image 常用於顯示 Render Texture、攝影機畫面、影片畫面、即時影像或特殊材質貼圖。簡單來說，一般 UI 圖示與介面圖片建議使用 Image；若要顯示原始貼圖、影片或即時渲染內容，則較適合使用 Raw Image。

Button（按鈕）

按鈕是最常用的 UI 互動元件，通常用來執行開始遊戲、切換場景、開啟選單、關閉視窗或確認操作等功能。新增按鈕物件時，Unity 會自動建立按鈕本體與其下方的文字物件。按鈕元件本身負責偵測滑鼠點擊、觸控或手把選取等互動事件，而按鈕外觀通常由 Image 元件控制。Button 的 Transition 可設定互動時的視覺變化，例如滑鼠移入、按下或停用時改變顏色、切換圖片或播放動畫。若要讓按鈕執行功能，最重要的是設定 On Click() 事件，可將場景中的物件拖曳到事件欄位，再選擇要執行的公開函式。實務上，Button 常會搭配 C# 腳本使用，例如按下後載入指定場景、顯示 Panel、播放音效或結束遊戲。

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

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

按鈕 Transition 可選擇 Color Tint、Sprite Swap、Animation 模式：

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

2. 設為 Sprite Swap 時，與按鈕互動時切換 Sprite。

3. 設為 Animation 時，與按鈕互動時將會產生動畫。

[Button互動功能製作]

Toggle (切換開關)

Toggle 是用來表示「開啟 / 關閉」狀態的 UI 互動元件，常見於音效開關、全螢幕設定、是否顯示提示、同意條款或功能選項。執行 GameObject > UI > Toggle 可新增切換元件，預設結構通常包含 Background、Checkmark 與 Label，其中 Checkmark 會依照勾選狀態顯示或隱藏。Toggle 的核心屬性是 Is On，代表目前是否被勾選；若勾選則為 True，取消則為 False。當狀態改變時，可以透過 On Value Changed(Boolean) 事件呼叫 C# 函式，並將目前的布林值傳入程式中。實務上，Toggle 很適合用來控制設定項目，例如開關背景音樂、啟用教學提示或切換畫質選項。若需要多個選項中只能選一個，則可搭配 Toggle Group 使用。

[Toggle互動功能製作]

Slider (滑桿)

Slider 是用來調整數值的 UI 互動元件，常見於音量大小、亮度、靈敏度、進度條、血量條或讀取進度顯示。預設結構通常包含 Background、Fill Area、Fill 與 Handle Slide Area，其中 Fill 代表目前數值填滿的範圍，Handle 則是可拖曳的控制點。Slider 的主要屬性包含 Min Value、Max Value 與 Value，可用來設定最小值、最大值與目前數值；若勾選 Whole Numbers，滑桿只會輸出整數。當玩家拖曳滑桿或數值改變時，可以透過 On Value Changed(Single) 事件呼叫 C# 函式，並將目前的浮點數值傳入程式中。實務上，Slider 不只可用於玩家操作，也能透過程式控制數值變化，例如血量減少、技能冷卻或載入進度。

[Slider互動功能製作]

Panel (面板)

Panel 是常用的 UI 版面容器，主要用來承載與整理其他 UI 元素，例如文字、按鈕、圖片、滑桿或輸入欄位。新增面板時 Unity 會建立一個帶有 Image 背景的 RectTransform 物件，因此 Panel 本身可以作為半透明背景、彈出視窗、選單區塊或資訊區域。實務上，Panel 很適合用來管理 UI 結構，例如將主選單、設定視窗、暫停選單、對話框分別放在不同 Panel 內，之後只要控制 Panel 的顯示與隱藏，就能快速切換介面狀態。Panel 也常搭配 Layout Group、Content Size Fitter 或動畫系統使用，讓 UI 排版更整齊，並能製作淡入淡出、滑入滑出等介面效果。建議在大型 UI 中善用 Panel 分層管理，讓 Hierarchy 結構更清楚，也方便日後維護。

設定 Panel 外觀。

按鈕

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

增加 Grid Layout Group 元件

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

調整 Cell Size, Spacing, Child Alignment

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

Dropdown

Dropdown 是用來提供多個選項的 UI 互動元件，適合用在解析度選擇、畫質設定、語言切換、角色選擇或模式選擇等功能。執行 GameObject > UI > Dropdown 可新增下拉選單，預設結構通常包含 Label、Arrow、Template、Viewport、Content 與 Item，其中 Template 是展開後顯示選項清單的範本，平常會自動隱藏。Dropdown 的主要設定是 Options，可在 Inspector 中新增、刪除或修改選項文字。當玩家選擇不同項目時，可透過 On Value Changed(Int32) 事件取得目前選項的索引值，再由 C# 腳本執行對應功能。需要注意的是，Unity 也提供 TMP Dropdown，可搭配 TextMesh Pro 使用，文字顯示品質與排版效果通常比舊版 Dropdown 更好，因此正式專案建議優先使用 TMP Dropdown。

InputField（輸入欄位）

InputField 是用來讓玩家輸入文字的 UI 互動元件，常見於帳號密碼、角色名稱、搜尋欄、聊天訊息或表單資料輸入。預設結構通常包含 Text 與 Placeholder，其中 Placeholder 在尚未輸入內容時顯示提示文字，Text 則用來顯示玩家實際輸入的內容。InputField 可設定 Content Type，例如一般文字、整數、小數、電子郵件或密碼格式；若選擇 Password，輸入內容會以符號隱藏。當文字改變時，可使用 On Value Changed(String) 事件即時取得輸入內容；當輸入完成時，則可使用 On End Edit(String) 事件進行確認或送出。需要注意的是，Legacy InputField 屬於舊版 UI 文字系統，正式專案建議改用 TMP Input Field，能獲得更清晰的文字顯示與更完整的排版控制。

本站 UI 相關連結

@White/UnityUI /dev

Copyright © 2026 CG Digital Corp. All rights reserved.