Question

我需要检测两个物体是否相互碰撞/重叠，为了达到这个目的，我偶然发现了＆＃34;运行pixie run＆＃34;中使用的碰撞算法。那个游戏没有用，所以我转到了我在pixijs forum上找到的另一个函数（代码如下），但即使这样也只能在某些情况下使用。

命中测试中涉及的对象是两个包含Sprite和Graphics元素的DisplayObjectContainer（即用于显示精灵的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之间的重叠

1 个答案: