如何让你的小游戏适配不同尺寸的手机屏幕

Posted 2022-07-08 小蚂蚁教你做游戏

嗨！大家好，我是小蚂蚁。欢迎关注我的微信公众号【小蚂蚁教你做游戏】，学习更多游戏开发原创教程。

当前的手机屏幕有着各种各样不同的尺寸，为了让游戏在不同尺寸的屏幕上都能展示出比较好的效果，我们就需要处理游戏对于不同尺寸屏幕的适配问题，今天这篇文章就带大家来彻底的了解如何让你的小游戏适配不同尺寸的手机屏幕。

通常游戏中需要去处理适配的有三部分内容：游戏的UI，游戏的背景以及游戏中内容的布局。

其中游戏 UI 通常包括按钮，对话框等内容，例如游戏左上角的暂停的按钮，游戏中的背包按钮，提示对话框等。游戏的背景就是指游戏的背景图，至于游戏中内容的布局，这个会因游戏的不同而不同，有些游戏需要处理内容的适配，例如一个象棋游戏，就需要处理在不同屏幕上的棋盘以及棋子的大小。而对于一个弹幕射击游戏来说，由于所有的内容都是不停移动的，也就不需要去处理内容的适配了。

接下里，我们会依次讲解这三部分内容的适配方法。

对于UI的适配我们对它的要求是不论屏幕的尺寸如何的变化，它总是应该出现在该出现的位置。

举个例子，很多游戏的左上角都会有一个暂停按钮，例如下图中这样。

我们对于这个暂停按钮的要求就是不论屏幕如何变化，它都应该出现在左上角的位置，就像图中显示的那样。

接着我们预览一下，看看显示效果。

图中预览的屏幕尺寸，相当于宽高比为 9:16 的屏幕，暂停按钮出现的位置跟我们在场景中摆放的位置相同。

下面，我们换一种比例的屏幕。

这是比较常见的全面屏的手机屏幕，比较细长。可以发现，此时暂停按钮并没有出现在屏幕的左上角的位置。

为什么会出现这种结果呢？

需要注意一下图片中橙色的区域，要比场景编辑区域长出很多，从最终的预览效果上可以看出，蓝色的背景会自动去填充多出来的部分，但是暂停按钮却不会自动的移动到屏幕的左上角。

我们如何处理这种情况呢？

非常的简单，制作工具已经为我们准备了这样的功能，它叫做“相对场景布局”。

在“属性区”中可以看到这个属性，开启后，下方会出现垂直布局，和水平布局的选项。

下面，我们就为这个暂停按钮设置一下相对场景布局。

距离顶部 25， 距离左侧 25。

预览一下，看一下针对不同尺寸的屏幕的显示效果。

这次，不论屏幕尺寸如何，按钮都出现在了左上角的位置。

相对场景布局指的是一种相对的位置，即相对于游戏屏幕的位置，如上图所示，暂停按钮距离屏幕顶端的位置为 25，距离屏幕左边的位置为 25，不论屏幕的尺寸和比例如何变化，只要按钮距离屏幕顶端和左边的位置不变，那么这个按钮就会永远出现在屏幕的左上脚。

通常我们对于游戏背景的要求都是不论手机屏幕的尺寸如何变化，背景都应该能够填充满整个屏幕，否则的话屏幕边缘就会出现黑边，我们不希望在游戏的背景中看到黑边（某些故意要留出黑边效果的游戏除外）。

对于背景的适配，制作工具也为我们准备好了相应的功能。

当你在游戏中设置了背景图之后，就会出现如下图中的三个选项，平铺，适应和拉伸。

“平铺”适用于由一个小的图片挨个拼接成一个大的背景。

比如说，我将背景设置为一个这样的小图片，然后用这张小图片拼接成一个大的背景。

运行后看上去会是这个样子。

“拉伸”就是不论你的背景图片尺寸如何，都会根据最终的屏幕尺寸对其拉伸或者缩放，将其撑满屏幕。

就像是下面这样。

可以看到对于这个小图片的水平和竖直方向都进行了拉伸，“拉伸”有一个很大的问题就是会导致“变形”，就像图中原本是个正方形的图形，结果拉成了长方形。

最后，我们来看一下游戏中最常用的一种适配方法“适应”。“适应”又分为两种，一种是“宽度适应”，一种是“高度适应”。

先来看“宽度适应”。

可以看到背景图的宽填充满了屏幕，但是上方和下方会出现空白。

接着来看一下“高度适应”。

可以看到背景图的高填充满了屏幕，但是左侧和右侧分别切除了一部分背景（图中红色框框出来的为原图)。

这里注意区分一下“适应高度”与“拉伸”的区别，“适应高度”是将图片高填满屏幕，然后将两侧多余的部分裁掉了，但是“拉伸”是将宽和高去放大或缩小来填充屏幕，会导致图片变形。

总结一下，对于“适应”来讲，需要根据游戏的具体情况来选择是“适应宽度”还是“适应高度”。如果你希望背景图可以完整的显示出来两侧不被剪裁的话，那么就选择适应“宽度”，此时需要考虑上下的黑边问题，如果你希望背景图总是能够占满的屏幕的话，那么就选择适应“高度”，此时背景图的两侧会有一部分会被裁掉。

在真实的游戏中，通常会把背景图的尺寸做的更宽一点儿或者更高一点儿来解决黑边问题，例如适配宽度的时候，就将背景图做的更高一点儿，来避免上下的黑边问题；适配高度的时候，可以将背景图做的更宽一点儿，来解决较宽的设备（例如平板电脑）上的显示问题。

对于游戏中的内容布局

游戏中内容的布局因游戏的不同而不同，没有通用的解决方案，但是只要你理解了绝对场景布局，相对场景布局，再配合一些计算，基本上就可以解决所有游戏内容的适配了。

这里使用精致1010中的布局举个例子。

如图，左侧为 9:16 的屏幕的最终显示效果，右侧为 9:19 的屏幕的最终显示效果。右侧图中标注出了游戏中所有需要进行适配的内容，一共 7 个部分。

1. 暂停按钮：使用相对场景布局，相对于“顶部”和“左侧”，一直显示在屏幕的左上角。
2. 金币：使用相对场景布局，相对于“顶部”和“右侧”，会一直显示在微信默认按钮下方的位置（微信右上角的默认按钮也是使用的相对布局）。
3. 得分：使用绝对位置，始终位于坐标（0，600）的位置。
4. 网格和形状放置区域：根据 7 的位置进行计算，始终位于距离 7 上方 520 的位置。
5. 道具区域：根据 7 的位置进行计算，始终位于 7 上方 170 的位置。
6. 礼包区域：根据 7 的位置进行计算，始终位于 7 上方 170 的位置。
7. 形状区域：使用相对场景布局，始终位于相对屏幕“底部” 250 的位置。

可以看出在游戏内容的适配中，有的使用的相对场景布局，例如暂停和金币，有的使用的是绝对位置，例如得分，而有的是根据其他区域的位置进行计算设置的，例如网格和道具区。结合上述的这三种基本的方法，最终让游戏在不同的屏幕上显示出了不错的布局效果。

最后，总结一下，我们讲了三种游戏中不同部分的内容去适配不同屏幕的方法，游戏制作工具已经提供了用于处理适配的功能：相对场景布局以及背景图的三种配置。针对不同的游戏，游戏内容的适配会有所不同，不过只要你理解了几种基础的适配概念和方法，对于再复杂的内容适配，也无非是一些基础方法的相互组合而已。 

---

我是会做游戏也会教你做游戏的小蚂蚁，欢迎关注微信公众号【小蚂蚁教你做游戏】，领取全网最全的微信小游戏开发原创教程资料，每天学点儿游戏开发知识。