pixi.jsでゲーム終了画面を実装する

せっかくゲームを作るわけですから、ゴールしたら何か表示したいですよね。
これは内部にフラグ……というか

実際のところ

ゲームが終了したら、文字を出すだけの簡単処理を考えます。

var stage  = new Container()
var gameScene, gameOverScene
var state; //ゲームの状態を保存

function setup() {
  // 内容

  // 構造を突っ込む
  gameScene.addChild(tiger)  
 
  // 状態を設定。抜けたらすぐgameloopのため
  status = play

  gameLoop() 
}

function gameLoop() {                                                                     
    //1fps毎に呼び出し                                                                    
    requestAnimationFrame(gameLoop)                                                       
    state();                                                                              
    renderer.render(stage)                                                                
}

function play() {
  // ゲームの処理。
  // キャラの移動だとか、ダメージ計算だとか

  if (終了条件) {  state = end; } 
}

終了関数はこんな感じにしました。
通常のゲームで使う諸々（キャラとか障害物とかスコアとか）を格納したgameSceneを無効化し、
その後にゲーム終了画面をレンダリングする形です。

function end() {                                                                          
    gameScene.visible     = false                                                         
    var gameOverScene = new Container()                                                   
    stage.addChild(gameOverScene)                                                         
    message = new Text(                                                                   
        "The End!",                                                                       
        {font: "64px Futura", fill: "white"}                                              
    )                                                                                     
    message.x = stage.width  / 2 - 64                                                     
    message.y = stage.height / 2 - 32                                                     
    gameOverScene.addChild(message)                                                       
} 

ちゃんとやると、画面の中央あたりに「The End!」と表示されるはずです。