PixiJs ———— 精靈加載去緩存

pixi.js v5.2.0 加載精靈的時候會有緩存相關的 warning，每次都兩百多條 warning，這誰受得了，花了點時間，各類調試，終於把他們給去掉了，舒服。可能有人會問，直接 google cv 一條龍不就解決了，可是網上關於 pixi.js 的文檔是不多的，官方文檔看了看，開發論壇看了看，都說用 clearTextureCache 方法，，經過打印發現是在 load 階段給出的 warning，因此這裏沒用。先看看好比我一開始的代碼，長這樣

function loadBaseImgs() {
  const loader = new PIXI.Loader();
  const textures = {};

  loader.add(baseImgArr);

  return new Promise((resolve) => {
    loader.load((loaders, resources) => {
      PIXI.utils.clearTextureCache();
      const lazer = resources.lazer.textures;
      const lazerGreen = lazer['greenPen'];
      const lazerRed = lazer['redPen'];
      const lazerYellow = lazer['yellow'];
      const lazerZise = lazer['zise'];
      textures.lazerGreen = lazerGreen;
      textures.lazerRed = lazerRed;
      textures.lazerYellow = lazerYellow;
      textures.lazerZise = lazerZise;
      resolve(textures);
    });
  })

看起來沒毛病，跟 pixi.js 開發者說的解決方案同樣，可是在第一次的時候仍是打印了不少,warning 內容都是 Texture added to the cache with an id [...] that already had an entry, 這句話告訴咱們 map 中已經有了該 id 的鍵值對，看 pixi.js 的 issue 發現開發者說這個不影響，只是提示而已。感覺一下兩百多條提示，你就會發現頗有必要去掉它，誰知道由於這個會發生什麼呢。

很嚇人吧，而後跳到給出 warning 的地方

能夠看到這段代碼

Texture.addToCache = function addToCache(texture, id) {
  if (id) {
    if (texture.textureCacheIds.indexOf(id) === -1) {
      texture.textureCacheIds.push(id);
    }

    if (_pixi_utils__WEBPACK_IMPORTED_MODULE_1__['TextureCache'][id]) {
      // eslint-disable-next-line no-console
      console.warn(
        'Texture added to the cache with an id [' +
          id +
          '] that already had an entry'
      );
    }

    _pixi_utils__WEBPACK_IMPORTED_MODULE_1__['TextureCache'][id] = texture;
  }
};

從以上代碼能夠發現，這個 warning 是在 addToCache 的時候觸發的，那麼再去看看文檔關於 PIXI.Loader 的描述吧，能夠看到 PIXI 加載精靈集的方式有兩種

const loader = PIXI.Loader.shared; // PixiJS exposes a premade instance for you to use.
//or
const loader = new PIXI.Loader(); // you can also create your own if you want

以上第一種是 PixiJS 暴露的一個默認實例，第二種是咱們本身 new 的實例，這裏我用的是第二種會打印 warning，那麼試試第一種方式吧，修改代碼爲：

function loadBaseImgs() {
  const loader = PIXI.Loader.shared;
  const textures = {};

  loader.add(baseImgArr);

  return new Promise((resolve) => {
    loader.load((loaders, resources) => {
      PIXI.utils.clearTextureCache();
      const lazer = resources.lazer.textures;
      const lazerGreen = lazer['greenPen'];
      const lazerRed = lazer['redPen'];
      const lazerYellow = lazer['yellow'];
      const lazerZise = lazer['zise'];
      textures.lazerGreen = lazerGreen;
      textures.lazerRed = lazerRed;
      textures.lazerYellow = lazerYellow;
      textures.lazerZise = lazerZise;
      resolve(textures);
    });
  })

這下 error 來了

Uncaught (in promise) Error: Cannot add resources while the loader is running.

只能用一個 loader 實例？那麼就在添加新的 resource 以前，重置一下 loader 吧

function loadBaseImgs() {
  const loader = PIXI.Loader.shared;
  const textures = {};

  loader.reset();
  loader.add(baseImgArr);

  return new Promise((resolve) => {
    loader.load((loaders, resources) => {
      PIXI.utils.clearTextureCache();
      const lazer = resources.lazer.textures;
      const lazerGreen = lazer['greenPen'];
      const lazerRed = lazer['redPen'];
      const lazerYellow = lazer['yellow'];
      const lazerZise = lazer['zise'];
      textures.lazerGreen = lazerGreen;
      textures.lazerRed = lazerRed;
      textures.lazerYellow = lazerYellow;
      textures.lazerZise = lazerZise;
      resolve(textures);
    });
  })

emmm, 搞定，warning 再見。

文章同步發佈掘金：https://juejin.im/post/5e8b39...

本文做者：Canace

首發連接：https://canace.site/2020/04/0...