简介：
Pixi.js是基于WebGL的一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备跨平台的2D库。API简单、友好，开发者无需深入WebGL即可快速上手使用。
NPM install:
$> npm install pixi.js
CND install:
初步认识:
创建一个画布也就是渲染器 var renderer = PIXI.autoDetectRender(width, height); 可选参数。
{antialiasing: boolean, transparent: boolean, resolution: number} ,boolean 分别是反锯齿 北京颜色 分辨率 强制使用canvas渲染器。
var renderer = new PIXI.CanvasRenderer(256, 256); 强制使用canvas 渲染器。
var renderer = new PIXI.WebGLRenderer(256, 256); 强制使用 WebGL 渲染器。
把画布加入DOM渲染树 document.body.appendChild(renderer.view); renderer.view 即是 DOM中的canvas Element。
设置画布颜色 renderer.backgroundColor = 0x061639; 注意颜色值 要用16进制表示。
改变画布大小 renderer.resize(512, 512);
设置DOM中canvas的style：renderer.view.style.width = window.innerWidth + "px";
创建一个stage即舞台，放置sprite即精灵的容器 var stage = new PIXI.Container();
把这个stage插入到画布中 renderer.render(stage);
stage 中插入或移除 精灵(稍后说到) stage.addChild(sprite) stage.removeChild(sprite)
别名：
var Container = PIXI.Container,
autoDetectRenderer = PIXI.autoDetectRenderer,
loader = PIXI.loader,
resources = PIXI.loader.resources,
TextureCache = PIXI.utils.TextureCache,
Texture = PIXI.Texture,
Sprite = PIXI.Sprite;
PIXI是以单例模式构建的，由于它的API比较长建议用别名缓存起来，同时有一些，每个项目都需要重复的 coding 的内容 也建议和缓存的别名 一起封装起来，以减少开发成本。
资源机制：
PIXI.loader.add("images/cat.png").load(setup).on('progress', loadProgressHandler); 加载完成后执行 setup 方法，有点类似于 promise.all 全部资源加载成功后 才会执行 ，载入后的资源放在 PIXI.loader.resources 内，可以通过 PIXI.loader.resources['images/cat.png'] 拿到。loadProgressHandler有两个参数loader 和 resource。
精灵sprite：
创建精灵 var cat = PIXI.sprite(PIXI.loader.resources['images/cat.png'].texture);
精灵的属性
cat.position.set(x, y); cat.anchor.set(x, y); cat.scale.set(num, num);
cat.x; cat.y; cat.width; cat.height; cat.anchor.x; cat.anchor.y;(精灵的锚点) cat.rotation;
cat.vx; cat.vy; 精灵在分别在x y轴上移动到速度。
创建材质 var texture = PIXI.utils.TextureCache['images/cat.png'];
创建空间 var rectAngle = new PIXI.Rectangle(192, 128, 64, 64);
设置材质填充的区域 texture.frame = rectAngle;
由材质和空间 创建精灵 var cat = new Sprite(texture);
精灵动画:
functiongameLoop(){
//每秒执行60次方法 即60帧
requestAnimationFrame(gameLoop);
//横向移动
cat.x+=1;
//每次执行强制渲染
renderer.render(stage);
}
形状精灵：
Graphics=PIXI.Graphics;
圆形
var circle = newGraphics();
circle.beginFill(0x9966FF);
circle.drawCircle(0,0,32);
circle.endFill();
circle.x = 64;
circle.y = 130;
长方形
var rectangle = newGraphics();
rectangle.lineStyle(4,0xFF3300,1);
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0,0,64,64);
rectangle.endFill();
rectangle.x = 170;
rectangle.y = 170;
线段
var line = newGraphics();
line.lineStyle(4,0xFFFFFF,1);
line.moveTo(0,0);
line.lineTo(80,50);
line.x = 32;
line.y = 32;
椭圆
varellipse=newGraphics();
ellipse.beginFill(0xFFFF00);
ellipse.drawEllipse(0,0,50,20);
ellipse.endFill();
ellipse.x=180;
ellipse.y=130;
三角形
vart riangle = newGraphics();
triangle.beginFill(0x66FF33);
// 设置三角形的点
triangle.drawPolygon([
-32,64,//First point
32,64,//Second point
0,0//Third point
]);
triangle.endFill();
//三角形点锚点 默认在三角形点第一个点上
文字精灵：
var message=newPIXI.Text(
"Hello Pixi!",
{font: "32px sans-serif", fill :"white"}
);
事件：
stage.click = function (data) {
var event = data.originalEvent；
}
sprite.click = function (data) {
var event = data.originalEvent；
var target =event.target；
//阻止默认行为,
sprite.buttonMode = false;
event.preventDefault();
}
舞台和精灵都可以绑定各种事件
注意事项：
对于有事件的精灵，通常需要设置sprite.interactive = true ，
对于作按钮用的精灵，需要设置sprite.buttonMode = true;
与DOM的事件不同的是，精灵中的事件，是进行了二次封装的，
通常需要用var event = data.originalEvent来与普通dom中的event对象保持一至。
在线资源
Demo: github.com/kittykatattack/learningPixi 由浅入深，对初学者很友好，建议跑上一遍。
GitHub：https://github.com/GoodBoyDigital/pixi.js/
官网： http://www.pixijs.com/
API :http://pixijs.download/release/docs/index.html
官方教程：https://github.com/kittykatattack/learningPixi
https://github.com/GoodBoyDigital/pixi.js
小猿初学pixi，如有错误或不足以官网为主
欢迎交流 E-mail: [email protected]