Built-in Widgets

Ready-to-use widget implementations that work out of the box. Use them directly via CreateWidget<>(), or subclass them in Blueprint for full customization.

Overview

The plugin ships 4 concrete widget classes built on the base classes. They construct their layout programmatically in C++ — no UMG designer assets required.

Widget	Parent Class	Purpose
UERPInteractionPromptWidget	UERPInteractionWidgetBase	"Press [E] to Open" prompt
UERPHoldProgressWidget	UERPHoldInteractionWidgetBase	Hold-to-interact with progress bar
UERPTargetFrameWidget	UERPTargetingWidgetBase	HUD target info panel (name + icon)
UERPTargetReticleWidget	UERPTargetingWidgetBase	World-space lock-on reticle

All widgets are:

• Blueprintable — create a WBP child for visual customization
• Fully styled via EditAnywhere properties — tweak colors, fonts, sizes in the Details panel
• Compatible with BindWidget override — provide your own UMG layout in a Blueprint subclass

---

Quick Start

The fastest way to get a working interaction prompt:

In your PlayerController Blueprint:

Event BeginPlay
  -> Create Widget (ERPInteractionPromptWidget, Owning Player: Self)
  -> Add to Viewport

  -> Get Component (ERPInteractionComponent)
  -> Bind OnDescriptorChanged:
       -> Widget -> UpdateFromDescriptor(Descriptor)
       -> Widget -> SetFocused(true)
  -> Bind OnDomainCandidateChanged:
       -> Branch: NOT IsValid(New)
         True: -> Widget -> SetFocused(false)

That's it — the widget handles layout, key display, icon loading, and visibility automatically.

---

ERPInteractionPromptWidget

Header: UI/Interaction/ERPInteractionPromptWidget.h

A complete interaction prompt displaying the action name and the resolved input key in a badge.

Layout

Overlay
├── BackgroundImage (semi-transparent)
└── HorizontalBox
    ├── IconSizeBox > IconImage       (collapsed if no icon)
    ├── PromptText                    (fills remaining space)
    ├── Spacer
    └── KeyBadge (Border) > KeyText   (collapsed if no InputAction)

Style Properties

Property	Type	Default	Description
PromptTextColor	FLinearColor	White	Color of the prompt text
KeyTextColor	FLinearColor	Black	Color of the key label inside the badge
BackgroundTint	FLinearColor	Black 60%	Background overlay color
KeyBadgeColor	FLinearColor	White 90%	Background color of the key badge
PromptFont	FSlateFontInfo	Bold 14	Font for the prompt text
KeyFont	FSlateFontInfo	Bold 12	Font for the key label
IconSize	float	32	Width and height of the icon
ContentPadding	FMargin	12, 8	Padding around the content

Behavior

• OnDescriptorUpdated: Sets prompt text (prefers PromptText, falls back to DisplayName), resolves and displays the input key via GetCurrentInputDisplayKey(), loads icon from soft reference
• OnFocusChanged: Toggles visibility (HitTestInvisible / Collapsed)
• Key badge: Automatically hidden when the descriptor has no InputAction
• Icon: Automatically hidden when the descriptor has no Icon

Usage

// C++ — create and wire
UERPInteractionPromptWidget* Prompt = CreateWidget<UERPInteractionPromptWidget>(PlayerController);
Prompt->PromptTextColor = FLinearColor::Yellow;
Prompt->AddToViewport();

// Later, from domain events:
Prompt->UpdateFromDescriptor(Descriptor);
Prompt->SetFocused(true);

---

ERPHoldProgressWidget

Header: UI/Interaction/ERPHoldProgressWidget.h

Displays an interaction prompt with a progress bar that fills as the player holds the input.

Layout

Overlay
├── BackgroundImage (semi-transparent)
└── VerticalBox
    ├── HorizontalBox
    │   ├── PromptText         (fills remaining space)
    │   └── KeyBadge > KeyText
    ├── Spacer (6px)
    └── SizeBox > ProgressBar

Style Properties

Inherits all prompt styles from ERPInteractionPromptWidget, plus:

Property	Type	Default	Description
ProgressFillColor	FLinearColor	Blue (0, 0.6, 1)	Progress bar fill color
ProgressBackgroundColor	FLinearColor	Dark gray 80%	Progress bar track color
ProgressBarHeight	float	8	Height of the progress bar

Behavior

• OnDescriptorUpdated: Same as prompt widget (text, key, icon)
• OnFocusChanged: Toggles visibility and resets progress bar to zero
• OnHoldProgressChanged: Updates the progress bar percentage
• OnHoldCompleted: Flashes the progress bar green
• OnHoldCancelled: Resets progress bar to zero and restores the default fill color

Usage

// Presenter Tick (Blueprint pseudocode)
Event Tick (DeltaTime)
  -> Branch: bIsHolding
    True:
      -> HoldAccumulator += DeltaTime
      -> HoldWidget -> SetHoldProgress(HoldAccumulator / HoldDuration)

See Pattern 2: Hold-to-Interact for the complete presenter wiring.

---

ERPTargetFrameWidget

Header: UI/Targeting/ERPTargetFrameWidget.h

A HUD panel displaying the current target's name and icon, with tag-based name coloring.

Layout

Overlay
├── BackgroundImage (semi-transparent)
└── HorizontalBox
    ├── IconSizeBox > IconImage   (collapsed if no icon)
    ├── Spacer (4px)
    └── NameText

Style Properties

Property	Type	Default	Description
NameColor	FLinearColor	White	Default name color (no tag match)
NameFont	FSlateFontInfo	Bold 16	Font for the target name
IconSize	float	32	Width and height of the icon
BackgroundTint	FLinearColor	Black 60%	Background overlay color
ContentPadding	FMargin	12, 8	Padding around the content

Tag-Based Coloring

Property	Type	Default	Description
HostileColor	FLinearColor	Red	Color when target has HostileTag
FriendlyColor	FLinearColor	Green	Color when target has FriendlyTag
HostileTag	FGameplayTag	(none)	Tag that marks a target as hostile
FriendlyTag	FGameplayTag	(none)	Tag that marks a target as friendly

The name color is resolved in priority order: hostile > friendly > default. Tags are checked against FERPTargetDescriptor::TargetTags.

Configure tags in your subclass

Set HostileTag and FriendlyTag in the class defaults of your Blueprint subclass (or in C++ constructor). Common values: Target.Hostile, Target.Friendly — use whatever tag structure your game defines.

Behavior

• OnDescriptorUpdated: Sets name text with tag-based color, loads icon
• OnTargetActiveChanged: Toggles visibility

Usage

UERPTargetFrameWidget* Frame = CreateWidget<UERPTargetFrameWidget>(PlayerController);
Frame->HostileTag = FGameplayTag::RequestGameplayTag("Target.Hostile");
Frame->FriendlyTag = FGameplayTag::RequestGameplayTag("Target.Friendly");
Frame->AddToViewport();

// Wire from TargetingComponent events:
Frame->UpdateFromDescriptor(Descriptor);
Frame->SetTargetActive(true);

---

ERPTargetReticleWidget

Header: UI/Targeting/ERPTargetReticleWidget.h

A minimal reticle indicator that toggles between focused and locked-on visual states. Designed for world-space widget components attached to target actors.

Layout

SizeBox
└── ReticleImage (tinted by focus/lock state)

Style Properties

Property	Type	Default	Description
FocusedColor	FLinearColor	White 60%	Color when soft-focused (not locked)
LockedColor	FLinearColor	Red	Color when locked on
ReticleSize	float	48	Width and height of the reticle
ReticleBrush	FSlateBrush	Solid white box	Brush for the reticle image

Lock State API

// Toggle between focus and lock-on visuals
Reticle->SetLockedOn(true);   // Switches to LockedColor
Reticle->SetLockedOn(false);  // Switches to FocusedColor

// Check state
bool bLocked = Reticle->IsLockedOn();

Delegates

Delegate	Signature	Description
OnLockStateChanged	(bool bLockedOn)	Broadcast when lock state changes

Behavior

• OnTargetActiveChanged: Toggles visibility; resets lock state when target is lost
• OnLockStateChangedEvent: BlueprintNativeEvent fired on lock toggle (override for animations)
• Lock state resets automatically when SetTargetActive(false) is called

Usage

// Wire from TargetingComponent
Event: OnTargetLocked (Target, Descriptor)
  -> Reticle -> SetLockedOn(true)

Event: OnTargetUnlocked (PreviousTarget)
  -> Reticle -> SetLockedOn(false)

Event: OnDomainCandidateChanged (Previous, New, ChannelId)
  -> Reticle -> SetTargetActive(IsValid(New))

---

Customizing with Blueprint Subclasses

All built-in widgets support full Blueprint override via the BindWidget pattern.

How It Works

Each widget stores pointers to its child widgets (e.g., PromptText, KeyBadge, HoldProgressBar) marked with meta=(BindWidget, OptionalWidget). When the widget constructs:

1. No designer layout? C++ builds the default layout in NativeConstruct()
2. Blueprint provides widgets with matching names? C++ skips the programmatic layout and uses the designer widgets instead

Step-by-Step

1. Create a Widget Blueprint, reparent to the built-in widget class (e.g., ERPInteractionPromptWidget)
2. In the UMG Designer, add widgets with the exact same names as the C++ bound widgets:
   • PromptText (TextBlock)
   • KeyText (TextBlock)
   • KeyBadge (Border)
   • BackgroundImage (Image)
   • etc.
3. Design your custom layout around these named widgets
4. The C++ logic (descriptor updates, focus toggling, progress bar filling) works automatically with your designer widgets

You don't need all of them

The widgets are OptionalWidget — you only need to add the ones you want. Skip BackgroundImage if you want no background. Skip IconSizeBox + IconImage if you don't need icons. The C++ code null-checks everything.

Available Bind Widgets

ERPInteractionPromptWidget: BackgroundImage (Image), IconSizeBox (SizeBox), IconImage (Image), PromptText (TextBlock), KeyBadge (Border), KeyText (TextBlock)

ERPHoldProgressWidget: BackgroundImage (Image), PromptText (TextBlock), KeyBadge (Border), KeyText (TextBlock), HoldProgressBar (ProgressBar)

ERPTargetFrameWidget: BackgroundImage (Image), IconSizeBox (SizeBox), IconImage (Image), NameText (TextBlock)

ERPTargetReticleWidget: ReticleSizeBox (SizeBox), ReticleImage (Image)

---

Summary

Widget	Use Case	Key Features
ERPInteractionPromptWidget	"Press [E] to Open"	Auto key display, icon, prompt text
ERPHoldProgressWidget	"Hold [E] to Loot"	Progress bar, completion flash, auto-reset
ERPTargetFrameWidget	Target nameplate	Tag-based coloring, icon
ERPTargetReticleWidget	Lock-on indicator	Focus/locked color states, delegate

All widgets work immediately with CreateWidget<>(). For visual customization, create a Blueprint subclass and either tweak style properties or provide your own UMG layout via BindWidget.

---

Next Steps

Learn how widgets integrate with the perception pipeline in the Widget Guide.

Set up interactions with the Interaction Guide.

Set up targeting with the Targeting Guide.