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

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

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


适应还是拉伸



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


拉伸


首先来看一下拉伸。



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



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


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

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

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


适应


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



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



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

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


再来看一下适配高度。



预览一下场景。



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

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

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




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



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

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

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


如何自定义背景图


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



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



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



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

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

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


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

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


另外我做了一门游戏开发课,以及一个游戏开发训练营,目的是帮助想学习游戏开发的朋友尽快的入门,做出自己的游戏,节省时间和精力,少走弯路。目前已有 37 名学员加入,多位同学已经通过学习做出了自己的游戏,如果你也想学习做游戏的话不要错过咯!

这是我做的几个简单好玩小游戏,欢迎试玩。

精致1010

一个很精致的消除游戏。

小程序

精致点点连线

忙碌生活中的片刻放松。

小程序

圆点守护者

为守护家园而战!

小程序

也欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识内容,可以来围观。接受付费咨询,不闲聊,望见谅。


相关文章
|
7月前
|
前端开发 JavaScript API
如何让元素在页面中完美居中?看这篇文章就够了!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
7月前
|
前端开发 JavaScript API
如何实现两栏布局?这篇文章告诉你所有的细节!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
移动开发 算法 JavaScript
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
2679 1
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
|
5月前
|
图形学 Android开发 开发者
U3D游戏开发实战:有效策略缩小包体大小,提升加载速度
【7月更文第12天】随着移动设备的普及,Unity 3D(简称U3D)作为一款强大的跨平台游戏开发引擎,成为了众多独立开发者和游戏工作室的首选。然而,面对日益增长的用户需求与有限的设备存储空间,如何在保证游戏质量的同时,有效缩减游戏包体大小,成为了开发者面临的一大挑战。本文将探讨一系列实用技巧和最佳实践,帮助你在U3D开发小游戏时显著减小包体尺寸,从而提升玩家的下载体验与启动速度。
133 12
|
6月前
|
移动开发 前端开发 安全
技术心得记录:怎么更快地合成大西瓜?搞懂游戏的源码,闭着眼睛都能成功!
技术心得记录:怎么更快地合成大西瓜?搞懂游戏的源码,闭着眼睛都能成功!
98 0
|
6月前
|
人工智能 资源调度 前端开发
Hello~ ProChat 1.0 : 会话组件中 的“亿” 点点细节
Hello~ ProChat 1.0 : 会话组件中 的“亿” 点点细节
108 0
|
7月前
|
Android开发 容器
Android开发第二次课 布局方式
Android开发第二次课 布局方式
48 0
关于游戏背景图的调整,读这篇文章就够了
嗨!大叫好,我是小蚂蚁。最近看有很多问关于游戏背景图的问题,是该选择适应还是选择拉伸?是该适配宽度还是适配高度?不想要背景图去自动适配,想要自定义怎么办?这篇文章就分享一下与调整游戏背景图有关的那些事儿。
309 0
关于游戏背景图的调整,读这篇文章就够了
|
小程序 开发工具 UED
实现各种效果和功能的按钮,读这篇文章就够了
本文主要内容包含各种效果和功能的按钮的实现方法,以及应用场景。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
166 0
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏20之enemy被攻击显示后退动画(block效果)
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏20之enemy被攻击显示后退动画(block效果)
171 0