《星途WeGoing》难点与技术优化
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
一、难点
1、iPhone X等手机适配。
标准设计稿尺寸为 750px:1334px,在iphone 6等手机上可以完美适配。但在部分长屏的手机(如iphone X,三星等部分手机)上可能会出现底部黑边。
最开始的适配是在头部和底图加上填充图片,最终用户看到的游戏尺寸还是750px:1334px。但这样看起来很丑。
后来继续优化了一版,完美适配iPhone X。算出屏幕的尺寸与设计尺寸的差值,将舞台中的元素做一下偏移,如果贴边的元素则调整场景中的其他元素,以适配整体视觉。
2、圆头像。
由于引擎是自己修改适配,圆头像滤镜无效。后来用原始的canvas接口裁剪,创建一个离屏canvas进行裁剪,再把生成的内容绘制到主canvas上。但这个接口比较耗性能,导致帧率降低。后来暂时放弃游戏中的圆头像,只在结果页进行裁剪。如果头像过多,列表list也会卡顿,用一个透明的圆角贴片来模拟圆头像的效果。
3、主场景的构建
- 圆圈轨道,引擎不支持绘制线圈;改用图片,但统一一张图片轨道看起来粗细不一样,改为不同范围半径加载不同的粗细的轨道图片。
- 过多星体造成内存使用上升,使用对象池,缓存创建过的星体。实时计算不在屏幕内的星体移入对象池。
- 星体根据飞船位置动态创建,保证尽量少的星体被绘制。
- 飞船跳越轨道的逻辑较重,包括是否在有效区域,碰撞检测,下一星球位置计算等。将combo动效果、分数效果、声音播放放入setTimeout中,避免集中执行造成的丢帧。
二、优化
1、代码大小优化,剔除引擎中没有用到的模块,代码压缩。
2、图片优化,压缩,雪碧图合并。
3、低端机器向下兼容:去掉非重要动画特效、高清图片降级为普通图片,背景音乐降级,保证游戏可玩性的同时提高流畅度。
4、内存优化。
- 图片资源的优化,单图片的高宽像素均不能超过1024px,否则内存明显升高。
- 不用的资源或数据,及时调用destroy(),并置为null销毁。
- 使用对象池,避免不停的new带来的内存泄漏,比如宝石、流星等。
- 在场景过度后,调用SDK提供的gc接口triggerGC(),主动回收内存。
5、帧率优化
- 少用滤镜,裁剪等比较耗的效果,大量用户圆形头像用贴图方式解决。
- 静态背景层等UI层cache bitmap,减少drawcall。
6、进入游戏时间优化
游戏必须图片资源放进本地包,后续场景图片异步延迟加载。
本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作
个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy
欢迎关注公众号【入门游戏开发】
新手微信小游戏入门有什么好的推荐
网上找几个例子实践