Chapter 10

独自のSceneを作って遷移させる

alkn203
alkn203
2021.09.12に更新

custom-scene

独自のSceneを作成する

複数の独自のシーンを作って遷移させます。

/*
 * シーン01
 */
phina.define("Scene01", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'black';
    // ラベル
    Label({
      text: 'Scene01',
      fontSize: 48,
      fill: 'yellow',
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());
  },
  // タッチで次のシーンへ
  onpointstart: function() {
    this.exit();  
  },
});
  • 独自のSceneDisplaySceneを継承して作ります。
  • onpointstartを使って、画面をタッチすると次のシーンに遷移するようにしています。

Sceneのリストを作成する

使用するシーンのリストは以下の形式で作ります。

[
     {
       className: 'Scene01',
       label: 'scene01',
       nextLabel: 'scene02',
     },

     {
       className: 'Scene02',
       label: 'scene02',
       nextLabel: 'scene03',
     },
     {
       className: 'Scene03',
       label: 'scene03',
       nextLabel: 'scene01',
     },
   ]
  • classNameは作成したSceneのクラス名です。
  • labelは、Scene を識別する文字列です。
  • nextLabelには次に遷移するSceneのラベルを指定します。最後のSceneで最初のSceneのラベルを指定することで、ループさせることができます。

SceneのリストをGameAppのscenesプロパティに渡す

作成したSceneのリストは、main 関数のGameAppコンストラクタにscenesプロパティとして指定します。

/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // Scene01 から開始
    startLabel: 'scene01',
    // シーンのリストを引数で渡す
    scenes: [
      {
        className: 'Scene01',
        label: 'scene01',
        nextLabel: 'scene02',
      },

      {
        className: 'Scene02',
        label: 'scene02',
        nextLabel: 'scene03',
      },
      {
        className: 'Scene03',
        label: 'scene03',
        nextLabel: 'scene01',
      },
    ]
  });
  // 実行
  app.run();
});

サンプルコード

コードを見る
// グローバルに展開
phina.globalize();
/*
 * シーン01
 */
phina.define("Scene01", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'black';
    // ラベル
    Label({
      text: 'Scene01',
      fontSize: 48,
      fill: 'yellow',
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());
  },
  // タッチで次のシーンへ
  onpointstart: function() {
    this.exit();  
  },
});
/*
 * シーン02
 */
phina.define("Scene02", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'blue';
    // ラベル
    Label({
      text: 'Scene02',
      fontSize: 48,
      fill: 'white',
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());
  },
  // タッチで次のシーンへ
  onpointstart: function() {
    this.exit();  
  },
});
/*
 * シーン03
 */
phina.define("Scene03", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'green';
    // ラベル
    Label({
      text: 'Scene03',
      fontSize: 48,
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());
  },
  // タッチで次のシーンへ
  onpointstart: function() {
    this.exit();  
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // Scene01 から開始
    startLabel: 'scene01',
    // シーンのリストを引数で渡す
    scenes: [
      {
        className: 'Scene01',
        label: 'scene01',
        nextLabel: 'scene02',
      },

      {
        className: 'Scene02',
        label: 'scene02',
        nextLabel: 'scene03',
      },
      {
        className: 'Scene03',
        label: 'scene03',
        nextLabel: 'scene01',
      },
    ]
  });
  // 実行
  app.run();
});

runstantプロジェクト

https://runstant.com/alkn203/projects/794836a6