Canvas的概念
ugui中的Canvas可以想象为铺满屏幕的一张画布,本质上是一个绑定了Canvas组件的对象,所有UI控件都需要在其之上绘制,也就是说其他UI对象需要作为Canvas对象的子对象才可以被渲染出来,在Hierarchy面板中右键新建任意UI控件,若当前场景没有Canvas,会为其自动创建一个Canvas父对象。Canvas的长宽与Game视图中你指定的分辨率一致,如果为Free Aspect,则会自动填满整个窗口。
Render Mode
Canvas有三种渲染模式,如下图所示
三种渲染模式的官方文档:https://docs.unity3d.com/Manual/class-Canvas.html
Screen Space - Camera
我们先来看第二个选项,Screen Space - Camera模式,该模式应用最多,也最为灵活,可以非常方便的安排同一Canvas下不同控件的遮挡关系,以及不同Canvas之间的遮挡关系。
该渲染模式下,Canvas画布中心坐标的x,y值会自动对应相机世界坐标的x,y值,z值则为相机世界坐标的z值加上Plane Distance属性中你设置的距离,默认为100,比如相机世界坐标为(1,2,3),则Canvas的中心坐标的x,y值分别为1,2,z值则为103,即世界坐标为(1,2,103),当改动相机坐标时,Canvas的世界坐标会按此规律作出相应变化,注意不要把相机放到Canvas的子对象中。
Pixel Perfect
官方文档的解释是应用抗锯齿技术,使图像边缘更为平滑,勾选则应用该效果,该选项只在两个Screen Space模式下出现
Render Camera
渲染该Canvas的相机,一般该模式下相机的投影模式Projection选项会设为正交投影Orthographic。
Plane Distance
Canvas在相机前的距离,如果相机投影模式为Orthographic,则该值大小对显示效果没有影响,默认值为100,如果两个Canvas的Render Camera相同,且Sorting Layer和Order in Layer选项完全一致(要注意这两个选项的设置对Canvas之间覆盖关系的影响优先级更高),则Plane Distance值较小的Canvas会覆盖在值较大的Canvas上面,直观来说,就是离相机越近的越靠上。
Sorting Layer
该选项用于管理多个Canvas,将它们组织为不同层级来形成覆盖关系,在Sorting Layer中可以Add Sorting Layer ,如下图我添加了两个层,越靠下的层级,其中的Canvas越靠前,比如设置为layer2的Canvas会覆盖在设置为layer1的Canvas之上。
Order in Layer
对于同一Sorting layer之下的几个Canvas,其覆盖关系就由Order in Layer来指定了,该值默认为0,设置的越大,则Canvas越靠前,比如同为layer1层之下的2个Canvas,Canvas1的Order in Layer值为1,Canvas2的为2,则Canvas2就会覆盖在Canvas1之上。
Additional Shader Channel
与shader材质通道有关的选项,一般用到的不多。
Screen Space - Overlay
该渲染模式下,Canvas画布的左下角坐标会自动设定为(0,0),整个Canvas界面会保持在画面最前,遮挡其他对象,该模式不需要相机。将其放在第二个讲,就是因为该模式可以看做Screen Space - Camera模式的一种特殊情况,相信聪明的你也发现了,选择该模式的Canvas,就相当于在Screen Space - Camera模式下,Sorting Layer永远保持最大了而已。
Sort Order
该属性针对多个Canvas同时存在的情况,值越大则对应Canvas越靠前,相应的Sort Order值低的Canvas会被遮挡,可以将其理解为Screen Space - Camera模式下同一Sorting Layer中对Order in Layer的设置带来的影响。
Target Display
该属性是针对分屏需求而设置的,比如有两块显示器,则设置为display2的Canvas会显示在第二个显示器上,该属性用的不多,有错误欢迎指出并补充。
World Space
该渲染模式顾名思义,图像会以3D世界的真实坐标渲染,可以看作一个3D世界的面片,常用于绑定在3D对象上的UI,比如角色的血条等。该模式下属性与Screen Space - Camera模式相似,区别就是相机投影模式一般为透视投影Perspective。
最后推荐几篇简洁易懂的Render Mode介绍:
https://blog.csdn.net/fdyshlk/article/details/78509909
https://www.cnblogs.com/msxh/p/6337338.html