Tutorial 1: Basic Snapping

This is what Snap and Plug (SaP) is all about: moving objects and auto-snapping them to connect to each other. It’s worth skim-reading this tutorial before looking at any of the others, so that you have a basic idea how to use the core system.

Demo: what we’re trying to achieve

In the video above, you see me:

• Select a SnapPiece (could be a Room of your Dungeon, a Building in your City, or an Arm for your Robo)
• Grab one of the “unconnected” Sockets (shown in solid red)
• Drag it around and hovering over other SnapPieces
• While I drag, it previews the potential “snap”
• Release the mouse button, and everything snaps together

Let’s get started…

How things connect

Sockets: the bits that snap

In Unity, you can already snap “vertex to vertex”. This is great, but … only a tiny percentage of your vertices are actually worth snapping. Only a few of them are on the edges of doorways (if it’s a room), or the end of an arm (if it’s a robot), etc.

Also, each thing you can connect has an “orientation”: in a dungeon, each door has a “bottom” and a “top”, and you’d like to snap the walls together, the floors together, and the archways together. Not some random combination of all three!

The answer is: SnapSocket. To snap two objects together, they both need at least one available SnapSocket.

Pieces: the parent for your Sockets

…but that’s not quite enough. When a socket “snaps” to another socket … what do you move? The mesh? The whole object?

So we also have: the SnapPiece. When you snap a pair of SnapSockets, it’s their parent SnapPieces that move together – dragging everything else with them.

Preparing your objects for snapping

Creating a SnapPiece

Find the SnapAndPlug DLL (by default, this is in Plugins > SnapAndPlug), and click the triangle to open it up:

In Unity’s Hierarchy View, find an object that you want to upgrade into a Piece (e.g. a room for your dungeon). Typically, this will be a prefab instance you made earlier. Select this so it’s displayed in the Inspector.

Tip: SnapAndPlug works at any rotation, but complicated snaps can go wrong if the pieces were rotated to start with. If you get strange problems with snapping, try re-parenting your prefabs into empty GameObjects, with the parent having position and rotation of 0, and scale of 1. NB: this is recommended practice for Unity prefabs anyway!

Drag/drop the “SnapPiece” item in the DLL onto the “Add Component” button. Now you have a SnapPiece … with no sockets:

No Colliders?

You might see something like this:

To do the snapping, each SnapPiece needs an approximately-accurate Collider, or collection of Colliders. In most games, you’ll already have a physics Collider on the object – but sometimes you won’t, or you’ll have a custom set of sub-Colliders.

If you hit the yellow button, it’ll automatically create a Box Collider and add it for you. Problem solved.

(alternatively, if you specifically MUST NOT use physics on your object, hit the Web Help button for instructions on how to add colliders that will work for this, but you can ignore later in your scene)

Creating a SnapSocket

Each SnapSocket has to be attached to a GameObject that has no other SnapSockets attached. You can manually create your own – or use this shortcut: select the SnapPiece, and click the “Add socket” button. It’ll auto-create the socket, add it as a child, and select it for you.

Configuring your socket

Now we need to position the SnapSocket on your mesh/model. It’s a standalone GameObject, so you can move it around using the normal Unity tools. By default, it will be drawn with a large red square, with a small red triangle at the top:

TIP: if your mesh has its doors at the edges, whole units away from the center, hold down Ctrl (Wind) / Cmd (Mac) while dragging the position handles, and it’ll move in increments of 0.5.

Position it over a doorway, or at the end of your arm – whichever part you want to snap onto other objects.

When you snap two sockets together, their CENTERS will snap to each other. So, be consistent in where you place your sockets! With a Dungeon Room, you could place each socket centered on the floor at the bottom of the doorway … or you could center them in the dead-center of the doorway itself. It doesn’t matter – so long as you use the same position for every room.

When you’re done, depending on the scale of your object, the red marker might be much too small to see (or much too big). To fix this, edit the “diameter” value in the SnapSocket inspector.

TIP: we do NOT use “scale” for this. Changing the scale in Unity can have a lot of side-effects. Snap-and-Plug is designed to work seamlessly with other plugins, and so it’s important that it doesn’t require you to change scale at any point!

It doesn’t matter how big/small you make it – this is just to make it easier for you to work with. But make it large enough you can easily see it, and easily click and drag it later.

Snapping objects together

This is where it gets interesting. If you’ve upgraded an object to have one SnapPiece and at least one SnapSocket, go ahead and turn it into a prefab (or update the original prefab by drag/dropping the object from Unity’s Hierarchy view onto the prefab with same name in the Project view).

Create another copy of the object (e.g. by dragging the updated prefab back onto the Scene view, to create a new instance).

Snapping in the Scene View

We do our snapping directly in the Scene View. This is the fastest, easiest way to do it. You can also snap objects via code/script – useful for procedurally creating dungeons, cities, etc. But most of the time you’ll be working in the Scene View.

Select each object in turn. Each time, you should see the unconnected Sockets for that Piece appear (as solid red squares).

Now click and hold on one of the red squares. It will change colour to show it’s the active socket:

…and drag it. You’ll get a preview showing you where it’s trying to move to:

When you drag it over ANY valid SnapPiece, a couple of things will happen at once:

1. The targetted Piece (e.g. dungeon room) will hilight in a white wireframe
2. ALL sockets on the Piece will appear (as wireframes)
3. Each socket will be colour-coded based on its status (see below)
4. The nearest AVAILABLE, unconnected, legal Socket will hilight in green
5. …and a line will appear showing that if you let go now, your original socket will be snapped to join the selected one
6. The line also has arrows at each end so you can see which way around each piece will end up. If one of your sockets is back-to-front, this is a chance to see that and fix it!

Let go of the mouse while the socket preview shows a connection, and the pieces will snap together.

…finished.

Related tutorials

• Building larger scenes using SnapGroups
• Advanced Snapping
• Scripting with SnapAndPlug

Assets used in this tutorial

For the screenshots and videos in this tutorial, I used Jim van Hazendonk’s (eracoon) Landscape Tiles.

(we’re trying to get this into a pre-made SnapAndPlug pack for you soon – watch the support forum for announcements)