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

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

本文主要内容：教你如何让游戏中的UI、背景和内容适应不同的屏幕尺寸，让你的小游戏在各种尺寸的屏幕上都能展现出它最好的一面。

如果您没有任何游戏开发经验，欢迎观看我的“”系列视频教程，它将一步步教您如何制作您的第一个小游戏。

目前的手机屏幕有多种不同尺寸。 为了让游戏在不同尺寸的屏幕上显示出更好的效果，我们需要处理游戏对不同尺寸屏幕的适配问题。 今天的文章就是带你彻底了解一下如何让你的小游戏适配不同尺寸的手机屏幕。

通常一款游戏需要处理的部分有三个部分：游戏的UI、游戏的背景以及游戏中内容的布局。

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

接下来我们依次讲解这三部分的适配方法。

适配游戏UI

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

例如，很多游戏都会在左上角有一个暂停按钮，如下图所示。

我们对这个暂停按钮的要求是，无论屏幕如何变化，它都应该出现在左上角，如图所示。

然后我们预览一下，看看显示效果。

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

接下来，我们更改屏幕比例。

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

为什么会出现这样的结果呢？

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

我们如何处理这种情况？

这很简单。 制作工具已经为我们准备了这样的功能。 称为“相对场景布局”。

该房产可以在“房产区”中看到。 开启后，下方会出现垂直布局和水平布局选项。

接下来，我们将为这个暂停按钮设置相对场景布局。

从顶部算起 25 个，从左侧算起 25 个。

预览它以查看它在不同屏幕尺寸上的外观。

这次，无论屏幕大小如何，该按钮都会出现在左上角。

相对场景布局是指相对位置，即相对于游戏画面。 如上图所示，暂停按钮距离屏幕顶部25，距离屏幕左侧25，与屏幕大小和比例无关。 改变，只要按钮距屏幕顶部和左侧的距离保持不变，按钮就会一直出现在屏幕的左上角。

游戏背景适配

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

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

在游戏中设置背景图片后，会出现如下图所示的三个选项：Tile、Adapt、。

“平铺”适合将小图片一张一张拼接成大背景。

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

运行后会是这个样子。

“拉伸”是指无论你的背景图片尺寸是多少，它都会根据最终的屏幕尺寸进行拉伸或缩放以填充屏幕。

就像这样。

你可以看到这张小图片在水平和垂直方向上都被拉伸了。 “拉伸”的一个很大的问题是，它会造成“变形”，就像图中的图形本来是一个正方形，但它却被拉伸了。 长方形。

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

我们先来看看“宽度适配”。

您可以看到背景图像的宽内边距填充了屏幕，但其上方和下方有间隙。

接下来我们看一下“高适应性”。

可以看到背景图像的高填充填满了屏幕，但左右两侧部分背景被剪掉了（图中红框为原图）。

这里，要注意“贴合高度”和“拉伸”的区别。 “适合高度”是指图片的高度填满屏幕，然后将两边多余的部分剪掉，而“拉伸”是指去掉宽度和高度。 放大或缩小以填满屏幕会导致图像扭曲。

综上所述，在“适应”方面，需要根据游戏的具体情况来选择是“适应宽度”还是“适应高度”。 如果您希望背景图像完整显示而不被两侧剪裁，则选择适应“宽度”。 这时候就需要考虑顶部和底部黑边的问题。 如果你想让背景图片始终填满屏幕，那么只要选择适应“高度”，背景图片两侧的部分就会被裁剪掉。

在实际游戏中，通常会将背景图像的尺寸设置得更宽或更高，以解决黑边问题。 例如，在适应宽度时，将背景图像调高，以避免顶部和底部出现黑边的问题； 适应高度时，可以将背景图片弄得更宽，以解决在更宽的设备（如平板电脑）上的显示问题。

用于游戏内内容布局

游戏中内容的布局因游戏而异，并没有通用的解决方案。 不过，只要了解了绝对场景布局、相对场景布局以及一些计算，基本上就可以解决所有游戏内容的适配了。

这里我们以 1010中的布局为例。

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

暂停按钮：使用相对场景布局，始终显示在相对于“上”和“左”的屏幕左上角。

金币：使用相对场景布局，相对于“顶部”和“右侧”，它们将始终显示在微信默认按钮下方（微信右上角的默认按钮也使用相对布局）。

Score：使用绝对位置，始终位于坐标 (0, 600)。

网格和形状放置区域：根据7的位置计算，始终位于7上方520处。

道具面积：根据7的位置计算，总是位于7上方170的位置。

礼包区域：根据7的位置计算，始终位于7上方170的位置。

形状区域：使用相对场景布局，始终位于相对于屏幕“底部”250 的位置。

可以看到，在游戏内容的适配上，有的采用相对场景布局，如停顿、金币，有的采用绝对位置，如分数，还有的根据其他区域的位置计算设置，如网格和支撑区域。 结合以上三种基本方法，游戏最终在不同的屏幕上显示出良好的布局效果。

最后，总结一下，我们讨论了使游戏的不同部分适应不同屏幕的三种方法。 游戏制作工具提供了处理适配的功能：相对场景布局和背景图像的三种配置。 对于不同的游戏，游戏内容适配会有所不同，但只要了解了几个基本的适配概念和方法，无论内容适配多么复杂，无非就是一些基本方法的组合。