Advanced Snapping


Make sure you’ve already done at least:

Let’s get started…

Advanced Snapping

With small levels, the Basic Snapping is fine.

But SnapAndPlug was designed to work with anything – and once you get comfortable with it, you’ll be putting SnapSockets on everything!

Soon, it becomes difficult for SnapAndPlug to guess which things you’re trying to join together, especially in a large level. Auto-snapping works, but getting it to pre-select the right target is a pain.

It’s also hard to see what’s going on!

SnapSocket and the Connection-Type

Every SnapSocket has a Connection-Type dropdown. By default, this is set to “Default”.

SnapSockets CAN ONLY snap to other SnapSockets with the same value in this dropdown

This is fully supported by the live GUI in the Scene-View: it will even colour-code your SnapPieces to show you which SnapSocket’s are valid targets (green, grey or orange) versus impossible (red).

Recap:

  • Green socket: if you release the mouse now, this is what you’ll snap to
  • Grey socket: this is an unconnected socket that you COULD snap to instead, if you move the mouse over it
  • Orange socket: this socket matches – but is already connected to a different SnapPiece; disconnect it first if you want to connect to it

Editing the list of Connection Types

This is stored PER-PROJECT, as an Asset. You can either edit the asset directly – or go to SnapAndPlug’s settings panel, which has a built-in editor for the list.

Window > SnapAndPlug > Settings

(NB: this will also give you the location where you can find the Settings file in your project, if you want to edit it manually)

You can add or remove as many connection-types as you want. Their names can be anything you want – make them descriptive!

Screen Shot 2014-09-20 at 00.05.10

e.g. for connecting Dungeon rooms together:

  1. Wooden doorway
  2. Stone doorway
  3. Secret door
  4. Small door (hobbits and dwarves)
  5. Tiny door (rats only)
  6. Bridge (end)
  7. Bridge (middle)
  8. Sewer-channel
  9. Ladder (top)
  10. Ladder (bottom)

Note how some things – like Ladders and Bridges – need a specific start/end, but could have many middle pieces. By setting the connection-types like this, we make it so we can auto-snap a “middle piece” to either end of a bridge, but the start/finish require at least one middle to connect them.

Likewise: a ladder needs a bottom (touching the floor) and a top (with a bit for the player to jump off). Each middle piece will have one of each – like Lego bricks, they stack together, but can only go one way up. This way, you’re getting SnapAndPlug to automatically get the rotations correct.

What if you delete them all?

…it won’t work. If you try it, SnapAndPlug will auto-create a new “Default” type the next time you try to create a SnapSocket.

Self-connected SnapGroups

You can snap a SnapPiece to a SnapPiece, and that creates a SnapGroup (see the SnapGroup tutorial for more info). And … you can snap groups-to-groups, pieces-to-groups, and groups-to-pieces. Great!

Moving a piece within a Group

When building a level, we often play around with different arrangements of pieces. I wanted it to be fast to change your mind, without having to hit Ctrl-Z all the time.

So, if you grab a piece that’s already connected, and drag one of its UNconnected sockets to join “somewhere else” in the same group … it will automatically disconnect, snap to the new position, and reconnect.

Most of the time, this helps with rapid prototyping / level building. There’s one exception…

Closed Loops

… what happens when you want to make a “closed loop”?

For instance, the track for a racing game is a loop: the 2nd piece connects to the 1st, the 3rd to the 2nd, … until the last piece. Your pieces are now all connected, but if you tried to use this for AI / navigation / renderer optimization, it would fail, because the 1st piece also needs to connect to the last.

SnapAndPlug uses a heuristic (fancy mathematical word for “guess”) to detect when you’re trying to do this deliberately. Each time you snap within the same group, it looks at how far the piece would have to move. If it’s below a threshold, instead of moving/disconnecting/reconnecting … it adds an extra connection in place.

In the video, we create a super-simple loop of 4 corner pieces. The final connection – last-to-first – maintains the existing connections, while adding the missing link back to the start.

Related tutorials

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)