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

简介: **这是微信小游戏开发实战系列的第16篇,点击上方的#微信小游戏开发实战话题可以查看本系列的所有内容。本节内容主要包括对微信小游戏进行优化的几个着手点以及具体的优化方式。


**这是微信小游戏开发实战系列的第16篇,点击上方的#微信小游戏开发实战话题可以查看本系列的所有内容。

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

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



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


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


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


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


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

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


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

640.png

640.png


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


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

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

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


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


精简游戏资源


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


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


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


640.png

640.png

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


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


640.png


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

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


精简游戏逻辑


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


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


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


使用函数来复用逻辑


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


640.png


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


640.png


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


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


640.png


使用通知来复用逻辑


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


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


640.png


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


640.png


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


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


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


640.png


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


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


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