将图片加载到纹理缓存中

因为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);
  4. function setup() {
  5. //This code will run when the loader has finished loading the image
  6. }

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

  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);
  4. function setup() {
  5. let sprite = new PIXI.Sprite(
  6. PIXI.loader.resources["images/anyImage.png"].texture
  7. );
  8. }

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

你可以链式调用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文件你应该已经在前面学过了。