cocos2d-js除了做native游戏外，还可以用来做HTML5游戏/动画，那么它跟adobe的createjs框架比较会怎么样呢？
（背景知识：createjs是adobe支持的HTML5框架，沿用了Flash的思想，实现了最基本的显示列表和事件机制，是一个非常轻量的框架。createjs暂时只有canvas 2d版本，webgl版本还没完成。）
1背景，上排5个小人播放SpriteSheet动画（14帧位图轮播），下排5个小人不断做旋转和缩放。其中小人是带透明的png，尺寸为85*121px。
在PC的chrome运行，cocos2d-js和createjs都能满帧60fps，轻松搞掂无压力。
cocos2d-js：
for (var i = 0; i & 5; i++) {
var man = new cc.Sprite("res/grossini.png");
man.runAction(cc.spawn(cc.rotateBy(1, 360, 360), cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1))).repeatForever());
this.addChild(man, 2);
man.x = size.width/6*(i+1);
man.y = size.height/5;
for (var j = 0; j & 5; j++) {
var man = new cc.Sprite();
var animation = new cc.Animation();
for (var i = 1; i &= 14; i++) {
animation.addSpriteFrameWithFile("res/grossini_dance_" + (i & 10 ? ("0" + i) : i) + ".png");
animation.setDelayPerUnit(1 / 7);
man.runAction(cc.animate(animation).repeatForever());
man.x = size.width/6*(j+1);
man.y = size.height / 3 * 2;
this.addChild(man, 3);
createjs：
for (var i = 0; i & 5; i++) {
var man = new createjs.Bitmap("../res/grossini.png");
man.regX = 42;
man.regY = 60;
man.x = canvas.width/6*(i+1);
man.y = canvas.height/5*4;
man.scaleX = man.scaleY = 1;
stage.addChild(man);
createjs.Tween.get(man, {loop: true}, true)
.to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000);
var images = [];
for (var i = 1; i &= 14; i++) {
images.push("../res/grossini_dance_" + (i&10?("0"+i):i) + ".png");
for (var j = 0; j & 5; j++) {
var sheet = new createjs.SpriteSheet({
images: images,
frames: {width: 85, height: 121, regX: 42, regY: 60}
}); //需要设置每帧的宽高，注册点信息
var man = new createjs.Sprite(sheet);
man.framerate = 60/7;
man.x = canvas.width/6*(j+1);
man.y = canvas.height / 3;
man.play();
stage.addChild(man);
由于播放帧动画都需要不断的替换贴图，是否使用GPU加速差别不大，所以接下来只使用旋转放缩来测试两个框架的效率区别。
基于实验一，改为使用2个图，每个图新建2000个实例放到舞台上，分别做旋转放缩的缓动变化。实验二继续在PC的chrome中运行。
cocos2d-js：使用webGL，帧频不断变化，最高有55fps，最低只有29fps。
如果让cocos2d-js强制在canvas 2d模式下渲染，帧频只有26fps左右。
createjs：使用canvas 2d渲染，保持在28fps。
在这个实验中，两者差异的原因主要是cocos2d-js使用了webgl渲染，可以让部分矩阵计算放到GPU，而createjs使用纯canvas 2d渲染，只能依赖CPU计算矩阵变换，导致每帧的计算超过了重绘时间间隔，导致了帧频降低。
接着，我们再做一个手机canvas的实验，测试机是小米1 Android 2.3，可谓是低端情况的canvas 2d，代表了一大批山寨机水平吧。
判断当前帧频，如果帧频大于30，则添加20个运动的小人到舞台上，直到帧频低于30才停止。
cocos2d-js在UC浏览器上运行，勉强支撑40个小人，帧频13到23fps之间波动。
createjs情况就没有在PC chrome那么风光了，运行20个小人就已经卡得掉牙了，只有10到15fps。
通过这个实验可以发现，手机的canvas性能真心不行，包括UC浏览器和微信内嵌的浏览器。这可能是手机CPU性能带来的主要瓶颈吧，所以在手机上只能多依赖GPU，要么发布为native，要么只给iOS 8（带webgl）的高帅富使用。
有兴趣的朋友，可以拿起手机扫一下，看看你的手机测试情况如何，跟个贴。
cocos2d-js：
createjs：
总体来说，由于cocos2d-js可以在webgl上渲染，所以性能会比createjs要好。单纯比较在canvas 2d上的渲染来说，createjs和cocos2d-js不相伯仲，没太大区别，尤其在手机（Android）上基本都是废物，手机的canvas2d游戏/动画只能尽量避免全屏重绘，减少每帧的变化。
再考虑框架的附加能力方面，cocos2d-js框架提供的UI编辑器、粒子系统、骨骼动画、瓦片地图等等，都是createjs这个轻量级选手不具备的，createjs只能从零开始，一切都得靠开发者自行实现。因此，cocos2d-js更适合做中大型游戏（大型指的是游戏画面复杂程度，而不是渲染要求高），而createjs更适合做小游戏，例如神经猫级别。
本文的代码可以在/kenkozheng/cocos/cocos_vs_createjs中找到。
阅读(...) 评论()当前位置：正文
微信扫一扫分享到朋友圈
第一节：EaselJS处理图片使用 Bitmap类可以非常方便的处理图片，Bitmap可以用来代表任何形式，比如，Canvas，视频或者图片，可以使用已经存在的元素实例化，或者使用base64。第二节：使用sprite和SpriteSheets来处理游戏动画Sprite用来在SpriteSheet中显示一个动画或者一系列的动画帧，SpriteSheet是一系列的图片整合到一张图片中，可以用来定义一个完整的动画，下面是一个spritesheet定义：var spritesheet = new createjs.SpriteSheet({
&images&: [characterImage], //动画人物图片来自base64编码字符串
&frames&: {&height&: 96, &count&: 10, &width&: 75},
&animations&: { run: [0,9]}
}); 第三节：EaselJS中的&容器& （container）Container类是EaselJS中用来管理符合图形的单位，例如，我们可以将一个人物的，头，手，脚等等放置在统一的容器中，这样一来，可以统一的管理或者动画图形。虽然容器中每一个部分都可以单独的生成动画，但是容器中的子元素都可以统一使用容器的属性来控制本节相关代码将演示如何使用容器来定义一系列图片，并且通过定义容器来控制这一系列图片，实现统一的行为第四节： EaselJS中的cache方法在图形处理中，往往会有一些图形不太变化，而每次都重新渲染会使得性能比较受影响。在EaselJS中提供了cache()方法，这个方法可以帮助生成绘制时需要使用的图形到新画布里，它不会在每一个tick中被重新绘制，因此加载速度快，性能更好被cache的显示图形也可以自由的控制移动，旋转，淡入淡出等等属性，但图形变化了需要手动调用cache或者updateCache方法重新加载第五节：EaselJS处理Filter（滤镜）EaselJS包含了一些内置的滤镜方法，如下：AlphaMapFilter : 将一个灰度图形映射到一个图形的阿尔法通道AlphaMaskFilter: 将一个图片的阿尔法通道映射到一个显示图形的阿尔法通道BlurFilter: 执行水平和垂直的模糊ColorFilter: 显示对象的颜色变形ColorMatrixFilter: 使用ColorMatrix1来变形图片了解更多相关代码和演示，请立刻开始学习课程：HTML5类库CreateJS系列：EaselJS画布类库基础使用（二）点击“阅读原文” 访问课程库相关课程
分享给好友
分享到微信朋友圈：
第一步 打开微信底部扫一扫
第二步 扫下面的文章二维码
第三步 右上角点击转发
相关文章Relevant
点击题目下方魅力女人,一键关注本账号委内瑞拉这个国家,还有个别称,叫“选美之都”,也可以叫“Miss Factory选美小姐工厂”...
中 财 国 际微信号:zcgj365财富管理和运营、农产品贸易和投资、教育投资和咨询.这两天,一则视频被加上《2015央视春晚终于请...
美国国家地理杂志创刊于1888年10月,它由美国的一家非盈利科学教育组织——“美国国家地理协会”创办,现在已经成为世界上最...
手机完全侵入我们的生活,不管你身在何处,总能见到神态各异的人在划!手!机!过人行横道也在划!手!机!跟朋友出去吃饭还是...
点击「箭头所指处」可快速关注微信号:pipweb01.且行且珍惜
出处:日凌晨,文章首次回应“出轨门”承认了“劈腿”...
感知CG,感触创意,感受艺术,感悟心灵 国外百年前的绘本和现如今的实景,今昔相比,历史的尘埃犹在.∨今昔相比来源:互联网...createjs入门（六）_createjs吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：68贴子：
createjs入门（六）
原帖地址：====================================================（六）createjs-Sprite基础的都学习了，接下来就是中级的了。学习as的时候，最开始都是用MovieCLip，然后水平提高一点，用的最多的就是Sprite了，为了效率。createjs里边的Sprite相当于as里边的MovieClip，有stop/play/gotoAndStop/gotoAndPlay等方法。先看代码：//创建stage，参数为canvas的idvar stage=new createjs.Stage(&gameMain&);createjs.Ticker.setFPS(6);createjs.Ticker.addEventListener(&tick&, tick);function tick(event){
stage.update();//需要tick，然后自己update,才能刷新显示。
}//Sprite相当于MovieClip,而MovieClip只是作为工具或扩展来用的，步包含在Easejs的主文件里边.所以暂时不研究 。//测试时一定要在服务器环境，否则可能会报跨域的错误。canvas本身也是如此。//创建一个spriteSheet；具体参数可以看api，真正用到再学。var data = {images: [&1.png&],frames: {width:50, height:50},animations: {stand:0,run:[6,11,&jump&],jump:[12,23,&run&]}};var spriteSheet = new createjs.SpriteSheet(data);//创建一个Spritevar sp=new createjs.Sprite(spriteSheet,&run&);//定义:Sprite(spriteSheet, frameOrAnimation)//设置显示元件的位置sp.x=10;sp.y=10;//添加到显示列表stage.addChild(sp);var isPlaying=stage.addEventListener(&click&,clickHandler);function clickHandler(){isPlaying=!isPisPlaying?sp.play():sp.stop();}上面的例子用Sprite创建了一个帧动画,可以通过鼠标点击动画区域控制播放暂停。创建Sprite需要先创建一个SpriteSheet，SpriteSheet不熟悉，可以看看API，一边用一边学就行。as里边很多时候Sprite都是作为容器来使用的，createjs里边就不是了，有专门的容器。Sprite作为as里的MovieClip来用。
贴吧热议榜
使用签名档&&
保存至快速回贴1093人阅读
HTML5（12）
个人原创,欢迎转载,转载请注明出处&
EaselJS 动画
本节将介绍创建图形动画,精灵表位图动画,DOM元素动画.
例子1 图形动画
&!DOCTYPE html&
&meta charset=&gbk&&
&script type=&text/javascript& src=&easeljs-0.6.0.min.js&&&/script&
&canvas id=&myCanvas& width=&200& height=&200&&
你的浏览器不支持canvas标签
var myCanvas=document.getElementById(&myCanvas&);
var stage=new createjs.Stage(myCanvas);
var shape=new createjs.Shape();
shape.graphics.beginFill(&red&).drawRect(0,0,50,50);
createjs.Ticker.addEventListener(&tick&,tick);
function tick(event){
if(shape.x&stage.canvas.width){
shape.x=0;
shape.x++;
stage.update();
stage.addChild(shape);
stage.update();
shape.graphics.beginFill(&red&).drawRect(0,0,50,50);
createjs.Ticker.addEventListener(&tick&,tick);
增加时间监听器,每隔一定时间执行,参数一为事件类型,参数二为相应回调函数.
if(shape.x&stage.canvas.width){
shape.x=0;
如果shape的x坐标大于canvas标签宽度则回到原处.
shape.x++;
shape的x坐标加1(向右移动).
例子2 精灵表位图动画
&!DOCTYPE html&
&meta charset=&gbk&&
&script type=&text/javascript& src=&easeljs-0.6.0.min.js&&&/script&
&canvas id=&myCanvas& width=&800& height=&200&&&/canvas&
var myCanvas=document.getElementById(&myCanvas&);
var stage=new createjs.Stage(myCanvas);
var data={
&animations&:
&all&: [0, 25],
&images&: [&test.png&],
&height&: 256,
&width&:128,
&regX&: 0,
&regY&: 0,
&count&: 26
var spriteSheet = new createjs.SpriteSheet(data);
var bitmapAnimation = new createjs.BitmapAnimation(spriteSheet);
bitmapAnimation.x = 0;
bitmapAnimation.y = 20;
bitmapAnimation.gotoAndPlay(&all&);
stage.addChild(bitmapAnimation);
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener(&tick&, stage);
bitmapAnimation.addEventListener(&tick&, tickEvent);
function tickEvent(event){
if(bitmapAnimation.x&stage.canvas.width){
bitmapAnimation.x=0;
bitmapAnimation.x+=5;
var data={
&animations&:
&all&: [0, 25],
&images&: [&test.png&],
&height&: 256,
&width&:128,
&regX&: 0,
&regY&: 0,
&count&: 26
创建SpriteSheet数据,animations包含动画集合,frames包含帧相关属性,images包含图片数据.test.png为以下图片,另存为即可.
var spriteSheet = new createjs.SpriteSheet(data);
创建SpriteSheet对象,参数一为SpriteSheet数据.
var bitmapAnimation = new createjs.BitmapAnimation(spriteSheet);
创建BitmapAnimation对象,参数一为SpriteSheet对象.
bitmapAnimation.gotoAndPlay(&all&);
跳到&all&并开始播放,参数一为位置标记或帧位置.
createjs.Ticker.setFPS(24);
设置每秒帧数为24.
bitmapAnimation.addEventListener(&tick&, tickEvent);
增加tick事件监听.
例子3 DOM元素动画
&!DOCTYPE html&
&meta charset=&gbk&&
&script type=&text/javascript& src=&easeljs-0.6.0.min.js&&&/script&
text-align:
background-color: #000;
color:#FFF;
height:250
&div class=&canvasHolder&&
&div id=&content&&
&h2&例子3 DOM网页元素动画&/h2&
小芽教程,冰灵制作&br/&
个人原创,欢迎转载,转载请注明出处&br/&&br/&
&a href=&http://blog.csdn.net/bud_icelf&&http://blog.csdn.net/bud_icelf&/a&&br/&&br/&
QQ:&br/&&br/&
&button width=&100& onclick=&alert('小芽教程,冰灵制作')&&测试按钮&/button&
&canvas id=&myCanvas& width=&400& height=&250&&&/canvas&
var myCanvas=document.getElementById(&myCanvas&);
var stage=new createjs.Stage(myCanvas);
var myCanvas=document.getElementById(&content&);
var dOMElement = new createjs.DOMElement(content);
dOMElement.regX=400;
dOMElement.regY=250;
dOMElement.x=400;
dOMElement.y=250;
stage.addChild(dOMElement);
createjs.Ticker.addEventListener(&tick&, tick);
function tick(event){
if(dOMElement.x&document.body.clientWidth){
dOMElement.x+=3;
stage.update();
var myCanvas=document.getElementById(&content&)
获取id为content的div元素.
var dOMElement = new createjs.DOMElement(content);
创建DOMElement对象,参数一为DOM元素.
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：10708次
排名：千里之外
原创：16篇