▉ 前言

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

系統說明：「Cease to struggle and you cease to live.--Carlyle」，PixiJS青銅玩家仍卡關於setUp()階段，僅獲得經驗值提昇等級。

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

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

▍任務說明

在【LV. 10】時，已經加Dungeon地牢的圖片到舞台上了，接著要開始放些物件上去，首先第一個就是地牢的門。

此任務完成品：

▍作法

在此之前先複習一下id是什麼東西的別名：

id = resources["images/treasureHunter.json"].textures;

door = new Sprite(id["door.png"]); 
door.position.set(32, 0);
gameScene.addChild(door);

▍分析

1. 先創建Sprite，並且讓這個door的Sprite使用已載入到texture cache裡面的texture

door = new Sprite(id["door.png"]);

2. 移動Sprite的位置，這裡提供兩種寫法：

   • 第一種：

     door.x = 32;
     door.y = 0;
     

   • 第二種：
     也可以直接一行程式給完成。

     door.position.set(32, 0);
     

   所有圖片被放到舞台之上時，一開始的初始位置都會被定在舞台的左上方（也就是座標為(0,0)的位置），當我們將門的x設置為32時，也就代表他往右邊移動32px。

   

3. 把Sprite加入到gameScene上（讓他顯示出來）
   有試過無論先設置位置再把Sprite放到舞台，還是先將Sprite放上舞台再設置位置都是可以完成的，這裡的先後順序目前看起來沒有差別

   gameScene.addChild(door);
   

實作範例： codepen（寫法會與PIXI官方教程些微不同）

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

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

▍任務說明

把Explorer也放到舞台之上。

此任務完成品：

▍作法

id = resources["images/treasureHunter.json"].textures;

  explorer = new Sprite(id["explorer.png"]);
  explorer.x = 68;
  explorer.y = gameScene.height / 2 - explorer.height / 2;
  explorer.vx = 0;
  explorer.vy = 0;
  gameScene.addChild(explorer);

▍分析

1. 先創建Sprite，並且讓Explorer的Sprite使用已載入到texture cache裡面的texture

   explorer = new Sprite(id["explorer.png"]);
   

2. 設置Explorer的位置

   explorer.x = 68;
   explorer.y = gameScene.height / 2 - explorer.height / 2;
   

   底下用圖解釋一下y位置的設置，想要把他y位置置中於舞台，因此先把他設置gameScene.height / 2，但是explorer的原點預設為(0,0)（若要更改Sprite的原點可查詢關鍵字：pivot），所以y位置要再回升explorer本身一半的高度，才會使explorer的y位置置中。
   

3. 先給Explorer設置初始速度為0

   explorer.vx = 0;
   explorer.vy = 0;
   

4. 把Sprite加入到gameScene上（讓他顯示出來）

   gameScene.addChild(explorer);
   

實作範例： codepen（寫法會與PIXI官方教程些微不同）

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

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

▍任務說明

把Treasure放到舞台之上。

此任務完成品：

▍作法

id = resources["images/treasureHunter.json"].textures;

treasure = new Sprite(id["treasure.png"]);
treasure.x = gameScene.width - treasure.width - 48;
treasure.y = gameScene.height / 2 - treasure.height / 2;
gameScene.addChild(treasure);

▍分析

1. 先創建Sprite，並且讓Treasure的Sprite使用已載入到texture cache裡面的texture

   treasure = new Sprite(id["treasure.png"]);
   

2. 設置位置

   treasure.x = gameScene.width - treasure.width - 48;
   treasure.y = gameScene.height / 2 - treasure.height / 2;
   

3. 把Sprite加入到gameScene上（讓他顯示出來）

   gameScene.addChild(treasure);
   

實作範例： codepen（寫法會與PIXI官方教程些微不同）

▉ 結語

今天完成的部份就是創建Sprite，並且做一些設置，再放到舞台之上。方法幾乎都一樣，所以到treasure的地方，就沒有再寫太多內容，明天會進入創建blobs的步驟（blobs的創建有比較特別，所以想拉出來額外寫）

（因為今天學校是一整天的課程，所以內容其實不是很多）

參考資料

• PixiJS 教程中文版