Performance Comparison Between cocos2d-js and createjs (HTML5)

Performance Comparison Between cocos2d-js and createjs (HTML5)
Cos2d-js in addition to native games, but also can be used to do HTML5 games/animation, then it with adobe createjs framework compared to what would happen? (Background: createjs is an HTML5 framework supported by adobe. It follows the concept of Flash and implements the most basic display list and event mechanism. It is a very lightweight framework. Currently, createjs only has the canvas 2d version and the webgl version is not complete yet .) Experiment 1: wps_clip_image-663 1 background, top five villain playing SpriteSheet animation (14 frame bitmap carousel), bottom five villain rotating and scaling. The villain is a transparent png with a size of 85 * 121px. In the PC chrome running, cocos2d-js and createjs can be full frame 60fps, easy to achieve without pressure. Wps_clip_image-30676: 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 (va R 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, scaling: 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}); // you need to set the width and height of each frame, registration Information 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);} since all frame animations need to constantly replace textures, there is little difference in GPU acceleration, so we will only use rotation and contraction to test the efficiency difference between the two frameworks. Experiment 2: based on experiment 1, we use two graphs. Each graph creates 2000 instances and puts them on the stage for slow changes in rotation and contraction. Experiment 2 continues to run in chrome on PC. Cocos2d-js: the use of webGL, frame rate change, the maximum has 55 FPS, the minimum is only 29fps. If the wps_clip_image-16316 forces rendering in canvas 2d mode, the frame rate is only about 26fps. Createjs: Use canvas 2d rendering to keep it at 28fps. In this experiment, the main reason for the difference between the two is that the cocos2d-js uses webgl rendering, can make part of the matrix computing into the GPU, while createjs uses pure canvas 2d rendering, can only rely on the CPU computing matrix transformation, as a result, the calculation of each frame exceeds the re-painting interval, resulting in a lower frame rate. Next, let's do another canvas experiment on the mobile phone. The testing machine is Xiaomi 1 Android 2.3, which is the canvas 2d in the low-end scenario. It represents a large number of cottage servers. Experiment 3: determine the current frame rate. If the frame rate is greater than 30, add 20 people in motion to the stage until the frame rate is lower than 30. Cocos2d-js running on UC browser, barely supporting 40 people, frame rate between 13 to 23 FPS fluctuation. Wps_clip_image-16220 createjs is not in the PC chrome so the scenery, run 20 villain has been stuck in the teeth, only 10 to 15fps. Wps_clip_image-4070 through this experiment can be found that the mobile phone canvas performance really does not work, including UC browser and embedded browser. This may be the main bottleneck of the mobile phone's CPU performance. Therefore, you can only rely on GPUs on your mobile phone, either publish it as native, or use it only for iOS 8 (with webgl.