关于游戏背景图的适配，读这篇文章就够了

嗨！大叫好，我是小蚂蚁。最近看有很多问关于游戏背景图的问题，是该选择适应还是选择拉伸？是该适配宽度还是适配高度？不想要背景图去自动适配，想要自定义怎么办？这篇文章就分享一下与调整游戏背景图有关的那些事儿。

如图是小游戏制作工具中的一个场景，当你为背景设置了一张图片后（这里使用的是一张1024x1024的正方形图片），在属性区中就会出现与背景有关的属性，可以看到这里主要有平铺，适应和拉伸三种，这里我们主要讲一下适应和拉伸的区别。

首先来看一下拉伸。

属性区中选择“拉伸”，然后预览一下场景。

观察一下上方两种不同的屏幕尺寸下的背景图，小蚂蚁的头像被拉长了，因为背景原图是一张 1024x1024 的正方形图片，但是最终的屏幕尺寸都是长方形的，所以就会将正方形的背景图拉长，让其将屏幕填充满。

这就是背景图的拉伸了，不论你的背景图原图的尺寸为多大，总会根据最终显示的屏幕对其进行调整（小图就拉大，大图就缩小），让其填充满整个屏幕。

接着再来看一下适应，适应分为两种，适配宽度和适配高度。

先来看一下适配宽度，预览一下场景。

如图，就是适配宽度的显示效果，原理就是将图片进行等比例的放大或者缩小，直到图片左右两侧填充满屏幕的左右两侧时停止。假设图中绿色的框表示的原图的大小(1024x1024)，最后的适配效果就是将原图等比例的缩小，直到充满屏幕两侧(按照当前的屏幕尺寸，屏幕的宽度是 375)。

再来看一下适配高度。

预览一下场景。

如图，是适配高度的显示效果，原理是将图片进行等比例的放大或者缩小，直到图片的上下两侧填充满屏幕的上下两侧为止。假设图中的绿色框表示的原图大小(256x256)，最后的适配效果就是将原图等比例的放大，直到充满屏幕上下两侧(按照当前的屏幕尺寸，屏幕的高度是 667)。

最后，适配宽度和高度是复选框，可以同时勾选，但是同时勾选的效果等同于适配高度。

当然，你也可以都不勾选，都不勾选的话，背景图会以原尺寸显示。

这就是背景图的适应了，会根据屏幕的尺寸将背景图等比例的进行缩放，以适配屏幕的宽度或者高度。

在微信小游戏制作工具中，只要你设置了一张背景图片，就必须要在三种填充类型中选择一种。

但是，有的时候我们不希望让工具去处理背景的适配，我们希望能够自己去处理背景，这时该怎么办呢？很简单，只需要单独增加一个精灵层，然后把这个精灵层放在背景层之上，其它所有精灵层之下，就可以了。

这样，就可以无视工具提供的背景适配，自己手动调整精灵的大小了。预览一下，看看不同屏幕尺寸下的显示效果。

这种自定义方式是尝试以一张很大的图片来解决不同屏幕尺寸的显示问题。

在真实的游戏项目中，背景的拉伸基本上是不会使用的，因为屏幕尺寸多种多样，使用拉伸一定会导致图片的变形，这是无法接受的。其它的三种适配宽度，适配高度和自定义需要根据具体的游戏来进行选择，每一种方案都有其优缺点，没有哪一种方案是最好的，需要根据具体的游戏来选择一个合适的背景适配方案。

---

我是会做游戏也会教你做游戏的小蚂蚁，想学习做游戏的话，关注我的公众号【小蚂蚁教你做游戏】就对啦！

也欢迎加小蚂蚁微信(xiaomayi6669)，交个朋友。