ゲームに使う三角関数のクラスを作っておく

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

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

三角関数の使いどころ

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

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

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

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

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

まとめ

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

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

 

コメントを残す

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

ゲームタグ一覧

おすすめゲーム

  • ゲーム「さめがめ」のサムネイル
    さめがめ
    同じ色で複数くっついているタイルをタッチして消すパズルゲーム。一度にたくさん消すと高得点!
  • ゲーム「フリック&チェイン」のサムネイル
    フリック&チェイン
    同色のブロックを4つ以上つなげると消えるパズルゲームです。ランキングはHARDのみ対応
  • ゲーム「コスモファイター」のサムネイル
    コスモファイター
    レトロ風の縦シューティングゲーム。敵が個性的に動き回わるところも懐かしさを感じます。
  • ゲーム「vs.蚊」のサムネイル
    vs.蚊
    部屋に蚊が侵入!その数10匹!何としても奴らを殲滅せねばならぬ!!一匹残らずぶっ潰せ!!
  • ゲーム「うえにいく」のサムネイル
    うえにいく
    障害物を避けながらただただ上を目指すゲーム。シンプルだけど集中力が必要です。