Detect overlapping between two DisplayObjectContainer

[aaron]

Hi guys ,

I'm pretty new to game dev, but I'm an experienced dev

I'm building a configurator that lets you add and drag sprites on the stage, but I'd like to prevent'em form overlapping onto each other.

I found this post ( http://www.html5gamedevs.com/topic/2302-hittest-in-pixi/?hl=overlap#entry15449 ), and I tried to implement the hitTest function in my code, but it it's (almost) not working.

 

My guess is that the problem might be to the fact that the objects involved in the hitTest are two DisplayObjectContainer containing a Graphic element + a sprite.

 

The sprite, has the anchor set to 0.5, and this has already been a problem for the dragging feature.

I thing that the algorithm specified in the above thread can work if the x/y coords starts from 0, and not form the center of the sprite, because of this reason I've made some changes to the code, as it follows. even though this didn't fix the issue.

 

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;    if(hitTest(s2, s1))        return true;        return false;};

any suggestion?

thanks a lot!

[achexi]

Your saying the issue might be related to a gfx object and a sprite? Have you checked the widths/height of the container? There's been reported issues of containers not returning the correct width/height.

[meduzo]

Hi Aaron,

I used robmyers hittest code for a project and modified it a little, here's the result.

function hitTest(s1, s2){
	
	 if ((s1.x-s1.width/2) + (s1.width/2) > (s2.x-s2.width/2))
        if ((s1.x-s1.width/2) < (s2.x-s2.width/2) + (s2.width/2))
            if ((s1.y-s1.height/2) + (s1.height/2) > (s2.y-s2.height/2))
                if ((s1.y-s1.height/2) < (s2.y-s2.height/2) + (s2.height/2))
                    return true;

    return false;
}

It's rough, but it works... it's basically the same as his, but with the height/2 and width/2 whenever it was needed, it works for a drag and drop thing I'm doing right now.

I know that this is a year late, but still, there might be other people that can find this helpful.

[ivan.popelyshev]

And that will be very slow thing, look at how "width" and "height" are calculated. Better to take "s1 = element1.getBounds()" , "s2 = element2.getBounds()" before you call the method

[Kalith]

Does getBounds actually work though ? I always found it to be offset by some random amount and not take rotation into account.

I basically just rolled my own:

var rect = {};
var angle = -sprite.rotation;        
rect.width = Math.abs(sprite.width * Math.cos(angle)) + Math.abs(sprite.height * Math.sin(angle));
rect.height = Math.abs(sprite.width * Math.sin(angle)) + Math.abs(sprite.height * Math.cos(angle));
rect.x = sprite.x - sprite.anchor.x * rect.width;
rect.y = sprite.y - sprite.anchor.y * rect.height;

This is still pixi v3 btw haven't tried it on v4.

 

[ivan.popelyshev]

getBounds() will work. In v3 is you changed position and called getBounds() just after that it wouldn't work, because updateTransform() wasnt called. latest v4.0.0-rc3 works just fine

If you want to take rotation into account, you have to intersect them as two polygons.

[d13]

You could also try this basic collision library for Pixi:

https://github.com/kittykatattack/bump

The `rectangleCollision` function actually prevents sprites from overlapping.