基础概念

面板基本

当我们点击一个GUI物体是它具有的属性为:

Rect Transform:继承自Transform组件,它表示的是控件的Location位置,和一些基本的属性。这个控件的参数类型会随着锚点情况而改变,具体在下一节展示。

Pivot:设置轴心(不是蓝色的,那个叫中心锚点)的位置,中心点的位置【0,0】表示的是控件的左下角的位置,【1,1】表示的是右上角的位置,【0.5,0.5】表示的是图像中心的位置。

Anchors:它的取值和Pivot一个逻辑,也是0~1之间。Min点和Max点是2个点,2个点可以沿着x、y方向,确定出一个矩形。而这个矩形的4个点就是4个锚点。我们也可以直接拖动画面的锚点来快捷设置。

Pivot 和 Center

Pivot上面说了,是轴心,可以自己在Rect Transform的面板里设置;

Center是中心,是在Unity中根据模型的mesh信息计算得到的中心位置,是所有物体共同的中心,如果同时选中了多个物体,则坐标是所有模型共同参与计算出来的坐标。

Center是由Unity计算出来的而不是设置出来的。Pivot在锚点重合情况下,代表着PosX和PosY画出来的的点。

锚点、纽扣和中心点(Center)

这里先对3个点下定义,下面一节进行讨论。

单击图形显示着的的小篮圈,到底表示的是Pivot还是Center,是在Unity里设置的,两者完全不是一个东西。设置的话,在Global边上的选项里选择即可。

正常的二维UI,中心点总是在正中间,而轴心就可以自己设置了。

自适应

情况一:两个锚点重合

描述

两个锚点重合的情况,Image UI(也就是红色Image)的锚点和Pivot连成一条线,这条线会永远保持(也就是两点的距离会永远保持)。在这种情况下调整画面,Image UI不会变形,只会根据Pivot点到Anchor点的距离一致的原则调整位置。

一个值得关注的点是,此时Image UI的Rect Transform控件是Pos + Width,Height的组合。这个PosX和Y,指的是Anchor和Pivot之间的相对位置。

示例动图

情况二:锚框

描述

当两个锚点(AnchorMin和AnchorMax)不重合时,两点就会确定一个矩形,这个矩形就是我们的锚框。这种情况会保持锚点到纽扣的距离保持不变。

此时Image UI的Rect Transform控件是Left,Top + Right,Bottom的组合。

这四个点什么意思呢?是纽扣的相对位置,相对的是锚点组成的坐标系。看下图:

所以明白了,锚点到纽扣的距离保持不变,那就意味着4条(图中2条以及左上右下未画出来的)绿线始终保持不变。同时意味着,代表这4个点相对位置的Rect Transform控件里的Left,Top,Right,Bottom值也都不变。

示例动图

anchoredPosition属性

他本身是一个点,如果在AnchorMin和AnchorMax是重合的场合(情况一)下,anchoredPosition就是表示锚点到Pivot的位置。

但是如果AnchorMin和AnchorMax不重合的时候(情况二),anchoredPosition就比较复杂了,在这种情况下,Unity会根据Pivot、AnchorMin和AnchorMax计算出一个锚点,然后在通过Pivot和锚点来得出anchoredPosition的位置。

offsetMin和offsetMax详解

offsetMin和offsetMax这两个属性。其中offsetMin表示物体(本文中的红框)左下角相对AnchorMin的偏移,offsetMax表示物体右上角相对AnchorMax的偏移。

情况一 anchor(0, 0):

情况二 anchorMin(0,0) anchorMax(1,1):

sizeDelta详解

sizeDelta就是offsetMax - offsetMin的值,即物体左下角到右上角的变量:

画布缩放器 Canvas Scaler

Canvas新建时自带的脚本,专门解决屏幕适配问题的脚本,负责伸缩所有UI对象。以下内容主要取自Unity中文手册

三种模式:

属性 功能
UI Scale Mode 确定画布中的 UI 元素的缩放方式。
Constant Pixel Size 无论屏幕大小如何,UI 元素都保持相同的像素大小。
Scale With Screen Size 屏幕越大,UI 元素越大。
Constant Physical Size 无论屏幕大小和分辨率如何,UI 元素都保持相同的物理大小。

一般来说的配置方案是:
Canvas Scaler 选择 Scale With Screen Size
Screen Match Mode 选择 Match Width Or Height,

横屏游戏比例设为1,即只和高度进行适配;

竖屏游戏比例设为0,即只和宽度进行适配。

1、Constant Pixel Size

一般美术拿它来做缩放图片,因为不同Size不失真。

使用 Constant Pixel Size 模式时,可在屏幕上按像素指定 UI 元素的位置和大小。这也是画布在未附加任何画布缩放器时的默认功能。但是,借助画布缩放器中的“Scale Factor”设置,可以向画布中的所有 UI 元素应用常量缩放。

属性 功能
Scale Factor 按此系数缩放画布中的所有 UI 元素。画布的缩放比例。默认况下为1,表示正常大小。
Reference Pixels Per Unit 如果精灵具有此“Pixels Per Unit”设置,则精灵中的每个像素将覆盖 UI 中的一个单位。每单位代表的像素量。

2、Scale With Screen Size

使用 Scale With Screen Size 模式时,可以根据指定参考分辨率的像素来指定位置和大小。如果当前屏幕分辨率大于参考分辨率,则画布会保持只具有参考分辨率的分辨率,但是会放大以便适应屏幕。如果当前屏幕分辨率小于参考分辨率,则画布会相应缩小以适应屏幕。

如果当前屏幕分辨率的宽高比与参考分辨率不同,则单独缩放每个轴以适应屏幕会形成非一致缩放,通常不希望发生这种情况。相反,ReferenceResolution 组件会使画布分辨率偏离参考分辨率,以便遵循屏幕的宽高比。可以使用 Screen Match Mode 设置控制此偏离的行为方式。

属性 功能
Reference Resolution UI 布局设计的目标分辨率。如果屏幕分辨率较大,则 UI 会放大,如果较小,则 UI 会缩小。
Screen Match Mode 在当前分辨率的宽高比不适应参考分辨率时,用于缩放画布区域的模式。
Match Width or Height⭐常用 以宽度、高度或二者的某种平均值作为参考来缩放画布区域。
Expand 水平或垂直扩展画布区域,使画布不会小于参考。
Shrink 水平或垂直裁剪画布区域,使画布不会大于参考。
Match 确定是否以宽度、高度或二者的某种平均值作为参考进行缩放。
Reference Pixels Per Unit 如果精灵具有此“Pixels Per Unit”设置,则精灵中的每个像素将覆盖 UI 中的一个单位。

3、Constant Physical Size

使用 Constant Physical Size 模式时,可按物理单位(如毫米、点或派卡)指定 UI 元素的位置和大小。此模式要求设备正确报告其屏幕 DPI。对于不报告 DPI 的设备,可以指定回退 DPI。

属性 功能
Physical Unit 用于指定位置和大小的物理单位。
Fallback Screen DPI 在屏幕 DPI 未知时采用的 DPI。
Default Sprite DPI 用于精灵的每英寸像素,使其“Pixels Per Unit”设置与“Reference Pixels Per Unit”设置匹配。
Reference Pixels Per Unit 如果精灵具有此“Pixels Per Unit”设置,则其 DPI 将与“Default Sprite DPI”设置匹配。