---
front:
hard: 入门
time: 分钟
---

# 不同分辨率界面适配

## 预览不同分辨率下的效果

在界面编辑器可以发现如下图的一系列分辨率相关的选项

![image-20220420203702694](./images/image-20220420203702694.png)

我们在界面编辑器里提供了各种常见分辨率的模拟，你可以选择你希望适配的分辨率来查看效果。

![image-20220420204101995](./images/image-20220420204101995.png)

如下图，可以看到当前选择的是全面屏手机（2160×1080）的分辨率。左侧还有一个实际分辨率，显示的是当前预览窗的《我的世界》的实际分辨率是540:270，这是由《我的世界》本身的适配规则决定的，见下面的[适配原理](#适配原理)。

需要注意的，游戏里的所有像素都是按照实际分辨率计算的，而实际分辨率通常比手机或者电脑的屏幕小得多，所以当你在设置位移尺寸的时候，如果需要直接填写像素，需要格外注意适配问题。

![image-20220422220340397](./images/image-20220422220340397.png)

## 适配原理

手机的分辨率是多种多样的，想尽量的适配更多的分辨率，就需要了解《我的世界》中界面适配的方法。适配界面时涉及的尺寸如下：

<img src="./images/ui_image015.png" alt="img" style="zoom: 80%;" />

其中画布一般和屏幕大小相同，少数情况会小于屏幕，由系统和玩家设置决定。

前面我们已经知道，控件的尺寸为百分比加一个固定像素值的形式。系统在计算控件实际的显示尺寸时，会对所有固定像素乘以一个比例a。举例如下：

|        | **画布尺寸** | **父控件尺寸** | **子控件设定尺寸** | **子控件实际显示尺寸** |
| ------ | ------------ | -------------- | ------------------ | ---------------------- |
| **宽** | 900Px        | 800Px          | 10%+50Px           | 80Px+50Px\*a           |
| **高** | 750Px        | 750Px          | 20%+100Px          | 150Px+100Px\*a         |

那么比例a是怎么确定的呢？系统会按如下步骤计算这个比例：

1. **计算画布的宽除以320、画布的高除以210的值**。上面的例子中，这两个值为900/320=2.81,750/210=3.57。
2. **计算a的最大值**。在1)中计算的两个比例分别取整，然后再取最小值，作为a的最大值。在上面的例子两个比例取整后分别为2和3，最小值就是2。
3. **计算a的最终值**。根据某些的规则得到一个比2)中小的值，作为a最终的值。这个规则开发者无需关心。一般来说最终值和2)里计算的最大值是一样的。

在上面的例子中，a的值为2，那么控件显示的宽为80Px+50Px\*a=180Px，高为150Px+100Px\*a=350Px。

通俗一点来说，游戏里有一个320Px\*210Px的适配区域（下图中紫色实线部分），游戏把这个适配区域按整数倍膨胀，直到再膨胀就会超出画布为止。然后将这个整数比例乘以控件尺寸中的固定像素，再加上比例部分计算得到的像素，作为最终的控件显示尺寸。

<img src="./images/ui_image016.png" alt="img" style="zoom: 80%;" />

因此，如果我们想UI在各种分辨率的屏幕下都不会超出屏幕边界，可以把决定显示范围的父控件（比如顶层的面板控件）的尺寸设为固定尺寸，且数值在320\*210以下。需要注意的是，贴图并不需要受限于这个尺寸，可以适当扩大贴图尺寸，以在大分辨率的屏幕里获得更好的效果。

此外，在PC基岩版中，适配的基准值为376x250，略大于手机适配的320x210，如果想一份界面资源同时适配手机和PC基岩版，那么需要以手机的标准来制作。

## 异形屏适配和基类画布

如果你制作的是手机模组，可能会遇到玩家的屏幕是异形屏的情况，例如挖孔屏，刘海屏等。

有一个简单的方法来进行适配，就是使用基类画布。如果你打算对异形屏进行适配，最好一开始就使用基类画布，如果你已经做了一半，那你可以这样做（我们以界面模板这个邮件界面为例）：

1. 在main画布下新建一个panel（面板），并且将panel的尺寸XY的适应勾上。
2. 将原来main画布下的其他控件拖拽到panel（面

![image-20220422220631752](./images/image-20220422220631752.png)

1. 右键panel添加到控件库，这里我们命名为mailContent，结果如下图

![image-20220422221059835](./images/image-20220422221059835.png)

> 这个操作是为了让main画布下的所有内容可以塞到同一个自定义控件中。如果你的main画布下面本来就是只有一个自定义控件的实例，那么你可以跳过这一步，或者main画布下面本来就只有一个直接的子节点（不关注孙节点等），那么直接把这个唯一的子节点创建为自定义控件即可。

1. 创建一个基类画布，在画布的属性面板的变量区里选择刚刚创建的mailContent，这样就完成了基类画布的使用。

![image-20220422221221093](./images/image-20220422221221093.png)

> 如果你之前在画布上创建了变量，很遗憾，你必须再手动创建一次。

你可能注意到了，如果你使用基类画布的话，你不能直接在基类画布下对控件进行编辑，而是需要编辑这个自定义控件。

![image-20220422221833533](./images/image-20220422221833533.png)

基类画布实际上使用了[控件引用](./15-变量引用和万用控件.md#控件引用和万用控件)。

展开screen画布，然后继续按照下图的方式展开，你可以看到这个root_screen_panel实际上是一个万用控件。

继续展开，就是我们熟悉的mailContent控件的内容。

![image-20220422221952526](./images/image-20220422221952526.png)

你可以在这里很方便的复制路径，复制到的路径可以直接使用在模组的SDK代码中。

![image-20220422222242455](./images/image-20220422222242455.png)

可以看到，启用基类画布之后，路径发生了较大的变化，所以我们强烈建议你在制作UI之前先想要是否要使用基类画布。