Unity Canvas 详解
文章目录
三种画布渲染模式
-
Screen Space - Overlay(屏幕控件 - 覆盖模式)多用于 3D 游戏
画布会填满整个屏幕空间,并将画布下面的所有的 UI 元素置于屏幕的最上层,或者说画布的画面永远 “覆盖” 在 其他普通的 3D 画面上,如果屏幕尺寸被改变,画布将自动改变尺寸来匹配屏幕。
例如小地图的显示。
-
Screen Space-Camera(屏幕空间 - 摄影机模式)多用于 2D 游戏
该模式下,画布会被放置到摄影机前方。在这种渲染模式下,画布看起来绘制在一个与摄影机固定距离的平面上。所有的 UI 元素都由该摄影机渲染,因此摄影机的设置会影响到 UI 画面。
- Render Camera: 渲染摄像机
- Plane Distance: 画布距离摄像机的距离
-
World Space(世界控件模式)
- 在此模式下,画布被视为与场景中其他普通游戏对象性质相同的类似于一张面片(Plane)的游戏物体。画布的尺寸可以通过 RectTransform 设置,所有的 UI 元素可能位于普通 3D 物体的前面或者后面显示。当 UI 为场景的一部分时,可以使用这个模式。
Canvas Scaler
Property: | Function: |
---|---|
UI Scale Mode | 缩放模式 |
Constant Pixel Size | 使 UI 元素保持固定的像素大小,无论屏幕大小。 |
Scale With Screen Size | 屏幕越大,UI 元素越大。 |
Constant Physical Size | 使UI元素保持相同的物理大小,而不考虑屏幕大小和分辨率。 |
Constant Pixel Size
Property: | Function: |
---|---|
Scale Factor | 按此比例缩放画布中的所有UI元素。 |
Reference Pixels Per Unit | 如果一个精灵有这个“像素单位”设置,那么精灵中的一个像素将覆盖 UI 中的一个单元。 |
Scale With Screen Size
Property: | Function: |
---|---|
Reference Resolution | **UI 布局的分辨率。**如果屏幕分辨率较大,UI就会被放大;如果屏幕分辨率较小,UI就会被缩小。 |
Screen Match Mode | 屏幕匹配模式,如果当前分辨率的纵横比不适合参考分辨率,则用于缩放画布区域的模式。即,以什么作为参考来进行缩放。 |
Match Width or Height | 以宽度或高度作为参考缩放画布,或介于两者之间。 |
Expand | 水平或垂直地展开画布区域,这样画布的大小永远不会小于引用。 |
Shrink | 水平或垂直裁剪画布区域,因此画布的大小永远不会大于引用。 |
Match | 确定缩放是使用宽度或高度作为参考,还是两者之间的混合。 |
Reference Pixels Per Unit | 如果一个精灵有这个“像素单位”设置,那么精灵中的一个像素将覆盖UI中的一个单元。 |
Constant Physical Size
Property: | Function: |
---|---|
Physical Unit | The physical unit to specify positions and sizes in. |
Fallback Screen DPI | The DPI to assume if the screen DPI is not known. |
Default Sprite DPI | The pixels per inch to use for sprites that have a ‘Pixels Per Unit’ setting that matches the ‘Reference Pixels Per Unit’ setting. |
Reference Pixels Per Unit | If a sprite has this ‘Pixels Per Unit’ setting, then its DPI will match the ‘Default Sprite DPI’ setting. |
Canvas Group
用于控制整个UI元素组的某些方面,而不需要分别处理它们。Canvas Group 的属性会影响它所在的 GameObject 对象以及所有子对象。
Property: | Function: |
---|---|
Alpha | 0-1 |
Interactable | 确定此组件是否接受输入。当它被设置为 false 时,将禁用交互。 |
Block Raycasts | Will this component act as a collider for Raycasts? You will need to call the RayCast function on the graphic raycaster attached to the Canvas. This does not apply to Physics.Raycast. 是否和鼠标交互 |
Ignore Parent Groups | Will this group also be affected by the settings in Canvas Group components further up in the Game Object hierarchy, or will it ignore those and hence override them? |
UI 自适应
原理
问题产生的原因:
- 通过 Factor 解决等比缩放
- 非等比缩放如何选择缩放参考目标
- 通过设置 Anchor,确保宽屏手机视野
解决方法
- UI 大小
- Canvas 的尺寸一直是和屏幕尺寸一样的,要让 UI 元素适应屏幕,就应该让 UI 元素的尺寸也动态改变。
- 等比缩放时
- 通过 Factor 解决等比缩放
- 设置 Canvas 的 UI Scale Mode 为 Scale With Screen Size,并设置标准尺寸。
- 非等比缩放时
- 需要设置是以宽度还是高度作为一个缩放标准。eg:当高度改变时,进行相应的缩放,宽度改变时不影响。
- Canvas Scaler -> Screen Match Mode
- 若是横屏游戏,可参考以高度作为标准,竖屏游戏,则以宽度作为标准
- UI 位置
- 通过设置 Anchor,确保宽屏手机视野