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 renderer
        var renderer = PIXI.autoDetectRenderer(256, 256);

        //Add the canvas to the HTML document
        document.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);
}

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

转载自原文链接, 如需删除请联系管理员。

原文链接：Pixi官方文档译文（1），转载请注明来源！