Skip to content

Interaction System

This section will go through everything you need to set up the Interaction System in your project, check out the following guides to learn more about the system. It is recommended to follow these sections in order

Setup of the Interaction Inputs

  1. To get started with the interaction system, open the Input Mapping Context that you use to handle all your gameplay inputs

  2. In this IMC, define all the inputs you will want to use for interactions, if you already have inputs defined for interactions, you can skip this step.

    If you don’t already have such inputs, you can use the demo input actions included in the pack: IA_Interaction and IA_SecondaryInteraction and associate any keys to them

    You can see an example of this setup in the IMC_EGUI_DemoInputs located under EasyGameUI/DemoContent/Inputs/

    Important Note on input Triggers

    The Input Actions used for interactions must not have any triggers either inside the Input Mapping Context, or inside the input action itself. Make sure to remove any trigger on those inputs.

  3. Then, you will need to define those inputs inside the Interaction Manager, to do so go to EasyGameUI/EasyInteractionSystem/Core and open the AC_EasyInteractionManager

  4. In here, you will find several predefined Interaction Input Events, those use the demo input actions. If you added those input actions IA_Interaction and IA_SecondaryInteraction to your IMC, then you don’t have to change anything and can skip this step

    How to use your own input actions or add additional inputs

    1. If you use your own input actions or want to add more inputs, first add your interaction input event inside the graph

    2. Then, add the node Handle Interaction Input

    3. Then, connect all the pins with associated names: Triggered Started Completed Triggered Seconds and Input Action

      If you don’t see all the pins, click on the dropdown arrow at the bottom of the input event node

    4. At the end of this process, make sure to leave only the input events that you actively use and remove all the unused input events

  5. Once all your inputs are defined, open your Global Config Data Asset and locate the Interaction Inputs Definition setting.

    In this variable, you must define all the input actions that you are using for your interactions, including the IMC they are contained in. The most important part is the definition of the Input Action, the rest is used to display the input prompts in the interaction widget.

    Key Index

    If the selected Input Action has more than 1 key per device in the mapping context, then you need to identify which key index you wish to display.

    In the example below, there are 4 indexes for keyboard keys and 2 indexes for gamepad keys. If for example you want to display D and Thumbstick X-Axis, you need to enter the indexes 3 and 1 in the respective fields.

Once this is done, you can also tweak any of the other Interaction Settings inside the Global Config such as radius, trace origin, detected object types, etc.

Switching Pawn during gameplay

If during gameplay you ever switch pawn for the same player controller, you might need to call the function Refresh References for New Pawn on the interaction manager component (you can get the component with the Get Easy Interaction Manager function).

This will ensure the new pawn works and is considered properly by the interaction system.

Setup of the Interaction Widgets

To display interaction prompts to the player, the system uses a dynamic widget component that is automatically attached to any interactable actor.

You can configure which widget is used by each interactable individually as you will see in the following section (this also means that you can have multiple interaction widgets based on your needs).

Tip

The default widget used by the system (WBP_EIS_DefaultInteractionDisplayer) can be found in the EasyGameUI/EsyInteractionSystem/Core/Widgets folder

You can also find additional demo interaction widgets in the EasyGameUI/EsyInteractionSystem/DemoContent folder

To get started setting up your widget, there are 3 methods:

A. Setting up a brand new interaction widget

  1. To setup a brand new interaction widget, go in your Content Browser and create a new widget blueprint

  2. In the creation window, under All Classes search and select WBP_EIS_InteractionDisplayerMaster

  3. Open the newly created widget and go to the Designer tab

  4. Inside the Palette, search for the WBP Easy Input Prompt Displayer widget

  5. Drag it in the container of your choice inside your widget. You must add as many input widgets as interaction inputs defined in the interaction manager component, so if you have 2 interaction inputs you will need 2 Easy Input Prompt widgets. You can then setup the layout as you need.

  6. Inside the Details panel, make sure to set each input prompt widget as variable and you can then modify the Styling Definition section of the Easy Config category to your liking

    You don’t need to make any modifications to the Keys Definition section and the Additional Text variable because they will be dynamicly defined by the system

  7. Go back to the Graph tab of the widget and override the function Get Input Prompt References

  8. In this function, delete the “Parent” node and add a Make Array node in which you need to plug all the Input Prompts widget variables. The final function should look similar to this (with your own number of input prompt widgets)

Your widget is now ready to be used with the interaction system, check out the next section to setup interactions on your actors!

B. Using an existing interaction widget

To use an existing interaction widget you will need to reparent it to the existing system:

  1. To do so, open the widget and first ensure that it doesn’t have a different parent than User Widget. You can see this on the top right corner of the widget: Parent Class: User Widget

    If you see anything else it means that this widget already has a non-standard parent, in which case you must go to the topmost parent class to apply the changes there.

  2. Once you have the correct widget opened, go to Class Settings and check out the Details panel

  3. Click on the Parent Class dropdown and select WBP_EIS_InteractionDisplayerMaster

  4. Once this is done, go to the Designer tab of the widget

  5. Inside the Palette, search for the WBP Easy Input Prompt Displayer widget

  6. Drag it in the container of your choice inside your widget. You must add as many input widgets as interaction inputs defined in the interaction manager component, so if you have 2 interaction inputs you will need 2 Easy Input Prompt widgets. You can then setup the layout as you need.

  7. Inside the Details panel, make sure to set each input prompt widget as variable and you can then modify the Styling Definition section of the Easy Config category to your liking

    You don’t need to make any modifications to the Keys Definition section and the Additional Text variable because they will be dynamicly defined by the system

  8. Go back to the Graph tab of the widget and override the function Get Input Prompt References

  9. In this function, delete the “Parent” node and add a Make Array node in which you need to plug all the Input Prompts widget variables. The final function should look similar to this (with your own number of input prompt widgets)

Your widget is now ready to be used with the interaction system, check out the next section to setup interactions on your actors!

C. Using the provided default interaction widget

If you wish to use the Default Interaction widget as a starting base, you only need to modify it to contain the needed input prompts depending on your input setup

To do so, go to EasyGameUI/EsyInteractionSystem/Core/Widgets and open the WBP_EIS_DefaultInteractionDisplayer.

Then inside the Designer tab, you will find two already set up input prompts, the following instructions will then depend on the number of interaction inputs you have defined in the previous steps

2 Interaction Inputs

With 2 interaction inputs, you don’t need to modify anything in the default widget.

1 Interaction Input

  1. Delete the Secondary Input Prompt from the Designer tab

  2. Go back to the Graph tab and locate the function Get Input Prompt References, in here, delete the Secondary Input Prompt variable and remove the second pin in the Make Array node (you can do so by right clicking on it and selecting “Remove Array Element Pin”

More than 2 Interaction Inputs (3+)

  1. Select any of the two existing Input Prompt Widget and duplicate it (Ctrl+D)

  2. Inside the Details panel, make sure to set each input prompt widget as variable and you can then modify the Styling Definition section of the Easy Config category to your liking

    You don’t need to make any modifications to the Keys Definition section and the Additional Text variable because they will be dynamicly defined by the system

  3. Go back to the Graph tab and locate the function Get Input Prompt References, in here, add as many missing pins as needed on the Make Array node and plug the newly added widget variables to those pins

Your widget is now ready to be used with the interaction system, check out the next section to setup interactions on your actors!


Additional Interaction Datas System

Additional Interaction Datas System

The Additional Interaction Datas is a system that allow you to easily pass variables from the Interactable Actor Component to the Interaction Widget. It can be used to pass datas specific to your game like if you wish to display the rarity when interacting with an item or the amount of ammunitions that a pickup interactable has, etc.

  1. To retrieve those additional datas inside your Interaction Widget, you simply have to override the function Set Additional Interaction Datas from Actor. If you are using the Demo Interaction Widget, this function is already overidden and can be found in the functions list

  2. In the function, you can then delete the “Parent” node and access the structure of additional datas to do anything, by default this structure only contain an additional text

  3. To add new datas, first make sure to save all your current progress, then go to the folder EasyGameUI/EasyInteractionSystem/Datas and open the structure F_AdditionalInteractionDatas

  4. In here you can then add any variable of your choice, the engine might be somewhat unstable when editing structures which is why I would recommend making all you changes at once then save all the modified BPs immediately in case the engine crashes.

  5. Once you are done adding variables and saving everything, you should now be able to access it from the widget

In the following section you can see how you can define those additional datas inside your interactable actor

Interactions Integration in your actors

Once your inputs and widgets are set up, you are all good to start adding interactions to any of your actors. To get started, open the actor in which you want to add an interaction

Tip

If you wish to see a full interaction setup, you can check out the Demo Interaction Actors in the EasyGameUI/EasyInteractionSystem/DemoContent/ folder

Interactable Component integration

In the Components tab of your actor, click on Add and add the AC Easy Interactable Actor component

Then, select the component and go to the Details tab, search for the Easy Config section, in here you will find several settings to tweak the interaction for this actor

  • Interactable Settings List In this array, you can define as many interactions as available interaction inputs and tweak all the parameters of this interaction

    • Interaction Text The text display beside the input prompts of the widget
    • Interaction Type The kind of interaction that must be performed by the user, either Single Tap, Hold or Mash

    • Associated Input Action Index This setting will define which input is associated with that specific interaction.

      This can be the index of any of the input defined in the Interaction Inputs Definition variable of the Global Config. Only one of each index can be defined on an interactable.

    • Hold Duration If the Interaction Type is Hold, this will define how long the input must be held for the interaction to be successful

    • Mash Amount If the Interaction Type is Mash, this will define how many times the input must be pressed for the interaction to successful
    • Mash Max Interval Duration If the Interaction Type is Mash, this duration define how fast the user need to repeat the presses to not fail the interaction (for example, the user has 0.5s to retrigger a press to “progress” the mash counter)
    • Consider Tap Input On Release Only If the Interaction Type is Tap, you can enable this if you wish to receive the interaction trigger only when the key is released, if False the trigger will be sent immediately when the player start pressing the key

    • Action on Interaction Fail & Action on Interaction Success This setting define what the component needs to do if the interaction has failed (Input not held long enough or Mash amount not reached, etc) or succeeded. There are 4 options:

      • Do Nothing The component will trigger the “On Interaction Failed Event” but won’t do anything else
      • Restore All Interactions Immediately On Interaction Fail, this option behave identically to the “Do Nothing” option. On Interaction Success this will allow interactions to be triggered immediately after the first interaction
      • Disallow Interactions The component won’t allow any interactions until they are manually allowed again through code
      • Disallow Interactions for Duration The component will disallow interactions for the duration specified in the following Disallowed Duration variable

    • Disallowed Duration The interactions will be disallowed for this specified duration if requested on the previous variables

  • Interaction Allowed? Set this to True if the interactions should be allowed initially

    Available functions to control interaction activation during gameplay

    • Set Interaction Allowed Allow you to enable or disable interactions on this component if the interaction has not been completed yet
    • Reset Interaction Complete Allow you to reset the completion state after the player has interacted with the actor, does not affect the “Interaction Allowed” variable
    • Restore All Interactions Will both reset the completion state and ensure the interaction is reenabled on the component

  • Allow Interaction Through Obstacles If True, the actor will be interactable from anywhere, even if hidden behind a blocking actor in the world. If False, the actor must be in direct line of sight to be interactable

  • Interaction Distance Override If you wish to restrict the distance at which this actor is interactable, you can set this value to anything higher than 0.

    This variable doesn’t allow to go beyond the maximum interaction distance, it can only be lower than this value

  • SFX In this category you can define various sound effects to play at different stages of the interaction

    • SFX On Interaction Started SFX played when the interation has started, the sound is “fire and forget”
    • SFX On Interaction Ongoing SFX played when the interaction is ongoing, it is triggered when the first “Ongoing” event is triggered, the sound will be stopped if the interaction fail or succeed
    • SFX On Interaction Failed & SFX On Interaction Suceeded SFX played when the interaction has failed or succeeded, both are “fire and forget”

  • Interactable Widget Class The class of any widget that you set up in the previous section and that must be displayed by the actor when focused for interaction

  • Unused Input Prompts Behavior This selector allow you to define how the unused input prompts on the widget are handled. This will vary depending on your needs for your widget:

    • Hide The input prompt will only be hidden but will retain its occupied space which means the widget layout won’t be affected
    • Collapsed The input prompt will be hidden and won’t occupy any space, which means that the widget layout can be affected (spacing changes, etc)

  • Interaction Widget Relative Offset If you wish to offset the origin location of the widget from the actor origin, you can change this value

  • Interaction Widget Pivot Point This setting define where the widget is “anchored” to its origin location and how it will pivot to follow the camera.

    0-0 means it is anchored from the top left corner, 1-1 means it is anchored from the bottom right corner of the widget

  • Additional Interaction Datas Any additional datas that must be passed to the widget, more details about this system and how to add new variables can be found in the previous section

    This can for example be used if you want to send rarity datas in order for the widget to display the rarity of the object. You can update this variable at runtime if you need to, it will be updated every time the object is focused for interaction


Interactable Detection Parameters

Once you have defined your component parameters, you now need to define which meshes in your actor will be responsible for detection, attaching the widget, be outlined, etc.

To do so, define where you wish to initialize this logic (like in a Begin Play event), then, from the Interactable Actor component, call the function Register New Detection Parameters

Multi-Components Detection

If you wish to have multiple components in your actor being independently detected (like drawers in a cabinet), simply add multiple Register New Detection Parameters, one for each component to be detected

You can also remove any registered detection paramater with the Remove Detection Parameters function

  • Parameters Name If you wish to have multiple detection parameters, input a unique name in this variable, you can leave it as default if you only have a single parameter

  • Detection Component Reference in here the Primitive Component that will be reponsible for the detection when the player is in range. You can leave it empty to allow any Primitive Component in your actor to be detected

    This component need to have collisions enabled and be of an Interactable Object Type. It can reference a component local to the actor or any other component in the world depending on your needs.

  • Components To Outline Array of components that will be outlined whenever the Detection Component is detected. The array can contain references to components local to the actor or any other components in the world depending on your needs.

  • Outline Color Color of the outline for the Components To Outline when the Detection Component is detected.

  • Widget Attach Component Reference in here the Scene Component to which the Interaction Widget will be attached when the Detection Component is detected. If empty, the widget will be attached to the root component of the actor.

    The Widget Relative Offset that is configured in the Interactable Component variables will then be calculated from this attach location

Basic example setup with a global detection:

Any component in the actor can be detected, when detected it will outline the Sphere object and the widget will attach to the root of the actor

More advanced example setup with 3 detectable components:
3 distinct sphere objects can be detected independently and will be outlined when detected, the widget will attach to the detected sphere


Interaction Events

In addition to these settings, the component also has several events that will be triggered on different states of the interaction

All of the following events have a few variables in common that give you context over the interaction that is ongoing:

  • Interacting Pawn Reference to the Pawn (usually the player character) that is actively interacting with this actor
  • Detection Parameters Defines the Detection Parameters Preset that is responsible for the detection and is currently handling the interaction
  • Interaction Index Defines which interaction has been triggered from the Interactable Settings List of the component (based on the array indexes)


  • On Interactable Selected

    Triggered every time this actor is selected/focused and can be interacted with (interactions enabled, not blocked, etc). It also gives you the context of which parameter has triggered the detection

    Parameters Modifications on Interactable Selected

    This event is called just before the interaction inputs and widget are initialized for the actor, which means you can safely update the Interactable Settings List and Widget parameters on this event and they will be reflected immediately.

    For example on the following image, we are disabling the first interaction and setting the second one to Tap if we detected our parameters A or B, and setting both interactions to Hold if detecting parameters C. (if Interaction Type = None, that specific interaction input will be fully disabled for this actor)

    If you wish to modify the Interactable Settings directly with a Set Members node, make sure to use a Get By Ref on the array, and not a Get A Copy

  • On Interactable Unselected

    Triggered when the actor is no longer selected/focused or can no longer be interacted with (because the interaction is disabled, blocked, completed, etc)

  • On Interaction Started

    Triggered at the begining of the interaction, when the input key is first pressed down

  • On Interaction Ongoing

    Triggered when the input type is set to Hold or Mash and the interaction is currently ongoing (not yet failed or succeeded). The event also returns the current Hold Progress (value from 0 to 1) or current Mash Progress (value from 0 to the defined Mash Amount)

  • On Interaction Failed

    Triggered when the input type is set to Hold or Mash and the interaction has failed for any reason (lost focus, stopped holding, interactions disabled etc). The event is called right before executing the Action on Interaction Fail

  • On Interaction Succeeded

    This event will be triggered when the interaction has been successful, it will mark the interaction as completed and execute the Action on Interaction Success