Unity UGUI Canvas画布中文详解-Chinar

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水物体
UIUI层
PostProcessing后处理中的游戏对象

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


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


支持

May Be —— 开发者,总有一天要做的事!


拥有自己的服务器,无需再找攻略

Chinar 提供一站式《零》基础教程

使有限时间 具备无限可能!

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


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


Chinar

END

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

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

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

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页