Help us understand the problem. What is going on with this article?

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

More than 3 years have 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();
});
alkn203
javascriptのゲームライブラリphina.jsを愛用している趣味プログラマ。ファミコン世代。 Hobbyist programmer javascript/html5/phina.js/retro games
http://qiita.com/alkn203/items/bca3222f6b409382fe20
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away