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

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();
});

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

Forked: 2020/05/19 23:15:03 - Runstant | Runstant
思いたったらすぐ開発. プログラミングに革命を...

結果とまとめ

実行すると①~⑤の順番で推移できました。

①SplashScene
これは、ロゴを表示するSceneのようです。
会社のロゴ等をここで表示することが出来そうです。

②TitleScene
ゲームのタイトル画面のSceneのようです。
ここはゲームには必須なSceneだと思います。
デフォルトであるのはうれしいですね。

③CountScene
ここはカウントダウンのSceneです。
デフォルトでは3秒後に次のSceneに移動します。
ゲームの開始前にカウントダウンを使う場合には、作る手間が省けてよさそうです。

④PauseScene
ポーズのSceneです。
クリックすると次のSceneに移動します。
ゲーム中の一時停止などで使えそうです。

⑤ResultScene
最終的な結果を表示するSceneです。
twitterに投稿できるボタンやリトライボタンなどがデフォルトでついているので、流用できそうです。

今回はデフォルトのシーンを確認しました。
意外とデフォルトのSceneが使えそうだということがわかりました。
次回はLoadSceneとManagerSceneで何か作れればと思います。

タイトルとURLをコピーしました