材質暫存 (texture cache)

昨天有說到，圖片要放入 stage 前，需要先把圖片轉成 Sprite 的特殊圖片物件。

但是我們也可以先將圖片放進 材質暫存 (texture cache)。

什麼是「材質」(texture)？
PIXI 用 WebGL 的 GPU 渲染圖片，所以圖片需轉成 GPU 可用版本，可被 WebGL 處理圖片稱為「材質」(texture)。

而在放進 sprite 片前，將原始圖片轉成 WebGL texture 形式，可以提高效率。

PIXI 使用材質暫存 (texture cache)來儲存和參考所有 sprite 需要的材質。

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

在官網教學連結中有貼出這段程式碼，利用 PIXI.utils.TextureCache 將圖片加入暫存中，但我在實際使用後發現沒有任何效果，搜尋了一下之後發現官方文件並沒有公開提供這個方法。
且在 github issue 找到了官方開發者的說明

也許是被棄用，官方開發者建議使用 PIXI.loader

原文連結

那我們就來看一下 PIXI.loader 的範例吧！

let imageURL = "./image/bunny.png";
PIXI.loader
    .add('bunny',imageURL)
    .load(init);

function init(loader,resources) {
    var bunny = new PIXI.Sprite(
        resources['bunny'].texture // get Texture Cache
    );
    app.stage.addChild(bunny);
}

把圖片放入 loader 中轉成材質暫存後在放入 Sprite 中。

add('bunny',imageURL) 的 'bunny' 可以選擇不寫， resources 的 key 值就會是 url 。

let imageURL = "./image/bunny.png";
PIXI.loader
    .add(imageURL)
    .load(init);

function init(loader,resources) {
    var bunny = new PIXI.Sprite(
        resources[imageURL].texture // get Texture Cache
    );
    app.stage.addChild(bunny);
}

但是千萬別這樣寫：

let imageURL = "./image/bunny.png";
PIXI.loader
    .add('bunny',imageURL)
    .load(init);

function init(loader,resources) {
    var bunny = PIXI.Sprite.fromImage(imageURL); 
    app.stage.addChild(bunny);
}

PIXI.Sprite.fromImage 與 PIXI.loader 是兩種不同的 API ，同時使用會造成破壞或重複存入記憶體暫存區。

PIXI.Sprite.fromImage 是比較方便的作法，直接傳入圖片的 url ，會判斷是否已經在材質暫存中，如果沒有就自動加載。

PIXI.loader 我覺得好用的地方在於，可以用陣列傳入引數：

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

那要如何查看暫存區的資訊呢？我們可以透過 PIXI.TextureCache 查看暫存區的資訊，不過官方文件上找不到這個屬性，不確定之後會不會被棄用。

那麼今天就先到這邊，一樣如果有錯誤及來源未附上歡迎留言指正，我們明天見！

參考資料：
PIXI.utils.TextCache instead of PIXI.loader.resource?
PIXI.loaders.Loader
Preload all textures?