关于游戏背景图的调整,读这篇文章就够了

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

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


适应还是拉伸



640.png


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


拉伸


首先来看一下拉伸。


640.png


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


640.png

640.png


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


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

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

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


适应


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


640.png


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


640.png


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

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


再来看一下适配高度。


640.png


预览一下场景。


640.png


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

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

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

640.png

53f083bcec211442825d54a6fd147eb0.png


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


3edd296b16220d2a098ea776d1f05c75.png

71841e7cff01f9b2097b458cd242931f.png


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

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

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


如何自定义背景图



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


33692afb8618d2b9fad412c8bdc599fa.png


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


8a195f9318eb624266805abf5580044a.png


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


a0403ba00cf0e233abe0161f9daa0c78.png

4d9428b68b93808fc498ac80bb501c68.png


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

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

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


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

相关文章
|
7月前
|
前端开发 JavaScript API
如何让元素在页面中完美居中?看这篇文章就够了!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
6月前
|
人工智能 资源调度 前端开发
Hello~ ProChat 1.0 : 会话组件中 的“亿” 点点细节
Hello~ ProChat 1.0 : 会话组件中 的“亿” 点点细节
108 0
|
7月前
|
Android开发 容器
Android开发第二次课 布局方式
Android开发第二次课 布局方式
48 0
Threejs入门进阶实战案例(4):addEventListener() 方法自适应窗口显示的方案
Threejs入门进阶实战案例(4):addEventListener() 方法自适应窗口显示的方案
135 0
|
小程序
关于游戏背景图的调整,读这篇文章就够了
嗨!大叫好,我是小蚂蚁。最近看有很多问关于游戏背景图的问题,是该选择适应还是选择拉伸?是该适配宽度还是适配高度?不想要背景图去自动适配,想要自定义怎么办?这篇文章就分享一下与调整游戏背景图有关的那些事儿。
133 0
|
小程序 开发工具 UED
实现各种效果和功能的按钮,读这篇文章就够了
本文主要内容包含各种效果和功能的按钮的实现方法,以及应用场景。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
166 0
|
前端开发
第33/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第24课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第24课 创建页面对象,这节课开始创建游戏页面。
82 0
|
前端开发
第34/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课 重构游戏对象,这节课我们继续模块化重构,将页面类拆分到单独的文件中,清除一些不再需要的变量等,让游戏代码的结构更加合理。
74 0
|
前端开发
第31/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第22课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第22课 创建记分板模块,这节课我们将实现记分板对象的模块化。目前,游戏中还没有记分板对象,在屏幕下方只有两个分数,一个是用户的,一个是系统的,这节课将仿照挡板的设计方法创建一个记分板基类,然后再派生出两个子类,即用户记分板与系统记分板。
97 0
如何解决代码在IE6下的双倍边距问题?底层原理是什么?
如何解决代码在IE6下的双倍边距问题?底层原理是什么?
108 0