UI Showcases

CrimsonCore is the aggregator layer — the only place allowed to mix CrimsonInput with a feature plugin's UI in one class. The widgets here are reference implementations that demonstrate the recommended wiring pattern; subclass them in Blueprint to use as-is, or copy them as a starting point for project-specific UIs.

UCrimsonCoreSkillTreeScreen

The ready-made skill tree screen. It is a UCrimsonActivatableWidget (CrimsonUI) that hosts a UCrimsonCoreSkillTreeGraph canvas, resolves the player's UCrimsonSkillTreeManager, drives a UCrimsonCoreSkillTreeViewModel for the detail panel, and owns all input. It lives here rather than in CrimsonSkillTree because it needs CrimsonUI, CrimsonInput and the MVVM stack at once - which only CrimsonCore is allowed to combine.

Configurable properties

Step 1 - Author UI input actions

In your UCrimsonInputConfig asset, add five entries to the UI Input Actions array, each tagged with a UIInputTag. The screen resolves its UInputAction objects from these tags at activation, so rebinding is pure data - any key, mouse button, wheel axis or gamepad control works.

DA_InputConfig_PlayerUI
  UIInputActions[0].InputTag    = UIInputTag.SkillTree.Zoom        # Axis1D  (mouse wheel)
  UIInputActions[0].InputAction = IA_SkillTree_Zoom
  UIInputActions[1].InputTag    = UIInputTag.SkillTree.PanMove     # Axis2D  (mouse XY)
  UIInputActions[1].InputAction = IA_SkillTree_PanMove
  UIInputActions[2].InputTag    = UIInputTag.SkillTree.PanToggle   # digital (RMB hold)
  UIInputActions[2].InputAction = IA_SkillTree_PanToggle
  UIInputActions[3].InputTag    = UIInputTag.SkillTree.Primary     # digital (LMB / gamepad accept)
  UIInputActions[3].InputAction = IA_SkillTree_Primary
  UIInputActions[4].InputTag    = UIInputTag.SkillTree.Secondary   # digital (RMB click / gamepad back)
  UIInputActions[4].InputAction = IA_SkillTree_Secondary

Step 2 - Create the widget Blueprint

Right-click in the Content Browser -> User Widget -> parent class UCrimsonCoreSkillTreeScreen. Place a UCrimsonCoreSkillTreeGraph in the widget tree and name it SkillTreeGraph. In Class Defaults, set the Input Config plus the five tags, and the default skill tree type tag. Push the screen onto your CommonUI Menu layer.

That is the whole integration. NativeOnActivated binds the Enhanced Input actions and NativeOnDeactivated unbinds them; the screen resolves the manager, populates the canvas and binds the view model on its own.

How pan works

Pan is a held gesture expressed as two bindings rather than a polling timer. PanToggle (Started / Completed) flips an active flag, and PanMove delivers an Axis2D pointer delta which is applied only while that flag is set. Because the delta arrives with the input event, there is no cursor polling and no tick rate to tune.

How zoom works

UCrimsonCoreSkillTreeGraph::ApplyZoom is a pure math primitive - a multiplier plus a screen-space anchor, with no speed or clamp policy. The screen owns the policy: it converts the wheel delta into a multiplier using ZoomSpeedFactor, clamps the resulting scale between MinZoomScale and MaxZoomScale, then passes the effective multiplier down.

const float WheelDelta    = Value.Get<float>();
const float CurrentScale  = SkillTreeGraph->GetCanvasRenderScale();
const float RawMultiplier = (WheelDelta > 0.f) ? (1.f + ZoomSpeedFactor)
                                               : (1.f / (1.f + ZoomSpeedFactor));
const float Desired       = FMath::Clamp(CurrentScale * RawMultiplier, MinZoomScale, MaxZoomScale);
const float Effective     = Desired / CurrentScale;
ZoomAtScreenPosition(Effective, MousePos);

InitialCanvasScale is applied separately through SetCanvasRenderScale when the graph broadcasts OnGraphReady.

Node widgets: any base class you like

The graph spawns node and decoration widgets as plain UUserWidget and talks to them only through CrimsonSkillTree's ICrimsonSkillTreeNodeWidget / ICrimsonSkillTreeDecorationWidget contracts, so a project may build nodes on any widget base. See CrimsonSkillTree -> How-To: Use Your Own Node Widget Class.

`UCrimsonCoreSkillTreeNodeButton` is the worked example shipped here: a node built on UCrimsonButtonBase instead of on any CrimsonSkillTree class, which is what gives it gamepad focus, navigation and per-input-method styling for free. Assign it like any other node widget class, via GraphConfig.DefaultNodeWidgetClass or NodeTypeToWidgetClassMap.

Non-CommonUI projects

The action API is input-agnostic and public: ZoomAtScreenPosition, PanByViewportDelta, RecenterOnRoot, RecenterOnContent, SetTargetNode, RequestPrimaryActionOnTarget, RequestSecondaryActionOnTarget and RequestActionOnNode are all BlueprintCallable. If you would rather not use this screen, host UCrimsonCoreSkillTreeGraph in your own widget and drive that same API from wherever your input lives.