一、UGUI的基本組成部分

• Canvas? ?（畫布）所有UI都需要放在Canvas畫布下面，不然無法顯示
• EventSystem? ? ?所有的事件響應系統都需要依賴于EventSystem,若刪除該組件，交互效果就? ? ? ? ? ? ? ? ? ? ? ? ? ? 不會顯示

1.Canvas(畫布)

• Render Mode : 渲染模式

? ? ? ?

? ? ? ?（1）Screen Space - Overlay ：表示畫布上的內容在最上層繪制

? ? ? ?（2）Screen Space - Camera : 指定攝像機渲染

? ? ? ?（3）World Space : 此時畫布以及畫布中的內容為片狀的3D對象

• UI Scale Mode?

? ? ? ?

? ? ??

二、Canvas中的UGUI元素

• ?Image? （圖片）
• ?Text（文本）
• ?Button（按鈕）
• ?Slider（滑動條）
• ?Toggle（開關）

1.Image

? ??

• ?Rect Transform

? ??

? ??

2.Text

? ??

• ?Font ： 字體
• Font Style ：字體的類型（Normal-正常、Bold-加粗、Italic-斜體、Bold and Italic-加粗斜體）
• Font Size ：字體的大小
• Line Spacing :? 行間距
• Rich Text ：富文本
• Alignment : 對齊方式
• Align By Geometry ：勾選后，文本在Rect的上方顯示
• Horizontal Overflow : Wrap -（超出Rect的水平邊界時不顯示）、Overflow - (超出Rect的水平邊界依然顯示)
• Vertical Overflow : Truncate -（超出垂直邊界時不顯示）、Overflow - (仍然顯示)
• Best Fit ：勾選后文本內容會自動匹配Rect的大小
• Raycast Target ：作用是允許UI元素接收射線，這是實現按鈕點擊等交互功能的基礎

????????富文本：

? ?

? ??

3.Button

? ??

• Interactable：勾選后代表該按鈕可交互
• Transition:點擊按鈕交互時的按鈕形態的變化
  None?:?無
  Color?Tine?:?顏色變化
  Sprite?Swap?：精靈圖片變化
  Animation?:?動畫
• Normal Color ：正常顏色
  Highlighted?Color?:?當鼠標經過時的顏色
  Pressed?Color?:?點擊中的顏色
  Selected?Color?:?被選擇后的顏色
  Disable?Color?:?取消勾選可交互選項后的顏色

4.Slider

? ? ?

• Interactable ：是否可交互
• Transition :?確定滑動條以何種方式對用戶操作進行可視化響應的屬性
• Navigation ：確定控件順序的屬性
• Fill Rect : 滑動條中填充區域的圖形
• Handle Rect :?用于滑動條中“控制柄”部分的圖形
• Direction ：滑動條滑動的方向
• Min/Max Value ：最小、最大數值
• Whole Numbers ：是否應該將滑動條約束為整數值
• Value ：滑動條當前的數值

5.Toggle

? ??

? ??

? ??

????可以利用多個開關制作單選復選框開關：

1. 首先在Canvas中創建一個空對象（此時的空對象只有一個 Rect Transform組件），將空對象命名為 Toggle Group ,并為此空對象添加一個Toggle Group的組件
2. 全選開關，然后將Toggle Group對象拖動到開關對象的Group中
3. 此時的單選復選框開關必須選擇一個，不能全部取消勾選，這時可以在Toggle Group對象的Toggle Group組件中勾選 Allow Switch Off（允許全部關閉）

---

三、注意

? ? ? UI的調節最好在2D視角下。