JavaScript
HTML5
ライブラリ
ゲーム制作
phina.js

[phina.js-Tips] Scene遷移で値を渡す

※これまでのTipsはphina.js Tips集にまとめています。

今回のTips

独自のSceneを作って遷移させるでは、独自のSceneを作って遷移する方法を紹介しました。今回は、シーンをまたいで値を引き渡す方法を説明します。

scene_value.gif

[runstantで動作確認]

値の引き渡し方

  // タッチで次のシーンへ
  onpointstart: function(e) {
    // 次のシーンに渡したいパラメータをオブジェクト配列で指定
    this.exit({
      touchedPos: e.pointer.x,
    });  
  },
  • exit関数の引数にオブジェクト配列で引き渡します。
  • オブジェクト配列に追加することで、パラメータは好きなだけ渡すことができます。
  • 今回の例ではタッチされた位置のx座標を渡しています。

値の受け取り方

/*
 * シーン02
 */
phina.define("Scene02", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function(param) {
    // 親クラス初期化
    this.superInit(param);
    // 背景色
    this.backgroundColor = 'blue';
    // ラベル
    Label({
      text: 'Scene02',
      fontSize: 48,
      fill: 'white',
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());

    Label({
      // 前のシーンから引き渡されたパラメータから取得
      text: 'x:' + param.touchedPos,
      fontSize: 24,
      fill: 'white',
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center(2));
  },
  • Sceneのコンストラクタの引数paramから値を引き受けることができます。
  • 今回の例では値をラベルに表示しています。

サンプルコード

// グローバルに展開
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(e) {
    // 次のシーンに渡したいパラメータをオブジェクト配列で指定
    this.exit({
      touchedPos: e.pointer.x,
    });  
  },
});
/*
 * シーン02
 */
phina.define("Scene02", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function(param) {
    // 親クラス初期化
    this.superInit(param);
    // 背景色
    this.backgroundColor = 'blue';
    // ラベル
    Label({
      text: 'Scene02',
      fontSize: 48,
      fill: 'white',
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());

    Label({
      // 前のシーンから引き渡されたパラメータから取得
      text: 'x:' + param.touchedPos,
      fontSize: 24,
      fill: 'white',
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center(2));
  },
  // タッチで次のシーンへ
  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: 'scene01',
      },
    ]
  });
  // 実行
  app.run();
});