概述
UGUI(Unity?Graphical User Interface)? :Unity 圖像用戶界面
在游戲開發中，我們經常需要搭建一些圖形用戶界面。Unity內置的UGUI可以幫助開發者可視化地拼接界面，提高開發效率。UGUI提供不同樣式的UI組件，并且封裝了對應功能的API，可以滿足絕大多數的UI界面開發需求。
| 組件 | 使用頻率 |
| Text | ????? |
| Button | ????? |
| Image | ????? |
| Scrollview | ????? |
| 布局組件 | ????? |
| InputField | ???? |
| Slider | ???? |
| Toggle | ??? |
| ToggleGroup | ?? |
| Mask/RectMask 2D | ??? |
| Outline | ??? |
| Shadow | ??? |
| Dropdown | ?? |
| Raw Image | ?? |
| ScrollBar | ?? |
UI組件
Canvas
Canvas?是所有 UI 元素都應該位于其中的區域。Canvas 是帶有 Canvas 組件的游戲對象，所有 UI 元素都必須是此類 Canvas 的子項。
如果場景中還沒有 Canvas，則使用菜單?GameObject > UI > Image?創建新的 UI 元素（例如圖像）會自動創建一個 Canvas。UI 元素將創建為此 Canvas 的子元素。
Canvas 中的 UI 元素的繪制順序與它們在 Hierarchy 中的顯示順序相同。首先繪制第一個子項，然后繪制第二個子項，依此類推。如果兩個 UI 元素重疊，則后一個 UI 元素將出現在前一個 UI 元素的頂部。
要更改哪個元素顯示在其他元素之上，只需通過拖動元素來重新排序 Hierarchy 中的元素即可。還可以通過在 Transform 組件上使用以下方法從腳本中控制順序：SetAsFirstSibling、SetAsLastSirbling 和 SetSiblingIndex。
Render Mode 渲染模式
Screen Space-Overlay：所有UI元素都渲染在場景中的最上層
Screen Space-Camera：畫布放置在指定攝像機前面的給定距離處。場景中的物體可以顯示在UI前面
World Space：應用：讓Canvas更像一個游戲對象，可以在場景中移動，常用于制作跟隨角色的血
Text
Text?控件向用戶顯示一段非交互式文本。這可用于在界面顯示標題或標簽，或者顯示說明文本等。
| 屬性 | 功能 |
|---|---|
| Text? | 控件顯示的文本 |
| Font??字體 | 字體資源 |
| Font Style??字形 | 應用于文本的樣式。選項包括?Normal（普通）、Bold（粗體）、Italic（斜體）?和?Bold And Italic（粗體+斜體） |
| Font Size??字體大小 | 顯示文本的大小 |
| Line Spacing??行距 | 文本行之間的垂直分隔 |
| Rich Text??富文本 | 是否使用富文本 |
| Alignment??對準 | 文本的水平和垂直對齊方式 |
| Align by Geometry??按幾何圖形對齊 | 不勾選的時候，內容和rect上邊會由一點距離，勾選之后就沒有了 |
| Horizontal Overflow? | 水平超框處理 Wrap：超框部分換行顯示 Overflow：直接超框顯示，不換行 |
| Vertical Overflow? | 垂直超框處理 Truncate?：超過文本框高度部分直接截斷不顯示 Overflow：超過文本框高度部分超框顯示 |
| Best Fit? | 文本適配，根據文本內容大小調整字體尺寸，可以用于處理多語言文本 |
| Color? | 設置文本的顏色 |
| Material? | 用于渲染文本的材質（目前開發中暫未用到） |
| Raycast Target | 需要和組件進行交互時使用，未用到時建議取消勾選 |
| Raycast Padding | 調整可點擊交互的區域大小 |
| Maskable | 用于控制UI元素是否受到父級遮罩組件的影響 |
Text和Text Mesh Pro的區別
1、Text字體放大過后會模糊失真，Text Mesh Pro字體放大后依然清晰
2、Text本身可以支持不同語言文本顯示（包括中文），TextMeshPro需要創建對應語言的字體資源才能使用。
Image
用于顯示圖標或圖像，只能使用Sprite精靈貼圖類型
| 屬性 | 功能 |
|---|---|
| Source Image??源圖片 | 表示要顯示的圖像的 Texture（必須作為Sprite導入） |
| Color??顏色 | 要應用于圖像的顏色。 |
| Material??材料 | 用于渲染圖像的材質，一般用來處理圖像置灰 |
| Raycast Target?? | 需要和組件進行交互時使用，未用到時建議取消勾選 |
| Raycast Padding | 調整可點擊交互的區域大小 |
| Maskable | 用于控制UI元素是否受到父級遮罩組件的影響 |
| Image Type(重要屬性) |
|
| Set Native Size | 將圖像框的尺寸設置為 Texture 的原始像素大小。 |
?Button
用于響應玩家的點擊操作
Button組件一般與Image（或者Raw Image）組件同時使用，并且Image的Raycast Target需要勾選（用于響應玩家的交互）。
| 屬性 | 功能 |
|---|---|
| Interactable??可交互 | 如果取消勾選，按鈕就不可點擊交互 |
| Transition??過渡 | 對用戶不同交互狀態的顯示 處理五種狀態：普通、高亮（鼠標進入按鈕區域）、按下、選中（點擊后）、禁用 共有四種過渡模式 None:沒有效果 Color Tine:顏色切換過渡，不同狀態顯示不同顏色 Sprite Swap:圖片切換過渡，不同狀態顯示不同圖片 Animation:動畫切換過渡，不同狀態播放不同Animation動畫 點擊Auto Generate Aniamtion，Unity會自動生成動畫控制器和動畫片段并且為目標添加Animator組件，通過Animation窗口對動畫片段進行設計，通過Animator對動畫進行控制。 |
按鈕綁定點擊響應邏輯
1、直接拖拽
2、代碼設置
btnConnect.onClick.AddListener(() =>
{Debug.Log("Hello World!");
});?Scrollview/ScrollRect
滾動視圖：當需要在小區域中顯示占用大量空間的內容時，可以使用 Scroll Rect。Scroll Rect 提供滾動此內容的功能。
| 屬性 | 功能 |
|---|---|
| Content | 這是對要滾動的UI元素的Rect Transform的引用 |
| Horizontal | 可以水平滾動 |
| Vertical | 可以垂直滾動 |
| Movement Type | Unrestricted 不受限制 Elastic 彈性 Clamped 夾緊 使用Elastic或Clamped強制內容保持在滾動矩形的范圍內。當內容到達滾動矩形的邊緣時，彈性模式會彈起內容 |
| Elasticity | 彈力，這是彈性模式中彈力大小，數值越大，反彈速度就越慢 |
| Inertia | 慣性 ，當設置慣性時，當指針在拖動后釋放時，內容將繼續移動。當沒有設置慣性時，內容只會在拖動時移動。 |
| Deceleration Rate | 減速速率，當慣性設置時，減速速率決定內容停止移動的速度。速率為0將立即停止移動。值為1意味著移動永遠不會減慢。 |
| Scroll Sensitivity | 滾動靈敏度 |
| Viewport | 視窗，引用視圖端口的矩形變換，它是矩形變換內容的父視圖。 |
1、自動適配Content
一般在Content節點上掛載Content Size Fitter和Vertical Layout Group，這樣組件可以自動根據子物體多少進行尺寸適配，這樣就可以比較好的顯示滑動效果了。
2、滑動到列表頭或者列表尾部。
以垂直滑動列表來說
//滑到列表頭部
ScrollRect.normalizedPosition = new Vector2(0, 1);//滑倒列表尾部
ScrollRect.normalizedPosition = new Vector2(0, 0);InputField
文本輸入框
| 屬性 | 功能 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Character Limit | 可輸入的最大字符數的值 | ||||||||||||||||||||
| Content Type |
| ||||||||||||||||||||
| Line Type | Single Line：單行文本框，可以輸入單行文本 Multi Line Submit：多行文本框，可以輸入多行文本。當用戶按下Enter鍵時，輸入文本會被提交 Multi Line Newline：多行文本框，可以輸入多行文本。當用戶按下Enter鍵時，會插入一個換行符 | ||||||||||||||||||||
| Caret Blink Rate | 調節光標閃爍的頻率，數值越大，閃爍的越快 | ||||||||||||||||||||
| Caret Width | 調節光標的寬度，數值越大，光標越寬 | ||||||||||||||||||||
| Custom Caret Color ? | 光標默認為深灰色，勾選后會彈出Caret Color屬性，可以修改光標的顏色 | ||||||||||||||||||||
| Selection Color | 選擇文本時的顏色（就是輸入完再選擇時的底色），默認為淺藍 | ||||||||||||||||||||
| Hide Mobile Input ? | 在移動設備上隱藏虛擬鍵盤（官方此屬性適用于ios） | ||||||||||||||||||||
| Read only | 是否只讀，如果勾選，次輸入框就不接受輸入 |
交互事件綁定
?
//輸入內容變化
inputField.onValueChanged.AddListener((str) =>
{Debug.Log(str);
});//完成輸入后點擊回車鍵
inputField.onEndEdit.AddListener((str) =>
{Debug.Log(str);
});Slider
滑動條
?
?
| 屬性 | 功能 |
|---|---|
| Interactable?? | 是否可交互，用作進度條時一般取消勾選，用作設置調整數值時一般要勾選 |
| Fill Rect?? | 用于控件填充區域的圖形。 |
| Handle Rect | 用于控件的滑動“手柄”部分的圖形 |
| Direction? | 拖動手柄時滑塊值增加的方向。選項包括?Left To Right、Right To Left、Bottom To Top?和?Top To Bottom |
| Min Value? | 滑動條的最小值 |
| Max Value? | 滑動條的最大值 |
| Whole Numbers?? | 滑塊是否應限制為整數值？ |
| Value? | [0,1] |
交互事件綁定
Slider.onValueChanged.AddListener((value) =>
{Debug.Log($"進度值：{value}");
});Toggle
單選開關
//isOn bool
Toggle.onValueChanged.AddListener((isOn) =>
{Debug.Log($"開關狀態：{isOn}");
});ToggleGroup
開關組
一般實現單選開關的作用（選中組中一個開關，取消選中其他開關）,必須保證其中一個被勾選。如果勾選Allow Switch Off，所有的開關都可以被關閉。
Mask/Rect Mask 2D
遮罩組件需要掛載到顯示圖像的父節點上
Rect Mask 2D 進行矩形裁剪
還可進行邊緣虛化
Mask和Rect Mask 2D的區別：
1、Mask主要處理不規則圖形遮罩效果，RectMask2D只能做矩形遮罩。
2、Mask需要一個Image來當作遮罩區域,子節點在Image[渲染區域]才會顯示，RectMask2D以自身RectTransform為裁剪區域，可以不掛載Image組件,子節點在[RectTransform區域]內顯示。
3、Rect Mask 2D比Mask性能好，(例如常見于scrollview的情況下,創建scrollview默認是Mask,可以選擇手動替換成RectMask2D,大多數情況都適用,會有些許性能提升)
Outline
文本輪廓組件
Shadow
文本陰影組件
Dropdown
下拉列表可用于讓用戶從選項列表中選擇單個選項。該控件顯示當前選擇的選項。單擊后，它會打開選項列表，以便可以選擇新選項。選擇新選項后，列表將再次關閉，并且控件顯示新的選定選項。如果用戶單擊控件本身或 Canvas 中的其他任何位置，則列表也會關閉。
| 屬性 | 功能 |
|---|---|
| Template??模板 | 下拉列表的模板的 Rect Transform。 |
| Caption Text??字幕文本 | 用于保存當前所選選項的文本。（可選） |
| Caption Image??標題圖像 | 用于保存當前所選選項的圖像。（可選） |
| Item Text?? | 用于保存項目的文本。（可選） |
| Item Image?? | 用于保存項目的圖像。（可選） |
| Value?? | 當前所選選項的索引。0 是第一個選項，1 是第二個選項，依此類推。 |
| Options?? | 可能的選項列表。可以為每個選項指定文本字符串和圖像。 |
//參數index是int類型，代表選中項的索引
Dropdown.onValueChanged.AddListener((index) =>
{Debug.Log($"選中{index}");
});Raw Image
原始圖像組件
RawImage可以結合Render Texture顯示相機視野圖片，結合video player播放視頻
Image只能使用Sprite精靈貼圖，Raw Image可以使用任何紋理
Image比Raw Image更消耗性能
ScrollBar
滾動條
布局組件
Content Size Fitter
內容尺寸適配器
?
| 屬性 | 功能 |
|---|---|
| Horizontal Fit | |
| Unconstrained | 不要根據布局元素驅動寬度 |
| Min Size | 根據布局元素的最小寬度驅動寬度 |
| Preferred Size | 寬度適配 |
| Vertical Fit | |
| Unconstrained | 不要根據布局元素驅動高度 |
| Min Size | 基于布局元素的最小高度驅動高度 |
| Preferred Size | 高度適配 |
Horizontal Layout Group
水平布局組
| Property:??財產： | Function:??功能： |
|---|---|
| Padding??填充 | 調整上下左右邊距 |
| Spacing??間距 | 布局元素之間的間距。 |
| Child Alignment??子對齊 |
|
| Control Child Size??控制子項大小 | Layout Group 是否控制其子布局元素的寬度和高度。 |
| Use Child Scale??使用子比例 | 布局組在調整元素大小和布局元素時是否考慮其子布局元素的比例。 |
| Child Force Expand??Child Force 擴展 | 是否強制子布局元素展開以填充額外的可用空間。 |
Vertical Layout Group
垂直布局組
Grid Layout Group
網格布局組
1、Flexible:根據寬和高適配最大可以顯示的數量
2、Fixed Column Count：指定最大顯示列數
3、Fixed Column Count：指定最大顯示行數
事件系統
可以參考我的另一篇文章
Unity 事件觸發類型_unity event=debug.log-CSDN博客
參考文章
Unity 3D - Mask和RectMask2D區別-CSDN博客
Unity UI: Unity User Interface | Unity UI | 1.0.0
原理及實現（pytorch版）)
