UGUI学习——Canvas基础组件

UGUI的分辨率自适应的机制

UGUI中，Canvas（画布）可以看成电脑屏幕，其功能和属性都是一样的。游戏中的分辨率自适应主要包括两部分：

1. 缩放适应：是在不同尺寸的屏幕下，整体缩放比例的计算方式——Canvas Scaler。

2. 布局调整： 是在不同比例（宽高比）的屏幕下，控制UI控件位置——Rect Transform。

一、图片的分辨率&&屏幕的分辨率

图片的尺寸：用图片的宽度和高度来表示，例如1280*720：1280=宽度，720=高度。而宽度和高度表示是以像素为单位的，即图片的组成就需要92万左右的像素点来实现，这才是图片实际的尺寸（当然也有用厘米的，但是需要分辨率（dpi）来转换）。

分辨率：是指显示图片时的精度，单位是dpi（每英寸包含的像素数）。例如，对于同一张尺寸的数字图片1600*1200，在300dpi的打印机上打印出来，面积为：宽1600/300*2.54=13.5cm，高1200/300*2.54=10.2cm。而如果设置成150dpi打印，则面积为27*20cm。

因此，图片的表现尺寸，是由图片的像素数和分辨率共同决定的：

像素数不变，分辨率增加，表现尺寸减小；

像素数不变，分辨率减小，表现尺寸增大；

屏幕分辨率：是指屏幕显示的分辨率，屏幕分辨率确定计算机屏幕上显示多少信息的设置，与分辨率概念的表示方式不同，屏幕分辨率是以宽和高的像素数来衡量。例如：屏幕分辨率=160*128，表示屏幕在宽度（水平）包含160个像素，在高度（垂直）包含128个像素，而这些像素就是屏幕总共可以提供的像素数量，也是其性能表现之一。

注：屏幕分辨率表示与分辨率定义的表示不同的原因：

因为屏幕的物理尺寸在生产出来以后就是确定的，因此屏幕的尺寸（像素数量）与分辨率的关系是正线性的关系，而且屏幕的功能是为了展示出图片等内容，那么屏幕分辨率直接以它的像素数而不是dpi，来表示的话更为直接易于使用。

图片在屏幕上的表现与屏幕分辨率的关系：

图片的尺寸也是以像素数来衡量的，比如：1280*720的图片，想要在屏幕上展现图片的话，就需要将图片的像素全部在屏幕上表现出来。这就是说如果屏幕的分辨率也是1280*720的话，想要渲染出这张图片，那么这张图片的最开始的大小，将会铺满整个屏幕，如果屏幕分辨率小于图片尺寸的话，图片将无法完整的在屏幕上表现出来。

二、整体缩放比例（Canvas Scaler组件）

UGUI中，Canvas（画布）可以看成电脑屏幕，其功能和属性都是一样的。Canvas Scaler组件是负责整体缩放机制的、控制UI元素的总体大小和像素密度的组件，Canvas Scaler的缩放比例会影响Canvas下的UI元素，包含字体大小和图像边界。

Size相关的概念：

Reference Resolution：参考分辨率，即预设的屏幕的大小。

Screen Size：当前屏幕的分辨率，屏幕大小。通过State->Screen查看。

Canvas Size: 画布的Rect Transform组件的Width和Height，即画布的大小。

（UI Scale Mode）缩放模式提供了三种方式：

1.  Constant Pixel Size（固定像素尺寸）

该算法下会使Canvas Size始终等于Screen Size，然后通过Scale Factor直接缩放所有UI元素（实际上是通过改变Canvas的分辨率，来改变UI元素的表现尺寸，以达成缩放的目的），     包括两个参数：

1）. Scale Factor（缩放比例）：在UI元素原尺寸上的缩放比例，实际上是用于缩放整个Canvas，来保证Canvas Size与Screen Size始终为一样的，默认值是1。

Canvas Scaler 通过设定Canvas下的Scale Factor，縮放所有在此Canvas下的元素

当Scale Factor为2时，Screen Size (800*600)、Canvas Size(400*300)，图片表现大小2倍（像素数不变）。

2）. Reference Pixels Per Unit（标准每单位对应的像素数）：每个unity单位对应的像素数。

图片设置中的Pixels Per Unit：

Pixels Per Unit：是在这张Sprite中，世界坐标中的一单位由几个Pixel组成。

举例来说：

场景中有一个1*1Cube和一个Sprite图片大小为100*100，两者的Scale都为1。

当Pixels Per Unit=100时，每单位由100pixel组成，sprite是100*100Pixels，那么sprite

在世界中的大小就会变成1*1Unit；

当Pixels Per Unit=10时，每单位由10Pixel组成，sprite是100*100Pixels，那么sprite

在世界中的大小就会变成10*10Unit；

因此可以得出结论：

图片在世界坐标中的大小 = 原图大小（像素）/ Pixels Per Unit；

Canvas中的Reference Pixels Per Unit是一个参考的值，当图片本身具备Pixels Per Unit值时候，会重新计算出一个新值来代替使用，计算公式如下：

Scale = New Pixels Per Unit  =  Pixels Per Unit  /  Reference Pixels Per Unit

Image在渲染出来的时候，就是使用New Pixels Per Unit，来确定Image的表现尺寸的：

表现尺寸  =  宽（高）/  Scale

综合以上关系，可以得到一个公式：

UI大小（表现尺寸）= 原图大小(Pixels)  /  (Pixels Per Unit / Reference Pixels Per Unit)

2.  Scale With Screen Size（根据屏幕尺寸缩放）

按Reference Resolution（预设的的屏幕尺寸）进行缩放的方式，包括四个参数：

1）. Reference Resolution（参考分辨率）：

这是我们提供给美术做图的标准分辨率，所有的UI素材都应该按这个分辨率去做。

2）. Screen Match Mode（缩放模式）：

a. Expand（扩大）：通过将Canvas Size进行宽或高扩大，让其高于Reference Resolution。就是说如果实际屏幕分辨率与预设的不一致，那么将会往大了调整

例如：Reference Resolution = 1280*720，Screen Size = 800*600的情况。

ScaleFactor Width： 800/1280=0.625

ScaleFactor Height：600/720=0.83333

因为要使用最大程度的放大的方式，那么此时就会选用ScaleFactor Width的值0.625，用它求得的值都是进行了扩大。

Canvas Size的求解公式：

Canvas Size = Screen Size / Scale Factor

 

Canvas Width：800 / 0.625 = 1280

Canvas Height：600 / 0.625 = 960

Canvas Size 为 1280*960，高度从720变成了960，最大程度的放大Canvas的尺寸。(其中UI元素的在高度方向的表现尺寸会变小，这样更有利于显示所有元素)。

b. Shrink（收缩）：与扩大相反，将Canvas Size进行宽或高的收缩，让其分辨率始终低于Reference Resolution的值。

例如：例如：Reference Resolution = 1280*720，Screen Size = 800*600的情况。

ScaleFactor Width： 800/1280=0.625

ScaleFactor Height：600/720=0.83333

因为要使用最大程度的放大的方式，那么此时就会选用ScaleFactor Width的值0.8333，用它求得的值都是进行了扩大。

Canvas Size的求解公式：

Canvas Size = Screen Size / Scale Factor

Canvas Width：800 / 0.8333 = 960

Canvas Height：600 / 0.8333 = 720

Canvas Size 为 960*720，高度从1280变成了960，最大程度的缩小Canvas的尺寸。(其中UI元素的在宽度方向的表现尺寸会变大)。

c. Match Width or Height（根据宽和高进行混合缩放）：该算法首先分别对ScaleFactor Width/Height取对数，然后在进行平均混合。

比较一般混合和取对数混合的差别：

例如：Reference Resolution=400*300，Screen Size为200*600的情况，如下图：

ScaleFactor Width：200/400=0.5

ScaleFactor Height：600/300=2

当march=0.5时，

一般混合：

ScaleFactor = March * ScaleFactor Width + March * ScaleFactorHeight

ScaleFactor = 0.5 * 0.5 + 0.5 * 2 = 1.25

对数混合：

logWidth：log2(0.5) = -1

logHeight：log2(2) = 1

logWeightedAverage：0

ScaleFactor：2⁰ = 1

很明显，对数混合得到的1更加合理，能够更完美的修正Canvas的大小。

宽高所占权重：默认值是0，相当于以“标准分辨率的宽”和“实际屏幕的宽”的比例作为缩放比例；如果值是1，相当于以“标准分辨率的高”和“实际屏幕的高”的比例作为缩放比例；如果值是0.5，则相当于宽和高的比例权重相等，最终的缩放比=宽缩放比*宽权重+高缩放比*高权重

3）. Reference Pixels Per Unit：每个unity单位对应的像素数。

         3.  Constant Physical Size（固定物理尺寸）

这种方法是通过给定dpi（dots Per Inch 每英寸点数），来进行缩放。

1）.Phsical Unit：使用的单位的种类

单位种类	中文	与1英寸的关系
Centimeters	公分(cm，厘米)	2.54
Millimeters	公毫(mm，毫米)	25.4
Inches	英寸	1
Points	点	72
Picas	皮卡(十二点活字)	6

2）. Fallback Screen DPI：对应物理单位的像素密度。

3）. Default Sprite DPI：默认的图片的dpi值。

功能总结：

在这种算法下的缩放比例Scale Factor计算公式：

Scale Factor = Physical Unit / Default Sprite DPI。

Reference Pixels Per Unit要跟目前的dpi共同作用运算处新值以后，传入Canvas中求出大小，公式如下：

New Reference Pixels Per Unit = Reference Pixels Per Unit * Scale Factor

UI大小 = 原图大小(Pixels)  /  (Pixels Per Unit  /  New Reference Pixels Per Unit)

=原图大小(Pixels)  /(Pixels Per Unit* Pixels Per Unit / Reference Pixels Per Unit * Physical Unit )

在这种情况下，的Canvas Size是始终等于Screen Size的。依据像素进行放缩，实际上是将UI元素的放缩单独拿出来，脱离了与Canvas 的关系，主要影响它的放缩值的是预设的dpi的值。

实施步骤：

1. 确定设备屏幕分辨率的宽高比例。

一般情况下，需要根据要覆盖的机型（手机基本在1.5:1~1.8:1的范围内），得到其大概的宽高比的范围 ，选择确定一个合适的宽高比。

2. 确定UI制作的目标分辨率

确定了宽高比以后，选择目标分辨率，通常以1024作为宽，以1024*1.7=602作为高比较合适，因为一般的压缩格式会要求宽高是2的次幂或4倍数。

3. 设置Unity中适配规则

通常是做一张比较大的背景图，图中上下左右边的内容允许被裁剪。但适配到1.8:1的设备上的时候，由于背景图内容宽度小于设备宽度，此时需要使用“宽”适配。这时背景图上的上下边被裁剪掉；反之，使用“高”适配。

标准分辨率下，此时背景图是最完整的。

三、布局（Rect  Transform组件）

布局是对Canvas内的UI元素而言的。在适配分辨率方面，除了等比缩放外，还有一方面是对UI控件位置的适配，例如角色头像一般处在屏幕的左上角，虚拟摇杆处在屏幕的左下角，要想在不同的分辨率下都处在比较合适的位置，就需要理解“锚点”的作用了。

当我们在标准分辨率下定位好控件后，设置好合适的锚点，不论在那种分辨率下，控件都会处于一个合适的位置。

具体内容见——《Unity中的Rect Transform》。