Product Overview

The Widget Interaction System Asset Pack is a universal interaction system for 3D user interfaces placed in the game world. It allows a smooth and automatic camera focus on widgets, transitioning from default player movement to direct mouse input on the focused user widget.

Besides the core interaction functionality, complex example use-cases in form of ready to use blueprint classes are also included. These blueprint classes cover computer terminals, which can be used to access predefined mail and to control connected systems, keypads for switching system states as well as simple switch buttons. A controllable system can be any other actor that’s using an integrated system component.

Besides automatically focusing on widgets, the system is prepared for using an external interaction system instead. A placeholder interaction system is integrated into the asset pack to demonstrate the usage. You can disable the automatic widget focus for individual or all terminals and instead interact on the press of a button. The system is prepared for being integrated into your game’s interaction system to prevent multiple interaction systems running in parallel.

Required Input Settings

The asset is currently using the input action and axis settings, which have been the default before UE5. If you added this asset to an empty project, you might need to add following input events:


Add those lines to your project’s DefaultInput.ini file or add them manually within the Project Settings -> Input section.

Creating a new terminal blueprint

1. Create a new blueprint

To use the terminal base class, either right click on BP_WIS_TerminalBase in the content browser and select “Create Child Blueprint Class” or create a new blueprint and select the base class from the list. Note that you might have to expand the “All Classes” tab to find it.

2. User interface widget

If you have created a new user interface widget you want to use with your terminal blueprint, a few steps are necessary to get all functionality. First, add a cursor image to your widget (for example, the included T_Cursor_01). The cursor must be on top of all other elements, please see one of the included widget for rerefence. The cursor image also needs to be anchored in center and the alignment should ideally be 0.5, 0.5.

With the cursor image set up, go to the widget’s class settings and implement the Widget Interaction System Function Interface. This will add the functions for showing, hiding and updating the cursor position to your widget. Add all three functions to your event graph and wire up the logic. You also can simply copy the nodes from one of the existing terminal widgets.

3. Mesh and widget

Open the blueprint class you just created, select the static mesh component and set the static mesh you want to use as frame for your widget. Then select the widget component and set the desired widget class. Make sure the draw size matches the size of the widget and the proportions are correct. Now, you need to update the widget component’s transform values to match your static mesh. Change the location, the rotation and the scale of the component until it fits into the desired frame (for example a computer monitor mesh).

Open your blueprint and select the component called InnerWidgetArea. Change the “Box Extent” parameter and optionally the relative location until it almost covers the widget. It is important to add a little margin for it to serve as a tolerance area. Please see BP_ComputerTerminal as reference, as this is a crucial step.

As a last step, select the camera component and adjust the relative transform to your liking.

Your new terminal actor is now ready to use.

Note regarding data tables

You might wonder why we’re using a data table entry instead of filling in the data directly on an actor’s instance. Using a data table has the advantage of securing all related data, should you accidentally delete the actor instance in the game level, or in any other case of data loss. This workflow also allows a cleaner preparation and allocation of data.

If you want to learn more about data tables in Unreal Engine, click here to see the official documentation.

Using the included terminal blueprints

Computer terminal actor

To use the computer terminal blueprint, simply drag and drop BP_ComputerTerminal into your level. With the actor selected, search for the settings section you find in the details panel. Here you can set default widget interaction related parameters as well as the actual data table row used to populate the computer terminal with data.

To prepare your computer terminal, either add a new row to DT_TerminalData, or create a new data table using the BP_ComputerTerminalData structure.

In the row you created, you can now enter all information, such as the username, mail data and connected systems. The connection to actors of a specified system is automatically established at runtime. For this to work, the “System ID” parameter must be exactly the same as the ID on the system’s component. Now, select your terminal actor instance in the level and set the data table row you just created inside the details panel.

Using the keypad terminal

Drag and drop BP_KeypadTerminal to your level and place it on a wall (or any vertical object). With the instance selected, search for the keypad settings section inside the details panel. Here, you add the IDs (unique names) of the systems you want to link this keypad to. By default, the connected systems are activated once the correct code was entered. If you want to deactivate systems by entering a code instead, set “Should Activate?” to false. In the settings, you can specify a code or let the blueprint generate a code for you randomly. To display the code in game, you can place BP_KeypadCodeDebugger in the level and specify the keypad in the instances details.

Using the simple switch blueprint

The asset pack also contains a simple switch blueprint, which can be used universally to toggle systems on and off. To use it, drag the blueprint into the level, place it on a wall and fill in the connected system information inside the details panel. In the details panel, you also find text fields for the information shown on the widget.

System component (connected systems)

With the actor component for connected systems, any actor can be used in combination with the integrated terminal actor classes. To explain how this component can be used, let’s create a simple actor which shows a debug message when its state is changed using a button switch terminal.

First, we create a new blueprint class. The parent can be any class, for this example we simply use Actor. Next, we add BP_WIS_SystemComponent, which is responsible for communicating with our terminals. With the component selected, we can change the parameters and add the required functions. As ID we type in “Tutorial System” and keep the default initial state, which means the system starts inactive.

Next, we add our logic by adding both, the System Activated and System Deactivated events to our blueprint (by clicking on implement interface function). These events will automatically trigger, when the state of the system with the set ID is changed. For this example, we add two print string functions: one for each event.

When we now place our blueprint in the level and hit play, we can see our debug message appear right away. This is required to initialize a system’s state for example after loading a save game. When we now paste the system ID we set on our component in the details of a button terminal, we can use the button terminal to switch our actor’s state.

If you want to change a system ID and initial state on an actor’s instance, you can as well add this little logic to your actor’s construction script.

Disable auto focus

If you don’t want the system to automatically focus on widgets, you can disable the Auto Focus on Terminal flag in either the base class to disable it globally, or on the instance or child class of a terminal blueprint. After disabling this option, you will need to interact with terminals manually using an external interaction system. If you don’t already have a system in place that allows the interaction with actors in your game, you can use the integrated proxy interaction system as a placeholder. However, please be aware that the proxy interaction system should only be used as a temporary solution and is meant to be replaced by your games unique interaction system once you have one.

The proxy interaction system

A quick summary of how the proxy interaction system works:

On the player character blueprint, we added the proxy interaction system component. On a button press, we pass over the input to the interaction system component. The interaction system constantly searches for actors which have an interface implemented, which is called proxy interaction interface. If an actor was found, it is stored as a variable and an interface message is sent to the actor informing it that it’s currently being focused by the player. When the player character passes over the key input, the component sends the interaction interface message to the actor it has found.

Within the event graph of the terminal base class blueprint you will find a few orange-colored comments. Those comments point to nodes related to the interaction system. Should you never want to use manual interaction for terminals, you can safely remove those nodes.

Interaction input & terminal base class

Within the event graph of the terminal base class blueprint you will find a few orange-colored comments. Those comments point to nodes related to the interaction system. Should you never want to use manual interaction for terminals, you can safely remove those nodes.

In the event graph of the terminal base class, you can find the interface functions Interact, Actor Focus Start and Actor Focus End. Those functions will be executed on the terminal the interaction system is currently focusing when the interaction system sends a respective message.

While interacting with a terminal, the input on the player character is disabled. The active terminal however can handle all input during interaction. To end the interaction again by pressing a button, we need to add this input mapping to the terminal base class as it’s done here for the proxy interaction system.

Proxy interaction indicators

With the proxy interaction system terminals show a 3D text if an interaction is possible. This is handled on the execution of actor focus start and actor focus end and is using a simple text component on the actor. Your game’s interaction system will likely be using a different approach for highlighting interaction options. You can therefore simply delete the interaction prompt text component if you don’t need it.

Using a third person character

If you want to test the terminal interaction using a third person character you might need to modify the interaction detection trace inside the proxy interaction system. By default, it is searching for actors in front of the player camera. Third person camera setups however require a different trace direction to detect the actor the player is looking at. As a quick solution you can find a simple direction calculation inside the interaction component’s trace function.

Important note about the proxy interaction system

Please keep in mind that regardless of the player camera setup, if you want to use this asset pack with a manual terminal interaction, you should be using a proper interaction system. The included proxy interaction systems purpose is only to demonstrate and explain how an interaction system can be integrated. If you don’t want to use manual terminal interactions, you can safely remove all related assets and nodes to keep your project clean and tidy.

To save and load the state of all systems in a level you can use the global functions Save System States and Load System States, which are part of BP_WidgetInteractionFunctionLibrary. Please note that you have to call those functions manually whenever you want to save or load states, for example before / after loading into another level or quitting the game. The functions save the states of all systems in a level to an individual save game file.

Can't find what you're looking for?

Let us know details about your question. We'll get back to you!
Back To Top

Add A Knowledge Base Question !

You will receive an email when your question will be answered.

+ = Verify Human or Spambot ?