How-To: Shape Connections

Goal: bend a connection into the exact curve you want by dragging keys and tangent handles directly on the line in the Visual graph. Each connection owns its own curve - shaping one never touches the others.

Prerequisites

You have a UCrimsonSkillTree asset with at least two connected nodes (How-To: Author a Skill Tree).

1. Select a connection

In the Visual graph, click a connection line. It highlights amber, the Details panel shows its anchors and material override, and the Connection Curve tab (docked under the graph) binds to that connection's shape curve. Connections start straight - a straight line is simply a curve with no keys yet.

2. Add a key and bend the line

Right-click the selected line -> Add Key Here. A key appears at that point and the line bends through it. Drag the key to shape the connection: its position along the line is the key's time, and how far you pull it sideways is the key's value. Add as many keys as the route needs.

The ends stay attached

Every shaped connection keeps pinned keys at both ends, locked onto the node anchors, so the line can never drift away from the nodes. You can still drag their TANGENT handles to control the angle the line leaves the parent and enters the child.

3. Tangent handles

Click a key to select it - its two tangent handles appear, exactly like the native curve editor. Drag a handle to steer the curve through the key. Handles stay colinear (smooth) unless the key is set to Break, which makes each side independent for a sharp corner.

Key mode (right-click a key)	Result
`Auto`	Smooth tangents computed from the neighbouring keys
`User`	Your dragged tangents, kept colinear
`Break`	Independent arrive/leave handles - a sharp corner
`Linear`	Straight segment to the next key
`Constant`	Holds the value until the next key

The same right-click menu offers Flatten (zero the tangents), Straighten (make them colinear) and Delete Key. Endpoint keys cannot be deleted - they are what keeps the line attached to the nodes.

4. The Connection Curve tab

The Connection Curve tab under the graph is Unreal's full native curve editor bound to the selected connection: toolbar, tangent tools, pre/post-infinity, filters, framing - everything. It and the on-canvas keys edit the same curve, so use whichever is convenient.

The Connection Curve tab: the native curve editor bound to the selected connection.

5. Materials and anchors

With a line selected, the Details panel exposes its anchors (where the line meets each node) and an optional Line Brush Override (a material or texture for just this connection). Lines are drawn as a UV-mapped strip with continuous arc-length UVs, so a flowing material runs end-to-end.

Assign a flowing material; UVs run continuously along the whole curve.

Anchor mode	Attach point
`Center`	Node center
`Nearest`	Point on the node shape closest to the other end
`Top` / `Bottom` / `Left` / `Right`	Fixed cardinal point on the node shape
`Custom`	Node center plus a designer offset

6. Compile and confirm in game

Compile (or Save) bakes each connection's curve into the asset. The editor preview and the runtime connection layer build their geometry with the same shared math, so what you shaped is what renders in game.

Verify (WYSIWYG)

PIE with the tree on screen: connection shapes match the Visual graph exactly.