将图片加载到纹理缓存中

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

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

精灵类来创建一个新的精灵，让它使用纹理。

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

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

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

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

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

setup方法，并未加载的图像创建一个精灵。

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

这是这个教程之中用来家在图像和创建精灵的通用方法。 add方法来加载一系列图像，像下面这样：

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

add方法传参，像这样：

  1. PIXI.loader  .add([    "images/imageOne.png",    "images/imageTwo.png",    "images/imageThree.png"  ])  .load(setup);

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