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

[phina.js-Tips] デフォルトのSceneを上書きする(独自のTitleSceneを作成する)

More than 1 year has passed since last update.

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

今回のTips

phina.jsにはデフォルトで簡単なタイトル画面が用意されていますが、背景に画像を表示したいときなどは独自のシーンを作ってTitleSceneという名前で上書きすることで、オリジナルのタイトル画面を作ることができます。

org_title.gif

[runstantで動作確認]

独自のTitleSceneを作成する

// タイトルシーン
phina.define('TitleScene', {
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    this.superInit();
    // グループ
    var bgGroup = DisplayElement().addChildTo(this);
    // 背景追加
    (2).times(function(i) {
      Sprite('bg').addChildTo(bgGroup)
                  .setPosition(this.gridX.center() + i * SCREEN_WIDTH, this.gridY.center())
                  .setSize(SCREEN_WIDTH, SCREEN_HEIGHT)
                  .physical.force(-1, 0);
    }, this);
    // タイトル
    Label({
      text: 'タイトルシーン',
      fontSize: 64,
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.span(4));

    Label({
      text: "TOUCH START",
      fontSize: 32,
    }).addChildTo(this)
      .setPosition(this.gridX.center(), this.gridY.span(12))
      .tweener.fadeOut(1000).fadeIn(500).setLoop(true).play();
    // 画面タッチ時
    this.on('pointend', function() {
      // 次のシーンへ
      this.exit();
    });
    // 参照用
    this.bgGroup = bgGroup;
  },
  // 毎フレーム更新処理
  update: function() {
    // 背景のループ処理
    var first = this.bgGroup.children.first;
    if (first.right < 0) {
      first.addChildTo(this.bgGroup);
      this.bgGroup.children.last.left = this.bgGroup.children.first.right;
    }
  },
});
  • 独自のTitleSceneDisplaySceneを継承して作ります。
  • 普通のSceneと同じ扱いなので、自由にオブジェクトを配置できます。
  • タッチした時に次のシーン(デフォルトではMainScene)に遷移する処理を記載します。
    // 画面タッチ時
    this.on('pointend', function() {
      // 次のシーンへ
      this.exit();
    });

サンプルコード

phina.globalize();
// アセット
var ASSETS = {
  // 画像
  image: {
    'bg': 'https://rawgit.com/alkn203/tomapiko_run/master/assets/bg.png',
  },
};
// 定数
var SCREEN_WIDTH  = 640; // 画面横サイズ
var SCREEN_HEIGHT = 960; // 画面縦サイズ
// タイトルシーン
phina.define('TitleScene', {
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    this.superInit();
    // グループ
    var bgGroup = DisplayElement().addChildTo(this);
    // 背景追加
    (2).times(function(i) {
      Sprite('bg').addChildTo(bgGroup)
                  .setPosition(this.gridX.center() + i * SCREEN_WIDTH, this.gridY.center())
                  .setSize(SCREEN_WIDTH, SCREEN_HEIGHT)
                  .physical.force(-1, 0);
    }, this);
    // タイトル
    Label({
      text: 'タイトルシーン',
      fontSize: 64,
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.span(4));

    Label({
      text: "TOUCH START",
      fontSize: 32,
    }).addChildTo(this)
      .setPosition(this.gridX.center(), this.gridY.span(12))
      .tweener.fadeOut(1000).fadeIn(500).setLoop(true).play();
    // 画面タッチ時
    this.on('pointend', function() {
      // 次のシーンへ
      this.exit();
    });
    // 参照用
    this.bgGroup = bgGroup;
  },
  // 毎フレーム更新処理
  update: function() {
    // 背景のループ処理
    var first = this.bgGroup.children.first;
    if (first.right < 0) {
      first.addChildTo(this.bgGroup);
      this.bgGroup.children.last.left = this.bgGroup.children.first.right;
    }
  },
});
// メインシーン
phina.define('MainScene', {
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    // 親クラス初期化
    this.superInit();

    Label({
      text: 'メインシーン',
      stroke: false,
      fontSize: 64,
    }).addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());
  },
});
// メイン
phina.main(function() {
  var app = GameApp({
    // アセット読み込み
    assets: ASSETS,
  });
  app.run();
});