HTML5各引擎显示效率比较

原创 2014年02月09日 14:15:37

现在越来越多的人开始尝试使用HTML5开发,HTML5的引擎也逐渐增多,开发者到底应该选择一款什么样的引擎呢?这一次我来对比一下几个我个人认为还不错的引擎的效率。

本次参加对比的引擎:

1. createJS

http://www.createjs.com/

2. cocos2d-HTML5

http://www.cocos2d-x.org/wiki/Cocos2d-html5

3. enchant.js

http://enchantjs.com/

4. lufylegend.js

http://lufylegend.com/lufylegend

测试浏览器:chrome


一,图片显示效率比较

测试内容,随机在页面上显示15000个小图片。

1,裸奔(不用任何引擎)。

测试代码如下

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.font="20px Arial";
var img = new Image();
img.onload = draw;
img.src = "CloseNormal.png";
var ccc = [];
var $count = 0;
var fps = 0;
var $time = new Date().getTime();
for(var i=0;i<15000;i++){
	x = Math.random()*320 - 10;
	y = Math.random()*480 - 10;
	ccc.push({x:x,y:y});
}
function draw(){
	for(var i=0;i<15000;i++){
		var co = ccc[i];
		ctx.drawImage(img,0,0,20,20,co.x,co.y,20,20);
	}
	
	$count++;
	var now = new Date().getTime();
	if( now-$time>1000 ){
		fps = $count;
		$time = now;
		$count = 0;
	}
	ctx.fillText(fps,1,20);
	setTimeout(draw,1);
}
得到测试结果如下图

结果,裸奔的情况下,显示15000张图片,FPS在28左右。

2,createJS

测试代码如下

var canvas = document.getElementById("canvas");
var manifest = [{id:"s_CloseNormal", src:"CloseNormal.png"}]; 
var loader = new createjs.PreloadJS(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
var _fps,$time,$count = 0;
var images = [];
var stage;
function handleFileLoad(o){
	if (o.type == "image") { 
		images[o.id] = o.result;
	}
}
function handleComplete(){
	stage = new createjs.Stage(canvas);
	createjs.Ticker.setFPS(30);
	for(var i=0;i<15000;i++){
		var bitmap = new createjs.Bitmap(images["s_CloseNormal"]);
		bitmap.x = Math.random()*320 - 10;
		bitmap.y = Math.random()*480 - 10;
		stage.addChild(bitmap);
	}
	_fps = new createjs.Text("0","900 16px Arial", "#ffffff");
	stage.addChild(_fps);
	$time = new Date().getTime();
	createjs.Ticker.addEventListener("tick", tick);
}
function tick(){
	$count++;
	var now = new Date().getTime();
	if( now-$time>1000 ){
		_fps.text = "fps:"+ Math.round( $count*10000 / (now-$time))/10;
		$time = now;
		$count = 0;
	}
	stage.update();
}
得到测试结果如下图

结果,createJS显示15000张图片,FPS大约在17左右

3,cocos2d-html5

测试代码如下

var MyLayer = cc.Layer.extend({
    isMouseDown:false,
    helloImg:null,
    helloLabel:null,
    circle:null,
    sprite:null,
    init:function () {
        this._super();
        var size = cc.Director.getInstance().getWinSize();
		for(var i=0;i<15000;i++){
	        var sprite = cc.Sprite.create(s_CloseNormal);
	        sprite.setPosition(size.width*Math.random(), size.height*Math.random());
	        this.addChild(sprite, 0);
        }

    }
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
        layer.init();
    }
});
得到测试结果如下图

结果,cocos2d-html5显示15000张图片,FPS大约在19左右

4,lufylegend.js

测试代码如下

init(10,"mylegend",320,480,main);
function main(){
	var loader = new LLoader();  
	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
	loader.load("CloseNormal.png","bitmapData");  
}
function loadBitmapdata(event){
	var bitmapData = new LBitmapData(event.currentTarget);
	for(var i=0;i<15000;i++){
		var bitmap = new LBitmap(bitmapData);
		bitmap.x = Math.random()*LGlobal.width - 10;
		bitmap.y = Math.random()*LGlobal.height - 10;
		addChild(bitmap);
	}
	var fps = new FPS();
	addChild(fps);
}
得到测试结果如下图


结果,lufylegend.js显示15000张图片,FPS大约在25左右
5,enchant.js

测试代码如下

enchant();
window.onload = function(){
    var core = new Game(320, 480);
    core.fps = 30;
    core.preload('CloseNormal.png')
    core.onload = function(){
		for(var i=0;i<15000;i++){
	        var bear = new enchant.Sprite(20, 20);
	        bear.image = core.assets['CloseNormal.png'];
	        bear.moveTo(Math.random()*320 - 10, Math.random()*480 - 10);
	        core.rootScene.addChild(bear);
        }
        
        var oldTime = new Date();
        var text = new Label();
        core.rootScene.addChild(text);
        var fps = 0;
        core.addEventListener('enterframe', function(){
            fps++;
            var newTime = new Date();
            if(newTime.getTime() - oldTime.getTime() >= 1000){
            	text.text = fps + " FPS";
            	fps = 0;
            	oldTime = newTime;
            }
        });
    };
    core.start();
};
得到测试结果如下图

结果,enchant.js显示15000张图片,FPS大约在13左右

得出结论,在显示图片上,各个引擎的效率如下

裸奔 > lufylegend.js > cocos-html5 > createJS > enchant.js

二,文字显示效率比较

测试内容,随机在页面上显示500个文字对象,并且随机设置它们的颜色和旋转。

1,createJS

测试代码如下

var canvas = document.getElementById("canvas");
var _fps,$time,$count = 0;
var stage;
test();
function test(){
	stage = new createjs.Stage(canvas);
	createjs.Ticker.setFPS(30);
	for(var i=0;i<500;i++){
		var label = new createjs.Text("HTML5各引擎效率比较",(10 + 20*Math.random())+"px Arial", "#ffffff");
		label.color = randomColor();
		label.rotation = 180*Math.random()/Math.PI;
		label.x = Math.random()*320 - 50;
		label.y = Math.random()*480;
		stage.addChild(label);
	}
	_fps = new createjs.Text("0","900 16px Arial", "#000000");
	stage.addChild(_fps);
	$time = new Date().getTime();
	createjs.Ticker.addEventListener("tick", tick);
}
function tick(){
	$count++;
	var now = new Date().getTime();
	if( now-$time>1000 ){
		_fps.text = "fps:"+ Math.round( $count*10000 / (now-$time))/10;
		$time = now;
		$count = 0;
	}
	stage.update();
}
function randomColor(){
	var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
	if(rand.length == 6){
		return rand;
	}else{
		return randomColor();
	}
};
得到测试结果如下图

结果,createJS显示500个文字,FPS大约在12左右

2,enchant.js

测试代码如下

enchant();
window.onload = function(){
    var core = new Game(320, 480);
    core.fps = 30;
    core.onload = function(){
		for(var i=0;i<500;i++){
	        var label = new Label();
	        label.text = "HTML5各引擎效率比较";
			label.color = randomColor();
			label.font = (10 + 20*Math.random())+"px Arial";
			label.rotation = 180*Math.random()/Math.PI;
			label.x = Math.random()*320 - 50;
			label.y = Math.random()*480;
	        core.rootScene.addChild(label);
        }
        
        var oldTime = new Date();
        var text = new Label();
        core.rootScene.addChild(text);
        var fps = 0;
        core.addEventListener('enterframe', function(){
            fps++;
            var newTime = new Date();
            if(newTime.getTime() - oldTime.getTime() >= 1000){
            	text.text = Math.round( fps*10000 / (newTime.getTime() - oldTime.getTime()))/10 + " FPS";
            	fps = 0;
            	oldTime = newTime;
            }
        });
    };
    core.start();
};
function randomColor(){
	var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
	if(rand.length == 6){
		return rand;
	}else{
		return randomColor();
	}
};
得到测试结果如下图

结果,enchant.js显示500个文字,FPS大约在12左右

3,lufylegend.js

测试代码如下

init(10,"mylegend",320,480,main);
function main(){
	for(var i=0;i<500;i++){
		var label = new LTextField();
		label.text = "HTML5各引擎效率比较";
		label.size = 10 + 20*Math.random();
		label.color = randomColor();
		label.rotate = 180*Math.random()/Math.PI;
		label.x = Math.random()*LGlobal.width - 50;
		label.y = Math.random()*LGlobal.height;
		addChild(label);
	}
	var fps = new FPS();
	addChild(fps);
}
function randomColor(){
	var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
	if(rand.length == 6){
		return rand;
	}else{
		return randomColor();
	}
}
得到测试结果如下图

结果,lufylegend.js显示500个文字,FPS大约在21左右

4.cocos2d-html5

测试代码如下

var MyLayer = cc.Layer.extend({
    isMouseDown:false,
    helloImg:null,
    helloLabel:null,
    circle:null,
    sprite:null,
    init:function () {
        this._super();
        var size = cc.Director.getInstance().getWinSize();
		for(var i=0;i<500;i++){
        	this._super();
	        var label = cc.LabelTTF.create();
	        label.setFontName("Arial");
	        label.setFontSize(10 + 20*Math.random());
	        label.setString("HTML5各引擎效率比较");
	        label.setColor(cc.c3b(255*Math.random(), 255*Math.random(), 255*Math.random()));
	        label.setRotation(180*Math.random()/Math.PI);
	        this.addChild(label);
	        label.setPosition(size.width*Math.random(), size.height*Math.random());
        }

    }
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
        layer.init();
    }
});
function randomColor(){
	var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
	if(rand.length == 6){
		return rand;
	}else{
		return randomColor();
	}
}
得到测试结果如下图

结果,cocos2d-html5显示500个文字,FPS大约在90左右

此结果让我吃了一惊,cocos2d-html5达到了惊人的90fps,你一定会问,为什么?

稍等,我们把lufylegend.js的测试代码稍作改动,来再次测试一下,测试代码如下。

init(1,"mylegend",320,480,main);
function main(){
	for(var i=0;i<500;i++){
		var sprite = new LSprite();
		var label = new LTextField();
		label.text = "HTML5各引擎效率比较";
		label.size = 10 + 20*Math.random();
		label.color = randomColor();
		sprite.addChild(label);
		
		var bitmapData = new LBitmapData(null,0,0,label.getWidth(),label.getHeight());
		bitmapData.draw(sprite);
		var bitmap = new LBitmap(bitmapData);
		bitmap.rotate = 180*Math.random()/Math.PI;
		bitmap.x = Math.random()*LGlobal.width - 50;
		bitmap.y = Math.random()*LGlobal.height;
		addChild(bitmap);
	}
	var fps = new FPS();
	addChild(fps);
}
function randomColor(){
	var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
	if(rand.length == 6){
		return rand;
	}else{
		return randomColor();
	}
}
得到测试结果如下图

结果显示,lufylegend.js显示500个文字时,如果先将文字转换为图片,则FPS大约在146左右

因为在canvas中显示图片要比文字的效率高很多,所以先把文字转换为图片后再显示,可以让效果达得到质的飞跃。而这种做法在lufylegend.js里也可以轻松实现。


结论,在显示文字上,各个引擎的效率如下

 lufylegend.js(将文字转换为LBitmapData) > cocos2d-html5 > lufylegend.js > createJS = enchant.js


综合两个测试,各引擎效率如下:

lufylegend.js > cocos2d-html5 > createJS > enchant.js


注:此结果是canvas下的测试结果,cocos2d-html5同时支持多种渲染,可自动切换到WebGL进行高效渲染,和canvas不是一个档次,不在本次测试比较范围。关于cocos2d-html5开启webgl后的效果看下面截图,为15000张图片渲染结果,满帧显示。



以上测试可以给大家当作一个参考,如果我的测试方法不当,欢迎提出。

可以看到,使用canvas开发游戏,只要开发方法得当,lufylegend.js在效率上可以完胜其他引擎,当然,各个引擎都有自己的优势,createjs和flash之间的完美转换,cocos2d-html5的JSB绑定,该怎么选,大家各取所需吧。


欢迎继续关注我的博客

转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend

25 个超棒的 HTML5 & JavaScript 游戏引擎开发库

作者:ejinxian 就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议。游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期,游戏开发者通常从草...
  • dj0379
  • dj0379
  • 2016年07月19日 23:16
  • 11627

2016年最火的15款HTML5游戏引擎

2016年最火的15款HTML5游戏引擎 HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年《传奇世界》更是突破流水2000万!从两年多的发展来看,游戏...
  • YaoXTao
  • YaoXTao
  • 2016年04月06日 10:11
  • 2332

Top 10:HTML5、JavaScript 3D游戏引擎和框架

由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立,它们能在iOS、A...

排名前10的H5、Js 3D游戏引擎和框架

由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立,它们能在iOS、A...

webgl开源三维引擎的选择

webgl发展的很快,可谓日新月异,所以下面的这些引擎过一个月,半年可能就不是现在这样了,对应的连接地址以方便查看比较。 一。小场景的开源三维js引擎 1.babylonjs:http://www....

浏览器是怎样工作的:渲染引擎,HTML解析

前两天看到一篇不错的英文文章,叫做 How browsers work,该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析,DOM树的生成,节点与CSS的渲染等等,对于想学习浏览器源码的同...
  • shoyer
  • shoyer
  • 2013年03月12日 21:58
  • 857

HTML5页面渲染性能的”程序转换“思路

做浏览器内核引擎的,一般都会考虑怎么做性能优化,这个优化实际上包括下面的内容: (1)内存占用的优化,特别是对于嵌入式设备尤其重要,chromium有个blimp thin client的模块,不知道...
  • cteng
  • cteng
  • 2016年06月22日 20:43
  • 697

基于HTML5 Canvas的引擎

Laro, 一个基于html5 canvas的用于平面2d或者2.5d游戏制作的轻量级游戏引擎,为了简化使用canvas制作游戏时的api调用。同时提供了一套“有限状态机”的开发模式,这种模式在对于游...

HTML5高级编程之像素处理及粒子效果

HTML5中的像素处理,需要用到getImageData和putImageData两个函数,先用getImageData复制canvas画布中的像素数据,然后对获取的像素数据进行处理,最后再通过put...

移动端 webgl 对比 canvas 性能

最近 h5 游戏火的不行,但是移动端 h5 性能从几年前开始就一直困扰着想要进入这个行业的开发人员,相信性能问题在最近两年依然是 h5 的核心问题。     h5 的引擎很早以前就有了,以 dom 、...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5各引擎显示效率比较
举报原因:
原因补充:

(最多只允许输入30个字)