PIXIJS 检测两个 DisplayObjectContainer 之间的重叠

Question

我需要检测两个物体是否相互碰撞/重叠，为了实现这个目的，我偶然发现了 "run pixie run" 游戏中使用的碰撞算法，它不起作用，所以我传递给了我在 pixijs forum 上找到的另一个函数（代码如下），但即使这仅在某些情况下有效。

命中测试涉及的对象是两个DisplayObjectContainer，包含一个Sprite和一个Graphics元素（即用于显示sprite的boundingBox的矩形）。精灵的锚点设置为 0.5（因此，函数中的 x/y 值是这样初始化的）

var hitTest = function(s2, s1)
{

    var x1 = s1.position.x - (s1.width/2),
    y1 = s1.position.y - (s1.height/2),
    w1 = s1.width,
    h1 = s1.height,
    x2 = s2.position.x - ( s2.width / 2 ),
    y2 = s2.position.y - ( s2.height / 2 ),
    w2 = s2.width,
    h2 = s2.height;

    if (x1 + w1 > x2)
        if (x1 < x2 + w2)
            if (y1 + h1 > y2)
                if (y1 < y2 + h2)
                    return true;

    return false;
};

我还读到过可以使用 box2d 引擎来执行这样的任务，但我觉得这个解决方案有点让人不知所措。我一直在寻找一种简单方便的方法。

Answer 1

最后我想出了这个解决方案，我在 mdn 上找到了这个解决方案并进行了更改以适应我的情况。

    var isColliding = function(el) {
        el.children[0].position, el.children[1].position, el.position);
        rect1 = { 
            x:el.position.x-(el.children[0].width/2), 
            y:el.position.y-(el.children[0].height/2), 
            w:el.children[0].width,
            h:el.children[0].height
        }
        for(i=0; i<stage.children.length;i++)
        {
            if(stage.children[i] != el) {
                el2 = stage.children[i]
                rect2 = { 
                    x:el2.position.x-(el2.children[0].width/2), 
                    y:el2.position.y-(el2.children[0].height/2), 
                    w:el2.children[0].width,
                    h:el2.children[0].height
                }

                if (rect1.x < rect2.x + rect2.w &&
                    rect1.x + rect1.w > rect2.x &&
                    rect1.y < rect2.y + rect2.h &&
                    rect1.h + rect1.y > rect2.y) {

                    return true;
                }
            }

        }

        return false;

PIXIJS 检测两个 DisplayObjectContainer 之间的重叠

PIXIJS detect overlapping between two DisplayObjectContainer

html

javascript

canvas

pixi.js