显示精灵

stage.addChild方法把它放到Pixi的舞台上面去，像这样：

  1. app.stage.addChild(cat);

舞台是用来包裹你所有精灵的主要容器。 重点：你不应该看见任何没被加入 examples/images文件夹中，你将找到一个64*64像素大小的猫的PNG图像文件。 这里是所有的显示一个图像，创建一个精灵，显示在Pixi的舞台上所需要的代码。

  1. //Create a Pixi Applicationlet app = new PIXI.Application({    width: 256,    height: 256,                           antialias: true,    transparent: false,    resolution: 1  });//Add the canvas that Pixi automatically created for you to the HTML documentdocument.body.appendChild(app.view);//load an image and run the `setup` function when it's donePIXI.loader  .add("images/cat.png")  .load(setup);//This `setup` function will run when the image has loadedfunction setup() {  //Create the cat sprite  let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);  //Add the cat to the stage  app.stage.addChild(cat);}

程序跑起来，你会看到: 现在我们已经取得了一些进展! removeChild方法：

  1. app.stage.removeChild(anySprite)

visible属性设置成false来让精灵简单的隐藏。

  1. anySprite.visible = false;

使用别名

PIXI前缀么？如果你这样想，那就创建一个简短的别名给他吧。下面是一个给TextureCache对象创建别名的例子：

  1. let TextureCache = PIXI.utils.TextureCache

现在就可以像这样使用别名了：

  1. let texture = TextureCache["images/cat.png"];

使用别名给写出简洁的代码提供了额外的好处：他帮助你缓存了Pixi的常用API。如果Pixi的API在将来的版本里改变了 - 没准他真的会变！ - 你将会需要在一个地方更新这些对象和方法，你只用在工程的开头而不是所有的实例那里！所以Pixi的开发团队想要改变它的时候，你只用一步即可完成这个操作！ 来看看怎么将所有的Pixi对象和方法改成别名之后，来重写加载和显示图像的代码。

  1. //Aliaseslet Application = PIXI.Application,    loader = PIXI.loader,    resources = PIXI.loader.resources,    Sprite = PIXI.Sprite;//Create a Pixi Applicationlet app = new Application({    width: 256,    height: 256,                           antialias: true,    transparent: false,    resolution: 1  });//Add the canvas that Pixi automatically created for you to the HTML documentdocument.body.appendChild(app.view);//load an image and run the `setup` function when it's doneloader  .add("images/cat.png")  .load(setup);//This `setup` function will run when the image has loadedfunction setup() {  //Create the cat sprite  let cat = new Sprite(resources["images/cat.png"].texture);  //Add the cat to the stage  app.stage.addChild(cat);}

除非另有说明，否则你可以假定下面所有的代码都使用了这些别名。 这就是你需要的所有的关于加载图像和创建精灵的知识。

一些关于加载的其他知识

我们的例子中的格式是加载图像和显示精灵的最佳实践。所以你可以安全的忽视这些章节直接看”定位精灵”。但是Pixi的加载器有一些你不常用的复杂功能。

使用普通的javaScript Img对象或canvas创建一个精灵

Image对象之中创建，你可以使用Pixi的BaseTexture和Texture类：

  1. let base = new PIXI.BaseTexture(anyImageObject),    texture = new PIXI.Texture(base),    sprite = new PIXI.Sprite(texture);

BaseTexture.fromCanvas从任何已经存在canvas标签中创建纹理：

  1. let base = new PIXI.BaseTexture.fromCanvas(anyCanvasElement),

texture属性，可以设置任何Texture对象，像下面这样：

  1. anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];

你可以使用这个技巧在游戏发生一些重大变化时交互式的改变精灵的纹理。

给加载的文件设置别名

add方法中第一个参数位置传进去这个别名就行了，举例来说，下面实现了怎么给这个猫的图片重命名为catImage。

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

loader.resources中创建了一个叫做catImage的对象。 这意味着你可以创建一个引用了catImage对象的精灵，像这样：

  1. let cat = new PIXI.Sprite(PIXI.loader.resources.catImage.texture);

然而，我建议你永远别用这个操作！因为你将不得不记住你所有加载文件的别名，而且必须确信你只用了它们一次，使用路径命名，我们将将这些事情处理的更简单和更少错误。

监视加载进程

progress事件，它将会调用一个可以定制的函数，这个函数将在每次文件加载时调用。progress事件将会被loader的on方法调用，像是这样：

  1. PIXI.loader.on("progress", loadProgressHandler);

on方法注入加载链中，并且每当文件加载时调用一个用户定义的名叫loadProgressHandler的函数。

  1. PIXI.loader  .add([    "images/one.png",    "images/two.png",    "images/three.png"  ])  .on("progress", loadProgressHandler)  .load(setup);function loadProgressHandler() {  console.log("loading");}function setup() {  console.log("setup");}

loadProgressHandler函数在控制台输出 “loading”。当三个文件都加载完毕，setup方法将会运行，下面是控制台的输出：

  1. loadingloadingloadingsetup

loadProgressHandler增加loader参数和resource参数实现这个功能，像下面这样：

  1. function loadProgressHandler(loader, resource) { /*...*/ }

resource.url变量来找到现在已经被加载的文件。（如果你想找到你定义的别名，使用resource.name参数。）你可以使用loader.progress来找到现在有百分之多少的文件被加载了，这里有一些关于上面描述的代码：

  1. PIXI.loader  .add([    "images/one.png",    "images/two.png",    "images/three.png"  ])  .on("progress", loadProgressHandler)  .load(setup);function loadProgressHandler(loader, resource) {  //Display the file `url` currently being loaded  console.log("loading: " + resource.url);  //Display the percentage of files currently loaded  console.log("progress: " + loader.progress + "%");  //If you gave your files names as the first argument  //of the `add` method, you can access them like this  //console.log("loading: " + resource.name);}function setup() {  console.log("All files loaded");}

这里是程序运行后的控制台显示：

  1. loading: images/one.pngprogress: 33.333333333333336%loading: images/two.pngprogress: 66.66666666666667%loading: images/three.pngprogress: 100%All files loaded

（注意：还有一些额外的resource对象属性， resource.error会告诉你有哪些加载时候的错误，resource.data将会给你文件的原始二进制数据。）

一些关于Pixi的加载器的其他知识

Pixi的加载器有很多可以设置的功能，让我速览一下： add 方法有四个基础参数:

  1. add(name, url, optionObject, callbackFunction)

这里有文档里面对这些参数的描述： name (string): 加载源文件的别名,如果没设置，url就会被放在这. url (string): 源文件的地址，是加载器 baseUrl的相对地址. options (object literal): 加载设置. options.crossOrigin (Boolean): 源文件请求跨域不？默认是自动设定的。 options.loadType: 源文件是怎么加载进来的？默认是Resource.LOAD_TYPE.XHR。 options.xhrType: 用XHR的时候该怎么处理数据？ 默认是Resource.XHR_RESPONSE_TYPE.DEFAULT。 callbackFunction: 当这个特定的函数加载完，这个特定的函数将会被执行。 url必填（你总得加载个文件吧。） add方法加载文件的例子。第一个就是文档里所谓的“正常语法”：

  1. .add('key', 'http://...', function () {}).add('http://...', function () {}).add('http://...')

这些就是所谓“对象语法”啦：

  1. .add({  name: 'key2',  url: 'http://...'}, function () {}).add({  url: 'http://...'}, function () {}).add({  name: 'key3',  url: 'http://...'  onComplete: function () {}}).add({  url: 'https://...',  onComplete: function () {},  crossOrigin: true})

add方法传一个对象的数组，或者既使用对象数组，又使用链式加载：

  1. .add([  {name: 'key4', url: 'http://...', onComplete: function () {} },  {url: 'http://...', onComplete: function () {} },  'http://...']);

reset方法：PIXI.loader.reset();） 从GitHub项目中获取更多信息吧！