Unity UI 教學
Author: Kelvin Huang使用者介面 (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 是 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（按鈕）
按鈕是使用率最高的 UI 物件，執行 [ GameObject > UI > Button ] 即可建立按鈕物件。
按鈕的 Image Type 可選擇 Simple（簡易）、Sliced（切片）、Tiled（拼貼）、Filled（填滿）。
按鈕的文字是按鈕的子物件，修改的方式與一般文字相同。
按鈕 Transition 可選擇 Color Tint、Sprite Swap、Animation 模式：
1. 設為 Color Tint 時，與按鈕互動時會改變按鈕的顏色。
2. 設為 Sprite Swap 時，與按鈕互動時切換 Sprite。
3. 設為 Animation 時，與按鈕互動時將會產生動畫。
Toggle ()
Toggle 是由 Background 與 Checkmark 組成，功能類似網頁的核取方塊，用於設定 ON/OFF 的功能。
Slider (滑桿)
滑桿，製作設定數值（例如調整音量）等功能。
Panel (面板)
面板可用於編排 UI 元素，集合相關功能的 UI 增加更多的互動，例如選單的開啟關閉、選單的動畫效果等。
設定 Panel 外觀。
按鈕
複製按鈕，修改按鈕的文字。
增加 Grid Layout Group 元件
按鈕大小的改變，是因為 Cell Size 設定的影響。
調整 Cell Size, Spacing, Child Alignment
設定排列的方式 (Kai Middle Center) 預設 Start Corner = Upper Left
本站 UI 相關連結
 |
 |
 |
@White/UnityUI /dev
Copyright © 2025 CG Digital Corp. All rights reserved.