Simple Interaction GUI

Let’s create a simple interaction GUI for our Simple Machine. We’ll use it to read the current data and to reset the counters.

The Widget

The very first thing we do is to create the GUI itself. You do this by creating a new BP-Class of type FGInteractWidget. This works like every other regular UMG widget, so be sure you’re familiar with how they work. In our case we’ll add two TextBlocks, and a button with a TextBlock in it which has the label "Rest".

The FGInteractWidget has the M Interact Object variable which represents the object that the player interacted with (aka. our simple machine). You can cast it to the simple machine so we can access the counters.

You could cast the M Interact Object already in one of the constructor functions and then cache it in a new variable so you don’t need to cast the object every time.

Bind the content of two new TextBlocks to individual functions. One of them should return an appended text of "Count: " plus the itemCount of the machine. The other should return typeCount and "different Types". Place them wherever you want.

Now we have the display of our text, but we still need to add the reset functionality. For that bind a event to the on click event of a new button. Set both counters of the machine to 0.

There’s still a problem if you use the machine, the user can’t physically interact with the widget. The reason is that we don’t capture any input from the user. To fix that you’ll need to change some of the class default values on the widget.

  • M Use Keyboard

    Activate this so keystrokes get used to trigger events in our widget. (Esc to exit the widget)

  • M Use Mouse

    Activate this so the mouse movements get used to actually make the mouse visible and allow click events to happen.

  • M Capture Input

    Activate this so the input events don’t get further used in the game. (like walking around)

Make machine interactable

Now we need to attach our UI to the simple machine. There’s very little to do, we just need to enable M Is Useable and set M Interact Widget Class to your newly created widget.

Done! Now you can interact with your machine by looking at it and hitting E.

Use the SF Window

If you want you can make your widget look more like the other SF widgets by using the "WindowDark" Widget provided by the modding starter content.

Use it like every other widget in your new widgets and add the content you want in the widget slot. Then you can set the title by defining the title variable’s default value.

Most of the time you will add a Canvas Panel and in it other widgets, so you can use it like a "normal" widget.

If you want to add the functionality to close the whole interact widget by clicking the "X" Button, not just the the window, you need to bind the OnEscapePressed Event of the interact widget (or custom stuff) to the OnClose Event on the WindowDark.