UGUI Canvas(畫布)詳解

本文轉(zhuǎn)自Unity Connect博主?尹煜

畫布 (Canvas) 是應(yīng)該容納所有 UI 元素的區(qū)域寇钉。畫布是一種帶有畫布組件的游戲?qū)ο舐G校?UI 元素都必須是此類畫布的子項诉儒。

畫布

畫布 (Canvas) 是應(yīng)該容納所有 UI 元素的區(qū)域辐烂。畫布是一種帶有畫布組件的游戲?qū)ο笙睿?UI 元素都必須是此類畫布的子項验残。

創(chuàng)建新的 UI 元素(如使用菜單 GameObject > UI > Image 創(chuàng)建圖像)時,如果場景中還沒有畫布巾乳,則會自動創(chuàng)建畫布您没。UI 元素將創(chuàng)建為此畫布的子項。

畫布區(qū)域在 Scene 視圖中顯示為矩形胆绊。這樣可以輕松定位 UI 元素氨鹏,而無需始終顯示 Game 視圖。

畫布 使用 EventSystem 對象來協(xié)助消息系統(tǒng)压状。

所有 UI 元素使用一個畫布就足夠了仆抵,但場景中可以有多個畫布跟继。此外,為了實現(xiàn)優(yōu)化目的镣丑,還可以使用嵌套的畫布舔糖,使一個畫布作為另一個畫布的子項。嵌套的畫布使用與其父項相同的渲染模式莺匠。

傳統(tǒng)上金吗,渲染 UI 的效果就好像是直接在屏幕上繪制的簡單圖形設(shè)計。也就是說趣竣,沒有攝像機(jī)觀察 3D 空間的概念摇庙。Unity 便支持這種屏幕空間渲染方式,但也允許 UI 在場景中渲染為對象遥缕,具體取決于 Render Mode 屬性的值跟匆。可用的模式包括 Screen Space - Overlay通砍、Screen Space - Camera 和 World Space玛臂。

繪制元素的順序

畫布中的 UI 元素按照它們在 Hierarchy 中顯示的順序繪制。首先繪制第一個子項封孙,然后繪制第二個子項迹冤,依此類推。如果兩個 UI 元素重疊虎忌,則后一個元素將顯示在前一個元素之上泡徙。

要更改元素的顯示順序,只需在 Hierarchy 中拖動元素進(jìn)行重新排序膜蠢。也可以通過在變換組件上使用以下方法從腳本控制順序:SetAsFirstSibling堪藐、SetAsLastSibling 和 SetSiblingIndex。

渲染模式

畫布具有渲染模式 (Render Mode) 設(shè)置挑围,可用于在屏幕空間或世界空間中進(jìn)行渲染礁竞。

Screen Space - Overlay

在此模式下,畫布會進(jìn)行縮放來適應(yīng)屏幕杉辙,然后直接渲染而不參考場景或攝像機(jī)(即使場景中根本沒有攝像機(jī)模捂,也會渲染 UI)。如果更改屏幕的大小或分辨率蜘矢,則 UI 將自動重新縮放進(jìn)行適應(yīng)狂男。UI 將繪制在所有其他圖形(例如攝像機(jī)視圖)上。


Overlay UI 渲染在場景對象上

注意:Screen Space - Overlay 畫布需要存儲在層級視圖的頂級品腹。如果未使用此設(shè)置岖食,則 UI 可能會從視圖中消失。這是一項內(nèi)置的限制舞吭。請將 Screen Space - Overlay 畫布保持在層級視圖的頂級以便獲得期望的結(jié)果泡垃。

Screen Space - Camera

在此模式下析珊,畫布的渲染效果就好像是在攝像機(jī)前面一定距離的平面對象上繪制的效果。UI 在屏幕上的大小不隨距離而變化兔毙,因為 UI 始終會重新縮放來準(zhǔn)確適應(yīng)攝像機(jī)視錐體。如果更改屏幕的大小或分辨率或更改攝像機(jī)視錐體兄春,則 UI 將自動重新縮放進(jìn)行適應(yīng)澎剥。場景中比 UI 平面更靠近攝像機(jī)的所有 3D 對象都將在 UI 前面渲染,而平面后的對象將被遮擋赶舆。


Camera 模式 UI 的前面有場景對象

World Space

在此渲染模式下哑姚,畫布的行為與場景中的所有其他對象相同。畫布大小可用矩形變換進(jìn)行手動設(shè)置芜茵,而 UI 元素將基于 3D 位置在場景中的其他對象前面或后面渲染叙量。此模式對于要成為世界一部分的 UI 非常有用。這種界面也稱為“敘事界面”九串。

此模式將 UI 視為場景中的平面對象進(jìn)行渲染绞佩。但是,與 Screen Space - Camera 模式不同猪钮,該平面不需要面對攝像機(jī)品山,可以根據(jù)喜好任意定向。畫布的大小可以使用矩形變換來設(shè)置烤低,但畫布在屏幕上的大小將取決于攝像機(jī)的視角和距離肘交。其他場景對象可以位于畫布后面、穿透畫布或位于畫布前面扑馁。


World Space UI 與場景對象相交

畫布縮放器(Canvas Scaler)

畫布縮放器組件用于控制畫布中 UI 元素的整體縮放和像素密度涯呻。此縮放會影響畫布下的所有內(nèi)容,包括字體大小和圖像邊框腻要。



Constant Pixel Size 的設(shè)置:

Scale With Screen Size 的設(shè)置:

Constant Physical Size 的設(shè)置:

World Space Canvas 的設(shè)置(畫布 (Canvas) 組件設(shè)置為 World Space 時顯示):

對于設(shè)置為“Screen Space - Overlay”或“Screen Space - Camera”的畫布复罐,畫布縮放器 UI Scale Mode 可以設(shè)置為 Constant Pixel Size、Scale With Screen Size 或 Constant Physical Size雄家。

Constant Pixel Size

使用 Constant Pixel Size 模式時市栗,可在屏幕上按像素指定 UI 元素的位置和大小。這也是畫布在未附加任何畫布縮放器時的默認(rèn)功能咳短。但是填帽,借助畫布縮放器中的“Scale Factor”設(shè)置,可以向畫布中的所有 UI 元素應(yīng)用常量縮放咙好。

Scale With Screen Size

使用 Scale With Screen Size 模式時篡腌,可以根據(jù)指定參考分辨率的像素來指定位置和大小。如果當(dāng)前屏幕分辨率大于參考分辨率勾效,則畫布會保持只具有參考分辨率的分辨率嘹悼,但是會放大以便適應(yīng)屏幕叛甫。如果當(dāng)前屏幕分辨率小于參考分辨率,則畫布會相應(yīng)縮小以適應(yīng)屏幕杨伙。

如果當(dāng)前屏幕分辨率的寬高比與參考分辨率不同其监,則單獨縮放每個軸以適應(yīng)屏幕會形成非一致縮放,通常不希望發(fā)生這種情況限匣。相反抖苦,ReferenceResolution 組件會使畫布分辨率偏離參考分辨率,以便遵循屏幕的寬高比米死⌒坷可以使用 Screen Match Mode 設(shè)置控制此偏離的行為方式。

Constant Physical Size

使用 Constant Physical Size 模式時峦筒,可按物理單位(如毫米究西、點或派卡)指定 UI 元素的位置和大小。此模式要求設(shè)備正確報告其屏幕 DPI物喷。對于不報告 DPI 的設(shè)備卤材,可以指定回退 DPI。

World Space

對于設(shè)置為“World Space”的畫布峦失,可以使用畫布縮放器來控制畫布中 UI 元素的像素密度商膊。

畫布組

畫布組 (Canvas Group) 可集中控制整組 UI 元素的某些方面,而無需單獨處理每個元素宠进。畫布組的屬性會影響所在的游戲?qū)ο笠约八凶訉ο蟆?/p>



畫布組的典型用途為:

通過在窗口的游戲?qū)ο笊咸砑赢嫴冀M并控制其 Alpha 屬性來淡入或淡出整個窗口晕拆。

通過將畫布組添加到父游戲?qū)ο蟛⑵?Interactable 屬性設(shè)置為 false 來使整組控件不可交互(“灰顯”)。

通過在 UI 元素或其某個父元素上放置畫布組 (Canvas Group) 組件并將其 Block Raycasts 屬性設(shè)置為 false 來使一個或多個 UI 元素不阻止鼠標(biāo)事件材蹬。

畫布渲染器

畫布渲染 器(Canvas Renderer) 組件用于渲染畫布中包含的圖形 UI 對象实幕。

原文鏈接:https://connect.unity.com/p/canvas-hua-bu-he-ji-ben-bu-ju?app=true

戳上方鏈接下載官方app,在線技術(shù)答疑堤器,更多干貨等你來發(fā)現(xiàn)昆庇!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市闸溃,隨后出現(xiàn)的幾起案子整吆,更是在濱河造成了極大的恐慌,老刑警劉巖辉川,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件表蝙,死亡現(xiàn)場離奇詭異,居然都是意外死亡乓旗,警方通過查閱死者的電腦和手機(jī)府蛇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來屿愚,“玉大人汇跨,你說我怎么就攤上這事务荆。” “怎么了穷遂?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵函匕,是天一觀的道長。 經(jīng)常有香客問我蚪黑,道長盅惜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任祠锣,我火速辦了婚禮酷窥,結(jié)果婚禮上咽安,老公的妹妹穿的比我還像新娘伴网。我一直安慰自己,他們只是感情好妆棒,可當(dāng)我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布澡腾。 她就那樣靜靜地躺著,像睡著了一般糕珊。 火紅的嫁衣襯著肌膚如雪动分。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天红选,我揣著相機(jī)與錄音澜公,去河邊找鬼。 笑死喇肋,一個胖子當(dāng)著我的面吹牛坟乾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蝶防,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼甚侣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了间学?” 一聲冷哼從身側(cè)響起殷费,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎低葫,沒想到半個月后详羡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡嘿悬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年殷绍,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鹊漠。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡主到,死狀恐怖茶行,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情登钥,我是刑警寧澤畔师,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站牧牢,受9級特大地震影響看锉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜塔鳍,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一伯铣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧轮纫,春花似錦腔寡、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至糯彬,卻和暖如春凭语,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背撩扒。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工似扔, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人搓谆。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓炒辉,卻偏偏與公主長得像,于是被迫代替她去往敵國和親挽拔。 傳聞我的和親對象是個殘疾皇子辆脸,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,066評論 2 355

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