Unity3D学习笔记uGUI(9):Canvas详述
Canvas是一个控制一组被渲染UI元素的组件, 所有的UI元素必须是Canvas的子物体。考虑到有些人对uGUI Canvas组件了解的不够,下面就给大家详细介绍下uGUI Canvas组件,一起来看看吧。
9、Canvas 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跟父Canvas的Rander Mode保持一致。
通常来讲,UI元素所见即所得。换句话说,它们并没有3D摄像机的概念。Unity支持这种平面的渲染方式,同时也支持Scene中物件的渲染方式,这取决于Render Mode设置项。当前有三种模式可选:Screen Space -Overlay、ScreenSpace - Camera以及WorldSpace。
9.2.1 Screen Space - Overlay
此模式下,Canvas会被缩放以适应屏幕,然后直接渲染到屏幕上,无需任何摄像机(即使当前Scene中没有任何摄像机)。若屏幕尺寸或者分辨率变更了,则UI会自动缩放来适应。UI会覆盖所有其他摄像机所见的画面。
注意:Screen Space - Overlay模式的Canvas需要放在节点树(Hierarchy)的顶端(所有UI元素的顶端)。否则UI(Canvas节点树以外的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前面。
10、Canvas Components - Canvas Scaler
CanvasScaler组件用于控制Canvas中UI元素的缩放和像素密度。缩放会影响Canvas底下的所有东西,包括字体大小和图像边距。
10.1 Canvas Scaler属性一览
UI Scale Mode | 定义缩放模式 |
- Constant Pixel Size | 固定像素值。不管屏幕多大,始终保持固定像素值尺寸。 |
- Scale With Screen Size | 屏幕多大,UI元素就多大。 |
- Constant Physical Size | 固定物理尺寸。不管屏幕多大或分辨率多大,始终保持固定物理尺寸。 |
(1)UI Scale Mode设置为Constant Pixel Size时:
Scale Factor | 使用此因子缩放Canvas下所有UI元素 |
Reference Pixels Per Unit | 若Sprite设置了“Pixels Per Unit”,则UI中1个单位长度对应Sprite的1个像素。 |
(2)UI 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”,则UI中1个单位长度对应Sprite的1个像素。 |
(3)UI 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”。 |
(4)UI Scale Mode设置为World Space Canvas时(当Canvas为World Space模式时可选):
Dynamic Pixels Per Unit | 每单位使用多少个像素来动态创建如Text这类UI的Bitmaps。 |
Reference Pixels Per Unit | 若Sprite设置了“Pixels Per Unit”,则World中1个单位长度对应Sprite的1个像素。假如“Reference Pixels Per Unit”设为1,则等于Sprite的“Pixels Per Unit”。 |
【以上PixelsPer Unit的含义需参照英文原文理解】
10.2 Canvas Scaler细节说明
若Canvas设置为Screen Space - Overlay或Screen Space - Camera,那么Canvas Scaler的UI Scale Mode可设为Constant Pixel Size、Scale With Screen Size或Constant Physical Size。
10.2.1 Constant Pixel Size
此时UI元素的位置与大小为固定像素个数。等于无任何ScreenScaler的默认模式。然而,若同时设置了Scale Factor属性值,则Canvas的UI元素会以固定比例缩放。
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可用来控制Canvas中UI元素的像素密度。
11、Canvas Components - Canvas Group
CanvasGroup用于统一控制整组UI元素的某一方面,而不必逐个处理。Canvas Group影响自身节点及其所有子节点。
11.1 Canvas Group属性一览
Alpha | 透明度,取值[0.0~1.0]。比如0表示完全透明,而1表示完全不透明。注意到UI元素自身也有Alpha属性,那么Canvas Group的Alpha值与UI元素的Alpha值取它们相乘值作为最终值。 |
Interactable | 是否响应输入。若为False则不响应。 |
Block Raycasts | 此组件是否作为Raycasts的Collider。可以调用Canvas上面附属Graphic Raycaster的RayCast函数来检测。但这并不适用于Physics.Raycast。 |
Ignore Parent Groups | 是否忽略父节点Canvas Group影响。若勾上则忽略父节点设置并按自身属性值设置。 |
11.2 Canvas Group细节说明
CanvasGroup常见用法如下:
(1)给窗口的父节点挂载Canvas Group,控制Alpha值达到淡入淡出的效果。
(2)给一组控制组件的父节点挂载Canvas Group,统一设置为不响应输入。
(3)给一个或多个UI元素的的父节点挂载Canvas Group,统一设置为不拦截点击事件。
12、Canvas Components - Canvas Render
CanvasRenderer组件负责渲染Canvas所包含的UI物件。
12.1 Canvas Renderer属性一览
CanvasRenderer在Inspector视图中没有属性可以设置。
12.2 Canvas Renderer细节说明
通过菜单(GameObject=>Create UI)创建的标准UI物件都有Canvas Renderer附属组件。而自定义UI物件则需要手动添加Canvas Renderer组件。虽然在Inspector面板中不能设置任何属性,然而通过脚本可以调用它的少量属性和方法。