How to handle collisions on a grid

Hi everyone,

I’m trying to handle collisions on a grid.

Here is my PG: https://playground.babylonjs.com/#DPT2G8

As you can see there are two boxes, both of which are draggable on the grid.
They cannot overlap each other, so for this reason I check if collisions occur or not.
Once a collision has occurred, I stop the possibility of movement of the box that caused that collision.
I’d like to find a way so that if I try to drag a box in a direction that doesn’t cause collision, it starts moving again in space even after it caused a collision.

So in the PG please try to make a collision and then try to move the two boxes, thet won’t move. How can I solve this problem?

Any help would be very much appreciated! :slight_smile:

You should try moving the picked object according to the mouse (without snapping - this is the important change!) and check if the new position is valid or not. If not, come back to the previous correct position, else do move the object and snap it:

3 Likes

Thank you so much for your solution!

It works well, but now I tried to add another box, so this is the new situation:


How could i fit the box between the two other boxes? It doesn’t drag as it collides constantly…

Thank you

I think you will have to shrink the boxes a bit or allow for some error margin when checking for collisions, because technically the middle box would really collide with the other boxes if you tried to place it between them. At the very least, you should use the <= / >= operators instead of < / > (or the other way around depending on how you code the check), but because of floating point calculation errors, you will probably have to allow for a small margin of error in the checks instead.