Unity Canvas 详解

三种画布渲染模式

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

Unity Canvas 详解

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,确保宽屏手机视野