Unity UGUI Canvas画布中文详解-Chinar

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ChinarCSDN/article/details/90432076

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 )


Chinar

END

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

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

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

展开阅读全文

推荐:转载【uGUICanvas - 画布_Unity3d 开发技术

08-19

[size=16px]原创:【uGUI】Canvas - 画布_Unity3d 开发技术[url=http://blog.csdn.net/ios_song/article/details/52181763]http://blog.csdn.net/ios_song/article/details/52181763[/url] 想看图片对比,可以去这个博客里面看!rnrn  Unity 中有一个能够直观并且快速构建用户界面的 UI 系统,我们叫它 uGUI。rnrnuGUIrnrn  在 uGUI 中,Canvas 是一个挂载了 Canvas 组件的游戏对象,它划定了一个区域,用来容纳所有的 UI 元素,并且这些 UI 元素必须是 Canvas 的子对象。rnrn  当我们创建一个新的 UI 元素时,如果场景中还没有 Canvas,就会自动创建出一个 Canvas。rnrn  Canvas 会在 Scene 视图中显示出一个矩形区域,这就可以使我们在不运行项目的情况下,直接在 Scene 视图中可视化地定位 UI 元素。rnrn rnrn元素的绘制顺序rn  Canvas 中 UI 元素的绘制顺序,和它们在层级视图中出现的顺序相同。Canvas 下第一个子对象会最先被绘制,接着是第二个子对象,以此类推。如果两个 UI 元素重叠了,那么后绘制的元素会覆盖掉先绘制的元素。rnrn  要想改变某个 UI 元素的绘制顺序,只需要通过拖动重新在层级视图中排列元素就可以了。绘制顺序也能够通过脚本来控制,需要用到 Transform 组件的三个方法:SetAsFirstSibling、SetAsLastSibling 和 SetSiblingIndex。rnrn rnrnRender Mode - 渲染模式rn  Canvas 中的 Render Mode 设置,用来决定它以屏幕空间进行渲染还是以世界空间进行渲染,有三种设置方式。rnrn1、Screen Space - Overlayrnrn  这种渲染模式将屏幕上的 UI 元素渲染在场景的最顶层。如果屏幕的大小或者分辨率发生了变化,Canvas 也会自动改变大小,和屏幕的保持一致。rnrnrnrnScreen Space - Overlayrnrn2、Screen Space - Camerarnrn  这个渲染模式和 Screen Space - Overlay 相似,在这种模式下,Canvas 会处于指定摄像机的前方,距离可以调整。UI 元素通过这个摄像机来渲染,摄像机的设置会影响 UI 的外观。如果摄像机设置为了透视,UI 元素也会以透视呈现,并且透视的形变量可以通过摄像机的 Field of View 来控制。如果屏幕的大小或者分辨率发生了变化,或者摄像机的视锥发生了变化,Canvas 同时也会改变大小,和屏幕保持一致。rnrnrnrnScreen Space - Camerarnrn3、World Spacernrn  在这种渲染模式下,Canvas 就和场景中的其他游戏对象一样。Canvas 的大小能够手动地通过 RectTransform 来设置,并且 UI 元素会根据在 3D 场景中的放置位置,来决定渲染在场景中其他对象的前面还是后面。当我们想让 UI 成为世界场景的一部分时非常有用。这也被称作“叙事化界面(Diegetic Interface)”。rnrn[/size] 论坛

没有更多推荐了,返回首页