Widget Interaction System – Documentation

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.