微信小游戏制作工具中关于背景图的设置

简介: 微信小游戏制作工具中关于背景图的设置

嗨!大家好,我是小蚂蚁。


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


适应还是拉伸



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


拉伸


首先来看一下拉伸。



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



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


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

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

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


适应


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



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



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

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


再来看一下适配高度。



预览一下场景。



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

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

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




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



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

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

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


如何自定义背景图


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



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



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



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

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

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


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

相关文章
|
3月前
|
安全 API 开发者
微信开发者工具里面没有企业微信模式
企业微信与普通微信在应用场景和开发体系上存在本质区别,主要体现在身份认证、功能丰富性和开放能力等方面。企业微信开发需使用特定的API和工具,本文介绍了企业微信开发的基本步骤、特点及开发进度安排,帮助开发者更好地理解和应用企业微信的开发环境。
|
4月前
|
数据可视化 前端开发 小程序
5G时代-探索微信小游戏
5G时代-探索微信小游戏
47 2
5G时代-探索微信小游戏
|
4月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
39 2
|
4月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
70 3
|
6月前
|
人工智能 小程序 Java
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
本文介绍了一款名为PyWxDump的开源工具,它可以获取微信账户信息、解密SQLite数据库以查看和备份聊天记录。此工具适用于已登录电脑版微信的用户,通过GitHub下载后简单几步即可操作。适合对数据恢复感兴趣的开发者,但请注意合法合规使用并尊重隐私。
819 2
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
|
6月前
|
小程序 开发者
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
这篇文章介绍了如何在微信开发者工具中集成SVN版本控制系统,并提供了解决集成后无效果问题的方法。
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
|
6月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
209 0
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
6月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
6月前
|
小程序
uni-app——微信小程序设置全局分享
uni-app——微信小程序设置全局分享
220 0
|
6月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)

热门文章

最新文章