▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統說明：「Only those who capture the moment are real.」，PixiJS青銅玩家還卡關於前置作業後半段，僅獲得經驗值提昇等級。

▉ 主線任務：前置作業-放好畫布，然後呢？（3）

▍任務說明

在【LV. 7】階段中提到了如何將圖片載入到Texture Cache中，接著進入到最後一個步驟，也就是在實作中我們該怎麼寫。

▍作法

document.body.appendChild(app.view);

loader
    .add("images/treasureHunter.json");
    .load(setUp);

▍分析

[ 已完成 ] 1. 創建Sprites
[ 已完成 ] 2. 將圖片載入到texture cache
[ 進行中 ] 3. 載入圖片、轉換成Texture

• Step 3. 載入圖片、轉換成Texture
  在【LV. 7】中的Step 2.裡有提到說，在PIXI論壇中有位叫做Xerver（似乎就是PIXI論壇的版主大大），他建議使用.loader來載入，那先來個範例：

  let loader = PIXI.loader;
  
  loader
      .add("images/treasureHunter.json")
      .load(setUp);
  
  function setUp(){
      ......
  }
  

  首先，當然是先看官方文件對於PIXI.loader的介紹。（這裡主要看.add跟.load）

  ==PIXI.loader.add==

  

  Chainable add to enqueue a resource

  從官方文件中可看到如圖介紹。queue是佇列（名詞），enqueue則是將資料放入佇列末端（動詞）。也就是說利用.add就可以將想載入的資源先放入一個佇列當中等待被使用。

  另外他有兩個參數可以放置，第一個參數可有可無，用來讀取圖檔後取名; 第二個參數則是圖檔的路徑。

  當我們使用add後，就是把那張圖載入到Texture Cache。

  PIXI.loader.add("圖檔名稱", "圖檔路徑")
  

  如果想要一次載入多張圖片，也可以利用PIXI.loader.add()來完成，大致上有兩種方法：

  • 方法一：
    最直覺簡單的就是用鏈式方法，將所有要載入的圖片都給串起來。

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

  • 方法二：
    直接弄成一個list，放進array裡面。

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

  並且可以利用PIXI.utils.TextureCache確認快取中存了哪些東西。
  

  ==PIXI.loader.load==

  

  前面利用add方法把resources放進佇列存放，現在利用load方法載入那些資源。

  當圖片利用PIXI.loader.add（"圖檔.jpg"）載入Texture Cache，完成後就會開始執行functionName這個函式，並且這個函式就可以利用「圖檔.jpg」這張圖了。

  PIXI.loader.load(functionName)
  
  function functionName(){
      ...
  }
  

▉ 主線任務：前置作業-把常用的函式先用變數定義

// Define variables that might be used in more than one function

▍任務說明

這個任務非常非常簡單，但既然會出現在實作程式碼中，還是拿出來提一下。這個步驟主要是對那些常用的的function，先幫他們用變數給定義起來，這樣之後就可以直接使用。

▍作法

let state, explorer, treasure, blobs, chimes, exit, player, dungeon, door, healthBar, message, gameScene, gameOverScene, enemies, id;

▍分析

依照W3C的說法，在JavaScript中定義變數的方法有4種：利用var、const、let、什麼都不用

其中var是2015年之前的用法，2015年後多了let跟const。

再把let跟const稍微做個比較：

1. let：如果變數的值是會改變的就用let
2. const：如果變數的值是宣告常數，不再做修改的話就用const

▉ 結語

總之在PIXI中要使用圖片的方法：創建Sprites（創建Sprites有3種方法）、轉換成Texture（此時才會是WebGL-ready image，GPU才能使用），而轉換成Texture以及使用Texture Cache都是利用PIXI的loader物件，在這裡便是使用loader物件中的add、load方法來達成目的。

大概是這樣！早上演算法的課上到想睡，所以今天先到這邊，不過總算是把前置作業的部份給寫完，明天開始進入setUp函數的部份。

參考資料

• PixiJS 教程中文版
• W3C-JavaScript Variables
• 官方文件-PIXI.loader