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 UCrimsonCoreSkillTreeGraph (or any host using UCrimsonSkillTreeWidget_ConnectionLayer). 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

Screenshot pendingImages/CrimsonSkillTree/line-states-styles.png

State Styles map on the policy: Locked dim gray, Unlockable pulsing amber, Active bright, Maxed gold.

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

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.

Screenshot pendingImages/CrimsonSkillTree/line-states-fill.png

Purchase in PIE: the connection fills from the parent node toward the newly activated child.

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 graph widget (UCrimsonCoreSkillTreeGraph), bind On Connection Hover Changed (parent GUID, child GUID, hovered) - e.g. to show a connection tooltip. Get Hovered Connection 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.