UGUI的目錄結(jié)構(gòu)
UGUI包括很多UI工具婚陪,但所有的UI工具都會在Canvas(畫布)下進行渲染顯示沪摄。所以當(dāng)新建一個工具時系統(tǒng)會默認(rèn)新建一個Canvas(畫布)和一個EventSystem(事件系統(tǒng))憎妙,新建的UI工具會默認(rèn)成為Canvas的子物體弃鸦。當(dāng)場景中已經(jīng)存在一個Canvas時听盖,新建的所有UI工具都會默認(rèn)作為Canvas的子物體胀溺。如圖3-1所示:圖3-1
2.2 Canvas畫布
2.2.1創(chuàng)建Canvas畫布
在Hierarchy面板下進行操作Create-->UI。在右側(cè)會出現(xiàn)UGUI下的工具(如圖3-2)媳溺。點擊相應(yīng)工具該工具就會出現(xiàn)在Hierarchy面板以及場景視圖中月幌。例如創(chuàng)建一個Canvas,在Hierarchy面板下操作Create--> UI --> Canvas悬蔽,這樣在Hierarchy就會看到Canvas創(chuàng)建成功(如圖3-3)扯躺。
圖3-2
注:UGUI中創(chuàng)建任一個UI中的任何UI工具,在Hierarchy面板中系統(tǒng)都會默認(rèn)添加Canvas并作為該UI工具的父物體蝎困。如果已經(jīng)有了Canvas則不在添加录语。如果新建多個UI工具,這些UI工具會自上而下排列在Canvas下禾乘,越是排在下面的在Sence視圖中越顯示在最上層澎埠。
創(chuàng)建完成后,在Hierarchy面板中系統(tǒng)默認(rèn)會添加一個EventSystem始藕。EventSystem作用是處理UI的事件蒲稳,一般會結(jié)合代碼使用。
2.2.2 Canvas渲染模式
在Canvas里有一個Render Mode屬性伍派。Render Mode用于控制Canvas及其子UI工具的渲染模式江耀。Render Mode有三種渲染模式:Screen space – Overlay、Screen Space – Camera和World Space(如圖3-4 Canvas畫布渲染模式)诉植。
Screenspace - Overlay
在場景中UI被渲染在屏幕上祥国,因為根本沒有經(jīng)過投影空間,而是直接在屏幕空間繪制晾腔,所以在場景中沒有相機也會呈現(xiàn)UI舌稀。如果屏幕大小改變或更改了分辨率,畫布將自動更改大小來適配屏幕灼擂。
ScreenSpace - Camera
類似于Screen
Space - Overlay壁查。但在這種渲染模式下,畫布被放置在指定相機前的一個給定的距離上剔应,通過指定的相機UI被呈現(xiàn)出來睡腿,Camera setting會影響到UI的現(xiàn)實康谆。如果屏幕大小改變或更改了分辨率,畫布將自動更改大小嫉到,以很好的適配屏幕。
World Space
在這種模式下呈現(xiàn)UI月洛,UI是3D場景中的一個平面何恶。與上面兩種不同,此時UI不需要面對鏡頭嚼黔,可以面向任意方向细层。可以使用Rect Transform設(shè)置畫布的大小唬涧,但其屏幕的大小將取決于相機拍攝的角度和相機的距離疫赎。
2.2.3 Canvas Scaler
該屬性的作用就是對Canvas的縮放。
UIScale Mode包括ConstantPixelSize碎节、ScaleWithScreenSize捧搞、ConstantPhysicalSize。如下圖:
ConstantPixelSize:
該模式下是由像素尺寸來決定UI縮放的狮荔。Scale
Factor默認(rèn)為1胎撇,ConstantPixelSize的作用是設(shè)置scale的XYZ軸為1。所以殖氏,Canvas的width和height總是等于屏幕大小晚树。當(dāng)設(shè)備分辨率變小時,scale的XYZ軸仍然為1雅采,UI元素的大小并不改變爵憎,但Canvas的width和height變小了,所以UI元素在Canvas中的比例會等比例變化婚瓜。
ScaleWithScreenSize:
該模式屏幕的尺寸來決定UI縮放宝鼓。換言之UI會根據(jù)屏幕分辨率和當(dāng)前設(shè)備分辨率,自動匹配合適的scaleFactor闰渔。如果設(shè)備分辨率和參考分辨率比例不同席函,Canvas會自動設(shè)置width/height來解決。
ConstantPhysicalSize:
根據(jù)屏幕的PPI(像素密度)信息和ConstantPhysicalSize本身的配置信息得出一個最佳的scaleFactor冈涧,以達到UI在不同PPI設(shè)備上的最終大小都是一致的茂附。