hanyeah-pixijs入门

02

2016
08

pixijs入门

pixi.js is a 2D webGL renderer with canvas fallback.

pixi.js是一个基于webgl的2d渲染引擎。with canvas fallback应该是“支持回退到canvas”，即在不支持webgl的设备上会自动使用canvas的2dapi来渲染。

官网：http://www.pixijs.com/

github：https://github.com/pixijs/pixi.js#

在线API：http://pixijs.github.io/docs/

中文教程：http://www.cnblogs.com/afrog/p/4056378.html（搜到的中文教程基本上都是这篇）

https://msdn.microsoft.com/zh-cn/magazine/dn973016.aspx（这个里边提到了事件，pixi.js使用jsdoc生成的API真的不怎么样，不如YUIDOC或者java版的jsdoc生成的好用）

离线API点击下载。

demo:/blog/post/html5/pixi/test01.html
源码如下：

<html>
	<head>
		<title>pixi效率测试</title>
		<script type="text/javascript" src="/js/pixi.min.js"></script>
		<script type="text/javascript">

		var frameRate=100;
		var renderer;
		var stage;
		var tf;
		var fps=0;
		var ticker;
		window.onload = function() {
			renderer = new PIXI.WebGLRenderer(1760, 892);
			document.body.appendChild(renderer.view);
			stage = new PIXI.Container();
			var bg = new PIXI.Sprite.fromImage('fmlc_bg.png');
			stage.addChild(bg);


			for(var i=0;i<30;i++){ 
				for(var j=0;j<20;j++){ 
					var sp=new PIXI.Sprite.fromImage('bunny.png');
					stage.addChild(sp);
					sp.x=i*50;
					sp.y=j*50;
				}
			}
			tf = new PIXI.Text("fps:0", {
				font: '24px Arial',
				fill: 0xff1010,
				align: 'left'
			});
			stage.addChild(tf);

			refresh();

			setInterval(showFps, 1000);
		}
		function showFps(){
			tf.text="fps:"+fps;
			fps=0;
		}
		function refresh(){ 
			fps++;
			var t=new Date().getTime();
			renderer.render(stage);
			t=new Date().getTime()-t;
			var delay=1000/frameRate;
			if(t>=delay){ 
				refresh();
			}
			else{ 
				setTimeout(refresh,delay-t);
			}
		}

		</script>
	</head>
	<body>

	</body>
</html>

首先初始化。

renderer = new PIXI.WebGLRenderer(1760, 892);
document.body.appendChild(renderer.view);

创建一个PIXI.WebGLRenderer对象，将生成的对象添加到dom元素中（完全可以将document.body换成其他dom元素）。

还可以这样写，使用已经存在的canvas元素。

renderer = new PIXI.WebGLRenderer(1760, 892,{view:document.getElementById("main")});//main是我们自定义的canvas的id

还可以指定其他属性，比如“autoResize”,具体可以自己查看API。

除了PIXI.WebGLRenderer，还有 PIXI.SystemRenderer,PIXI.CanvasRenderer，测试时，console.log(PIXI.SystemRenderer)是undefuined，不知道为啥。

stage以及定时刷新。

stage = new PIXI.Container();

stage是自己new了一个Container对象，刷新用下面这句

renderer.render(stage);

定时刷新可以用requestAnimFrame，我还是喜欢用setTimeout，可以自己控制帧频。实现代码如下

refresh();
function refresh(){ 
	fps++;
	var t=new Date().getTime();
	renderer.render(stage);
	t=new Date().getTime()-t;
	var delay=1000/frameRate;
	if(t>=delay){ 
		refresh();
	}
	else{ 
		setTimeout(refresh,delay-t);
	}
}

在stage中添加了一大堆Sprite，添加了一个文本对象，用来显示帧频。API和as很像。

引擎跑起来了，需要显示什么，查查API往里边添加就行。