PIXI.Loaderで画像を読み込むとコンソールに警告がでる

# はじめに

Pixi.jsのLoader([PIXI.Loader](https://pixijs.download/dev/docs/PIXI.Loader.html))で画像を読み込んだときに、以下の警告がコンソールに出たので中身を見ていきます。

```jsx
BaseTexture added to the cache with an id [**] that already had an entry
Texture added to the cache with an id [**] that already had an entry
```

# 警告がでるコード

PIXI.Loaderでbunny.pngをbunny1, bunny2として読み込み、完了したらPIXI.Containerに追加していきます。

```jsx
import * as PIXI from 'pixi.js'

const app = new PIXI.Application({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb,
});

document.body.appendChild(app.view);

const container = new PIXI.Container();
container.position.set(app.screen.width / 2, app.screen.height / 2)
app.stage.addChild(container);

const loader = new PIXI.Loader();
loader
  .add('bunny1', 'https://pixijs.io/examples/examples/assets/bunny.png')
  .add('bunny2', 'https://pixijs.io/examples/examples/assets/bunny.png')

loader.load((_, resources) => {
  const bunny1 = new PIXI.Sprite(resources.bunny1.texture);
  const bunny2 = new PIXI.Sprite(resources.bunny2.texture);
  container.addChild(bunny1)
  container.addChild(bunny2)
})
```

すると、以下のようにコンソールに警告が出てきます。

![スクリーンショット_2021-12-11_20.29.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349238/b55bb5a2-fdc9-6b27-eef8-51e87e79c7a4.jpeg)

# 読み込む画像パスが被ると警告が出る

結論、読み込む画像のパスが被っているとコンソールに警告が出るようです。Pixi.jsのutilsの`PIXI.utils.TextureCache`でキャッシュの中身を見てみると、

![スクリーンショット_2021-12-12_17.08.49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349238/75d1b082-a290-906b-45f1-55fc29b9ef93.jpeg)


textureCacheIdsの配列にキャッシュした画像名と画像パスが含まれています。これは、Texture.ts以下のコード、

```jsx
/**
  * Adds a Texture to the global TextureCache. This cache is shared across the whole PIXI object.
  *
  * @static
  * @param {PIXI.Texture} texture - The Texture to add to the cache.
  * @param {string} id - The id that the Texture will be stored against.
  */
static addToCache(texture: Texture, id: string): void
{
    if (id)
    {
        if (texture.textureCacheIds.indexOf(id) === -1)
        {
            texture.textureCacheIds.push(id);
        }

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

        TextureCache[id] = texture;
    }
}
```

のここで追加しています。

```jsx
if (texture.textureCacheIds.indexOf(id) === -1)
{
    texture.textureCacheIds.push(id);
}
```

警告を出しているコードはその下の

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

ここです。TextureCacheの型定義を見てみると、こんな感じ。

```jsx
/**
 * @todo Describe property usage
 *
 * @static
 * @name TextureCache
 * @memberof PIXI.utils
 * @type {Object}
 */
export declare const TextureCache: {
    [key: string]: Texture;
};
```

おそらく中身はこうなるでしょう。

```jsx
TextureCache: {
	"https://pixijs.io/examples/examples/assets/bunny.png": Texture
}
```

ですので、TextureCacheオブジェクトの中身に既に同じ画像パスがあれば警告を出していると言えます。同じ画像パスでもPIXI.Loaderで読む込む際に違う名前を付けてあげれば問題はないかなと思います。

# キャッシュを明示的にクリアする

キャッシュを明示的にクリアするには、[PIXI.utils.TextureCache](https://pixijs.download/dev/docs/PIXI.utils.html#clearTextureCache)を呼び出せば消えるようです。

clearTextureCacheの中身はこんな感じです。

```jsx
clearTextureCache() {
  var key;
  for (key in TextureCache) {
    delete TextureCache[key];
  }
  for (key in BaseTextureCache) {
    delete BaseTextureCache[key];
  }
}
```