GraphiIcs UI层级覆盖详细攻略

先跟着设置前面的Canvas和摄像机Camera以及菜单栏的Edit/perferences/Graphics
首选介绍一下缘由:我们要做的是2D,毕竟是UI层级的

渲染模式 画布对应屏幕 摄像机 像素对应 适合类型
Screen Space-Overlay 不需要 可选 2D UI
Screen Space-Camera 需要 可选 2D UI
World Space 需要 不可选 3D UI

至于摄像机的正交和透视,2D大多数都是用正交,就不用再多说了吧,因为不需要远近这个功能。

GraphiIcs UI层级覆盖详细攻略_第1张图片
GraphiIcs UI层级覆盖详细攻略_第2张图片

GraphiIcs UI层级覆盖详细攻略_第3张图片
X,Y,Z是对应的覆盖条件,在这里我选择用Y轴来做案例讲解,因为Y轴用的比较多
如下图,蓝色在红色上面,那么正常来说,蓝色会一直覆盖红色。

给图片加个条件,用来控制图片的层级
GraphiIcs UI层级覆盖详细攻略_第4张图片

GraphiIcs UI层级覆盖详细攻略_第5张图片
接下来,我们将红色Y调到蓝色下面,看看如何
GraphiIcs UI层级覆盖详细攻略_第6张图片
好了这就是核心操作了,相信你一下就懂了。
哎哎哎,客官,别走,还没讲完呢,下面还有扩展题,不如给自己加点分?

影响这个上下的和物体的子物体也有关系,我们试着给蓝色添加子物体改变。
GraphiIcs UI层级覆盖详细攻略_第7张图片
从这个图可以看见,这个紫色的图片是我添加上去,用于给大家识别这是蓝色的中点线的。
明显此时蓝色的中点线在红色的中点下面,所以蓝色覆盖了红色,那么移上去。

GraphiIcs UI层级覆盖详细攻略_第8张图片
这样就是红色盖住蓝色了,另外蓝色的子物体不要添加Canvas,如果你添加了,那你会发现,蓝色的子物体就拥有双重功能,他自己就是一个可以分遮盖层级的图片并且影响他的父物体的中点线(但自己不受影响)。如下图

GraphiIcs UI层级覆盖详细攻略_第9张图片
GraphiIcs UI层级覆盖详细攻略_第10张图片
OK,今天的2D图片渲染覆盖层级就到这了。

你可能感兴趣的:(C#,Unity3D)