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

[phina.js-Tips] デフォルトで用意されてるSceneについて知る

More than 3 years have passed since last update.

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

今回のTips

ゲーム作りにおいてシーン管理は重要ですが、phina.jsではデフォルトで簡単なシーンが用意されていますので、その使い方を紹介します。

scenes.gif

[runstantで動作確認]

シーンの種類

SplashScene

スプラッシュシーンと呼ばれているゲーム起動時に表示されるシーンです。

TitleScene

文字通りのタイトル画面です。デフォルトだとこの画面が表示されます。

MainScene

メインのゲームシーンです。

ResultScene

結果表示に使う画面です。スコアなどをTweetボタンでツイートすることもできます。

シーンの遷移

各シーンは、SplashScene → TitleScene → MainScene → ResultSceneの順番で遷移します。

開始シーンの指定

GameAppstartLabelで開始シーンを指定することができます。

  • SplashScene・・・splash
  • TitleScene・・・指定しない場合
  • MainScene・・・main
  • ResultScene・・・result
// フレームアニメーション情報
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // SplashScene から開始
    startLabel: 'splash',
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});

MainSceneからResultSceneへの遷移

MainSceneの中でexitメソッドを呼び出すと、次のシーン(ResultScene)に遷移します。

  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // thisを退避
    var self = this;
    // 画面タッチ時
    this.onpointstart = function() {
      // ResultSceneへ
      self.exit();
    };
  },

上の例だと、画面をタッチするとResultSceneに遷移します。参照ミスにならないようにthisを変数に代入している点に注意してください。

サンプルコード

// グローバルに展開
phina.globalize();
/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // thisを退避
    var self = this;
    // 画面タッチ時
    this.onpointstart = function() {
      // ResultSceneへ
      self.exit();
    };
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // SplashScene から開始
    startLabel: 'splash',
  });
  // fps表示
  //app.enableStats();
  // 実行
  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