クラスの処理で困ったこと【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を使いたいってときはこれらのクラスを継承して作りましょう。

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

定番ゲームのマインスイーパーです。出てきた数字から爆弾の位置を推測します
平面なルービックキューブみたいなゲーム。スライドさせて模様を完成させます。
タイミングを狙って射撃するカジュアルゲーム。熱いストーリー付き。
同色のブロックを4つ以上つなげると消える落ちもの系パズルゲームです。連鎖で高得点を狙おう!

記事の感想・コメント

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

コメントを残す

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

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記