How-To: Author a Skill Tree

Goal: build a tree's gameplay structure in the Logic graph (skills, dependencies, sub-nodes) and its player-facing layout in the Visual graph.

Prerequisites

You have a UCrimsonSkillTree asset open (Quick Start step 4).

1. Build the Logic graph

In Logic mode, right-click -> Add Skill for each node and wire parent -> child (left to right). Everything unlockable at the start wires from the Root node's Out pin (Root is auto-spawned and can't be deleted).

Screenshot pendingImages/CrimsonSkillTree/howto-logic-graph.png

Logic graph: Root -> Skill nodes wired parent to child. Double-click a wire to drop a Reroute knot.

Node	Purpose
Root	Implicit prerequisite anchor; wire start-unlockable skills from its `Out` pin
Skill	Wraps a `UCrimsonSkillTree_Node`; hosts sub-nodes and the gameplay payload
Bridge	Auto-managed gate; activates when its prerequisites are met (sub-tree gating)
Reroute	Editor-only knot for tidy wiring; compile follows reroute chains through

2. Attach sub-nodes (conditions, events, costs)

Click the + button on a section header (Conditions, Events, Costs) to add that sub-node type instantly; the Per-Edge header's + opens a small menu for Add Edge Condition / Add Edge Event. (Right-clicking the Skill -> Add Sub-Node still works too.) Sub-nodes are BT-style and drag-reorderable within their typed lane, and the color band shows the type.

Screenshot pendingImages/CrimsonSkillTree/howto-subnodes.png

Use the + button on each section header to add a sub-node (Per-Edge's + is a dropdown). Amber = condition, Teal = event, Blue = cost.

Sub-node	Color	Payload
Activation Condition	Amber	`UCrimsonSkillTree_ActivationConditionBase` - must pass before the node activates
Node Event	Teal	`UCrimsonSkillTree_NodeEventBase` - fires on level-up / level-down / reset
Cost	Blue	`FNodeResourceCost` - flat or curve-scaled per level
Edge Condition / Edge Event	Amber / Teal (edge-scoped)	Gates / reacts to a specific incoming edge via a `FromParentGuid` selector (zero = all edges)

3. Lay out the Visual graph

Switch to Visual mode. Each Logic Skill has a mirror that renders a live UMG preview of its node widget. Drag mirrors freely (positions are independent of logic), set a per-node PreviewWidgetClass / PreviewLevel in Details, and add Decoration nodes (Panel / Header / Divider) for framing.

Screenshot pendingImages/CrimsonSkillTree/howto-visual-graph.png

Visual graph: live-preview skill mirrors laid out, with a Panel decoration behind a branch.

Verify

Compile (auto-runs validators). Every Logic Skill has a Visual mirror, and the live previews render at the PreviewLevel you set. Style the connections next.

How-To: Author a Skill Tree

1. Build the Logic graph

2. Attach sub-nodes (conditions, events, costs)

3. Lay out the Visual graph

See also