# Snapping shapes together in game

I'm trying to work out how to snap shapes together the player may move around on a canvas.

As the square approaches the other object, I want to pull that shape in (given a certain proximity) and have it snap perfectly along that objects edge.

Rules:

• Only if the edges are parallel to one another
• If a child square (being dragged) is half the size of the parent square (being approached), then the midpoint of the parent square edge can determine if the child snaps either to the left/right/up/down

Has anyone done anything like this? I'm using c# and unity. Cheers.

I've written a prototype of something like this. I created some resources that looked like this:

So basically this "ShipPart" object has pre-defined snap points. These four colliders will help with determining if you are attempting to snap an object into place or not.

Next I created a ShipPart class, that contains some things such as:

//Neighbor information
ShipPart Left, Right, Top, Bottom;

//current rotation
float Rotation;

//The ship core it is attached to
Ship Ship;

//The coordinates in references to the ship core
int X ;
int Y ;


It also contains functions and properties to help with the drag and drop, and checking the state of the neighboring ShipParts.

An important function is the Attach() function, which will connect this ShipPart to your Ship.

public void Attach(Ship ship, int x, int y)
{
GetComponent<Rigidbody2D> ().isKinematic = true;

Ship = ship;

X = x;
Y = y;

transform.parent = Ship.transform;
transform.position = Vector2.zero;
transform.localPosition = new Vector2(x, -y);
}


Then finally, the Ship class, keeps track of your Core piece, all of the attached parts, all of the ships data is managed here. You can raycast for ship parts in this class. Check the part that you are currently dragging to see if any of the colliders are colliding with other parts.

If there is a collision, check if the rotation is within your specified threshold and then snap it into place.

This is actually a lot more complicated to explain than I thought it would be. Let me know if you have questions and I will elaborate on whatever you need more help with.

• Thanks for a nicely illustrated answer - I do have a question :), the pre-defined snap points, are these points of which you are checking for proximity? Then when they are near, the green box appears.. meaning if you release now, the snapping is then done? Sep 23, 2016 at 0:08
• Yeah, the green boxes are to indicate that a snap is available, and where it will snap. The collider exists in this same area, and is what is used to determine if you can snap or not. I raycast four spots while actively moving a part to determine if we are overlapping a snap point or not -- and if we are, how close are we to that object. Sep 23, 2016 at 9:28
• how do you get the green boxes to appear when you are snapping? Do you have all the scripts in github somewhere? Thanks, Melissa Jul 27, 2019 at 13:14