Jump to content

Detect overlapping between two DisplayObjectContainer


Recommended Posts

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!

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...