プログラミング初心者がphina.jsでゲームを作る③

前回の記事では、MainSceneを使っていることがわかりました。phina.jsではデフォルトでいくつかのSceneがあるようです。

在宅さん

デフォルトのSceneは、使えるかもしれないから確認しておこう

phina.js.docsを見ると、以下のSceneがデフォルトで存在します。

CountScene
LoadingScene
ManagerScene
PauseScene
ResultScene
SplashScene
TitleScene

まずデフォルトのSeceneがどんなものかを確認していきたいと思います。

デフォルトのSceneを推移させる

最初にダウンロードしたmain.jsを編集して、デフォルトのSceneが推移するプログラムを作成しました。
（LoadingSceneとManagerSceneはまた別の記事で使っていきたいと思います。）

まずSceneの設定をしたscenesを作成します。

{
      className: 'SplashScene',
      label: 'splash',
      nextLabel: 'title',
 },

classNameにSceneのクラス名を入れます。今回はデフォルトにあるクラスを使うので、上部に載せているクラス名を書きます。
labelには、classNameに対応するSceneのラベル名を入れます。次のnextLabelには、次に推移させたいLabel名を入れます。nextLabelに入力がない場合は、上から下に推移するようです。
(nextLabelを入れなくても正常に動作しますが、勉強のため入れております)
startLabelが’splash’なので、上から順番に実行されます。

// phina.js をグローバル領域に展開
phina.globalize();
var scene = [
    {
      className: 'SplashScene',
      label: 'splash',
      nextLabel: 'title',
    },
    {
      className: 'TitleScene',
      label: 'title',
      nextLabel: 'count',
    },
    {
      className: 'CountScene',
      label: 'count',
      nextLabel: 'pause',
    },
    {
      className: 'PauseScene',
      label: 'pause',
      nextLabel: 'result',
    },
    {
      className: 'ResultScene',
      label: 'result',
      nextLabel: 'title',
    },
]
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel:'splash',
    scenes:scene,
  });
  // アプリケーション実行
  app.run();
});

こちらのページからも確認できます。