UGUI基礎(chǔ) 之Canvas畫布

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



圖3-3

注: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è)置畫布的大小唬涧,但其屏幕的大小將取決于相機拍攝的角度和相機的距離疫赎。



圖3-4 Canvas畫布渲染模式

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è)備上的最終大小都是一致的茂附。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市督弓,隨后出現(xiàn)的幾起案子营曼,更是在濱河造成了極大的恐慌,老刑警劉巖愚隧,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蒂阱,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機录煤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門鳄厌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人妈踊,你說我怎么就攤上這事了嚎。” “怎么了廊营?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵歪泳,是天一觀的道長。 經(jīng)常有香客問我露筒,道長呐伞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任慎式,我火速辦了婚禮伶氢,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瞬捕。我一直安慰自己鞍历,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布肪虎。 她就那樣靜靜地躺著劣砍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪扇救。 梳的紋絲不亂的頭發(fā)上刑枝,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天,我揣著相機與錄音迅腔,去河邊找鬼装畅。 笑死,一個胖子當(dāng)著我的面吹牛沧烈,可吹牛的內(nèi)容都是我干的掠兄。 我是一名探鬼主播,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼锌雀,長吁一口氣:“原來是場噩夢啊……” “哼蚂夕!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起腋逆,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤婿牍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后惩歉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體等脂,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡俏蛮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了上遥。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搏屑。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖粉楚,靈堂內(nèi)的尸體忽然破棺而出睬棚,到底是詐尸還是另有隱情,我是刑警寧澤解幼,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站包警,受9級特大地震影響撵摆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜害晦,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一特铝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧壹瘟,春花似錦鲫剿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至殴俱,卻和暖如春政冻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背线欲。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工明场, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人李丰。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓苦锨,卻偏偏與公主長得像,于是被迫代替她去往敵國和親趴泌。 傳聞我的和親對象是個殘疾皇子舟舒,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,647評論 2 354

推薦閱讀更多精彩內(nèi)容