Game dev

UI系統

1 UGUI是什么

它是基于Unity游戲對象的UI系統，只能用來做游戲UI功能，不能用于開發Unity編輯器中內置的用戶界面。

2 UGUI六大基礎組件

Canvas對象上依附的：

• Canvas：畫布組件，主要用于渲染UI控件。
• Canvas Scaler：畫布分辨率自適應組件，主要用于分辨率自適應。
• Graphic Raycaster：射線事件交互組件，主要用于控制射線響應有關。
• RectTransform：UI對象位置錨點控制組件，主要用于控制位置和對其方式。

EventSystem對象上依附的：

玩家輸入事件響應系統和獨立輸入模塊組件，主要用于監聽玩家操作。

• EventSystem
• Standalone Input Module

3 Canvas

Canvas的意思是畫布，它是UGUI中所有UI元素能夠被顯示的根本，它主要負責渲染自己的所有UI子對象。如果UI控件對象不是Canvas的子對象，那么控件將不能被渲染。

場景中允許有多個Canvas對象，可以分別管理不同畫布的渲染方式，分辨率適應方式等等參數。

3.1 Canvas組件的3種渲染方式

Screen Space - Overlay：屏幕空間，覆蓋模式，UI始終在前

Screen Space - Camera：屏幕控件，攝像機模式，3D物體可以顯示在UI之前

World Space：世界空間，3D模式

3.1.1 Screen Space - Overlay

Pixel Perfect：是否開啟無鋸齒精確渲染（性能換效果）

SortOrder：排序層編號（用于控制多個Canvas時的渲染先后順序），數字越小越先渲染

TargetDisplay：目標設備（在哪個顯示設備上顯示）【想一下任天堂的掌機】

Additional Shader Channels：其他著色器通道，決定著著色器可以讀取哪些數據

3.1.2 Screen Space - Camera

RenderCamera：用于渲染UI的攝像機（如果不設置將類似于覆蓋模式）

Plane Distance：UI平面在攝像機前方的距離，類似整體Z軸的感覺

Sorting Layer：所在排序層

Order in Layer：排序層的序號

基本上是不會將RenderCamera設置成場景中的Main Camera的，通常的做法，是在場景中再創建一個Camera，然后將其作為RenderCamera的值，為確保場景中的3D物體均出現在UI后面，此時要對Main Camera和Camera的Depth屬性做設置，Main Camera的Depth設為-1，要求先渲染，再將Camera的Depth設為0，要求后渲染。此外，還要設置Main Camera和Camera的Culling Mask屬性。

Culling Mask："Culling Mask"（剔除蒙版）屬性用于確定相機在渲染場景時哪些圖層（Layers）的對象應該被渲染，哪些應該被忽略。這個屬性控制了相機的視錐體內可見的物體。

因為我們新增了一個Camera用于專門渲染UI，所以只需將Camera的Culling Mask設置為UI，并將Main Camera的Culling Mask的UI勾選去除，要做到分工明確。此外，考慮到有多個攝像機來繪制不同的游戲元素，我們其實希望UI始終位于3D場景、3D物體之前，所以還需要設置一下的Camera的Clear Flags屬性，將其設置為Depth only。

Clear Flags：Determines which parts of the screen will be cleared. This is handy when using multiple Cameras to draw different game elements. "Clear Flags"（清除標志）屬性用于控制相機在渲染新一幀之前如何清除屏幕上的內容。這個屬性決定了相機在渲染時是否清除背景，并且如果需要清除，清除的方式是什么。

Unity官方文檔，關于將Clear Flags屬性設置為Depth only給了一個具體的應用場景，符合我們這里的需求。如果你想在不讓玩家的槍支被環境剪裁的情況下繪制它，可以設置一個深度為0的相機來繪制環境，另一個深度為1的相機來單獨繪制武器。將武器相機的"Clear Flags"設置為"僅深度"。這將保留環境的圖形顯示在屏幕上，但會丟棄關于每個物體在三維空間中的位置的所有信息。當繪制槍支時，不透明部分將完全覆蓋任何繪制的東西，無論槍支離墻有多近。

Sorting Layer和Order in Layer主要用于確定多個Canvas間渲染的先后關系。

判定渲染的先后關系時，先依據所在的Layer來判斷，Layer越靠前越先渲染，如果兩個canvas處于同一個Layer，則再看Order in Layer，Order in Layer的值越小越先渲染。

如果確實需要3D模型在UI前顯示，則可以將3D物體作為UI Image的子元素進行創建，主要調整下縮放。

3.1.3 World Space

3D模式，可以把UI對象像3D物體一樣處理，常用于VR或者AR。

Event Camera：用于處理UI事件的攝像機（如果不設置，不能正常注冊UI事件），關聯場景中的Main Camera即可，因為往往使用這種世界模式的時候，就希望用主攝像機和其他3D物體來進行交互。

4 CanvasScaler

CanvasScaler是畫布縮放控制器，它是用于分辨率自適應的組件。

它主要負責在不同分辨率下UI控件大小自適應。它并不負責位置，位置由之后的RectTransform組件負責。

它主要提供了三種用于分辨率自適應的模式。我們可以選擇符合我們項目需求的方式進行分辨率自適應。

4.1 背景知識

屏幕分辨率：Game窗口中的Stats統計數據窗口看到的當前“屏幕”分辨率會參與分辨率自適應的計算。

畫布大小和縮放系數：選中Canvas對象后在RectTransform組件中看到的寬高和縮放，寬高 \(\times\) 縮放系數 \(=\) 屏幕分辨率

參考分辨率：在縮放模式的寬高模式中出現的參數，參與分辨率自適應的計算

匯總：

• 屏幕分辨率——當前設備的分辨率，編輯器下Game窗口中可以查看到
• 參考分辨率——在其中一種適配模式中出現的關鍵參數，參與分辨率自適應的計算
• 畫布寬高和縮放系數——分辨率自適應會改變的參數，通過屏幕分辨率和參考分辨率計算而來
• 分辨率大小自適應——通過一定的算法以屏幕分辨率和參考分辨率參與計算得出縮放系數，該結果會影響所有UI控件的縮放大小

4.2 CanvasScaler的三種適配模式

• Constant Pixel Size（恒定像素模式）：無論屏幕大小如何，UI始終保持相同像素大小
• Scale With Screen Size（縮放模式）：根據屏幕尺寸進行縮放，隨著屏幕尺寸放大縮小
• Constant Physical Size（恒定物理模式）：無論屏幕大小和分辨率如何，UI元素始終保持相同物理大小

4.2.1 Constant Pixel Size

Scale Factor：縮放系數，按此系數縮放畫布中的所有UI元素。

Reference Pixels Per Unit：單位參考像素，多少像素對應Unity中的一個單位（默認一個單位為100像素），圖片設置中的Pixels Per Unit設置，會和該參數一起參與計算。

恒定像素模式計算公式：UI原始尺寸\(=\)圖片大小（像素）\(/\) （Pixels Per Unit \(/\) Reference Pixels Per Unit）

個人感覺唐老獅這一塊還是有點講的云里霧里，我在這里繼續補充一個別人寫的博客來幫助理解。PPU & RPPU講解

世界坐標系中對PPU的理解：在世界坐標系中使用PPU，PPU指的就是1個單位能放下多少個圖片像素。如果PPU設置為100，那么假設你導入一個\(500\times 200\)的圖片，那么導入后，按照默認的100PPU來算，實際在世界坐標系中的unity單位尺寸就是\(5\times2\)個單位。如果你不希望通過縮放來調整圖片顯示的尺寸，就可以用PPU來做。

對于RPPU而言，我們看上面的恒定像素模式計算公式也可以知道，在不改變RPPU的情況下，導入圖片后默認PPU是100的情況下，UI大小是等于原圖的，如果你將PPU改的越小，那么UI大小就會成倍變大，比如PPU改為25，那么原圖就會在UI中放大4倍。

總結：恒定像素模式，它不會讓UI控件進行分辨率大小自適應，會讓UI控件始終保持設置的尺寸大小顯示。

未完待續...

參考資料

[1] 張佑飛.幫你理清Unity中的Pixels Per Unit.https://developer.unity.cn/projects/609773eeedbc2a0021af70fa.