【enchant.js】回転時も衝突判定をしてくれるプログラムと問題点
enchant.jsでiPhone向けゲームアルゴリズムを色々試したところ、Canvasで画像を描画するより、Spriteを多用したほうが軽いことがわかりました。
Canvasを一度読み込んで色々描画してから書き込むのより、Sprite900個を設置したほうが軽いというのは何か書き方を間違っている気がしなくもないですが、1000個未満ならSpriteを設置してもiphoneでも問題ないのがわかったのはびっくりしました。（一度に動かすとまた別ですが）
しかしCanvasではなくSpriteで処理すると多少問題がでるのが、Spriteを回転して斜めにすると上手く衝突判定が行われないのです。
というのも、enchant.jsではSpriteのXY座標＋縦横幅の四角形で衝突判定を行っているのですが、回転時もこの部分は変わらないのです。
そこで、斜めになったときの計算のアルゴリズムを模索しなくてはとおもっていたらちょうどそのことについて書いていたサイトが見つかりました。
【enchant.js】回転も考慮したスプライトの衝突
まさにやりたかった事です。
回転した角度をパラメータに計算して、交差判定を行ってくれているようです。
実際テストしてみたところ、あまり変な値にしない限りはすり抜けることもなくちゃんと認識してくれました。
さっそくこれでゲームをと思ったところで問題が発覚。
以前作ったrocate_xyプラグインで回転座標を中心からずらすと、上手く衝突判定が行えません。
よく考えるとスプライトの中心を基点に計算しているので当たり前ですが修正するのも大変だし、まあ同時に使わなければ問題ないか。
おお、私の記事ですね、
お役に立てて光栄です。
はい。とても参考になりました。
中心点をCSSのTransformOriginで変更した場合、平行移動の際の中心点を変更する必要があるっぽいのですが、上手く数値化して取得する方法が思いつかないのです。
まあ併用はしないで使えば全く問題ないですし、プラグイン化して活用させてもらっています。