1. 程式人生 > >UGUI 之Canvas理解

UGUI 之Canvas理解

對於UGUI來說,Canvas這個元件至關重要,由於自己對UGUI也是初學者,根據使用過程中的理解做一下總結;

Canvas (畫布) 是所有 UI 元件的父物體 , 也就是說每一個 UI 元件都必須在 Canvas 下 , 作為 Canvas 的子物體 , 當你建立一個 UI 控制元件時 , 如果在 Hierarchy 檢視沒有 Canvas 元件的話 , unity會自動幫你建立一個 Canvas , 並將你想建立的 UI 控制元件置於 Canvas 下.

Rect Transform:繼承自Transform,比Transform多了以上屬性

Render Mode:

渲染模式(分為三種)

   1、Screen Space-Overlay模式

在此模式下,Canvas將作為2D影象直接渲染在螢幕上,並將畫布下面的所有的UI元素置於螢幕的最上層,或者說畫布的畫面永遠“覆蓋”其他普通的3D畫面,如果螢幕尺寸被改變,畫布將自動改變尺寸來匹配螢幕

   2、Screen Space-Camera模式

和Screen Space-Overlay模式類似,畫布也是填滿整個螢幕空間,如果螢幕尺寸改變,畫布也會自動改變尺寸來匹配螢幕。所不同的是,在該模式下,畫布會被放置到攝影機前方。在這種渲染模式下,畫布看起來 繪製在一個與攝影機固定距離的平面上。所有的UI元素都由該攝影機渲染,因此攝影機的設定會影響到UI畫面。在此模式下,UI元素是由perspective也就是視角設定的,視角廣度由Filed of View設定。

  這種模式可以用來實現在UI上顯示3D模型的需求,比如很多MMO遊戲中的檢視人物裝備的介面,可能螢幕的左側有一個運動的3D人物,左側是一些UI元素。通過設定Screen Space-Camera模式就可以實現上述的需求

3、World Space模式

此模式下,與其他3D物體具有同樣的顯示效果,畫布被視為與場景中其他普通遊戲物件性質相同的類似於一張面片(Plane)的遊戲物體。畫布的尺寸可以通過RectTransform設定,所有的UI元素可能位於普通3D物體的前面或者後面顯示。當UI為場景的一部分時, 可以使用這個模式。它有一個單獨的引數Event Camera,用來指定接受事件的攝像機,可以通過畫布上的GraphicRaycaster元件發射射線產生事件。這種模式可以用來實現跟隨人物移動的血條或者名稱

Pixel Perfect:

指的是一個UI素材本身的畫素對應螢幕上一個畫素的情況,這種情況下UI素材對映到螢幕上時沒有任何拉伸和壓縮,這種情況下UI顯示效果非常清晰完美。

Sort Order:深度值,該該值越高顯示越前面

Canvas Scaler

這個元件主要負責Canvas的顯示效果,其中以Scale Mode最為重要

可選的模式有3種,分別是 Constant Pixel Size, Scale With Screen Size和Constant Physical Size。

Constant Pixel Size模式

根據Canvas設定的大小進行顯示,無論在何種解析度下,大小均為Unity中設定的大小(不能很好地適應不同解析度)。
Scale Factor:保持大小的比例 。預設為1,比如一張圖大小為100*100,這裡如果設定為2,則圖顯示為200*200,用於縮放整個Canvas,而且調整Canvas Size與Screen Size一樣,當Scale Factor為1時,Screen Size (800*600)、Canvas Size(800*600),圖片大小1倍,當Scale Factor為2時,Screen Size (800*600)、Canvas Size(400*300),圖片大小2倍,Scale Factor 會調整整個Canvas 的大小,並讓他的大小跟Screen Size一樣,運算後Canvas Size放大2倍,剛好等於Screen Size,而底下的圖片會放大2倍
Reference Pixels Per Unity:Unity裡的1單位大小代表100畫素。

Scale With Screen Size模式

Scale With Screen Size:UI元素可以根據螢幕的大小進行縮放,在此模式下有三種不同的縮放方式

Reference Resolution:參考解析度,該解析度越大,Canvas Scale越小,由你拼UI時的尺寸決定,跟實際移動裝置上的尺寸沒有關係

Screen Match Mode包括 Match Width or Height, Expand,Shrink三種模式。

Match Width or Height:根據Canvas的寬度或高度或者一定的比例進行縮放,

當處於最左邊時即比例為0時,螢幕高度對於UI大小完全沒有任何影響,只有寬度會對UI大小產生影響。假設寬度為Reference Resolution寬度的x倍,則UI整體縮放為Reference Resolution狀態下的x倍。也就是說只有寬度等於Reference Resolution寬度時,才能做到pixel perfect,否則畫素就會有拉伸

當處於最右邊時,與上述情況正好相反,決定整體縮放值的是高度,而寬度則沒有任何影響,所以,你只要記住橫版遊戲以高度縮放,豎版遊戲按寬度縮放,所以得出以下結論:

假如我拼UI時的尺寸為960*640的橫版遊戲,那麼我的設定就是:

Expand:

當螢幕解析度大於參考解析度時,選擇變化較小的一個方向(橫向還是縱向),作為放大Canvas Scale的標準,另一方向上的變化則是在整體縮放以後再進行補償性的變化。此舉旨在減少擴大解析度時由於非等比擴大而對UI整體佈局造成影響。適合製作較小標準尺寸,擴充到較大螢幕。

例如:Reference Resolution為800*600,(假設此時Canvas Scale為(1,1,1))。如果實際解析度為800*800,那麼Canvas Scale還保持為(1,1,1)因為寬度沒有發生變化,只是單純的高度增加了200。所以勢必對佈局造成一定得影響。1000*600的情況也是一樣,Canvas Scale沒有變化,只是單純寬度增加了200。但如果實際解析度變為1000*800,那麼Canvas Scale就變成(1.25,1.25,1.25)。因為寬度是參考解析度寬度的1.25倍,高度是1.33倍,那麼取較小的1.25。 這個1.25倍的意義是:整體Canvas渲染放大1.25倍,橫向或縱向的變化超過了1.25倍,則靠拉伸Canvas來變化,此時因為這部分變化,可能會對佈局產生一些相對較小的影響,例如相對位置、某些元素的長寬比。

Shrink:和Expand類似,但是更適合於縮小的情形。它會在螢幕尺寸縮小時,通過縮小CanvasScale儘量減少由於非等比縮小對佈局產生的影響。按照影響較小的一個方向縮小的比例去縮小CanvasScale,然後再通過變形調整另外一個方向。

在解析度自適應模式下,可能會帶來物體縮放問題,如果縮放不正常,可在程式碼中手動更改localScale為(1,1,1)進行部分修正。

Constant Physical Size

固定的UI縮放值即根據設定好的物理大小進行展示,根據不同解析度適應性不是很好。

Fallback Screen DPI:預設螢幕DPI。
- Default Sprite DPI:提供給Sprite的每英寸畫素,此Sprite設定了“Pixels Per Unit”來適用“Reference Pixels Per Unit”。
- Reference Pixel Per:單位長度的畫素數,最好與圖片匯入時的r Pixels Per Unit一致。

Graphic Raycaster

每個Canvas都需要新增此元件,用於獲取對UGUI的控制和操作。

Canvas Group

CanvasGroup常見用法如下:

         (1)給視窗的父節點掛載Canvas Group,控制Alpha值達到淡入淡出的效果。

         (2)給一組控制組件的父節點掛載Canvas Group,統一設定為不響應輸入。

         (3)給一個或多個UI元素的的父節點掛載Canvas Group,統一設定為不攔截點選事件。

Graphic Raycaster

Ignore Reversed Graphics:是否忽略反方向的圖形,如果為true,則表示圖形正面展示時,會接收到射線檢測;反面展示時,不會接收到射線檢測;否則,正反面展示都會接收到射線檢測

 

Blocking Objects:遮蔽指定型別的(物理)物件,使它們不參與射線檢測。渲染模式不為ScreenSpaceOverlay時起作用。可選值為:
None:不遮蔽任何物理物件
Two D:遮蔽2D物理物件(即具有2D碰撞體的物件)
Three D:遮蔽3D物理物件(即具有3D碰撞體的物件)

All:遮蔽所有物體物件

 

Blocking Mask:使遮蔽物件中的指定層不參與射線檢測。渲染模式不為ScreenSpaceOverlay時,且Blocking Objects不為None時起作用。
例如,Blocking Objects為2D,Blocking Mask為UI,指2D物理物件中是UI層的東西都不會接收射線檢測,而2D物理物件中的其他層還是能接收射線檢測