How-To: Display the Skill Tree

Goal: put a skill tree on screen and let the player interact with it, using nothing but this plugin. You build one host canvas widget: it spawns a node widget per node, positions each from the layout the Visual graph baked into the asset, and hands the whole set to the connection layer that paints the lines.

1. Point the asset at a node widget class

Open the skill tree asset and set Graph Config -> Default Node Widget Class. Any Widget Blueprint implementing `ICrimsonSkillTreeNodeWidget` is valid - there is no required base class. Subclass UCrimsonSkillTreeWidget_Node for a ready-made implementation (implement On Update Node Appearance / On Node Hovered), or start from your own widget base and implement the interface directly.

2. Build the host canvas

Create a Widget Blueprint (any UUserWidget parent). In the Designer, add the two children the host needs. Both names are yours to choose - nothing binds by name here:

Then populate it once, after the manager has built its runtime tree instances.

3. Place the decorations

The panels, headers and dividers authored in the Visual graph arrive on the asset as Tree -> Decorations. Each one resolves its widget class in one order: its own WidgetClassOverride when the designer set one, otherwise Graph Config -> Decoration Widget Classes for its Kind. So the loop is: resolve the class, spawn it, hand it the decoration, and place it yourself at the decoration's GamePosition and GameSize. A decoration that resolves neither is skipped and never rendered.

4. Paint the connection lines

One UCrimsonSkillTreeWidget_ConnectionLayer paints every line in the tree, so panning costs nothing, zooming only re-evaluates per-edge level of detail, and a purchase re-resolves styles without spawning or destroying a widget. Call it three times for three different reasons.

// At the end of PopulateTree(), once the node widgets exist:
ConnectionLayer->RebuildConnections(
    Tree,
    NodeWidgetMap,
    Tree->GraphConfig.LineDrawingPolicy,
    CurrentZoomScale,          // your canvas's uniform render scale; 1.0 to start
    /*bInIsDesignTime=*/false);

// Stay in sync with gameplay. The manager broadcasts on every node state change,
// on the server and on clients alike (OnRep drives it client-side).
if (UCrimsonSkillTreeManager* Manager = UCrimsonSkillTreeBlueprintLibrary::GetSkillTreeManager(this))
{
    Manager->OnSkillTreeStateUpdated.AddDynamic(this, &UMySkillTreeCanvas::HandleTreeStateUpdated);
}

// UFUNCTION() void UMySkillTreeCanvas::HandleTreeStateUpdated() { ConnectionLayer->UpdateConnectionStates(); }

5. Navigate with a gamepad or keyboard

Nodes do not sit on a grid, so Slate's built-in navigation cannot answer "which node is up from here". UCrimsonSkillTreeNavigationLibrary builds that answer once per tree: feed it one entry per navigable node with its canvas-space center, then ask the returned map at navigation time. Build the map once - it is O(n^2) in the node count, not per-press work.

Tune the feel with FCrimsonSkillTreeNavigationParams - the cone half-angle, the sideways weight, and the discount applied to a candidate that shares an edge with the focused node.

6. Pan and zoom

Pan and zoom are your canvas's own transform, not something the plugin owns: scale NodeCanvasPanel's render transform to zoom, and offset it to pan. Any key works for either - mouse wheel, mouse XY, keyboard or gamepad stick - because the input side is entirely yours. The only plugin call the view needs is `UpdateZoomLOD` with the new scale after a zoom; panning needs none.

7. Show it

Push or add your canvas widget to your UI the way you show any other menu. While it is up, stop the character moving underneath: set Ignore Move Input and Ignore Look Input on the Player Controller, and exclude your gameplay Input Mapping Contexts so ability inputs do not fire behind the menu.

See also

• How-To: Use Your Own Node Widget Class - the node contract, on any base class
• How-To: Line States & Animations - per-state styles, purchase fill, hover
• How-To: Drive Node Actions - what the manager does with a request