クラスの処理で困ったこと【enchant.js】

enchant.jsのクラスを使っていて「あれ?なんで?」となったことを書いておきます。クラスを利用するようになるとたぶん必ずつまずくポイントだと思います(^^;)

thisがダブるとき

クラスを使うと色々な変数をクラスオブジェクトのプロパティとして追加して使うことになるわけですが、たまにイベントリスナを使いたいときに困ったりすることがあります。

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        this.aaa = function(){
            //略
        };
        var player = new Sprite(32, 32);
        //略
        player.addEventListener('touchstart', function(){
            this.aaa();
            //略
        });
    }
});

と書いたときにplayer.addEventListner内でthis.aaa()メソッドを呼び出した場合、thisはplayerオブジェクトという風に判断されてうまく動いてくれません。こっちはMainGameSceneを指すthisのつもりなのに言うことを聞いてくれません。

一体どうすりゃいいのよ?としばらく悩んで放置していたんですが解決方法は実は簡単でした(´Д`)

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        var main = this;
        //略
        player.addEventListener('touchstart', function(){
            main.aaa();
            //略
        });
    }    
});

変数を作ってやってそれにこのクラスオブジェクトのアドレスを渡してやれば処理できるってわけです。

簡単なことだけど気づかなかった(;´Д`)

※別の方法でアロー関数式を使うやり方もありますが説明が難しいのでググってください(^^;)

クラス内の変数のスコープ

クラス内で宣言した変数は当然ローカル変数になります。それは分かるんだけど同じクラス内でも別のメソッドになるとローカル変数は使えない。

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        var player = new Sprite(32,32);
        //略
    },
    onenterframe: function(){
        //略
        player.x++;//エラーになる
        //略
    }
});

クラスのthis.○○みたいにプロパティにしてしまえば問題ないんだけどシーンのようなたくさん変数を扱う場合すべてをプロパティにするのは入力の字数も多くなるし読みにくくなるしやりたくない。

しかし、実際これはシーンのようなたくさん変数を扱うクラスでない限り問題にならないようで、しかもシーンだと基本的にonenterframeくらいしか使わないのでonenterframeを独立したメソッドとして書かず、

var MainGameScene = enchant.Class.create(enchant.Scene, {
    initialize: function(){
        //略
        var player = new Sprite(32,32);
        //略
        this.addEventListener('onenterframe', function(){
            player.x++;
            //略
        });
    }
});

イベントとして処理することで解決しました。

本当は分けて書きたかったんだけど仕方ないね(´・ω・`)

onenterframeは継承しないとない

どうやらonenterframeはSprite、Group、Sceneのどれかを継承してクラスを作らないとフレーム毎に作動してくれません。enchant.jsスタイルでクラスを作っても動いてくれません。どうしてもonenterframeを使いたいってときはこれらのクラスを継承して作りましょう。

どのゲームで遊ぶ?

スペースインベーダー風ゲーム。謎の宇宙人たちが襲って来たみたいなんでやっつけてください。
空いている一つのマスを利用して並び替えるパズルゲーム。
変な顔を一か所入れ替えて連鎖で全消しを狙うゲーム。全部消えたときはスッキリ快感です。
ショートストーリー。ふと立ち寄った純喫茶「ファッション」で起こる不思議な体験。

コメント欄

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

コメントを残す

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

ゲームタグ一覧

ゲーム開発書籍(amazon)

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