Unity UGUI Canvas画布中文详解-Chinar

最新推荐文章于 2025-04-13 09:24:50 发布

Chinarcsdn

最新推荐文章于 2025-04-13 09:24:50 发布

阅读量1w

点赞数 14

本文链接：https://blog.csdn.net/ChinarCSDN/article/details/90432076

版权

Unity 3D 同时被 2 个专栏收录

178 篇文章

订阅专栏

UGUI

15 篇文章

订阅专栏

本文是Unity UGUI-Canvas画布的中文图解教程。介绍了画布是所有UI组件的子集，UI需放在其中才能正常显示。还详细讲解了Canvas的属性，包括屏幕空间覆盖、相机、世界三种模式，以及画布的缩放模式和射线检测类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Chinar blog ：www.chinar.xin

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

Unity UGUI-Canvas 画布

本文提供全流程，中文翻译。

Chinar 的初衷是将一种简单的生活方式带给世人

使有限时间具备无限可能

Chinar —— 心分享、心创新！

助力对 Unity UGUI Canvas 有一个全面的认知

为初学者节省宝贵的时间，避免采坑！

Chinar 教程效果：
在这里插入图片描述

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

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

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