enchant.jsでのシーンの切り替えについて

enchantjs講座

ゲームではメインのゲームを遊ぶ部分以外にもタイトル画面やポーズ画面など、いくつかの違う画面を表示する必要があります。

enchant.jsではそれらの画面のことをシーンといい、それぞれのシーンを必要に応じて切り替えて表示することができます。

シーンの切り替えにはreplaceSceneとpushScene &  popSceneがあります

replaceSceneについて

replaceSceneはrootSceneの内容を指定されたシーンに書き換えます。なのでタイトル画面→メインゲーム→エンディングなど完全に違うシーンに移るときなどに使用します。

シーンは切替可能ということで独立したクラスとして作成できます。Sceneクラスを継承して各シーンのクラスを作成します。

上記のような感じにクラスを作るとクラスが生成された時点でroorSceneがこのシーンの内容に切り替わり表示されるようになります。

pushScene & popSceneについて

pushSceneとpopSceneは画面を一時的に切り替えたいときに使えます。

pushSceneはrootSceneの上に新しいシーンをのせるような感じになります。背景を指定しなければ下にrootSceneの内容がそのまま表示されます。ただし、rootSceneから切り替わっているのでrootSceneの動きは止まっています。

popSceneをするとrootSceneの上にあったシーンが消えてrootSceneに戻ります。

つまり一時的にしか画面の切り替えが必要のない、もしくはrootSceneの上に出したいシーン(ポーズ画面、会話イベントシーン)などに使うのに向いています。

シーンの切り替え時には要素の削除を忘れずに

画面の切り替えをして前のシーンが画面上消えてもシーンで使った要素が残っています。これはたぶんHTML5ゲームの特徴で、プログラムの変数とは関係なくHTMLの要素として記録されているので、別にHTMLの要素を消す必要があるようです。

この関数を使って忘れずに削除しておきましょう。

残り時間をカウントダウンする

enchantjs講座

ゲームに制限時間を設けたいときに使えるクラスを作ってみました。

画面に文字を表示させるのでLabelクラスを継承して作っています。

プログラム

使うときは引数に分と秒をして使います。

残り時間が0になるとisTimeUpフラグがtrueになります。

簡単な説明

tickがフレームごとに加算されてそれが設定されているfps以上になると1秒としています。

他のやり方を検索で調べてみると除算を使ってやってるやり方ばかりだったので除算を使わないやり方をつくりました。enchant.jsではスマホで高FPSを出すのは難しいので除算はできるだけ避けたいと個人的に思ってます(実際どれくらい違うのかは知らんけどね(;´∀`))