Getting Started

Create your first interaction in 5 minutes.


Overview

This guide will walk you through:

  1. Adding InteractionComponent to your character (2 min)
  2. Making an object interactable (2 min)
  3. Creating a simple widget (1 min)
  4. Testing the interaction

Total time: ~5 minutes


Step 1: Player Setup (2 minutes)

Add InteractionComponent

  1. Open your Character Blueprint (e.g., BP_ThirdPersonCharacter)
  2. Components PanelAdd → Search: Interaction Component
  3. Select the component
  4. 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

  1. 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

  1. Open your object Blueprint (e.g., BP_Door, BP_Chest)
  2. Add Components:
    • Interactable Component
    • Widget Component

Configure Interactable Component

  1. Select Interactable Component
  2. Details PanelInteraction Data:
Interaction Data:
├─ Interaction Name: "Open Door" (or your action)
├─ Interaction Type: Instant
├─ Priority: 0
└─ Cooldown: 0.0

Configure Widget Component

  1. Select Widget Component
  2. 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)

  1. Content BrowserRight-ClickUser InterfaceWidget Blueprint
  2. Name: WBP_InteractionPrompt
  3. Open widgetClass SettingsParent 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

  1. Go back to your object Blueprint
  2. Select Widget Component
  3. Widget ClassWBP_InteractionPrompt

Step 4: Test It

In Editor

  1. Play in Editor (PIE)
  2. Look at your interactable object
  3. You should see:
    • Debug visualization (green/red line if Show Debug is enabled)
    • Widget appears when looking at object
  4. Press your interaction key (E)
  5. “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:

Features:

Help:


← Back to Index | Core Concepts →