createjs stagegl与animateCC协作
最近在完成一个H5互动游戏采用与AnimateCC协作。由于Animate CC2017导出的createjs库默认是2015版的，里面的整个场景使用的stage。
基于这个版本做了初版本尝试，图片资源10M存在问题，iPhone6上只能达到的帧率 6 fps左右。加入手指点击之后，整体性能更差了。性能方面是一个很严重的问题。
于是下面开启了 stagegl 性能优化之路。
1. 下载createjs各关联库
CreateJS 实际是由easeljs.js、soundjs.js、preloadjs.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. 其他优化
- Animate CC发布设置，jpg与png图片分开导出，限制每张精灵图最大尺寸 2048 x 2018;
- 使用TingPng 进行图片压缩；
- 强烈建议使用 stagegl 替代 stage；
- 其他优化，建议查看官网、官方博客或者ajex中文博客。
优化之后整体游戏可以达到 40fps+，手势点击事件也不影响游戏性能了。整体状况ok。
Animate CC2018 出来了，有时间再摸索一下新特性。
文章参考地址如下：
- createjs官网：https://createjs.com/
- createks官方博客：http://blog.createjs.com/getting-started-with-stagegl/
- ajex中文博客：http://www.ajexoop.com/wordpress/
