将图片加载到纹理缓存中

因为Pixi用WebGL和GPU去渲染图像，所以图像需要转化成GPU可以处理的版本。可以被GPU处理的图像被称作 纹理 。在你让精灵显示图片之前，需要将普通的图片转化成WebGL纹理。为了让所有工作执行的快速有效率，Pixi使用 纹理缓存 来存储和引用所有你的精灵需要的纹理。纹理的名称字符串就是图像的地址。这意味着如果你有从"images/cat.png"加载的图像，你可以在纹理缓存中这样找到他：

  1. PIXI.utils.TextureCache["images/cat.png"];

纹理被以WEBGL兼容的格式存储起来，它可以使Pixi的渲染有效率的进行。你现在可以使用Pixi的精灵类来创建一个新的精灵，让它使用纹理。

  1. let texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
  2. let sprite = new PIXI.Sprite(texture);

但是你该怎么加载图像并将它转化成纹理？答案是用Pixi已经构建好的loader对象。

Pixi强大的loader对象可以加载任何你需要种类的图像资源。这里展示了怎么加载一个图像并在加载完成时用一个叫做setup的方法来使用它。

  1. PIXI.loader
  2.   .add("images/anyImage.png")
  3.   .load(setup);
  5. function setup() {
  6.   //This code will run when the loader has finished loading the image
  7. }

Pixi的最佳实践
如果你使用了Loader，你就应该创建一个精灵来连接loader的resources对象，像下面这样：

  1. let sprite = new PIXI.Sprite(
  2.   PIXI.loader.resources["images/anyImage.png"].texture
  3. );

这里是一个完整的加载图像的代码。调用setup方法，并未加载的图像创建一个精灵。

  1. PIXI.loader
  2.   .add("images/anyImage.png")
  3.   .load(setup);
  5. function setup() {
  6.   let sprite = new PIXI.Sprite(
  7.     PIXI.loader.resources["images/anyImage.png"].texture
  8.   );
  9. }

这是这个教程之中用来家在图像和创建精灵的通用方法。

你可以链式调用add方法来加载一系列图像，像下面这样：

  1. PIXI.loader
  2.   .add("images/imageOne.png")
  3.   .add("images/imageTwo.png")
  4.   .add("images/imageThree.png")
  5.   .load(setup);

更好的方式则是用数组给一个add方法传参，像这样：

  1. PIXI.loader
  2.   .add([
  3.     "images/imageOne.png",
  4.     "images/imageTwo.png",
  5.     "images/imageThree.png"
  6.   ])
  7.   .load(setup);

这个loader也允许你使用JSON文件，关于JSON文件你应该已经在前面学过了。