Unity3D学习笔记uGUI(9):Canvas详述

发表于2017-03-09
评论2 1.1w浏览

Canvas是一个控制一组被渲染UI元素的组件, 所有的UI元素必须是Canvas的子物体。考虑到有些人对uGUI Canvas组件了解的不够,下面就给大家详细介绍下uGUI Canvas组件,一起来看看吧。

9Canvas Components - Canvas

         Canvas组件呈现了UI如何摆放和渲染。所有UI元素必须为Canvas组件的子节点。通过菜单GameObject->CreateUI即可创建一个UI元素,若当前Scene没有Canvas节点,则自动创建一个Canvas

         Canvas组件三种模式的区别:   

        

        

        

9.1 Canvas属性一览

Render Mode

定义UI如何渲染于屏幕之上,可选项包括:Screen Space - Overlay

Screen Space - Camera

World Space

Pixel Perfect

是否抗锯齿,

仅适用于Screen Space - Overlay/Camera模式

Render Camera

定义用于渲染UI的摄像机,

仅适用于Screen Space - Camera模式

Plane Distance

定义UI平面摆放在摄像机的前方距离,

仅适用于Screen Space - Camera模式

Event Camera

定义处理UI事件的摄像机,

仅适用于World Space模式

 

9.2 Canvas细节

         通常一个Scene只需Canvas足矣,但多个Canvas也是支持的。为了优化目的,也支持Canvas嵌套,也即将某个Canvas作为另一个Canvas子节点。子Canvas跟父CanvasRander Mode保持一致。

         通常来讲,UI元素所见即所得。换句话说,它们并没有3D摄像机的概念。Unity支持这种平面的渲染方式,同时也支持Scene中物件的渲染方式,这取决于Render Mode设置项。当前有三种模式可选:Screen Space -OverlayScreenSpace - Camera以及WorldSpace

 

9.2.1 Screen Space - Overlay

         此模式下,Canvas会被缩放以适应屏幕,然后直接渲染到屏幕上,无需任何摄像机(即使当前Scene中没有任何摄像机)。若屏幕尺寸或者分辨率变更了,则UI会自动缩放来适应。UI会覆盖所有其他摄像机所见的画面。

        

         注意:Screen Space - Overlay模式的Canvas需要放在节点树(Hierarchy)的顶端(所有UI元素的顶端)。否则UICanvas节点树以外的UI)会从视图中消失。这是Unity内置的限制。所以保持Screen Space - Overlay模式的Canvas在节点树顶端,才能确保预期效果。

 

9.2.2 Screen Space - Camera

         此模式下,Canvas会渲染于摄像机前面指定距离的一个平面上。UI在屏幕上的大小并不随此距离变化而变化,因为UI总是被缩放来准确适配Camera Frustum。若Camera Frustum或屏幕尺寸或分辨率发生变化,UI会自动缩放来适应。Scene中任何比UI平面距离摄像机更近的3D物件,都将先于UI被渲染。相反位于UI平面后面的物件就会被遮挡。

        

 

9.2.3 World Space

         此模式下,UI被看作是Scene中的一个平面物件。不像Screen Space - Camera模式,此时UI平面并不需要面向摄像机,而是可以面向任意一个方向。通过RectTransform可以设置Canvas尺寸,但他的屏幕大小将取决于摄像机的视角以及距离。其他场景中物件可能位于Canvas背面,或穿透Canvas,或位于Canvas前面。

        

 

10Canvas Components - Canvas Scaler

         CanvasScaler组件用于控制CanvasUI元素的缩放和像素密度。缩放会影响Canvas底下的所有东西,包括字体大小和图像边距。

        

 

10.1 Canvas Scaler属性一览

UI Scale Mode

定义缩放模式

 - Constant Pixel Size

固定像素值。不管屏幕多大,始终保持固定像素值尺寸。

 - Scale With Screen Size

屏幕多大,UI元素就多大。

 - Constant Physical Size

固定物理尺寸。不管屏幕多大或分辨率多大,始终保持固定物理尺寸。

 

1UI Scale Mode设置为Constant Pixel Size时:

Scale Factor

使用此因子缩放Canvas下所有UI元素

Reference Pixels Per Unit

Sprite设置了“Pixels Per Unit”,则UI1个单位长度对应Sprite1个像素。

 

2UI Scale Mode设置为Scale With Screen Size时:

Reference Resolution

UI布局的屏幕分辨率参照值。若屏幕实际分辨率大于参照值,则UI会放大;相反若屏幕实际分辨率小于参照值,则UI会缩小。

Screen Match Mode

若实际屏幕分辨率的比例跟参照值不一样,则选用何种缩放Canvas区域的模式。

- Match Width or Height

Canvas区域的实际宽度或高度与参照值的比例值来进行缩放。

- Expand

按水平或垂直方向放大到满屏。所以此时Canvas尺寸必须大于参照值。

- Shrink

按水平或垂直方向裁切Canvas以达到满屏。所以此时Canvas尺寸必须小于参照值。

Match

以宽度、高度或两者之间的综合值作为缩放基准。

Reference Pixels Per Unit

Sprite设置了“Pixels Per Unit”,则UI1个单位长度对应Sprite1个像素。

 

3UI Scale Mode设置为Constant Physical Size时:

Physical Unit

指定位置和大小的物理单位。

Fallback Screen DPI

备用的屏幕PDI

Default Sprite DPI

提供给Sprite的每英寸像素,此Sprite设置了“Pixels Per Unit”来适用“Reference Pixels Per Unit”。

Reference Pixels Per Unit

Sprite设置了“Pixels Per Unit”,则它的DPI适用于“Default Sprite DPI”。

 

4UI Scale Mode设置为World Space Canvas时(当CanvasWorld Space模式时可选):

Dynamic Pixels Per Unit

每单位使用多少个像素来动态创建如Text这类UIBitmaps

Reference Pixels Per Unit

Sprite设置了“Pixels Per Unit”,则World1个单位长度对应Sprite1个像素。假如“Reference Pixels Per Unit”设为1,则等于Sprite的“Pixels Per Unit”。

 

【以上PixelsPer Unit的含义需参照英文原文理解】

 

10.2 Canvas Scaler细节说明

         Canvas设置为Screen Space - OverlayScreen Space - Camera,那么Canvas ScalerUI Scale Mode可设为Constant Pixel SizeScale With Screen SizeConstant Physical Size

 

10.2.1 Constant Pixel Size

         此时UI元素的位置与大小为固定像素个数。等于无任何ScreenScaler的默认模式。然而,若同时设置了Scale Factor属性值,则CanvasUI元素会以固定比例缩放。

 

10.2.2 Scale With Screen Size

         此时UI元素的位置与大小按屏幕分辨率参照值来取相对值。若当前屏幕分辨率大于参照屏幕分辨率,则Canvas依然是按参照屏幕分辨率布局,然后放大来适应屏幕。同样的,若当前屏幕分辨率小于参照屏幕分辨率,Canvas会缩小来适应。

         若当前屏幕分辨率的纵横比跟参照分辨率不一样,垂直跟水平两个方向同时适应屏幕会发生不均匀拉伸,而这通常不是我们想要的。取而代之的是,Reference Resolution组件会使Canvas分辨率偏离参照分辨率,以此保持纵横比不变。通过设置Screen Match Mode可达到此目的。

 

10.2.3 Constant Physical Size

         此时UI元素的位置与大小是通过物理单位指定的,比如毫米(Millimeters)、点(Points)或字(Picas)。此模式依赖于设备能够提供正确的屏幕DPI信息。对于不能提供正确DPI值的设备,也可以指定备用的屏幕DPI值(Fallback DPI)。

 

10.2.4 World Space

         此时Canvas Scaler可用来控制CanvasUI元素的像素密度。

 

11Canvas Components - Canvas Group

         CanvasGroup用于统一控制整组UI元素的某一方面,而不必逐个处理。Canvas Group影响自身节点及其所有子节点。

        

 

11.1 Canvas Group属性一览

Alpha

透明度,取值[0.0~1.0]。比如0表示完全透明,而1表示完全不透明。注意到UI元素自身也有Alpha属性,那么Canvas GroupAlpha值与UI元素的Alpha值取它们相乘值作为最终值。

Interactable

是否响应输入。若为False则不响应。

Block Raycasts

此组件是否作为RaycastsCollider。可以调用Canvas上面附属Graphic RaycasterRayCast函数来检测。但这并不适用于Physics.Raycast

Ignore Parent Groups

是否忽略父节点Canvas Group影响。若勾上则忽略父节点设置并按自身属性值设置。

 

11.2 Canvas Group细节说明

         CanvasGroup常见用法如下:

         1)给窗口的父节点挂载Canvas Group,控制Alpha值达到淡入淡出的效果。

         2)给一组控制组件的父节点挂载Canvas Group,统一设置为不响应输入。

         3)给一个或多个UI元素的的父节点挂载Canvas Group,统一设置为不拦截点击事件。

 

12Canvas Components - Canvas Render

         CanvasRenderer组件负责渲染Canvas所包含的UI物件。

 

12.1 Canvas Renderer属性一览

         CanvasRendererInspector视图中没有属性可以设置。

 

12.2 Canvas Renderer细节说明

         通过菜单(GameObject=>Create UI)创建的标准UI物件都有Canvas Renderer附属组件。而自定义UI物件则需要手动添加Canvas Renderer组件。虽然在Inspector面板中不能设置任何属性,然而通过脚本可以调用它的少量属性和方法。

点击访问官方英文文档

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引