Egret公式のサンプルゲームIceBucketChallengeを読んでシーン遷移を学ぶ

Egret Engineの技術ブログの2018/10/26 初心者向け｜Egretで簡単なハムスターゲーム "Ice Bucket Challenge"を作成するを読んでみました

ソースコードはGitHubから読めます

タイトル画面、ゲーム画面、ゲームオーバー画面などのゲームのシーン遷移の勉強になりそうです。

画面管理

Main.ts

class Main extends eui.UILayer
:
  this.addChild(new start());
:

Mainクラスは eui.UILayerを継承します。
各シーン画面は eui.Componentを継承、インタフェースeui.UIComponent実装。
画面を管理するMainクラスにaddChildをしていきます。

スタート画面の実装

スタート画面のスタートボタンを押すと自分を削除して
ゲームのプレイ画面のシーンを追加します

start.ts

class start extends eui.Component implements eui.UIComponent {
:
   this.btn_Start.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
     this.parent.addChild(new game())
     this.parent.removeChild(this);
   }, this);
:

ゲームループの開始およびゲームオーバー画面への遷移処理

egret.startTickでゲームループの実行を開始
ゲームオーバー画面に遷移する前に
egret.stopTickしてあげています

ts.game.ts

class game extends eui.Component implements eui.UIComponent {
  :
  protected childrenCreated() : void {
    :
    egret.startTick(this.Update, this);
    :
  }
  
  private Update() : void {
    :
    this.parent.addChild(new GameOver());
    egret.stopTick(this.Update, this)
    this.parent.removeChild(this);
    :
  }
  :