【泰裤辣 の Unity百宝箱】Canvas组件四件套讲解
1. 介绍
在上一期内容中，我分享了一套简单易用的UI框架。没想到大家的学习热情这么高，讨论度是目前所有内容最高的。
由此可见，天下苦UI(秦)久已！！！
接下去，我们继续深入探讨UI这个话题。
今天分享的是：Canvas四件套,什么是四件套呢？
他们分别是如下四个组件：
- Canvas组件
- Canvas Scaler组件
- Graphics Raycaster组件
- Canvas Group组件
在每次创建UI界面时，默认会为我们添加前三个组件，而最后一个组件在很多时候也非常常用。今天统一对这四个组件进行讲解~
2. Canvas的四大组件介绍
这里吐槽下Unity官方文档，真的写的太干燥了，好歹举几个例子说明下吧，生怕我们学会是吧？
下面的讲解，我会尽可能结合自己的理解，用“人话”说明白这些组件。
2.1. Canvas
当我们在Unity中创建UI界面时，Canvas组件是最基本的元素之一。它充当着UI元素的容器，并提供了许多参数用于控制UI的显示行为。
下面是Canvas的三种模式（Render Mode）介绍：
2.1.1. Screen Space - Overlay
UI元素将绘制在屏幕最上层，不受摄像机的影响。
-
Pixel Perfect
Pixel Perfect参数用于确保UI元素在不同屏幕分辨率下的像素对齐。当启用Pixel Perfect后，UI元素的位置和尺寸会按照像素对齐到屏幕上的整数像素。简单理解就是，开启后，一些像素风的游戏效果会更好。
-
Sort Order
用于控制UI的遮挡顺序，SortOrder越大的，会出现在屏幕的越顶层。
-
Target Display
用于多屏显示，一般用不到
-
Additional Shader Channels
获取或设置创建 Canvas 网格时要使用的附加着色器通道的掩码，一般用不到
下面这张图很好的呈现了这种模式的表现效果，UI始终在立方体物体的前面：
ScreenSpace
2.1.2. Screen Space - Camera
UI元素将绘制在指定的摄像机下，通常用于在3D场景中嵌入2D UI元素。
-
Pixel Perfect
同上
-
Render Camera
选择渲染的相机，需要创建一个UICamera用于渲染这种UI模式
-
Order in Layer
可以控制相同层级下UI的遮挡顺序
-
Additional Shader Channels
同上
总结
在这种模式下，游戏中至少需要两个摄像机，一个是3D摄像机（主摄像机），另一个就是UI摄像机了。我们需先渲染3D摄像机，然后再渲染UI摄像机，这样UI就会盖在3D场景的前面。我们可以设置 UICamera 里的 Depth 值。
下图是我的UICamera设置，Depth在3D摄像机上的设置是-1，在UI摄像机设置的就是0（或者大于-1）了。另外，UICamera需要设置正交摄像机，此时只需在Projection中选择Orthographic即可。Clipping Planes的最小值建议设置成0，不然有时候某些UI会被剔除掉。
下面这张图很好的呈现了这种模式的表现效果，UI的显示根据相机看到的表现效果进行渲染，如果UICamera的深度比物体深度大，则可能被物体遮挡：
CameraMode
2.1.3. World Space
- Event Camera
定义Canvas的事件系统应该使用的相机。当用户与Canvas进行交互时，该相机将用于确定用户点击的UI元素。
- Sorting Layer
将Ui分为多个排序层级，层级越高的显示在越上方
- Order in Layer
在同一个排序层级内，进一步用数字区分遮挡顺序，结合Sorting Layer实现两级排序
下面这张图很好的呈现了这种模式的表现效果，UI和物体使用同一个相机进行渲染，根据z轴大小来判断深度。简单理解就是，把UI当成物体处理。
WorldSpace
2.2. Canvas Scaler
CanvasScaler
用于控制Canvas中UI元素的缩放和布局。它可以确保在不同分辨率和屏幕大小下，UI元素在屏幕上的大小和位置始终保持一致
Canvas Scaler也有三种模式:
-
Constant Pixel Size：
-
Scale With Screen Size：
-
Constant Physical Size：
但是这里我不打算一一讲解了，只讲最常用的设置方式：自适应屏幕，也就是第二种模式Scale With Screen Size
-
Reference Resolution：
以移动平台为例，现在主流的受击大多数是16:9的分辨率比例，不能把分辨率设置得太高，得考虑兼容低配的受击。这里可以设置分辨率1136 x 640。（我这里设置800 x 600是用于植物大战僵尸项目）
-
Screen Match Mode：
屏幕相对模式一般设置成
Expand，表示Canvas下的UI始终保持在屏幕内，当屏幕宽度变窄后，它会整体缩放高度来保持自适应。你还可以在下拉框选择
始终保持宽度或始终保持高度，这样当分辨率变化时，超出屏幕部分会被裁切掉。
2.3. Graphic Raycaster
用于检测UI元素是否被点击或触摸。当使用鼠标或触摸屏幕时，Graphic Raycaster会向场景中的UI元素发射一条射线，以确定被点击或触摸的元素是哪一个
-
Ignore Reversed Graphics
控制是否忽略逆向的图形。如果启用此选项，则Graphic Raycaster将忽略与其背面朝向的UI元素进行交互。例如，如果你在场景中有一个UI元素，它只有一个正面，那么启用此选项可以确保只有当该元素的正面朝向相机时才会检测到点击或触摸。
-
Blocking Objects
控制哪些对象会被忽略，以确保射线只与UI元素进行交互。这个参数的下拉框中，可以选择忽略
2d物体/3d物体，这样当UI前面存在这些物体时，射线也能够到达UI。 -
Blocking Mask
和上面的选项类似，只是这次屏蔽的是Mash，而不是Objects了。
2.4. CanvasGroup:
官方的解释是：用于控制整个UI组的某些方面的元素，而不需要单独处理他们。
所以我的理解，这个组件就是用于控制Canvas以下所有UI元素的一些特征，比如UI的透明度、UI的交互等等。
他包含四个参数：
-
Alpha：
控制整个画布组的透明度，参数范围
[0-1] -
interactable：
控制按钮的交互，设置为False后，你的按钮将无法点击。并且所有的按钮会呈现半透明的状态（标识其无法交互）。
-
Blocks Raycasts:
控制点触穿透，如果在鼠标所在位置有两个按钮，顶层的UI会拦截掉这次点触，以至于底层的UI不响应本次点触。是否穿透或拦截，由这个参数来控制。
比如，控制
若勾选上"更改用户按钮"是否被"用户列表界面"点触拦截：Blocks Raycasts，则按钮将接收不到用户点触事件。 -
-
Ignore Parent Groups：
忽略
父CanvasGroup的影响，这个很好理解，我们可以在一个Panel的不同位置添加CanvasGroup，我们想让当前位置的CanvasGroup不受父节点CanvasGroup的影响，就需要勾选这个选项。
比如我想实现界面打开和关闭时候的淡入淡出，这时候就可以将Canvas Group和DoTween结合使用：
具体代码如下
public virtual void OpenPanel(string name)
{
// ...
CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
canvasGroup.alpha = 0.0f;
DOTween.To(() => canvasGroup.alpha, x => canvasGroup.alpha=x, 1, 2);
// ...
}
public virtual void ClosePanel()
{
isRemove = true;
CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
DOTween.To(() => canvasGroup.alpha, x => canvasGroup.alpha = x, 0, 1).onComplete(
() =>
{
SetActive(false);
Destroy(gameObject);
if (UIManager.Instance.panelDict.ContainsKey(name))
{
UIManager.Instance.panelDict.Remove(name);
}
}
);
}
更多
以上就是小棋对Canvas四件套的分享啦~
文章的视频版本已经同步发布在b站的同名账号(打工人小棋)上，感兴趣的同学可以去看看~
相信看完这些内容，对你的游戏开发技能一定有所帮助。
同学们有任何关于Canvas的时候经验，或者文章中出现了什么纰漏，都欢迎在评论区进行讨论。
我们下期再见~~~