Collision detection

[imShyness]

Hello, I'm new to Pixi JS and I'm kinda stuck. 

So, I have about 5 containers which I can move (drag, drop), now when I drag one over the other, something has to happend.. an alert or whatever. 

How can I detect one container moving over the other?

 

Ty.

[Exca]

You could do basic box collision detection if you dont need pixel perfect collisions.
 

function boxesIntersect(a, b)
{
  var ab = a.getBounds();
  var bb = b.getBounds();
  return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;
}

 

[ivan.popelyshev]

@Exca where from did you take that code ? That is true only if you take difference of centers, not left-top points.

[Exca]

Oops, that is correct. I took that from one project where I did circle calculations. Changed the code to work with topleft points.

[dmko]

This might be helpful (scroll down the the actual function): https://github.com/kittykatattack/learningPixi#collision

(edit: seems the anchors are currently out of whack, go up to the table of contents and click on The hitTestRectangle function)

Edited August 12, 2016 by dmko
anchor is wrong

[JackParke]

Code above is incorrect. Should read:

return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

Correction is: ab.y + ab.height > bb.y

[Exca]

12 hours ago, JackParke said:

Code above is incorrect. Should read:

return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

Correction is: ab.y + ab.height > bb.y

Well spotted, fixed the error to original post.

[NITWIT]

Maybe check this out too. It's more on the hitTestRectangle() function.

 

https://github.com/kittykatattack/bump