How-To: Style Connections (Spline)

Goal: replace the default straight lines with designer-authored cubic-bezier curves that carry your own material, using the Spline Line Drawer policy and on-canvas control points.

Prerequisites

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

1. Select the Spline policy

Connection rendering is a per-asset, swappable policy on GraphConfig.LineDrawingPolicy. Set it to Spline Line Drawer in the asset's Details panel.

Screenshot pendingImages/CrimsonSkillTree/spline-policy-select.png

Asset Details -> Graph Config -> Line Drawing Policy -> Spline Line Drawer.

Verify

Connections immediately redraw as smooth curves (anchor-to-anchor until you add control points).

2. Give the line a material (optional)

Assign a UMaterialInterface (or texture) to the policy's Default Line Brush, or override it per connection. The curve is drawn as a UV-mapped strip with continuous arc-length UVs, so a panning/flowing material animates end-to-end. With no resource set, the line is a crisp anti-aliased color.

Screenshot pendingImages/CrimsonSkillTree/spline-material.png

Policy -> Default Line Brush -> assign a flowing material; UVs run continuously along the whole curve.

3. Add and shape control points

In the Visual graph, right-click near a connection -> Spline -> Add Spline Control Point. A draggable amber dot drops on the nearest connection. Drag points to shape the path; double-up to add more.

Screenshot pendingImages/CrimsonSkillTree/spline-add-point.png

Right-click near a connection -> Spline -> Add Spline Control Point, then drag the amber dot to shape the curve.

Free editor power

Control points are real graph nodes, so drag, marquee-select, grid-snap, copy/paste, and undo/redo all work out of the box.

4. Edit tangents (Curve-Editor style)

Select a control point to reveal its tangent handles (cyan = arrive, green = leave). Drag them to bend the curve; the line updates live. Set the Tangent Mode in Details:

Screenshot pendingImages/CrimsonSkillTree/spline-tangents.png

Selected control point with cyan/green tangent handles; drag to shape, set Tangent Mode in Details.

Tangent Mode	Result
`Auto`	Smooth Catmull-Rom from neighbours (default - just drag points)
`User`	Use the dragged tangent handles, kept smooth
`Weighted`	Like User, with handle length scaling curve influence
`Break`	Independent handles - a sharp corner
`Linear`	Straight segment to the next point - ignores tangents

5. Anchor the line to the nodes

Every connection meets each node at an anchor. The defaults come from the policy's Default Start Anchor / Default End Anchor and apply to every connection - straight, elbow, or spline.

To tune a single connection, click its line in the Visual graph. The line highlights and the Details panel shows that connection's start/end anchor, optional custom offsets, and an optional material override - no control point required.

Anchor mode	Where the line attaches
`Center`	Node centre
`Nearest`	The point on the node's shape facing the other node
`Top` / `Bottom` / `Left` / `Right`	That edge of the node's shape
`Custom`	Node centre plus an offset you set

Lines meeting the shape edge

Anchors attach to the node's shape, not its bounding box. If a node widget's art doesn't fill its square slot (hexagons, triangles, padded circles), set Connection Anchor Inset on the node widget so lines meet the visible edge instead of the empty corner.

Screenshot pendingImages/CrimsonSkillTree/connection-anchors.png

Click a connection line to select it -> Details -> Start / End Anchor, custom offsets, and material override.

6. Snap and align control points

Control points snap to a per-asset grid when inserted or dragged, so points authored at different times line up. Set Spline Handle Snap Size in the Editor Settings tab -> Visualization (default 16; set to 1 to disable). For exact placement, select two or more control points, right-click -> Spline Point -> Alignment, and pick an align or distribute action - the same workflow as Blueprint reroute nodes.

Action	Effect
Align Left / Center / Right	Match the X of the selected points (min / midpoint / max)
Align Top / Middle / Bottom	Match the Y of the selected points (min / midpoint / max)
Distribute Horizontally / Vertically	Evenly space 3+ points between the two extremes

Screenshot pendingImages/CrimsonSkillTree/spline-align.png

Select 2+ control points -> right-click -> Spline Point -> Alignment -> Align / Distribute.

Snap granularity

Live dragging snaps no finer than the editor's node grid (16 units) - the graph panel quantizes node positions before the spline sees them. Use the Alignment actions for exact, sub-grid placement; the Snap Size preference is best for making snapping coarser to line points up by eye.

7. Compile and confirm in game

Compile (or Save) bakes the authored path into the asset. Tangent handles are cleared and their values written back automatically.

Verify (WYSIWYG)

Enter PIE: the in-game connections match the editor preview exactly - same curve, same material flow, same anchors - because both render through the same tessellation code. Active/inactive color still tracks node state and per-edge color overrides.