cocos2d-js 和 createjs 性能對比（HTML5）

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更適合做小游戲，例如神經貓級別。

 

本文的代碼可以在github.com/kenkozheng/cocos/cocos_vs_createjs中找到。