▉ 前言

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

系統說明：「A strong man will struggle with the storms of fate.--Addison」，PixiJS青銅玩家仍卡關於setUp()階段，僅獲得經驗值提昇等級。

▉ 主線任務：setUp( )：製作Sprites，加到遊戲場景中（6）Blobs

// Make the sprites and add them to the gameScene
// blobs

▍任務說明

把多個blobs放到舞台之上。

此任務完成品：

▍作法一

//Make the blobs

let numberOfBlobs = 6,
  spacing = 48,
  xOffset = 150,
  speed = 2,
  direction = 1;

▍分析一

首先將初始設置有6隻blobs

let numberOfBlobs = 6

設置blobs兩兩間水平的間隔距離

let spacing = 48

與左側的距離（offset是偏移量，xoffset指的是x軸與原點的偏移量）

let xOffset = 150

設置變數速度為2

let speed = 2

設置初始的方向為1，反向則為-1

let direction = 1

▍作法二

// An array to store all the blob monsters

blobs = [];

▍分析二

設一個變數blobs為一空陣列，之後要拿來存所有的blob，至於要怎麼把blob這個值放進空陣列，那就得運用到push了。

▍作法三

//Make as many blobs as there are numberOfBlobs

for (let i = 0; i < numberOfBlobs; i++) {
    let blob = new Sprite(resources["blob"].texture);

    let x = spacing * i + xOffset;
    let y = randomInt(0, app.stage.height - blob.height);
    blob.x = x;
    blob.y = y;
    blob.vy = speed * direction;
    direction *= -1;

    blobs.push(blob);
    gameScene.addChild(blob);
}

▍分析三

在上方作法ㄧ我將變數numberOfBlobs設為6，也就是初始設置有6隻blobs

let numberOfBlobs = 6

這樣這個for迴圈將會執行6次，至於設置一個變數numberOfBlobs，而非直接寫上數字，我覺得用意在於之後如果要更改數量會更好維護。

for (let i = 0; i < numberOfBlobs; i++) {}

這裡跟之前創建dungeon, door, explorer, treasure的sprite一樣作法

let blob = new Sprite(resources["blob"].texture);

創建好sprite，且給予texture之後，我們給他設置位置，分成X與Y方向來做說明：

• X方向：
  let x = spacing * i + xOffset;
  i從0開始，也就代表
  第一隻泡泡怪的X位置 = 48 * 0 + 150
  第二隻泡泡怪的X位置 = 48 * 1 + 150
  ...
  第六隻泡泡怪的X位置 = 48 * 5 + 150
  也就是說他們是以48px為間隔排列
• Y方向：
  let y = randomInt(0, app.stage.height - blob.height);
  1. randomInt(a,b)為我們自定義的函式，會在後面才提到他是如何寫出來的，這邊只要先知道他的功能是「給予一個隨機整數，此整數會在a與b的範圍之間」
  2. 所以泡泡怪的Y初始位置，即從地牢頂部（Y=0）到地牢底部（app.stage.height - blob.height）範圍間隨機出現
     扣除blob.height的原因在於位置原點預設皆在左上角，因此若沒扣除，泡泡怪將會超出畫布之外。

let x = spacing * i + xOffset;
let y = randomInt(0, app.stage.height - blob.height);
blob.x = x;
blob.y = y;

再來，設置泡泡怪的移動速度與方向，所以從此可知泡泡怪只有Y方向會具有速度，其速度為2或-2，正數為向下移動、負數為向上移動

blob.vy = speed * direction;
direction *= -1;

最後，把單隻泡泡怪blob各個推進陣列blobs之中，再將blob加到舞台之上顯示出來。這裡會將blob推進陣列中儲存的原因，覺得應該是在之後我們真正要去讓泡泡怪們自動上下移動時，可以不必一一下指令，而是對這個陣列做一個迴圈之類的讓他去跑。

blobs.push(blob);
gameScene.addChild(blob);

▉ 結語

今天的內容比較沒什麼PIXI的語法，主要寫的是blobs泡泡怪的創建過程，以及有提到一個自定義functoin「randomInt()」，但自定義function希望能放到最後一次完成，所以此篇只寫了他的「功能」，而非「作法」。

總之，總算把「製作Sprites，加到遊戲場景中」這階段任務告一段落了，明天會寫血條的部份。

參考資料

• PixiJS 教程中文版