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水物体UIUI层PostProcessing后处理中的游戏对象
至此：您已完美征服了 UGUI - Canvas
Unity UGUI 完整系列教程 (Chinar中文图解)
支持
May Be —— 开发者，总有一天要做的事！
拥有自己的服务器，无需再找攻略 Chinar 提供一站式《零》基础教程使有限时间 具备无限可能！
先点击领取 —— 阿里全产品优惠券 (享受最低优惠)
Chinar 免费服务器、建站教程全攻略！( Chinar Blog )
END
本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究 对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com 对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址
