Pixi.js 基础知识（一）

参考：
https://github.com/kittykatattack/learningPixi

在html页面中加入pixi.js

如果正常加载：

Object { VERSION: "4.0.0" ... 

创建 renderer 和 stage

// 创建 renderer
var renderer = PIXI.autoDetectRenderer(256, 256);

// 将 canvas 加入到 html 页面中
document.body.appendChild(renderer.view);

// 创建 stage 容器
var stage = new PIXI.Container();

// 用 renderer 渲染 stage
renderer.render(stage);

根据图片创建一个小精灵

// 基本方式
var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture);

//使用 load 函数
PIXI.loader 
  .add("images/anyImage.png") 
  .load(setup);

function setup() { 
var sprite = new PIXI.Sprite(
  PIXI.loader.resources["images/anyImage.png"].texture 
);
}

将小精灵添加到容器 stage 中

  stage.addChild(sprite);

用 pixi.js 显示一个小精灵的完整代码

var stage = new PIXI.Container(), 
    renderer = PIXI.autoDetectRenderer(256,256);
document.body.appendChild(renderer.view);

PIXI.loader 
  .add("images/cat.png") 
  .load(setup);

function setup() { 
  var cat = new PIXI.Sprite(
  PIXI.loader.resources["images/cat.png"].texture 
); 

  stage.addChild(cat); 

  renderer.render(stage);
}