微信小游戏开发实战16-如何进行优化

简介: 本节内容主要包括对微信小游戏进行优化的几个着手点以及具体的优化方式。如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。

本节内容主要包括对微信小游戏进行优化的几个着手点以及具体的优化方式。

如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。



优化这件事儿我以前很少会在意,因为一直做手机游戏,手机硬件的更新速度非常的快,更快的计算能力,更强的渲染能力,更大的内存。这就导致了如果你不是做一个大型游戏的话,几乎是不太用考虑优化的。


直到我开始做微信小游戏,作为一个小游戏是有诸多的限制的,计算能力,渲染能力,尤其是对游戏大小的限制(不能超过4M),这些限制让我不得不重新的转变一些之前做游戏的想法。


刚开始做完精致1010时,其实也没太在意游戏的优化,因为游戏本来就比较小,再加上使用简约的风格,素材资源比较少,所以整个游戏运行起来还是挺流畅的。但是,当我开始不停的为这个小游戏进行扩展增加更多的内容时,问题出现了。


7月4号,我更新了一个新的游戏模式:闯关模式。相当于将原有的游戏扩充了一倍的内容。


我们看一下下方的两张小游戏后台的数据统计图。这里有两项比较重要的数据:

总耗时:是指从玩家点击游戏图标到正式进入到游戏中的时间。


CPU: 是指游戏运行中所需要消耗的计算量。


可以看到在增加了闯关模式之后,游戏的启动时间和 CPU 都开始上升。其中最严重的莫过于启动时间的提升,最高值达到 9 秒钟,想一个如果一个玩家打开一个小游戏需要等待 9 秒钟的时间才能进的去的话,很可能就不会再次打开它了。


针对上述的问题,我开始着手对游戏进行优化,首先看了一下官方文档的优化建议。

官方优化建议在这里: https://gamemaker.weixin.qq.com/doc/minigame/optimize.html

内容相对较少,只有一些原则,缺少具体详细的指导。但是至少是有了一些方向了,于是我开始踏上了小游戏优化的旅程。


下面记录的就是我针对一个已上线的微信小游戏的优化操作。


精简游戏资源


每一个被导入的游戏资源最终都会包含在游戏的包体中,在游戏开发的过程中会导入很多的资源,包含各种的图片,音效,数字等等,有些资源最终没有被用到,这时候要仔细的检查这些导入的资源,找到并删除那些没有用到的资源,以避免它们增加游戏的大小。


游戏中的最多的资源类型就是图片,对于图片资源我们要坚持一个原则:尽可能以最小的图片达到预期的效果。


比如说游戏中的对话框背景图,原来使用的是一张 380x580 的圆角矩形图片,在等比例的缩小一倍后,最终使用了 190x290 的图片。


虽然边角和阴影有部分的细节损失,但是总体上是可接受的,这样原来的一张大图就缩减了一半的大小。


对于图片资源的另一个原则就是:复用。只要能重复使用同一张图片的地方,那就一定要重复使用同一张图片。



如图,在优化后的精致1010的首页中,8个按钮只使用了两种类型的图片,一个是长的圆角矩形(用于声音和震感按钮),一个是方的圆角矩形(用于剩余的所有按钮)。通过调整图片的大小和颜色,就可以做出不同的按钮了。

这里我使用的是圆角矩形, 因为圆角矩形在大幅度的放大或者缩小后,圆角处会出问题,所以使用了两种类型的圆角矩形,如果使用方脚矩形的话,那么所有的按钮复用一张图片就可以搞定了。


精简游戏逻辑


游戏逻辑指的就是我们的积木块了。


首先删除游戏中没有用到的积木。仔细检查游戏中的逻辑积木,删除无用的或闲置的游戏积木,平时对于无用的积木块要及时的删除,不要放在那里,养成好习惯。


其次还是要坚持“复用”的原则,对于重复的逻辑通过使用“函数”或者“通知”进行复用,避免多次使用重复的积木块。


使用函数来复用逻辑


举个例子,在精致1010中拖拽的方块不满足放置要求是会退回到原位置的,因为包含多种不满足要求的情况,所以有很多的“如果,否则”积木块,对于所有不满足的情况其实都重复用到了相同的两块积木。



对于这种情况,我们就可以将重复的积木制作成一个函数。



可以看到这个函数中设置了多个参数,这样对于所有需要移动缩小功能的地方,就都可以使用这个函数了。


最后使用函数来替换原来重复使用的积木块。



使用通知来复用逻辑


使用函数有一定的限制,尤其是对于局部变量来说, 将局部变量以参数的形式传递给函数时,在函数内对局部变量的修改不会被保存。比如说一个局部变量 10,当作参数传入函数中,在函数内对局部变量进行加倍处理,最终结果应该是 20,但是函数执行完毕后,这个局部变量的值依然是 10,所以对于函数内处理的变量只能够使用全局变量


那么对于需要处理局部变量的重复积木,我们可以通过使用“通知”来进行复用。



如图,这是更换主题中的部分逻辑代码,可以看到红框框出的代码是重复使用的,这里我们可以将重复的代码放到一个通知中处理。



对于需要用到重复积木的地方,我们只需要向自己发送一个通知即可。这样原来的这部分代码就通过复用被精简了一半。


这里有一点需要注意一下:当前的微信小游戏开发工具的积木块的数量是有上限的。


这是我前些天在增加新内容时遇到的问题,项目无法进行保存了,咨询过开发团队,才知道是代码超出了限制。



所以要好好斟酌每一个需要使用的积木块,尽可能的以最少的积木块实现想要的功能。


另外有一点需要考虑的是,当前的代码限制决定了你将要开发的游戏的体量, 如果你想要通过微信小游戏开发工具做一个比较大的游戏,那么就需要提前考虑一下这个代码限制了。


合理规划场景


在增加闯关模式时我原来的方案是重新创建一个场景,专门用于闯关模式。这样经典模式和闯关模式两个场景就能够各自独立。在后续不论是针对哪个模式进行修改也好,扩展也好,只需要到其对应的场景中进行开发即可。


多创建一个场景,就相当于多了非常多的资源, 两种游戏模式之间,其实有非常多的东西都是可以共用的。但是,由于很多的资源和积木逻辑无法跨场景共用, 所以很多的内容就只能通过复制粘贴再创建一份了,这就导致了游戏中包含大量的重复的代码和资源。


在遇到了最大代码限制之后,我不得不重新考虑场景的规划,将这两个场景合二为一。



如图, 我将原来的“经典模式”和“关卡模式”两个场景合并到了一个“游戏”场景。在合并之后,节省了大量的代码空间,后来才能够增加“编辑”场景,实现用户自定义关卡的功能。


这里的一点提示就是不要不加节制的使用场景, 如果能使用一个场景搞定的事情,那就不要用更多场景了。


减少游戏中的精灵数目


游戏场景中的精灵的数量决定了渲染和计算需要的消耗量。总体上来讲,精灵的数目越多需要的渲染和计算的量就越多。所以为了提升总体的性能,就需要尽量的精简游戏中的精灵的数量。


点击调试游戏,可以在“全局变量”选项中看到当前场景中的精灵数。


如图,在优化之前,初始场景中的精灵数目是 325。虽然游戏的界面看似非常简单,但是精灵数目却非常的多。


我们的目标就是在保证游戏效果的基础上尽量的精简游戏中的精灵数目,为此我做了如下的优化。



原本游戏中的这个 10x10 的网格是使用单个格子拼出来的, 所以画出这样一张网格就需要 100 个精灵。 我更换了一种方式,直接导入一个画好的 10 x 10 的网格图片,这样一个展示网格只需要使用 1 个精灵就可以了,这样一下就缩减了 99 个精灵。


另外游戏中的所有的形状原本都是使用单个方块拼成的,现在我直接将形状制作成一张图片,这样就又能够减少非常多的精灵。



最终经过优化后,场景中的精灵数目减少了一百多,这还是在后续增加了新功能之后的精灵数目。



同时从CPU的指标中可以明显看的出来,优化后,消耗大幅下降,因为更少的精灵数目,就意味着更少的CPU消耗。



创建一个精简的初始场景


“游戏启动时间”是小游戏中的一个非常重要的指标,它意味着从玩家打开到正式进入游戏需要多长时间,通常这个时间越短越好。


决定这个时间长短的因素很多,包括游戏的大小,资源的多少,网络的状况,玩家手机的性能等等,其中大部分因素其实是不可控的,除了我们上述提到的各种优化方法之外,还有一个方式可以帮助我们提升游戏的启动速度,就是创建一个尽可能简单的启动场景。


原来的启动场景。


新增的精简的启动场景。


如图我为游戏增加了一个非常简单的启动场景,只包含了一个小蚂蚁的图标和很少量的积木块。这样场景的打开速度就会比原来快很多,因为需要加载的资源和积木块都非常的少。


另外,不要忘了在作品设置中选择资源在“切换场景时加载”。



这样由于启动的场景资源非常的少,就可以很快的加载完毕并打开了,然后我们再从启动场景加载打开后面资源比较多的场景。


最后,总结一下,对于微信小游戏的优化,我们可以从下列几个方面着手:


  • 精简游戏资源
  • 精简游戏逻辑
  • 合理规划场景
  • 减少游戏中的精灵数目
  • 创建一个精简的初始场景


通过这些优化操作,我成功地将精致1010的启动时间和性能消耗都降了下来,希望这些优化操作也能够给你提供一些参考。


优化是一件永无止境的事情,我认为最好的优化是应该在制作之前进行的,因为一个更优的想法,一个更合理的规划要胜过这些事后的补救措施。


如果不是制作微信小游戏我大概很难体会到在各种限制之内做东西的感觉,想想当年的游戏开发者要把游戏做到 256k 的卡带上,虽然限制更大,但是依旧不影响很多经典游戏的诞生。所以,在一定的限制之内进行创作,是否更容易激发一些灵感呢?




欢迎体验我的微信小游戏作品“精致1010”,一个会不停探索下去的小游戏。

精致1010

一个会不停成长的小游戏

小程序

如果你对微信小游戏游戏开发感兴趣,欢迎关注我的公众号,如果你有对游戏开发感兴趣的朋友,也欢迎把这个系列文章推荐给他。

相关文章
|
25天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
381 7
|
25天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
448 1
|
20天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
27 0
|
25天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
257 0
|
29天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
390 0
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
102 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
76 6
|
29天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
161 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
53 5
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
53 5
下一篇
无影云桌面