【enchant.js】三角関数のクラスを作っておく

今日は私の苦手な三角関数についてです(^-^;

まぁ苦手なのは学生時代に勉強しなかったからで、今からでも勉強すれば全然理解できる自信はあるんですけどね( ｰ`дｰ´)ｷﾘｯ

三角関数の使いどころ

まず、ゲームプログラム内のどこで三角関数を使うかと言うとかなりいろんなところで使われています。ファミコンのようなレトロなゲームにだっていっぱい使われています。当たり判定や弾の撃つ角度計算、敵の軌道などなどシューティングゲームやアクションゲームだと三角関数無しでは作れません。

そんだけ頻繁に使うので嫌でも使わないわけにはいかんのですよ(；´Д｀)

で、いままで嫌々ながら使って来たんですけれど、いい加減面倒臭いのでクラスを作って今後あんまり悩まなくて済むようにしてやりました(・∀・)

それがこちらです(‘ω’)ノ

var Trigonometry = enchant.Class.create({
    initialize: function(unitValue){
        this.PI = Math.PI;//数学関数は毎回呼び出すより、保持している方が速いらしい。。
        this.abs = Math.abs;
        this.atan2 = Math.atan2;
        this.unitValue = unitValue;//角度の単位幅
        this.rate = 1 / this.unitValue;//整数にするために掛ける倍率を計算
        this.toDegValue = 180 / this.PI * this.unitValue;//defreeに変えるための変数
        this.sin = [];
        this.cos = [];
        for(var rad = 0, j = 0; rad < 2 * this.PI; rad += this.unitValue, j++){
            this.sin[j] = Math.sin(rad);
            this.sin[j] = this.sin[j].toFixed(2);//小数点第2位まで。処理を軽くするため（効果はわからない）
            this.cos[j] = Math.cos(rad);
            this.cos[j] = this.cos[j].toFixed(2);
        }
        this.arrMax = this.sin.length;
    },
    //引数の角度の値を返す
    getData: function(angle){
        if(this.abs(angle) >= this.arrMax){//範囲を超えていた場合
            angle = angle % this.arrMax;
        }
        if(angle < 0){//マイナスの値だった場合
            angle = this.arrMax + angle;
        }
        return {
            sin: this.sin[angle],
            cos: this.cos[angle],
            deg: angle * this.toDegValue,
        };
    },
    //２点間の角度を返す
    getAimAngle: function(x1, y1, x2, y2){
        var angle = this.atan2(y1 - y2, x1 - x2) * this.rate | 0;
        if(angle < 0){
            angle += this.arrMax;
        }
        return angle;
    }
});

三角関数クラスの説明

まずはこの部分。

this.PI = Math.PI;
this.abs = Math.abs;
this.atan2 = Math.atan2;

どこのサイトか忘れましたけど、数学関数は毎回呼び出すと結構遅いらしく、必要なら持っておいた方が速いらしいです。本当かどうかは知りません（；^ω^）そんなことねーよ！って人は消してください。

各プロパティの説明

プロパティ名って毎回困りますよね(；´∀｀)自分なりに考えて付けたんですけど気に入らない方は好きに変えてくださいね

• unitValue・・単位幅。私は0.01にしてます。０～２πまでを刻む単位数を指定します。値を小さくするほど角度が細かくなります。
• rate・・倍率。unitValueを何倍したら１になるかって値を入れときます。作成したsin、cos配列から値を取り出すときにラジアンを整数にする必要があるので。
• toDegValue・・enchant.jsの画像の回転が角度(度)なのでラジアンを度に変換するのに必要な値をあらかじめ計算して入れておく
• sin、cos・・各値を入れておく配列
• arrMax・・配列の長さを入れておく
• getData・・角度（配列のインデックス番号）に対してのsin、cosの値を返します。このメソッドを使わなくても直接配列から値を取ってもいいんですけど、これには角度の範囲のチェックがついてるのと角度を度に直したものを返してくれます。
• getAimAngle・・２点間の角度を算出して返します。敵の弾を自機に向けて発射したいときなんかに使います。

まとめ

このクラスは苦手な三角関数を使いやすくるのはもちろんなんですが、毎回プログラム内で行われる計算処理を減らすのも目的の一つです。sin、cosの配列も先に作ってしまう方がゲーム内での処理が減るので処理が軽くなります。特にenchant.jsは処理が遅いと言われているのでできるだけ負担を減らしたいです。

ブラウザゲームはどうしても処理が遅いというハンデがあるので(特にスマホ)出来る限り先に計算できるところはしておくようにしましょう。