就够了

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

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

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

适应还是拉伸

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

拉伸

首先来看一下拉伸。

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

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

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

拉伸的优点：背景图永远都会充满整个屏幕，不会出现因背景图填充不足导致的黑边问题。

拉伸的缺点：不一定是等比例的拉伸，非等比例的拉伸会导致背景图中图像变形。如上图中的小蚂蚁图像，就明显被拉长了。

适应

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

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

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

如果背景原图的尺寸比屏幕的宽度小，假设背景图是 512 x 512，屏幕的尺寸是 800x1600，此时就会将背景图进行等比例的放大，直到屏幕的宽度，也就是背景图由 512 x 512，放大到 800 x 800。

再来看一下适配高度。

预览一下场景。

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

如果背景的图片尺寸比屏幕的高度大，假设背景图是1024x1024，屏幕的尺寸是 375 x 667，此时会将背景图进行等比例的缩小，直到屏幕的高度，也就是背景图由 1024x1024，缩小到 667x667。

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

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

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

适应的优点：背景图等比例缩放，不会出现图像的变形。

适应的缺点：只能满足一个方向的适配，适配宽度时，屏幕上下有可能出现黑边(未用背景图填充的区域)，适配高度时，背景图两侧的内容无法显示出来。

如何自定义背景图

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

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

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

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

自定义的优点：无需再考虑不同屏幕尺寸的适配问题，几乎在所有尺寸的屏幕上都能正常显示。

自定义的缺点：背景图要做的大，而且永远只能在屏幕上显示出其中的一部分。

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

---

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