createjs stagegl与animateCC协作

最近在完成一个H5互动游戏采用与AnimateCC协作。由于Animate CC2017导出的createjs库默认是2015版的,里面的整个场景使用的stage。

基于这个版本做了初版本尝试,图片资源10M存在问题,iPhone6上只能达到的帧率 6 fps左右。加入手指点击之后,整体性能更差了。性能方面是一个很严重的问题。

于是下面开启了 stagegl 性能优化之路。

1. 下载createjs各关联库

CreateJS 实际是由easeljs.jssoundjs.jspreloadjs.js``和tweenjs.js 4个部分组成。

Animate CC2017导出的createjs库默认是2015版的。引用的库文件改为 引用git地址中的4个库文件,即可支持stagegl。

git 地址:https://github.com/CreateJS

2. 修改代码支持stagegl

导出原始代码:

// Regular 2d Canvas content
var stage = new createjs.Stage("canvasId");

代码修改后:

// StageGL Canvas content
var stage = new createjs.StageGL("canvasId");

1. 使用预加载

默认到处会使用预加载,如下:

var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("progress",loadProgressHandler);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);

可以在manifest中追加预加载素材。在 loadProgressHandler中针对进度进行进度条展示。

4. 增加音效

音效的使用,如下:

1、 首先进行音频文件加载和绑定:
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.registerSound('src/carstart.mp3', 'carstart');
createjs.Sound.registerSound('src/carmove.mp3', 'carmove');
2、 进行音效播放
createjs.Sound.paused = false;
createjs.Sound.play('carmove', {loop: -1});
3、音效的停止
createjs.Sound.stop();
createjs.Sound.paused = true;

5. 屏幕与位置适配

An默认到处的是左上角作为坐标原点。移动端使用,需要针对设备像素进行比例缩放。以下是以全屏进行等比缩放,超出宽度进行向左偏移居中。

stage.updateViewport && stage.updateViewport(750, 1206);
stage.addChild(exportRoot);
stage.enableDOMEvents(false);

宽高以最大比例缩放,超出宽度向左偏移:

lastW = iw; lastH = ih; lastS = sRatio;
var maxScale = Math.max( yRatio, xRatio);
anim_container.style.transform = 'scale(' + maxScale +')';
anim_container.style.webkitTransform = 'scale(' + maxScale +')';
anim_container.style.marginLeft = - (maxScale * 750 - iw)/ 2 + 'px';

6. 其他优化

  1. Animate CC发布设置,jpg与png图片分开导出,限制每张精灵图最大尺寸 2048 x 2018;
  2. 使用TingPng 进行图片压缩;
  3. 强烈建议使用 stagegl 替代 stage;
  4. 其他优化,建议查看官网、官方博客或者ajex中文博客。

优化之后整体游戏可以达到 40fps+,手势点击事件也不影响游戏性能了。整体状况ok。

Animate CC2018 出来了,有时间再摸索一下新特性。

文章参考地址如下:

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注