Unity UGUI Canvas画布中文详解-Chinar

Chinar blog ：www.chinar.xin

---

Unity UGUI 完整系列教程 (Chinar中文图解)

---

Unity UGUI-Canvas 画布

---

本文提供全流程，中文翻译。 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能

Chinar —— 心分享、心创新！ 助力对 Unity UGUI Canvas 有一个全面的认知 为初学者节省宝贵的时间，避免采坑！

Chinar 教程效果：

---

文章目录

• 1
• Presentation —— 介绍
• 2
• Canvas Attribute —— Canvas 属性
• 2.1 Screen Space-Overlay —— 屏幕空间覆盖模式
• 2.2 Screen Space-Camera —— 相机模式
• 2.3 World Space —— 世界模式
• 3
• Canvas Scaler —— 画布的缩放
• 3.1 Constant Pixer Size —— 恒定像素
• 3.2 Scale With Screen Size —— 屏幕尺寸比例
• 3.3 Constant Physical Size —— 恒定尺寸
• 4
• Graphic Raycaster —— 射线检测
• 支持
• May Be —— 开发者，总有一天要做的事！

---

全文高清图片，点击即可放大观看 (很多人竟然不知道)

---

1

Presentation —— 介绍

• Canvas 画布，所有的UI组件都是在它的子集里面，
• 如果UI不放在它的子集中，那么这个UI将不能正常显示在 Game 视窗中

我们创建一个 Canvas 组件看一下它的属性：

在Unity的 Hierarchy 面板上右键–>UI–>Canvas

---

2

Canvas Attribute —— Canvas 属性

选中我们创建的 Canvas 对象，我们来了解下位于Inspect面板上的 Canvas 画布的属性

我们从 Render Mode / 渲染模式 说起

2.1 Screen Space-Overlay —— 屏幕空间覆盖模式

• 覆盖模式：表示 Canvas 下的所有的 UI永远位于屏幕的前面，覆盖掉相机渲染场景显示的元素。
• ( 不管有没有相机去渲染场景 )

属性	功能
Pixel Perfect	使UI元素像素对应，效果就是边缘清晰不模糊
Sort Order	多个Canvas时，数值越大越后渲染。值大的 画布，会挡住值小的
Target Display	目标显示器，如果有多个屏幕的话可以选择

• 1.我们在 Main Camera 视角范围内放一个 Cube

• 2.再创建一些 UI 元素，用于测试 覆盖模式的效果

结果发现 Game 视窗并没有看到 Cube,**

---

2.2 Screen Space-Camera —— 相机模式

• 这种渲染模式 Canvas 和 摄像机之间有一定的距离 , 可以在摄像机和 Canvas之间放置一些模型或粒子特效

属性	功能
Pixel Perfect	使UI元素像素对应，效果就是边缘清晰不模糊
Render Camera	渲染的相机
Sort Layer	画布的深度,指定了相机的渲染顺序
Order In Layer	值越大，该UI越显示在前面

---

2.3 World Space —— 世界模式

• 这种模式下 Canvas 就和普通的 3D 物体一样了 , 可以控制它的大小,旋转,缩放等，其属性与 Camera 模式一致

我们创建一个 Cube,然后在创建一个 Canvas 将其放到 Cube 的子集中，然后在 Canvas 下创建一个 Text，
调整大小后会是这个效果：

---

3

Canvas Scaler —— 画布的缩放

缩放模式有三种，我们来一一介绍一下

3.1 Constant Pixer Size —— 恒定像素

• 这种模式下 UI以像素为大小，同样的像素在不同的分辨率下尺寸不一样

---

3.2 Scale With Screen Size —— 屏幕尺寸比例

• 这种模式下UI元素的位置与大小按当前屏幕分辨率和设置的分辨率来取相对值。
• 若当前屏幕分辨率大于/小于设置屏幕分辨率，则Canvas依然是按设置屏幕分辨率布局，然后放大/缩小来适应屏幕，
• 这会导致 UI 被不均匀的拉伸或缩小，导致界面混乱

---

3.3 Constant Physical Size —— 恒定尺寸

• 这种模式下 UI以像素为大小，在不同的分辨率下尺寸不一样

Cancas Scaler核心内容请参考这位大神的博客

---

4

Graphic Raycaster —— 射线检测

属性	功能
Ignore Reversed Graphics	是否忽略反方向图形，勾选此选项时反转180°的图形将不接受射线检测，否则正反面都接受
Blocking Objects	屏蔽指定对象类型，None 都不屏蔽 Two D 屏蔽具有2D碰撞体的2D物理对象，Three D 屏蔽具有3D碰撞体的3D物理对象， All 屏蔽所有物体对象
Blocking Mask	使屏蔽对象中的指定层不参与射线检测

下面来解释一下 Blocking Mask 中的类型

属性	功能
Nothing	都不屏蔽
Everything	全部屏蔽
Default	使默认层
TransparentFX	透明的游戏对象
Ignore Raycast	反方向图形
Water	水物体
UI	UI层
PostProcessing	后处理中的游戏对象

---

至此：您已完美征服了 UGUI - Canvas

---

Unity UGUI 完整系列教程 (Chinar中文图解)

---

支持

May Be —— 开发者，总有一天要做的事！

拥有自己的服务器，无需再找攻略 Chinar 提供一站式《零》基础教程 使有限时间 具备无限可能！

---

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)

Chinar 免费服务器、建站教程全攻略！( Chinar Blog )

---

---

END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址