1 pixi.js是什么
Pixi是一个超快的2D渲染引擎。这意味着什么呢？这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是，Pixi没有妨碍你的编程方式，你可以自己选择使用多少它的功能，你可以遵循你自己的编码风格，或让Pixi与其他有用的框架无缝集成。
Pixi的API事实上比起久经沙场又老旧的Macromedia/Adobe Flash API要精致。如果你是一个Flash开发者，将会对这样的API感觉更好。其他的同类渲染框架（比如CreateJS,Starling, Sparrow 和 Apple’s SpriteKit.）也在使用类似的API。Pixi API的优势在于它是通用的：它不是一个游戏引擎。这是一个优势，因为它给了你所有的自由去做任何你想做的事，甚至用它可以写成你自己的游戏引擎
2 Pixi.js特点
2.1 很快，非常快！
PixiJS 是一个非常快的2D sprite渲染引擎。它与其他基于 Web 的渲染解决方案的主要区别之一是速度。 从底层开始，渲染管线已建立以使你在浏览器中获得尽可能多的性能。 无论是自动批量处理精灵和几何图形，还是细致的 WebGL 资源 和 紧凑的场景图， 都能使你的应用程序拥有非常快的运行速度
2.2可扩展的
PixiJS 易于扩展的真正原因是干净的内部 API，经过多年的开发和 5 个主要版本，无论你的项目是什么， PixiJS 都可以和你的项目完美的结合。这一点怎么说呢？对于新手不是特别友好吧，会给人一种API不全的感觉。
2.3易于部署
Flash 需要播放器。 Unity 需要安装程序或应用商店。 而 PixiJS 仅需要一个浏览器。\ 在网络上部署 PixiJS 就像部署一个网站一样。 用户只需访问一个 URL，你的游戏或其他内容就可以运行了。 但 PixiJS 远不止于网络。 如果想部署一个移动应用程序，需要把 PixiJS 代码包装到Cordova 中。 若需要部署独立的桌面程序，则需要构建一个 Electron 包装器。
3 pixi.js那些事不能做
3.1不是一个3D 渲染器
PixiJS 是一个 2D 渲染器。 对于平台游戏、冒险游戏、互动广告、自定义数据可视化等一切都能很好的支持。 但如果想渲染 3D 模型，那就不行了，可以查看一下 *babylon.js* 或 *three.js* 。
3.2没有独立的UI库
构建一个真正通用的 UI 系统， 一直是 PixiJS 的一个巨大的挑战，PixiJS 不像 Unity 有自己的 UI 库。 PixiJS 选择避免复杂性，以忠于对速度的核心关注。 虽然也可以使用 PixiJS 的场景图和交互管理器构建自己的 UI 库，但 PixiJS 并没有提供开箱即用的 UI 库。
3.3移动应用程序有限制
PixiJS 能很好的实现移动端应用，但是如果想要访问本机绑定，则需要使用像 *Apache Cordova* 这样的部署系统。 PixiJS 不提供对摄像头、定位服务、通知等的访问权限。 当然 如果有需要 就需要获取原生的方法去处理
4 用Pixi创建一个精灵需要经历哪些步骤：
创建一个PIXI的实例，并展示出来，通常需要以下几步：
1. 创建一个舞台 (stage)
2. 创建一个画布 (render)
3. 把画布插入DOM中
4. 创建一个精灵 (sprite)
5. 把精灵加入画布( stage.addChild(cat))
6. 把画布加入舞台
7. 刷新舞台 (F5)
4.1 舞台（stage）
所有要渲染的对象都必须连接到舞台中才能被显示出来，舞台处于整个树形展示结构的最底层，可以理解为背景
var stage = new PIXI.Stage(255254238); //接收一个16进制的值，用于背景的颜色
或者是 创建完舞台 在画布上 这么换颜色
**app.renderer.backgroundColor = 255254238**
4.2 画布(renderer):
选用canvas或webGL进行渲染的一个区域
var renderers = PIXI.autoDetectRenderer(520, 521);
4.3 材质(texture):
可以理解成一种承载图片的结构，它本身不能直接用于显示，需要通过精灵(sprite)才能显示. 就是可以理解类似于dom中的临时碎片（DocumentFragment）
var textured = PIXI.Texture.fromImage("bunny.png");
4.4 精灵(sprite):
可以直接用于舞台显示的对象,可以理解为DOM中的element.\ 精灵可以直接用图片创建，也可以先创建材质，再用材质创建精灵
在pixi中，Sprite(精灵)是一种特殊的图像对象，这个应该是游戏开发最常用的对象之一了，实际开发中，一般用它来显示游戏图片资源。
var sprite = new PIXI.Sprite.fromImage('assets/image.png');//直接由图片创建
var texture = PIXI.Texture.fromImage("bunny.png");
var sprite = new PIXI.Sprite(texture);
4.5 添加事件
PIXI库在精灵和舞台上提供了事件,用于交互.
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();
}
或者
window.addEventListener('keydown', function(e){})
此外，还有.mousedown,.mouseover,.mouseout,.mousemove,.mouseup ,.mouseupoutside
1.对于有事件的精灵，通常需要设置sprite.interactive = true ， 对于作按钮用的精灵，需要设置sprite.buttonMode = true; 2.与DOM的事件不同的是，精灵中的事件，是进行了二次封装的， 3.通常需要用let event = data.originalEvent来与普通dom中的event对象保持一至
5 PIXI.js使用
5.1 控制精灵的大小
控制精灵大小的前提是已经放好精灵了
cat.width = 180;
cat.height = 260;
或者是这么写 在创建的时候直接设置宽高
let app = new PIXI.Application({width: 556, height: 856});
app.Application({
width: 556, // default: 800 宽度
height: 556, // default: 600 高度
antialias: true, // default: false 反锯齿
transparent: false, // default: false 透明度
resolution: 1 // default: 1 分辨率
}
);
按照比例更改精灵的宽高
cat.scale.x = 0.5;
cat.scale.y = 0.5;
Pixi提供了另一种简洁的方法，您可以使用scale.set方法在一行代码中设置精灵的缩放比例。 cat.scale.set(0.5, 0.5);
5.2 旋转
我们也可以通过将精灵的rotation属性设置为以弧度为单位的值来使其旋转
cat.rotation = 0.5;
这么写 是pixi默认按照精灵的左上角为远点进行的旋转 这个点 叫 锚点
**如果要让精灵围绕其中心旋转怎么办？更改精灵的锚点，使其居中**
//anchor就是锚点
cat.anchor.x = 0.5;
cat.anchor.y = 0.5;
5.3 如何让精灵动起来
使用Pixi的ticker创建一个循环函数，这被称为游戏循环(game loop)。你放入游戏循环的任何代码,每秒都会被执行60次:
直接操控精灵的 X Y 的大小
cat.x -= 2
cat.y +=2
