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

这个项目是个丰田金融做的第三期互动H5活动。H5采用小狗+火车为第一人称视角的小游戏。由于偏向伪3d，进行技术可行性分析，有以下两种方案实现方案：

方案一： 可以采用three.js库文件，进行给场景动态增加元素、维护游戏场景；
方案二： 使用Animate CC的createjs库制作H5，后面增加点击，根据点击数动态修改帧率进行场景切换。

确认的设计稿整体偏卡通风格，项目设计和制作时间很紧张，所以采用了第二套方案。

项目技术点

项目关键点在于性能优化，主要优化方向：

1、压缩项目资源文件，初次资源文件达到 10M+ –> 进行CC导出jpg、png分离，以及tingPng进行图片压缩，整体资源文件 1.3M；
2、修改默认导出的stage，进行支持stagegl GPU渲染。

其他主要功能包括如下：

1、微信授权；
2、雪花动效、场景微动效等；
3、font-spider实现字体压缩；
4、点击数、里程数、时钟、游戏音效等游戏控制管理；
4、游戏排行榜功能；
5、留资抽奖功能。

项目设计