Unity Ugui 基本介紹 (一)

Unity – Ugui Canvas

畫布是用於放置所有UI元素的區域。
所有UI元件將作為此Canvas的子物件。透過 GameObject ->UI 即可建立一個UI 元素, 若當前Scene 裡面沒有Canvas,則自動建立一個Canvas 。

Canvas Scaler – 縮放核心

Canvas Scalar 是 Unity UI 系統中,控制UI元素的總體大小和像素密度的 Component,Canvas Scalar 的縮放比例影響著 Canvas 下的元素,包含字體大小和圖像邊界。

Size
Reference Resolution:預設螢幕大小
Screen Size:目前螢幕大小

Canvas Size:Canvas Rect Transform 寬高

Canvas – Render Mode 渲染模式

通常一個Scene 只需Canvas,但多個Canvas 也是可以的。為了優化目的,也支持Canvas 嵌套,就是將某個Canvas 作為另一個Canvas 子節點。子Canvas 跟父Canvas 的Rander Mode 保持一致。

UI渲染的方式,有以下三種

  • Screen Space – Overlay:螢幕空間 – 覆蓋
  • Screen Space – Camera:螢幕空間 – 攝影機v
  • World Space:世界座標空間

Screen Space – Overlay:螢幕空間 覆蓋

Pixel Perfect:可以使圖像更清晰,但是有額外的性能開銷,如果在有大量UI動畫時,動畫可能會不平順。
Sort Order:深度值,該值越高顯示越前面。

**Screen Space – Overlay 模式的Canvas 需要放在Hierarchy的頂端(所有UI 元素的頂端)。 否則UI (Canvas 節點樹以外的UI )會從視圖中消失。這是Unity 內置的限制。 所以保持Screen Space – Overlay 模式的Canvas 在Hierarchy頂端,才能確保預期效果。

Screen Space – Camera:螢幕空間 攝影機

使用一個Camera作為參照,將UI平面放置在Camera前的一定距離,因為是參照Camera,當螢幕大小、分辨率、Camera視錐改變時UI平面會自動調整大小。如果Scene中的物件(GameObject)比UI平面更靠近攝影機,就會遮擋到UI平面。

  • Render Camera:用於渲染的攝影機
  • Plane Distance:與Camera的距離
  • Sorting Layer:Canvas屬於的排序層,在 Edit->Project Setting->Tags and Layers->Sorting Layers 進行新增,越下方的層顯示越前面
  • Order in Layer:Canvas屬於的排序層下的順序,該值越高顯示越前面

此模式下,Canvas 會渲染於攝像機前面指定距離的一個平面上。
UI 在螢幕上的大小並不隨此距離變化而變化。因為UI 總是被縮放來準確適配Camera 視錐 。若Camera視錐或螢幕尺寸或解析度改變。UI 會自動縮放來適應。Scene 中任何比UI 平面距離攝像機更近的3D 物件, 都將先於UI 被渲染。相反位於UI 平面後面的物件就會被遮擋。

World Space – 世界座標空間

把物體當作世界座標中的平面(GameObject),也就是當作3D物件,顯示3D UI。

  • Event Camera:處理UI事件(Click、Drag)的Camera,所設定的Camera才能觸發事件 。

此模式下,UI 被看作是Scene 中的一個平面物件。不像Screen Space – Camera 模式,此時UI 平面並不需要面向攝像機,而是可以面向任意一個方向。通過RectTransform 可以設置Canvas 尺寸,但他的螢幕大小將取決於攝像機的視角以及距離。其他場景中物件可能位於Canvas 背面,或穿透Canvas ,或位於Canvas 前面。

Canvas  Scaler 屬性介紹

Canvas Scaler 組件用於控制Canvas 中UI 元素的縮放和像素密度。縮放會影響Canvas 底下的所有東西,包括字體大小和圖像邊距。

UI Scale Mode的設定-定義縮放模式

Constant Pixel Size
Canvas Size 始終等於 Screen Size,透過Scale Factor直接縮放所有UI元素。不管螢幕多大,始終保持固定像素值尺寸。

  • Scale Factor:透過此Factor縮放所有在此Canvas下的元素。
    **Scale Factor 用於縮放整個Canvas,而且調整Canvas Size與Screen Size一樣 。
    http://docs.unity3d.com/ScriptReference/Canvas-scaleFactor.html
  • Reference Pixels Per Unit: 如果圖片檔有設定Pixels Per Unit,則會將Sprite 的 1 pixel 轉換成 UI 中的 1 pixel

圖片檔設定中的Pixels Per Unit,意思是在這張Sprite中,世界座標中的一單位由幾個Pixel組成 。
當 Pixels Per Unit=100,每單位由 100 Pixel組成,Sprite 是100*100 Pixels,那 Sprite 在世界座標中大小就會變成 100/100 * 100/100 = 1*1 Unit

(左:Cube ,右:Sprite)

當 Pixels Per Unit=10,每單位由 10 Pixel組成,Sprite 是100*100 Pixels,那 Sprite 在世界座標中大小就會變成 100/10 * 100/10 = 10*10 Unit

(左:Cube ,右:Sprite)

所以Unity中一單位等於 100 Pixels Sprite 在世界座標中大小 = 原圖大小(Pixels) / Pixels Per Unit

Scale With Screen Size : 螢幕多大,UI 元素就多大。透過設定的Reference Resolution(預設螢幕大小)來縮放。

  • Reference Resolution:預設螢幕大小
  • Screen Match Mode:縮放模式

Constant Physical  Size :透過硬體設備的Dpi(Dots Per Inch 每英吋點數),進行縮放。固定物理尺寸。不管螢幕多大或解析度多大,始終保持固定物理尺寸。

  • Physical Unit:使用的單位種類
  • Fallback Screen DPI:備用Dpi,當找不到設備Dpi時,使用此值
  • Default Sprite DPI:預設的圖片Dpi
單位種類 中文與1英吋的關係
Centimeters 公分(cm,厘米) 2.54
Millimeters 公釐(mm,毫米) 25.4
Inches 英吋1
Points72
Picas皮卡6

參考資料
Unity – Manual: Canvas
官方 UI 原始碼

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *