by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2018/03/xingtu-xiaoyouxi/

一、难点

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、进入游戏时间优化

游戏必须图片资源放进本地包,后续场景图片异步延迟加载。

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2018/03/xingtu-xiaoyouxi/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号