【Unity知识点详解】多分辨率下的适配问题

文章当前使用的Unity版本为2018.3

今天写这篇文章主要是讨论一下Unity中关于多分辨率下UI适配的问题。

适配需要解决的问题

我们在项目开发时通常都会在一个标准的分辨率下进行开发,但我们发布的时候则会发布到不同的平台和设备上去,不同的平台和设备他们的分辨率则是不一样的。所以适配需要解决以下两个方面的问题:

  1. 多分辨率下UI的相对位置保持不变。
  2. 多分辨率下UI的大小尺寸保持不变。

只有解决了这两个问题,才会让我们在不同分辨率下的UI看起来和开发时分辨率下的UI一样。

适配位置

我们先来说适配位置。在UI对象上是用RectTransform组件来控制位置和大小的,在RectTransform中有一个Anchors属性。Anchors属性可以将当前对象的四个角锚点定位到父对象的某个位置,并且Anchor还允许子对象的宽高随着父对象的宽高一起拉伸。

上面一个示例中显示的就是将一个Image的锚点定位到它父对象的右上角。我们也可以通过设置Anchors中的值,将锚点定位到父对象的其他位置,Anchors的取值范围则为0~1的浮点数。

下面借用了几张官方文档中的示例图,让大家对锚点的使用有一个更直观的感受。

关于Anchors数值表示个人也有自己的一些理解,Anchors值也可以理解为当前对象四条边与父对象四条边的对应关系。X则是表示的是X轴方向上的两条边,即左右两条边,Unity中X轴的方向是从左向右,Min自然表示的就是左边,而Max则表示的是右边。Y则与X一样,Min表示的为下边,Max表示的为上边。

通过Anchors的设置我们则可以在不同分辨率下让子对象与父对象保持固定的位置关系,这样我们就可以解决适配中位置的问题。

适配大小

接下来我们来说适配大小。在Unity中UI都是放置在Canvas对象下的,在不同分辨率下为了达到适配的目的,我们可以通过修改Canvas对象上RectTransform的Width、Height和Scale来实现(主要是Scale)。但是Canvas对象的RectTransform是无法直接修改的,我们需要借助Unity中的CanvasScaler组件来进行修改,下面我们就来了解一下CanvasScaler。

CanvasScaler中的UI Scale Mode有三种模式:Constant Pixel Size、Scale With Screen Size、Constant Physical Size。而我们适配需要使用到的是Scale With Screen Size模式,其作用是根据屏幕分辨率来进行缩放适配。Constant Pixel Size模式是保持UI原始像素尺寸不变来进行适配,Constant Physical Size是保持UI原始物理尺寸进行适配,这两个模式有兴趣的小伙伴可以自行了解一下。

接下来我们详细讲Scale With Screen Size模式。Scale With Screen Size模式是根据标准分辨率计算出当前分辨率下Canvas的缩放比例,来修改Canvas的Scale值进行适配的。在Scale With Screen Size模式中有两个重要的参数。第一个是Reference Resolution,Reference Resolution就是我们开发时使用的标准分辨率,Canvas的缩放都是以Reference Resolution的值为标准进行计算的。第二个是Screen Match Mode,Screen Match Mode用于选择屏幕的匹配模式,其中有三种模式:Match Width or Height、Expand、Shrink。

Match Width or Height模式是以标准分辨率的Width、Height或者两者的中间值为参考计算缩放的。下面示例的标准分辨率为1280*720,实际分辨率为1024*768,以Width值为参考。效果如下:

 

Expand模式是以 当前分辨率 与 标准分辨率 相同边取比值,以比值较小的那条边为参考值进行计算的。效果就是UI会全部显示在当前分辨率的屏幕内。效果如下:

 

Shrink模式与Expand模式正好相反,是以 当前分辨率 与 标准分辨率 相同边取比值,以比值较大的那条边为参考值进行计算的。效果就是UI会铺满当前分辨率的整个屏幕,并且当前分辨率的宽高比与标准分辨率的宽高比不同时,UI则会有超出屏幕的部分。效果图如下:

 

接下来我们就以Expand模式为例子,讲解一下CanvaScaler是如何计算Canvas的缩放比例的。数据以实际分辨率为1024*765,标准分辨率为1280*720为例。我们先分别计算出 实际分辨率 与 标准分辨率 同边的比值,宽为1024/1280=0.8,高为765/720=1.0625。在Expand模式下是取较小值的那条边为参考,而在Shrink模式下则是取较大值的那条边为参考,如果两条边的比值都一样则说明是等比例缩放。在当前这个例子中我们以宽0.8的缩放值为参考,因为不是等比例缩放,所以我们还需要重新计算高的值。缩放后Canvas高的值则是用 实际分辨率 / 缩放参考值 得到,即765/0.8=956.25。下图是本例子的实际效果图:

总结一下CanvasScaler的缩放计算流程:

  1. 计算实际分辨率与标准分辨率各边的比值,即 实际分辨率宽 / 标准分辨率宽 = 宽缩放比,实际分辨率高 / 标准分辨率高 = 高缩放比。
  2. 在Expand模式下取较小值的边为参考缩放比,在Shrink模式下取较大值的边为参考缩放比。
  3. 如果宽高的缩放比不同,则需要重新计算另一条边的长度。公式为 另一边的实际分辨率值 / 参考缩放比 = 调整长度。

关于多分辨率下适配的问题就先讲到这里,下面是有关适配问题官方文档的连接,有兴趣的小伙伴可以查阅一下。

Anchors:https://docs.unity3d.com/Manual/UIBasicLayout.html

CanvasScaler:https://docs.unity3d.com/Manual/script-CanvasScaler.html

多分辨率的适配:https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

猜你喜欢

转载自blog.csdn.net/huoyixian/article/details/89250677