【LV. 9】PixiJS青銅玩家：setUp( )（1）

2022 iThome 鐵人賽

DAY 9

Modern Web

PixiJS青銅玩家系列第 9 篇

14th鐵人賽 pixijs pixi

NoZ

團隊好想工作室 v6.0

2022-09-24 17:48:59

645 瀏覽

分享至

▉ 前言

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

系統說明：「The man who has made up his mind to win will never say "impossible ".--Napoleon」，PixiJS青銅玩家進入setUp()階段，獲得一條腰帶。

▉ 主線任務：setUp( )：製作遊戲中場景

// Make the game scene and add it to the stage

▍任務說明

在【LV. 8】階段，完成了前置作業，接下來將要進入setUp()的部份。

setUp()大致上要完成的就是一些遊戲場景上的所有物件的設置（包含遊戲場景）。

那首先要設置的便是最重要的「遊戲場景」，並且要將他加到舞台之上。

▍作法

gameScene = new Container();
app.stage.addChild(gameScene);

▍分析

這個任務將會有3個重點：++Treasure Hunter Game這遊戲將會分成2個場景做切換++、++Container++、++stage++。

++Treasure Hunter Game這遊戲將會分成2個場景做切換++：
- gameScene：遊戲中的場景（即目前階段要完成的任務）
- gameOverScene：遊戲結束的場景（又分成2個結果）
  - 「You WIN!」畫面
  - 「You LOSE!」畫面
++Container++：
上方2個場景將由2個Container()物件創造。

container中文翻譯為容器，所以可以想像Container()物件的用法，就有點像是去給東西們分組或組隊的概念，讓我們可以同時一次管理同一個容器內的所有東西。
++stage++：
PIXI.Application底下的其中一個member叫做「stage」，再利用stage物件的方法.addChild()，將Sprites放上stage舞台之上。

stage物件本身也是一個Container物件，它是所有PIXI sprites的根容器。

操作步驟：
接著來看看如何操作。

先創建Sprites，並且給他們設置位置，但是先不要把他們添加到舞台上：

//劍士
let 劍士 = new Sprite(id["劍士.png"]);
劍士.position.set(16, 16);

//巫師
let 巫師 = new Sprite(id["巫師.png"]);
巫師.position.set(32, 32);

//刺客
let 刺客 = new Sprite(id["刺客.png"]);
刺客.position.set(64, 64);

創建一個稱為「group」的容器，把「劍士」、「巫師」、「刺客」加進「group」容器（可以想像就是現在要刷副本，一位劍士、一位巫師，與一位刺客想一起組隊，所以必須先「創建隊伍」）
```
let group = new Container();
```
利用addChild()將三張Sprites加到「group」容器中（「創建隊伍」完成後，就可以把成員一一加入隊伍）
```
group.addChild(劍士);
group.addChild(巫師);
group.addChild(刺客);
```
最後把「group」容器加到舞台之上(也就是「劍士」、「巫師」、「刺客」加入隊伍完成後，就可以出發進入副本，來到舞台之上)
```
app.stage.addChild(group);
```
以上程式碼用底下這張圖片來做解釋應該會更清楚（吧）（至少幫助我理解它的操作步驟即過程）：

▉ 結語

回顧一下今天的內容，最大的重點在於「container」，而「stage」也屬於container的一種，只是我們把他分類在「root container」，所有我們想顯示出來的東西，都務必加進這個stage舞台中，我們必須將東西放進stage中，那些東西才能被渲染到canvas上，進而使我們能看見。

另一個重點就是container物件底下的.addChild()方法，他可以幫助我們將子元素加入父層的container容器中。

底下為官方文件對於.addChild()方法的說明：