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

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

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回~80回くらい)iPhoneでフリーズを起こすようです。

私はiPhoneユーザーではないためテスト用の機種が古いだけなのかもしれませんが一応報告しておきます。

まぁ50回以上頻繁にシーンの切り替えを使うゲームを作らなきゃ問題は無いんですけどね。

私は良く使うので問題なんですけど(-_-;)

どのゲームで遊ぶ?

タイミングを狙って射撃するカジュアルゲーム。熱いストーリー付き。
短時間でたくさん計算問題を解くゲームです。掛け算割り算なのでかなり難しい。
餌を全部食べて巣に帰るゲーム。食べる順番が大事。全10ステージ。
簡単な計算問題を制限時間内に何問解けるかな?頭の体操にどうぞ。

コメント欄

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発