2

tmlib.jsを用いたブロック崩しゲームで次のようにコリジョンを設定しています。
ボールにthis.setBoundingType("circle");
パドルにthis.setBoundingType("rect");

コリジョン判定で次のように判定しているのですが、circle同士のコリジョンと判定されているようです。

if (this.isHitElement(paddle))
(thisはボール)

具体的なソースコードはこちらです(runstantサイトで作成)。
http://goo.gl/RjXC6v

次の『11.ボールとパドルの当たり判定』のコードを引用させていただいています。
『tmlib.jsでゲームをつくってみよう!』
http://qiita.com/h_mjlife/items/94c7381ff56966cceccb

分かりやすいようにfps値、ボールとパドルのサイズ、パドルの位置を変更し、ぶつかった時のボール位置調整をカットています。

tmlib.js本体のソース(tm.app.Object2D.jsisHitElement)を確認すると確かにcirclerectでは 取れないようです。何かうまく判定する方法はないでしょうか?

3
  • コードを``で囲むと読みやすくなるため、それを編集しました。
    – jmac
    Commented 2014年12月16日 8:22
  • 1
    編集およびtmlib.jsタグの新規作成ありがとうございます! Commented 2014年12月16日 8:24
  • 1
    タグは @KoRoN でした、書式についてはこのヘルプ記事をごらんください。読みやすい質問には回答が早く着くから!
    – jmac
    Commented 2014年12月16日 8:34

1 件の回答 1

1

tmlib.js の内部挙動としては isHitElement を呼び出す側, つまり今回でいう this の boundingType が優先される実装になっています.

circle と rect の衝突判定は円x円, 矩形x矩形と比べて負荷が大きいため そのような実装になっています.

どうしても必要ということであれば別途メソッドとして作ります!!

一旦仮で circle と rect の衝突判定を作ってみました.
runstant -> http://goo.gl/ABuxY4

code

var testCircleRect = function(circle, rect) {
    // まずは大きな矩形で判定(高速化)
    var bigRect = tm.geom.Rect(rect.left-circle.radius, rect.top-circle.radius, rect.width+circle.radius*2, rect.height+circle.radius*2);
    if (bigRect.contains(circle.x, circle.y) == false) {
        return false;
    }

    // 2種類の矩形と衝突判定
    var r = tm.geom.Rect(rect.left-circle.radius, rect.top, rect.width+circle.radius*2, rect.height);
    if (r.contains(circle.x, circle.y)) {
        return true;
    }
    r.set(rect.left, rect.top-circle.radius, rect.width, rect.height+circle.radius*2);
    if (r.contains(circle.x, circle.y)) {
        return true;
    }

    // 円と矩形の4点の判定
    var c = tm.geom.Circle(circle.x, circle.y, circle.radius);
    // left top
    if (c.contains(rect.left, rect.top)) {
        return true;
    }
    // right top
    if (c.contains(rect.right, rect.top)) {
        return true;
    }
    // right bottom
    if (c.contains(rect.right, rect.bottom)) {
        return true;
    }
    // left bottom
    if (c.contains(rect.left, rect.bottom)) {
        return true;
    }

    return false;
};

やっぱりかなりコードは長くなっちゃいますね.
ただ頭でかなりの頻度で弾けるので入れちゃっても良いかもと思います.

再度検討してみます.

6
  • isHitElement を見る限り boundingType は見ていない様に思いましたが間違いでしょうか github.com/phi-jp/tmlib.js/blob/…
    – mattn
    Commented 2014年12月16日 8:35
  • 失礼しましたアクセサの定義が下の方にありました。
    – mattn
    Commented 2014年12月16日 8:36
  • boundingType を見るときに処理を行う関数を isHitElementCircle or isHitElementRect で切り替えています. <github.com/phi-jp/tmlib.js/blob/…> <github.com/phi-jp/tmlib.js/blob/…>
    – phi
    Commented 2014年12月16日 8:36
  • 早速のご回答ありがとうございます! 現状理解出来ました。 今回のブロック崩しでは端っこで少しだけぶつかりすぎますが、両方rectで判定した方が自然なようです。 シューティングゲームなどでは点などを多用するので現状でいいと思うのですが、 微妙なコリジョンの判定でゲームの幅も広がるので、円x矩形、円x矩形も今後サポートされればありがたいです。 Box2dもtmlib.jsに組み込めるそうなので、複雑な処理ではそちらを使いこなせるようになるのもいいのかもしれませんが。 Commented 2014年12月16日 8:41
  • 1
    testCircleRectすごいです! きれいに判定されてますね。 Commented 2014年12月16日 10:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。