PIXIJS检测两个DisplayObjectContainer之间的重叠 [英] PIXIJS detect overlapping between two DisplayObjectContainer

问题描述

我需要检测两个对象是否相互碰撞/重叠，为了达到这个目的，我偶然发现"run pixie run"游戏中使用的碰撞算法无效，因此我将其传递给在 pixijs论坛(下面的代码)，但是即使在某些情况下，它也只能工作.

I need to detect wether two objects collide / overlap with each other, for achieving this purpose I stumbled upon the collision algorithm used in the "run pixie run" game, that didn't work, so I passed to this other function I found on the pixijs forum ( code follows below ), but even this works only in some cases.

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

The objects involved in the hit test are two DisplayObjectContainer containing a Sprite and a Graphics element (namely a rectangle that used for showing the boundingBox of the sprite). The sprite has the anchor point set to 0.5 ( for that reason the x/y values in the function are inited like this )

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引擎执行这样的任务，但是我发现这种解决方案有点不堪重负.我一直在寻找一种简单而又方便的方法.

I also read that it might be possible to use the box2d engine to perform such a task, but I find this solution a little bit overwhelming. I was looking for a simple as convenient way to do so.

推荐答案

最后，我想到了这个解决方案，该解决方案是在

In the end I came up with this solution, that I found on mdn and changed in order to fit my scenario.

    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之间的重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！