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

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

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 可以繼續玩的問題

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

參考文獻

LearningPixi

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

前言

死亡訊息

開始遊戲

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

死亡訊息

開始遊戲

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

PixiJS V5 教學 (39) - 音樂

PixiJS V5 教學 (38) - TexturePacker

PixiJS V5 教學 (37) - 加入 stats.js

分享這篇文章

留言