なんでもsceneに直接addChildするのは良くない【enchant.js】

今回もちょっとした小技の紹介。大したことじゃないけど知っておくと便利かも。

enchant.jsでは画像はsceneにaddChildすることで表示されます。だけど最初から全部sceneにaddChildしていくと画面全体にエフェクトをかけて演出したいときに困ることがあります。

たとえば画面を揺らす演出をしたいときに画面内に表示されている得点などまで一緒に揺れるのはちょっとおかしくない？それも演出の内なら良いけどそうじゃないなら一緒に揺れると困るわけです。

で、どうするかというとGroupで分けます。ゲームのキャラクターなどを表示するGroupと得点などの情報を表示するGroupって感じに分けて作って振り分けてaddChildします。

例えばこんな感じにしてます。

//メインゲームシーン---------------------------------------------------------------
var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        enchant.Scene.call(this);
        //画面初期処理-----------------
        core.replaceScene(this);//シーンを入れ替える
        this.backgroundColor = 'rgba(0, 0, 0, 1)';//背景色 
        var screen = new Group();//ゲーム用スクリーン作成
        this.addChild(screen);
        var keypad = new Keypad();//キーパッド生成(Groupを継承して作ってる)
        this.addChild(keypad);//バーチャルパッドをシーンに追加

       //略
    }
});

ゲーム用にscreenというGroupを作ってゲーム部分はそこにaddChildします。keypadはGroupを継承して作ったバーチャルパッドのグループです。ボタンなどはこのkeypadにaddChildされています。

このように作っておくとscreenを動かしたり拡大縮小したりしてもkeypadは完全に別の存在になっているので影響を受けません。

 

大したことじゃないけど、あとから気づいて修正するのは面倒臭いので最初から分けて作っておくのが良いと思います(‘ω’)ノ