Pixi官方文档译文（1）

安装

用cdn方式安装：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>

目前引擎支持的特性

WebGL渲染模式（非常快的渲染模式）
Canvas渲染模式（老式最快）
全场景
便捷的API
支持纹理图片
支持雪碧图（sprite sheet）
自动选择渲染模式
完整的交互支持
文本
图片文本
多行文本
纹理渲染
绘制元件
遮罩
颜色过滤器

————————————————————- 官方入门文档 —————————————————————-

首先，我们需要创建一个渲染对象（renderer，后面不再使用中文）和舞台（stage，后面不再使用中文）。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>lala</title><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,target-densitydpi=device-dpi"><meta name="apple-mobile-web-app-capable" content="yes"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script><script>//Create the renderervar renderer = PIXI.autoDetectRenderer(256, 256);//Add the canvas to the HTML documentdocument.body.appendChild(renderer.view);//Create a container object called the `stage`var stage = new PIXI.Container();//Tell the `renderer` to `render` the `stage`renderer.render(stage);</script>
</body></html>

到这一步，我们已经创建好了一个基本的舞台。可以往上面添加内容了。

Pixi sprite

刚我们创建的stage只是一个容器，让我们的对象能够有父-子关系，形成树形结构，方便管理对象同步移动、变形等等。

renderer.render(stage);

这一段代码是告诉渲染器去渲染什么内容。

那我们需要放什么东西到stage里面去呢？有一个特殊的对象是sprite。Spritte就看做成一个可以用代码操纵的图片。可以控制它的坐标、旋转和大小等等。也可以在它上面做触摸或者点击交互。
Pixi有三种方法创建它们：

图片文件路径（直接用图片路径去加载,但webgl模式不能这样用，必须要先加载，然后用纹理去创建sprite）
块地图
图片纹理

加载图片并获得图片的纹理对象(texture)

由于使用的是WebGL模式渲染，图片需要提供GPU能够处理的格式。所以我们在使用一个图片之前，先把它加载并转换成WebGL的纹理格式。为了让开发更有效率，Pixi提供了一个texture cache的对象去存储所有图片的纹理及其对应的名字。
如果你需要用一个文件，可以这样加载：

var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture); // 用创建的纹理来创建一个spritge对象

当我们刚只说了如何把图片转换成webgl可以识别的纹理对象，但是如何提前加载这些图片呢？
Pixi有一个内置的loader对象：

PIXI.loader.add("images/anyImage.png").load(setup); // 加载images/anyImage.png图片，并且加载完后执行setup函数function setup() {var sprite = new PIXI.Sprite(PIXI.loader.resources["images/anyImage.png"].texture); // 根据纹理对象创建Sprite图片对象
}

还可以连续加载

PIXI.loader.add(["images/imageOne.png","images/imageTwo.png","images/imageThree.png"]).load(setup);

下面用一个简单的例子学习基本API的使用：

var stage = new PIXI.Container(),renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);//预加载图片
PIXI.loader.add("images/cat.png").load(setup);// 当图片加载完后，会执行setup函数
function setup() {// 根据纹理对象，创建一个sprite对象var cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);// 把cat加入舞台stage.addChild(cat);// 显示舞台中所有内容 renderer.render(stage);
}

制定代码后，可以看到这样的内容：