Pixi.js 基础知识（二）

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

使用 aliases 来简化代码

//Aliases
var Container = PIXI.Container, 
    autoDetectRenderer = PIXI.autoDetectRenderer, 
    loader = PIXI.loader, 
    resources = PIXI.loader.resources, 
    Sprite = PIXI.Sprite;

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

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

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

stage.addChild(cat); 
renderer.render(stage);}

加载进程

PIXI.loader 
  .add(
    [ "images/one.png",
      "images/two.png", 
      "images/three.png" ]
) 
  .on("progress", loadProgressHandler) 
  .load(setup);

function loadProgressHandler(loader, resource) { 
  console.log("loading: " + resource.url); 

  console.log("progress: " + loader.progress + "%"); 

  console.log("loading: " + resource.name);
}

function setup() { 
  console.log("All files loaded");
}

/*
  loading: images/one.png
  progress: 33.333333333333336%
  loading: images/two.png
  progress: 66.66666666666667%
  loading: images/three.png
  progress: 100%
  All files loaded
*/