ゲームではメインのゲームを遊ぶ部分以外にもタイトル画面やポーズ画面など、いくつかの違う画面を表示する必要があります。
enchant.jsではそれらの画面のことをシーンといい、それぞれのシーンを必要に応じて切り替えて表示することができます。
シーンの切り替えには2種類あってreplaceSceneとpushScene & popSceneがあります。それぞれ役割が違うので今回はそれについて説明します。
目次
replaceSceneについて
replaceSceneはrootSceneの内容を指定されたシーンに書き換えます。なのでタイトル画面→メインゲーム→エンディングなど完全に違うシーンに移るときなどに使用します。
シーンは独立したクラスとして作成できます。Sceneクラスを継承して各シーンのクラスを作成します。
var MainGameScene = enchant.Class.create(enchant.Scene, {
initialize: function(){
enchant.Scene.call(this);
core.replaceScene(this);//シーンを入れ替える
this.addEventListener('enterframe', function(){
//このシーンのループ処理はここに書く
});
}
});
上記のような感じにクラスを作るとクラスが生成された時点でroorSceneがこのシーンの内容に切り替わり表示されるようになります。
※便宜上rootSceneと書いてますが実際にはGameオブジェクトのrootSceneとは別になっているようです。
pushScene & popSceneについて
pushSceneとpopSceneは画面を一時的に切り替えたいときに使えます。
pushSceneはrootSceneの上に新しいシーンをのせるような感じになります。背景を指定しなければ下にrootSceneの内容がそのまま表示されます。ただし、rootSceneから切り替わっているのでrootSceneの動きは止まっています。
popSceneをするとrootSceneの上にあったシーンが消えてrootSceneに戻ります。
つまり一時的にしか画面の切り替えが必要のない、もしくはrootSceneの上に出したいシーン（ポーズ画面、会話イベントシーン）などに使うのに向いています。
var PuaseScene = enchant.Class.create(enchant.Scene, {
initialize: function(){
enchant.Scene.call(this);
core.pushScene(this);//プッシュで上に出す
this.addEventListener('enterframe', function(){
//このシーンのループ処理
if(//画面を戻す条件){
removeScene(this);//このシーンの要素を削除
core.popScene();
}
});
}
});
実際の切り替えの仕方
で、実際にどう切り替えるかというと、私はこんな感じでSystemというゲーム管理用のクラスを作成し、そのクラスのメソッドにクラス切替の処理をさせてます。こんな感じで(‘ω’)ノ
var System = enchant.Class.create({
//シーン切り替え
changeScene: function(sceneNumber){
switch(sceneNumber){
case SCENE_TITLE:
var title = new TitleScene();
break;
case SCENE_MAINGAME:
var main = new MainGameScene();//メインゲームへ
break;
case SCENE_GAMEOVER:
var gameover = new GameoverScene();//ゲームオーバーへ
break;
}
},
});
各シーンから切り替わるときにこのメソッドを使って切り替えています。
シーンの切り替え時には要素の削除を忘れずに
画面の切り替えをして前のシーンが画面上消えてもシーンで使った要素が残っています。これはたぶんHTML5ゲームの特徴で、プログラムの変数とは関係なくHTMLの要素として記録されているので、別にHTMLの要素を消す必要があるようです。
function removeScene(scene){
while(scene.firstChild){
scene.removeChild(scene.firstChild);
}
}
この関数を使って忘れずに削除しておきましょう。
ちょっと説明が分かりづらい方は私のテンプレートを読んでみてくださいな(‘ω’)ノ
▷▷▷ 簡単にゲームが作れるテンプレート
シーンの切り替え頻繁に行うと起こる問題
どうやらシーンの切り替えをかなりたくさん行うと(50回～100回くらい)iPhoneでフリーズを起こすようです。
私はiPhoneユーザーではないため気づかなかったのですが友達のiPhoneで試したところたぶんすべての機種で起こります(iPhone10まで試した)。ただし、新しい機種ほどフリーズするまでの間隔は長くなります。
なので頻繁にシーンを切り替えるゲームは避けて最低限必要な部分だけ(タイトルとかポーズ画面とか)に抑えて使った方が安全だと思います。
関連記事
