Unity中Canvas及三种渲染模式

1. 什么是Canvas

使用UGUI来进行UI开发,离不开Canvas组件,所有的 UI 元素,要么自己包含 Canvas 组件,要么是 Canvas 组件所在 GameObject 的子节点。

2. 如何创建 Canvas

你在 Hierarchy 视图创建任何一个 UI 元素(比如Image)都会自动生成一个 Canvas 作为它的父节点。你也可以可以直接创建一个 Canvas,然后添加其他 UI 元素作为其子节点。

3. Canvas 组件的RenderMode 参数

Canvas 组件的参数 RenderMode,有三个选项:Screen Space - Overlay、Screen Space - Camera、World Space。

Canvas 的 RenderMode 参数

4. Screen Space - Overlay 模式

Canvas 覆盖屏幕,且永远覆盖在其它元素的上层,也就是说 UI 会遮挡场景中的其它元素。

Overlay 模式下 UI 总是渲染在3d元素的上面

当 RenderMode 为 Screen Space - Overlay时,Canvas的其它参数包括:

Pixel Perfect:UI元素精确到像素对齐,边缘更清晰,但是在UI调整和适配时会有更大的计算量(个人理解)

Sort Order:Canvas 的深度。多个 存在多个Canvas时,Sort Order 值更大的Canvas会遮盖住 Sort Order 值小的 Canvas

注:多个 Canvas 深度取值相等时,Hierarchy 视图中后面的 Canvas 显示在下,这一点与 UI 元素(如Image的规则相反)

5. Screen Space - Camera 模式

和 Overlay 模式相仿,Canvas覆盖整个屏幕空间画布也是填满整个屏幕空间。不同之处在于,Canvas 被放置于指定摄像机的前方。

Canvas 被放置在摄像机的前方

这种模式下面 UI 并不一定能渲染在 3d 元素之上

Camera 模式下,3d 元素可能渲染在UI之上

(1) 必须在摄像机的远近平面之间才会被渲染

(2) 即使摄像机是 Perspective 模式,Canvas 距离摄像机的远近依然不会影响其显示大小

(3) 其它3元素可以和 Canvas 产生遮挡关系,距离摄像机更近的元素会遮盖住 Canvas 上面的 UI

(4) 摄像机的缩放/平移/旋转,以及 fov 的变化,不会影响 Canvas 显示结果,Canvas 永远是放置在距离摄像机视口一定距离的地方,且与摄像机水平视线垂直

Screen Space - Camera 的参数包括:

Screen Space - Camera 模式 Canvas 的参数

Pixel Perfect :同 Overlay 模式含义

Render Camera :指定的用来渲染 Canvas 的摄像机

Plane Distance:Canvas 平面距离摄像机的距离

Sorting Layer:指示 Canvas 的深度,可以手动添加。当存在多个模式为 Screen Space 的 Canvas 时,Sorting Layer 决定了显示的优先级。

Order in Layer:多个 Canvas 具有相同的 Sorting Layer 时,根据 Order in Layer 来确定显示优先级。

5. World Space 模式

此种模式下,Canvas 与场景中其它3D元素没有区别

World space 模式的Canvas 本质上就是3d 元素

此时

Canvas 可以调整 RectTransform 的数值

摄像机的平移旋转缩放及fov都会影响 Canvas 的显示

需要 EventCamera 来指定接受事件的摄像机

6. 总结

不同模式的 Canvas之间,Screen Space - Overlay 的 Canvas 永远显示在最前面,Screen Space - Camera 和 World 的显示关系决定于 World Canvas 距离摄像机的位置以及 Screen Space - Camera Canvas 的 Plane Distance

相同的 Screen Space - Overlay Canvas :显示优先级由 Sort Order 确定

相同的 Screen Space - Camera:显示优先级由 Sorting Layer 和 Order in Layer 确定

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351