UI：User Interface
UE：User Experience
常見的UI類型
環抱式
彈框
全屏覆蓋
超全屏
3D
Unity的UI系統
OnGUI：最早的UI系統，純代碼實現，寫法類似Update
優點：出現很早，純代碼可控制
缺點：只能程序開發
NGUI：Unity著名插件，可實現2D和3D的界面，出現在老項目
優點：功能完整，集成了動態效果
缺點：性能較弱，交互使用物理引擎實現，需要付費
UGUI：官方制作的UI系統，NGUI作者開發
優點：性能優秀，功能較完整
缺點：功能需要再完善，動畫需要配合DOTween
常見設備的分辨率
比例
4：3：iPad，安卓Pad
16：9：非全面屏的手機，PC的顯示器
18：9：全面屏
異形屏：向標准分辨率靠近
配置常見設備分辨率
Canvas組件
簡答理解：UI繪制在Canvas上，可以理解為畫畫的紙
Canvas在兩個模式下（Overlay和Camera）會覆蓋整個屏幕，所做屏幕UI顯示時，只需要處理好Canvas中的顯示即可
所有UI元素必須建立在Canvas下，否則會出現不顯示的問題
建立（場景中）
三種渲染模式
Overlay：Canvas貼在相機鏡頭上，所有UI元素在場景物體前方顯示
Pixel Perpect：高像素清晰度渲染
Sort Order：多Canvas時，控制Canvas顯示順序，越大越在前方顯示
Camera：使用相機顯示Canvas
修改Canvas下Canvas組件Render Mode屬性：Camera
將相機拖給Canvas下Canvas組件Render Camera屬性
將Cube位置調整到Canvas前
調整Canvas中Plane Distance，控制Canvas到渲染相機的距離
Plane Distance：Canvas到相機的距離
當SortingLayer和Order In Layer相同時，距離相機越近，顯示越靠
前（滿足相機渲染關系）
Sorting Layer：排序層（多層Canvas中間加粒子）
建立排序層
建立順序
修改Sorting Layer
特效的調整（粒子）
粒子中，Render選項，調整Sorting Layer值為粒子層次值
Order in layer
先通過Sorting Layer，再根據排序層，調整順序（越大越靠前）
排序關系
排序層一致時，Order in layer越大越靠前
Sorting Layer：配置的排序層順序，越靠下，顯示越靠前
雙相機疊加
- 建立Camera
- 將UI相機拖給Canvas
- 將UI的相機設置為使用深度值填充，UI相機的深度要高於主相機
- 將主相機不渲染UI元素，將UI相機只渲染UI元素（Culling Mask）
World Space：Canvas以3D物體的形式顯示在場景中
將Canvas模式調整為，World Space
再將Canvas放入相機可視范圍內
Canvas縮放
該組件會拉伸所有Canvas下的子元素
UI Scale Mode：拉伸類型
靜態模式
像素計算模式
參考分辨率：根據UI設計師提供的參考圖像素尺寸
適配方式
寬度或高度自適應
完全自適應（自動計算寬高變化量作為縮放倍率）
世界模式中一米對應UI多少像素
物理計算模式
根據英寸進行拉伸計算
項目中
使用根據屏幕尺寸進行拉伸
設計分辨率，填寫美術的效果圖像素值（覆蓋滿整個屏幕）
選擇Expand：自動計算高度自適應拉伸還是高度自適應拉伸
覆蓋滿整個屏幕的背景圖計算
默認拿到1280x720的背景圖
計算方法
18:9下：缺失兩邊，（設計分辨率高度 / 9）* 18
16:9下：美術一般都會按照16:9出圖
4:3下：缺失上下，（設計分辨率寬度 / 4）* 3
RectTransform組件
出現位置：出現在所有Canvas子元素中，所有UI元素都應該有RectTransform組件
Pos（XYZ）：位置（X，Y，Z），單位（像素），位置是由軸點到錨點的距離
Width，Height：寬和高，單位（像素）
Anchors：錨點（四葉草），以父物體參考
三種情況
單錨點：距離計算是錨點到軸點的XYZ偏移
雙錨點：元素邊界到錨線的距離，軸點到錨線的距離
四錨點：元素的四個邊界到錨框的距離
錨點快速選擇工具（十字符號）
默認：移動錨點
Alt：移動錨點+快速停靠位置
Shift：移動錨點+移動軸點+快速停靠位置
Pivot：軸點（藍圈），以當前物體參考
調整軸點后，位置計算，旋轉，縮放都會受到影響，一般軸點都保留在中心點
周圍四個點表示UI元素的邊界點
元素渲染順序
以Hierarchy參考
下方物體在上方物體前顯示
子物體在父物體前顯示
下方物體永遠在前顯示，無論上方的層次結構
資源導入
目錄建立
字體導入
圖片導入：
- 圖片拷入項目
- 類型裝換為精靈（才能被UI使用）
- 使用Image組件顯示
UGUI的基礎組件
Panel組件
一個完整界面，一個Panel
Panel一般位於Canvas子物體，四錨點在四角，邊距為零，所以Panel和
Canvas一樣大，Canvas和屏幕一樣大，所以Panel和屏幕一樣大，元素
顯示處理在Panel中正常，則屏幕中也正常
Text組件
Windows 字體 路徑： C:\Windows\Fonts
文本內容
字庫選擇
字體樣式（標准，粗體，斜體，粗斜體）
字號
行間距
是否開啟富文本
加粗：<b>文字</b>
斜體：<i>文字</i>
大小：<size=字號>文字</size>
修改顏色：<color=顏色名>文字</color>
<color=#顏色數（十六進制）>文字</color>
對齊方式（上下對齊，左右對齊）
幾何對齊（參考字占用的幾何空間）
水平溢出（折行，溢出[出右邊框]）
垂直溢出（截斷不顯示，溢出[出下邊框]）
字號自適應
關閉：使用原始字號
開啟：字號會在最小值和最大值之間自動調整
字體顏色
陰影
外發光
Image組件
Color：用於混色，美術有時提供白圖和色號，程序員對圖處理，染成想要的顏色，可以減少包體大小
四種類型
普通模式（圖標）
Preserve Aspect：保持圖片的寬高比，高度或寬度自適應
Set Native Size：可以快速恢復美術提供的圖片原始像素尺寸
裁剪模式（九宮格，三宮格）
將圖片切分九宮格或三宮格
- 找到圖片資源
- 選擇精靈編輯器
- 九宮格切圖
1,3,7,9區域不拉伸
2,8橫向拉伸
4,6縱向拉伸
- Image選擇裁剪模式
瓦片模式（無縫貼圖）
填充模式（進度條）
Fill Method：填充方式（360度，水平和垂直）
Fill Origin：填充起始點
Fill Amount：填充百分比
Clockwise：順時針或逆時針
Preserve Aspect：保持圖片的寬高比，高度或寬度自適應
Set Native Size：可以快速恢復美術提供的圖片原始像素尺寸
Raw Image組件
原始圖片組件：可以顯示精靈或紋理
功能相對於Image少，所以性能更好
可以控制UV的偏移，來顯示精靈的一部分
DrawCall
屏幕顯示過程
CPU->加載數據->內存->顯存->顯卡->顯示器
Batchs，就是當前渲染屏幕所有內容所需要的繪制調用數
每一張獨立的UI圖，會產生一個DrawCall
優化DrawCall（UI切片）
將多個UI切片，合並成一張UI圖，UI界面只加載一張UI圖片顯示
圖集制作
Allow Rotation：允許旋轉（關閉），這塊有Bug
Tight Packing：允許合並（關閉），這塊有Bug
Objects for Packing：所有碎圖
開啟項目的圖集生成
在游戲引擎中使用的圖片，它的邊長應該是2N次方像素，如果不是2N次方像素，它會自己補足，自己補充會帶來性能損失。
使圖集生成一直可用（選擇Always Enabled）