How-To: Line States & Animations

Goal: give connection lines industry-standard end-user visuals - a distinct look per logical state, an animated fill when a node is purchased, smooth style transitions, and pointer hover.

Prerequisites

A skill tree rendered by a host canvas that owns a UCrimsonSkillTreeWidget_ConnectionLayer (see How-To: Display the Skill Tree). All settings below live on the line drawing policy in the asset's GraphConfig.

1. Author per-state styles

Every connection resolves a visual state from live node data each time the tree updates. Add entries to the policy's State Styles map (state -> FCrimsonConnectionLineStyle: color, thickness, brush/material, opacity). States without an entry keep the legacy ActiveLineColor/InactiveLineColor look, so existing assets are unchanged until you author styles.

State	Meaning
`Locked`	Parent chain inactive or prerequisites unmet
`Unlockable`	Parent active and prerequisites met - child not purchased yet
`Active`	Child node purchased (Set)
`Maxed`	Child node at max level

Individual edges can replace a state's style via UCrimsonSkillTree_Edge::StateStyleOverrides (sparse - only add the states that differ).

2. Animated progress fill

With Fill Settings -> Enable Fill, purchasing a node fills its incoming connection parent-to-child (refunding drains it). Material styles receive the scalar parameter named by Fill Parameter Name (default FillAlpha). The line strip's U texture coordinate runs 0 to 1 along the arc length, so the material contract is:

text

Filled  where TexCoord.x <= FillAlpha
Empty   where TexCoord.x >  FillAlpha

Styles without a material use a line-split fallback: the filled portion draws with the new state's style, the remainder with the old one. Tune Duration and the optional Easing curve.

3. State transition crossfade

Transition Settings blend color/thickness/opacity between the old and new style over Duration seconds (0 = instant) with an optional easing curve. Brushes cannot blend - when two states use different materials the painted brush switches at the halfway point. An optional Transition Parameter Name scalar material parameter receives the 0-1 blend for material-driven effects.

4. Runtime hover

Enable Hover Settings -> Enable Hover and lines become pointer-aware in the end-user view: within Hover Tolerance Px of a line, the Hover Style blends in over Blend In Time.

On your canvas widget, select the Crimson Skill Tree Connection Layer and bind On Connection Hover Changed (parent GUID, child GUID, hovered) - e.g. to show a connection tooltip. Get Hovered Connection is a pure node on the same widget and returns the currently hovered pair for click handling.

Input routing

Hover hit-testing runs from the graph widget's mouse-move events. If an owning screen consumes mouse moves before they reach the graph, forward them to the graph widget.

How it renders

All connections are painted by ONE UCrimsonSkillTreeWidget_ConnectionLayer widget: panning needs no connection work, zooming only re-evaluates per-edge LOD, and a state change re-resolves styles and animates - nothing is spawned or destroyed.