PixiJS V5 教學 (31) - 文字訊息

發表於 分類於
接下來我們要來製作一下當碰撞死亡後出現的文字訊息。

前言

接下來我們要來製作一下當碰撞死亡後出現的文字訊息。

死亡訊息

死亡訊息的製作其實並不困難，但是其實重點在於有兩層 Container 顯示與不顯示

1
2
const gameOver = new PIXI.Container();
app.stage.addChild(gameOver);

這邊要注意，預設的情況下 GameOver 是 hide 的

1
2
3
const gameOver = new PIXI.Container();
gameOver.visible = true;
app.stage.addChild(gameOver);

接下來就是在製作 messages function

1
2
3
4
5
6
7
8
9
10
11
function messages(text) {
  const style = new PIXI.TextStyle({
  fontFamily: 'Microsoft JhengHei', // 風格
  fontSize: 24, // 字體大小
  fill: [0xEEEE00,0x00ff99], // 填滿，若是陣列則可以漸層效果
  align: 'center', // 對齊
  stroke: '#000000', // 外框顏色
});
  const messages = new PIXI.Text(text, style);
  return messages;
}

記得這邊要加入判斷開啟顯示 GameOver 的 Container

1
2
3
4
if(gameHP === 0) {
  gameStart.visible = false;
  gameOver.visible = true;
}

接下來你碰撞到 HP 歸 0 後就會出現這個畫面

Game Over

開始遊戲

那麼開始遊戲的製作也是雷同的做法只是在一開始 gameStart 是處於 hide 而已

1
2
3
const gameStart = new PIXI.Container();
gameStart.visible = false;
app.stage.addChild(gameStart);

接下來這邊就簡單許多，只是替 body.addEventListener('keydown',(e) => { ... } 增加相關的 keyDown 而已，只是這邊會使用一個判斷式來避免死亡後又按下 Enter 可以繼續玩的問題

1
2
3
4
if(gameHP > 0) {
  gameRun.visible = false;
  gameStart.visible = true;
}

參考文獻