基于这个版本做了初版本尝试，图片资源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. 其他优化

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

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

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

文章参考地址如下：

• createjs官网：https://createjs.com/
• createks官方博客：http://blog.createjs.com/getting-started-with-stagegl/
• ajex中文博客：http://www.ajexoop.com/wordpress/