前幾篇提到了 PixiJS 裡的 Texture 與快取，這篇要談的是 Loader

PIXI.Loader 說明文件上的 Example ，還不算太複雜：

const loader = PIXI.Loader.shared;
// const loader = new PIXI.Loader();
const sprites = {};

loader.add('bunny', 'data/bunny.png')
      .add('spaceship', 'assets/spritesheet.json');
      
loader.load((loader, resources) => {
    sprites.bunny = new PIXI.TilingSprite(resources.bunny.texture);
    sprites.spaceship = new PIXI.TilingSprite(resources.spaceship.texture);
});

將要讀取的內容 add() 進 loader 裡，並且在讀取完成後執行接著的判斷。

Loader.add() 方法：

如果看 Loader 說明文件，會發現 Loader 說明文件裡 沒有 add()
就先前經驗來說，當類別實作了方法但文件裡找不到時，也許再往上層找會找到繼承自另一個套件。

The new loader, extends Resource Loader by Chad Engler:
https://github.com/englercj/resource-loader

指定每個素材的 .add() 的屬性與事件

Loader 說明文件裡上看起來是各種事件都一起放在 Loader 裡，會不知道當下進行的是哪段讀取，
要寫 switch 判斷。

loader.onStart.add(() => {}); // Called when a resource starts loading.
loader.onError.add(() => {}); // Called when a resource fails to load.
loader.onLoad.add(() => {}); // Called when a resource successfully loads.
loader.onProgress.add(() => {}); // Called when a resource finishes loading (success or fail).
loader.onComplete.add(() => {}); // Called when all resources have finished loading.

但還可以個別指定 每個素材讀取的 onComplete() 方法
在 resource-loader 的 Loader 裡可找到 add() 說明：
https://github.com/englercj/resource-loader/blob/master/src/Loader.ts

.add([
  { name: 'key4', url: 'http://...', onComplete: function () {} },
  { url: 'http://...', onComplete: function () {} },
  'http://...'
])

[ Demo ]

pre() 與 use() 的 middleware

Loader 的說明文件裡提到可以使用 pre() 與 use() 處理每個讀入素材：

• pre() 用在讀完素材前
• after() 用在讀完素材後

讀入的素材會取得素材的型別，然後再根據型別有不同的處理方式

例如：SpritesheetLoader 的實作裡

就使用了 use() 方法處理讀入的 Spritesheet 序列圖的資料

各種 middleware 中間層 的實作處理了讀取後的檔案，很方便
但由於已封裝完，會有點難理解最後做了哪些事情

middleware 使用後的結果：

圖片：讀取完就會存在 textureCache / baseTextureCache 快取裡
JSON：在 Loader 的 Resource 裡可以找到，除此之外就只是個 JSON
Spritesheet：若是使用 TexturePacker 產生的 Spritesheet 與 JSON，解析 這個 JSON 檔後會再去讀取 Spritesheet 圖片，並將這張 Spritesheet 存在 textureCache / baseTextureCache 快取裡

Spritesheet 的行為較複雜，會在明天的文章裡單篇探討

今日小結：
1: 可單獨處理每個讀入的素材
2: PixiJS根據不同素材的型別，有對應的預設行為