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往里边添加就行。



« 上一篇下一篇 »

相关文章:

从flash中导出资源供pixijs使用  (2020-12-21 18:46:3)

pixijs自定义光标  (2020-7-9 8:33:16)

pixijs入门-移动端click  (2016-8-16 15:8:14)

pixijs入门-scale  (2016-8-16 13:54:13)

TypeScript入门-03-使用js库  (2016-8-16 10:15:15)

TypeScript入门-02  (2016-8-12 17:32:17)

TypeScript入门-01  (2016-8-12 13:10:28)

TypeScript入门资源  (2016-8-11 10:19:7)

pixijs入门-继承  (2016-8-3 9:22:26)

pixijs入门-动画  (2016-8-2 16:51:2)

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。