Unity Canvas 详解

UI 自适应的解决方案

原理

问题产生的原因：

• 通过 Factor 解决等比缩放
• 非等比缩放如何选择缩放参考目标
• 通过设置 Anchor，确保宽屏手机视野

解决方法

• UI 大小
  • Canvas 的尺寸一直是和屏幕尺寸一样的，要让 UI 元素适应屏幕，就应该让 UI 元素的尺寸也动态的改变。
  • 等比缩放时
    • 通过 Factor 解决等比缩放
    • 设置 Canvas 的 UI Scale Mode 为 Scale With Screen Size，并设置标准尺寸（和 Game 界面显示尺寸一样）。
  • 非等比缩放时
    • 需要设置是以宽度还是高度作为一个缩放标准。eg：当高度改变时，进行相应的缩放，宽度改变时不影响。
    • Canvas Scaler -> Screen Match Mode
    • 若是横屏游戏，可参考以高度作为标准，竖屏游戏，则以宽度作为标准
• UI 位置
  • 通过设置 Anchor，确保宽屏手机视野

Canvas 属性

Property:	Function:
Render Mode	渲染模式
Pixel Perfect (Screen Space modes only)	是否为了准确的显示图片的像素而关闭抗锯齿（勾选，抗锯齿就没有用了）
Plane Distance (Screen Space - Camera mode only)	控制显示那些界面，和摄像机联动

三种画布渲染模式

• Screen Space - Overlay（屏幕控件 - 覆盖模式）多用于 3D 游戏

  画布会填满整个屏幕空间，并将画布下面的所有的 UI 元素置于屏幕的最上层，或者说画布的画面永远 “覆盖” 在 其他普通的 3D 画面上，如果屏幕尺寸被改变，画布将自动改变尺寸来匹配屏幕。

  例如小地图的显示。

• Screen Space-Camera（屏幕空间 - 摄影机模式）多用于 2D 游戏

  该模式下，画布会被放置到摄影机前方。在这种渲染模式下，画布看起来绘制在一个与摄影机固定距离的平面上。所有的 UI 元素都由该摄影机渲染，因此摄影机的设置会影响到 UI 画面。

  • Render Camera: 渲染摄像机
  • Plane Distance: 画布距离摄像机的距离

• World Space（世界控件模式）

  • 在此模式下，画布被视为与场景中其他普通游戏对象性质相同的类似于一张面片（Plane）的游戏物体。画布的尺寸可以通过 RectTransform 设置，所有的 UI 元素可能位于普通 3D 物体的前面或者后面显示。当 UI 为场景的一部分时，可以使用这个模式。

Pixel Perfect

抗锯齿有可能会小影响 UI 的像素，eg：这个 UI 本来是 100px，开启抗锯齿后，可能就变成 101px 了，适用于对 UI 的准确性要求很高的情况。

Canvas Scaler

控制 Canvas 下所有 UI 元素的缩放和像素密度，有 3 种缩放模式（UI Scale Mode）。

• Constant Pixel Size：使 UI 元素保持固定的像素大小，无论屏幕大小。
• Scale With Screen Size：屏幕越大，UI 元素越大。
• Constant Physical Size：使 UI 元素保持相同的物理大小，而不考虑屏幕大小和分辨率。

Constant Pixel Size

使 UI 元素保持固定的像素大小，无论屏幕大小。

Property:	Function:
Scale Factor	按此比例缩放画布中的所有UI元素。
Reference Pixels Per Unit	每一个 Unity 单位对应的 像素数。

Scale With Screen Size

屏幕越大，UI 元素越大。

Property:	Function:
Reference Resolution	**UI 布局的分辨率。**如果屏幕分辨率较大，UI就会被放大;如果屏幕分辨率较小，UI就会被缩小。
Screen Match Mode	屏幕匹配模式，如果当前分辨率的纵横比不适合参考分辨率，则用于缩放画布区域的模式。即，以什么作为参考来进行缩放。
Match Width or Height	以宽度或高度作为参考缩放画布，或介于两者之间。
Expand	水平或垂直地展开画布区域，这样画布的大小永远不会小于引用分辨率。
Shrink	水平或垂直裁剪画布区域，因此画布的大小永远不会大于引用分辨率。
Match	确定缩放是使用宽度或高度作为参考，还是两者之间的混合。
Reference Pixels Per Unit	每一个 Unity 单位对应的 像素数。

Constant Physical Size

使 UI 元素保持相同的物理大小，而不考虑屏幕大小和分辨率。

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.

Graphic Raycaster

图形光线投射器用于在画布上进行光线投射。管理 UI 射线，处理 Canvas 下所有图片的射线响应（是否被击中）。

图形光线投射器可以配置为忽略后向图形，也可以被2D或3D对象阻塞。

存在于它的前面。如果希望将此元素的处理强制放在光线投射的前面或后面，还可以应用手动优先级。

Property:	Function:
Ignore Reversed Graphics	反转图片后，还是否会产生响应
Blocked Objects	会阻挡当前射线的类型（none，2d，3d）
Blocking Mask	会阻挡当前射线的层级（只有选中的层级会产生阻挡）

Blocked Objects

判断依据是身上的 Collider 是什么类型，即是 2dCollider 还是 3dCollider，eg：一个 UI 挂载 3dCollider，实际会对 3D 进行判定。

Canvas Group

用于控制整个 UI 元素组的某些方面，而不需要分别处理它们。

Canvas Group 的属性会影响它所在的 GameObject 对象以及所有子对象。

Property:	Function:
Alpha	0-1
Interactable	确定此组件是否接受输入（点击响应）。当它被设置为 false 时，将禁用交互。
Block Raycasts	是否接收射线检测，是否和鼠标交互
Ignore Parent Groups	当前 Group 是否忽略其父级 Group 的影响

决定 UI 渲染层级的四种因素

Hierarchy 面板的排列顺序

Camera 的 Depth

Canvas 的 Sorting Layer

Canvas 的 Order in Layer