pixi.js is a 2D webGL renderer with canvas fallback.
pixi.js是一个基于webgl的2d渲染引擎。with canvas fallback应该是“支持回退到canvas”,即在不支持webgl的设备上会自动使用canvas的2dapi来渲染。
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生成的好用)
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往里边添加就行。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。