Getting Started
Create your first interaction in 5 minutes.
Overview
This guide will walk you through:
- Adding InteractionComponent to your character (2 min)
- Making an object interactable (2 min)
- Creating a simple widget (1 min)
- Testing the interaction
Total time: ~5 minutes
Step 1: Player Setup (2 minutes)
Add InteractionComponent
- Open your Character Blueprint (e.g.,
BP_ThirdPersonCharacter) - Components Panel → Add → Search:
Interaction Component - Select the component
- Details Panel → Configure:
Detection Settings:
├─ Detection Method: Line Trace (FPS) or Sphere Trace (Third-Person)
├─ Interaction Distance: 500
└─ Show Debug: True (for testing)
Setup Input Binding
- In Event Graph:
Input Action "Interact" (Pressed)
└─ Get Component (Interaction Component)
└─ Start Interaction
Input Action "Interact" (Released)
└─ Get Component (Interaction Component)
└─ Stop Interaction
Stop Interaction is required for Hold and InstantAndHold types. For Instant-only interactions it is optional, but recommended to always bind both.
Alternative for Enhanced Input:
IA_Interact (Triggered)
└─ Start Interaction
IA_Interact (Completed)
└─ Stop Interaction
Step 2: Make Object Interactable (2 minutes)
Add Components to Object
- Open your object Blueprint (e.g.,
BP_Door,BP_Chest) - Add Components:
Interactable ComponentWidget Component
Configure Interactable Component
- Select Interactable Component
- Details Panel → Interaction Data:
Interaction Data:
├─ Interaction Name: "Open Door" (or your action)
├─ Interaction Type: Instant
├─ Priority: 0
└─ Cooldown: 0.0
Configure Widget Component
- Select Widget Component
- Settings:
User Interface:
├─ Widget Class: (leave empty for now)
├─ Draw Size: 400 x 150
└─ Pivot: 0.5, 0.5
Rendering:
└─ Blend Mode: Transparent
Visibility:
└─ Visible: False (starts hidden — plugin auto-shows it)
Note: The Widget Component Space (World/Screen) is set automatically by the plugin at BeginPlay. You do not need to configure it.
Add Interaction Logic
In Event Graph:
Event OnInteract (from Interactable Component)
└─ Print String ("Door Opened!")
Step 3: Create Widget (1 minute)
Quick Version (Minimal Widget)
- Content Browser → Right-Click → User Interface → Widget Blueprint
- Name:
WBP_InteractionPrompt - Open widget → Class Settings → Parent Class:
InteractionWidget
Setting the Parent Class is required — this gives your widget the interaction events.
Design Simple UI
In Designer tab:
Canvas Panel
└─ Text Block
├─ Name: Text_ActionName (check "Is Variable")
├─ Font Size: 28
├─ Justification: Center
└─ Text: "Interact"
Implement Event
In Graph tab:
Event OnInteractionAvailable (InteractionData)
├─ Break FInteractionData
└─ InteractionName → Set Text (Text_ActionName)
Assign Widget
- Go back to your object Blueprint
- Select Widget Component
- Widget Class →
WBP_InteractionPrompt
Step 4: Test It
In Editor
- Play in Editor (PIE)
- Look at your interactable object
- You should see:
- Debug visualization (green/red line if Show Debug is enabled)
- Widget appears when looking at object
- Press your interaction key (E)
- “Door Opened!” prints to screen
Expected Behavior
- Widget appears when looking at object
- Widget disappears when looking away
- OnInteract fires when pressing key
- Debug line shows green when targeting
Troubleshooting
Widget doesn’t appear?
Check:
- [ ] Widget Blueprint Parent Class = InteractionWidget
- [ ] Widget Component → Widget Class is assigned
- [ ] InteractionData → InteractionName is set (not empty)
- [ ] Widget Component → Visible = False (plugin auto-shows it)
- [ ] InteractableComponent → bIsEnabled = True
Quick Test:
// Force show widget for debugging
BeginPlay → Widget Component → Set Visibility (True)
If widget shows now → System works, check detection/focus logic.
OnInteract doesn’t fire?
Check:
- [ ] Object has collision enabled (BlockAll or QueryOnly)
- [ ] InteractableComponent is on the object
- [ ] Input binding calls Start Interaction on press
- [ ] Detection Distance is high enough (try 1000 for testing)
- [ ] Show Debug = True → is the debug line turning green?
Can’t see object?
Enable Debug:
InteractionComponent → Show Debug = True
Look at object — you should see a colored line. Green = detected, Red = not detected.
If line stays red:
- Check collision on the object
- Try switching to Overlap detection method
- Increase Interaction Distance
Next Steps
Congratulations — you have a working interaction system!
Learn More:
- Core Concepts — How it works under the hood
- API Reference — All properties, events, and functions
Features:
- Interaction Types — Instant, Hold, InstantAndHold explained
- Detection Methods — Choose the best method for your game
- Widget System — Widget events and unavailable states
- Multiplayer — Server authority and multicast events
Help:
- Troubleshooting — Detailed solutions
- FAQ — Common questions answered