▉ 前言

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

系統說明：「Behind every successful man there's a lot u unsuccessful years.--Bob Brown」，PixiJS青銅玩家仍卡關於setUp()階段，僅獲得經驗值提昇等級。

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

▍任務說明

來回顧一下這個遊戲的流程，一開始的畫面會進到gameScene，無論當血條歸零或是玩家成功將寶箱送置門口，我們將會跳轉至gameOverScene的部份。

而可以注意的是，gameOverScene將會分成贏以及輸兩種畫面。

▍作法一

//Create the gameOver scene

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

▍分析一

這裡一樣要幫遊戲結束場景另外設置一個container、一個群組，這樣我們便可以將兩種不同的結束畫面組隊起來，同時讓他們一起先消失。

gameOverScene = new Container();

同樣的創建好群組之後，要記得加進舞台上，使他顯示出來

app.stage.addChild(gameOverScene);

▍作法二

//Make the gameOver scene invisible when the game first starts

gameOverScene.visible = false;

▍分析二

pixiJS提供些方法可以讓我們暫時看不見某個Sprite

• 方法一：removeChild

app.stage.removeChild(anySprite)

• 方法二：visible屬性設置為false

anySprite.visible = false;

通常我們會使用visible，來讓sprite做簡單的隱藏。

▍作法三

//Create the text sprite and add it to the gameOver scene

let style = new TextStyle({
    fontFamily: "Futura",
    fontSize: 64,
    fill: "white"
});
message = new Text("The End!", style);
message.x = 120;
message.y = app.stage.height / 2 - 32;
gameOverScene.addChild(message);

▍分析三

顯示文字的方法可以利用PIXI中的Text物件，例如輸入以下程式碼，我們的畫布上便會出現"Hello Pixi"的文字。

let message = new Text("Hello Pixi!");
app.stage.addChild(message);

另外因為Text物件是有繼承Sprite這個class類別，所以他們擁有相同的屬性，例如說x, y, width, height, alpha, 和 rotation，也就代表我們可以利用處理sprite的方式去處理Text。

舉例來說，我們要調整文字的位置，就可以利用position.set來做設置。

message.position.set(54, 96);

codepen示範

不過從上圖可得知，此時的文字就是很基本、未加任何修飾的文字，如果想要修改文字樣貌，可以使用PIXI的TextStyle()函數來自定義文字的樣式。

PIXI.TextStyle 官方API

例如官方教程如下這樣修改：

let style = new TextStyle({
  fontFamily: "Arial",
  fontSize: 36,
  fill: "white",
  stroke: '#ff3300',
  strokeThickness: 4,
  dropShadow: true,
  dropShadowColor: "#000000",
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI / 6,
  dropShadowDistance: 6,
});

就會變得如下圖所示

codepen示範

＊＊＊

回到作法三的程式碼來看，首先我們利用TextStyle函數來創建一個物件，我們將此物件命名為style

let style = new TextStyle({
    fontFamily: "Futura",
    fontSize: 64,
    fill: "white"
});

接著添加style物件作為Text函數的第二個參數，將樣式應用到文字上

message = new Text("The End!", style);

最後，如同我們對待Sprite一樣，給他們設置好位置之後，就可以將這段文字加到gameOverScene上了。

message.x = 120;
message.y = app.stage.height / 2 - 32;
gameOverScene.addChild(message);

會發現目前的的文字為"The End!"，因為遊戲後面才會去判斷說玩家到底贏了還是輸了，所以之後再去依照狀況修改文字即可，那麼怎麼修改文字呢？

我們可以利用text屬性去修改文字內容，如下

message.text = "Text changed!";

我們也可以利用style屬性去修改樣式，如下

message.style = {fill: "black", font: "16px PetMe64"};

▉ 結語

今天的重點主要放在PIXI的文字上，如何創建、如何設置樣式，以及創建後如何修改文字內容、如何修改文字樣式等等，明天應該可以把setUp()告一段落。

參考資料

• PixiJS 教程中文版
• 感覺值得參考的：Best way to remove objects from the stage?
• 中文教程-顯示文本
• 英文教程-Displaying text