1、UGUI介紹
GUI就是Graphical User Interface（圖形用戶界面）簡稱。在Unity還未更新UGUI之前最流行的做UI的插件是NGUI。自從Unity4.6開始后，集成到了編輯器中，大大方便了開發。
2、UGUI基本控件
2.1 Canvas---畫布
每當你創建一個UI物體時，Canvas都會自動創建。所有的UI元素都必須是Canvas的子物體。
和Canvas一同創建的還有一個EventSystem，其是一個基於Input的事件系統，可以對鍵盤、觸摸、鼠標、自定義輸入進行處理。
Render Mode
Screen Space - Overlay：讓UI始終位於界面最上面部分
Screen Space - Camera：賦值一個相機，按照和相機的距離前后顯示物體和UI
World Space：讓畫布變成一個3D物體可以移動等
UI Scale Mode
Constant Pixel Size：根據像素大小計算UI位置和尺寸。當屏幕尺寸改變時，UI大小不會變而其他物體會變。
&ensp&ensp&ensp Scale Factor：UI縮放系數
Scale With Screen Size：根據不同屏幕尺寸自動改變UI大小
&ensp&ensp&ensp Reference Resolution：設置為屏幕尺寸
Constant Physical Size：根據物理
Graphic Raycaster：圖片射線
只有UI的元素才繼承了Graphic基類，才能響應圖片射線。
Ignore Reversed Graphic：圖片翻轉后點擊無效
Blocking Objects：阻擋點擊物體(當UI前面有物體時，點擊前面的物體射線是否阻擋)
Blocking Mask：阻擋層級
2.2 Text
Line Spacing：行間距
Rich Text：富文本---可以結合多種字體類型和大小，尋找文本中的標記標簽，就和HTML中對字體的類型設置很像。
如果想在同一個Text中實現不同的字體有不同的大小顏色等效果就可以使用富文本。
格式和Html5的格式大體相同，但並不是完全兼容
<b>粗體</b>
<i>斜體</i>
<size=50>大小</size>
<color=#ff000000>顏色</color>
<color=red>顏色</color>
Alignment：設置對齊
Align By Geometr：幾何方向的對齊
Horizontal Overflow：選擇溢出的處理方式---文本水平超出最大寬度時，是自動換行還是就溢出不顯示。
Vertical Overflow：以上同理
Best Fit：是否忽略對文字大小的設置---選中文字會自動改變大小來全部顯示出來。
Raycast Target：UGUI創建的所有組件都會默認勾選，UI事件會在EventSystem的Update的Process觸發。UGUIh會遍歷所有Raycast Target是true的UI，發射射線找到玩家最先觸發的那個UI，拋出事件給邏輯層去響應。
private Text text;
void Start () {
text = transform.GetComponent<Text>();
text.text = "你好呀";
text.fontSize = 20;
text.color = Color.blue;
text.fontStyle = FontStyle.Bold;
}
2.3 Image
Source Image：轉為Sprite格式的圖片可以賦值。
Preserve Aspect：圖像寬高是否按原始比例
Set Native Size：返回原始大小
Image Type：
- Simple：在拉伸區域內完全顯示一張圖片
- Sliced：按九宮格顯示，九宮格在圖片資源中設置。拉伸時九宮格四周大小不變，上下只會左右拉，左右只會上下拉。
- Tiled：平鋪，在選中范圍內顯示n張原始大小的圖片。
- Filled：按各種方法切割圖片。(經常用於技能冷卻)。
public Image image;
public Sprite sprite;
//可以修改Image的圖片
void Start () {
image = transform.GetComponent<Image>();
image.sprite = sprite;
}
2.4 RawImage
Image顯示的是Sprite格式的圖片。
RawImage顯示的是Texture格式的圖片。
RawImage一般用於背景、圖標上，一般用於顯示外部圖片。
當顯示一張外部加載的圖片且不用交互時，所用時間遠低於Image。
UV Rect：紋理坐標，可以用其實現幀動畫。
Raw Image的另一個使用技巧：在2D界面上實現3D物體
- 新建一個Render Texture，賦值到相機的Target Texture。用於獲取相機的3D顯示內容。
- 把RT賦值到Raw Image。讓Raw Image接收相機的3D內容。
- 再新建個相機，就可以在新建相機2D界面中添加3D內容。
2.5 Button
Interactable：是否可交互
Transition：過渡方式
- 顏色過度
Target Graphic：過渡效果作用目標
Normal Color：默認顏色
Highlighted Color：高亮顏色
Pressed Color：按下顏色
Diasbled Color：禁用顏色
Color Multiplier：顏色切換系數
Fade Duration：衰落延遲 - 圖片過度---基本同理
- 動畫過度
Navigation：按鈕導航---在EventSystem中，有個當前被選中的按鈕，可以通過方向鍵或代碼控制，使被選中的按鈕進行更改。
Visualize：可以把按鍵能導航到的路徑可視化，高亮黃色箭頭顯示。
Button添加點擊事件的兩種方法
- 直接在界面OnClick處添加事件。
- 通過代碼給按鈕添加點擊事件。
public Button btn1;
public Button btn2;
void Start()
{
btn1.onClick.AddListener(NoParameter);
btn2.onClick.AddListener(()=>HaveParameter("Hello"));
}
private void NoParameter()
{
Debug.Log("Hello");
}
private void HaveParameter(string str)
{
Debug.Log(str);
}
2.6 Toggle
主要選項和Button相同
Is On：默認是否選中。
Toggle Transtion：切換是是否有過渡效果，Fade表示有，None表示沒有。
Graphic：設置開關要起作用的對象，不一定非要是默認的對號。
Group：設置分組。把多個Toggle放在同一個物體下，在這個物體上添加Toggle Group，並給Toggle賦值，就可以實現單選。
On Value Change：當Toggle值改變時所調用的函數。
2.7 Slider
Slider下的Background：表示未進度的區域的顯示圖片。
Slider下的Fill：已經進度的顯示圖片。
Slider下的Handle：可滑動塊塊的圖片
Fill Rect：設置用於顯示已經是進度區域的圖片。
Handle Rect：設置可滑動塊塊的圖片。
Direction：方向，從左到右、從上到下之類的。
Min Value：最小值。
Max Value：最大值。
Whole Numbers：是否按整型來改變值。
Value：值
On Value Changed：值改變時，觸發的事件
Slider一般可以與文本之類的結合，來解決內容過多顯示不下的問題。
等待更新案例...
2.8 Scrollbar
Size：可滑動塊塊的大小。
Number Of Steps：從最小到最大值一共需要幾步。設置0或1時效果和Slider基本一樣，都是可以自由滑動。設置2時，滑塊只能在最小或者最大，只有這兩個位置。再大同理。
2.9 Scroll View
在content下添加所需的內容，即可實現此效果。
Horizontal：是否允許水平拖動
Vertical：是否允許豎直拖動
Inertia：是否有滾動慣性
Deceleration Rate：滾動慣性大小
Visibility：是否選擇自動隱藏滾動條
2.10 Dropdown
Options：可以添加或刪除每一項
Item：每個項目中的內容組合
Caption---：標題顯示的內容
Item---：每個項目的小內容
2.11 InputField
Character Limit：輸入字符個數限制
Content Type：輸入字符類型
Custom Caret Color：光標顏色
Selection Color：選中文本顏色
2.12 Grid Layout Group
Padding：邊距
Spacing：每項的間距
Start Corner：元素排列方向
Start Axis：元素水平或豎直排列
Child Alignment：子項從哪開始排列
Constraint：可以限制列數或行數
2.13 Content Size Fitter
用來設置UI的長寬。
比如可以掛在Text上，就可以設置內容的最小長寬。
3、UGUI事件系統
3.1 UGUI實現事件3種方法
- 添加接口，調用事件。(推薦)
- 在界面中直接添加Event Trigger控件。
- 在代碼中添加Event Trigger控件
3.2 IDrag拖動接口
IBeginDragHandler 開始拖動
IDragHandler
IEndDragHandler 結束拖動
實現拖動效果的兩種方法
public void OnDrag(PointerEventData eventData)
{
//eventData.position 拖動時的屏幕坐標
//因為物體的位置是世界坐標，所以要把拖動時的屏幕坐標轉換為世界坐標
RectTransform rect = GetComponent<RectTransform>();
Vector3 pos = Vector3.zero;
RectTransformUtility.ScreenPointToWorldPointInRectangle(rect, eventData.position, eventData.enterEventCamera, out pos);
rect.position = pos;
}
public void OnDrag(PointerEventData eventData)
{
RectTransform rect = GetComponent<RectTransform>();
rect.anchoredPosition += eventData.delta;
}
3.3 IPointerClick點擊接口
IPointerEnterHandler 鼠標進入
IPointerExitHandler 鼠標離開
IPointerDownHandler 鼠標按下
IPointerUpHandler 鼠標抬起
IPointerClickHandler
3.4 ISelectHandler 選中接口
ISelectHandler 點擊選中后執行一次
IDeselectHandler 取消選中后執行一次
IUpdateSelectedHandler 選中后一直執行
要配合Selectable控件才能使用
3.5 系統按鍵接口
IScrollHandler 點擊后鼠標滾輪觸發
ISubmitHandler 點擊后回車空格觸發
CancelHandler 點擊后Esc觸發
IMoveHandler 點擊后鍵盤移動觸發
要配合Selectable控件才能使用