Simple Interaction GUI

Let’s create a simple interaction GUI for our Simple Machine. We 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 mainly works like every other regular UMG widget. So we now simply add two TextBlocks and a button with a TextBlock in it which has f.e. the content "Rest".

The FGInteractWidget has the M Interact Object-variable to get the object the player interacted with. (aka. our simple machine) You can cast it to the simple machine so we can access f.e. 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 the other two TextBlocks to individual functions. One of them returns a appened text of f.e. "Count: " and the itemCount of the machine. The other could return f.e. typeCount and " different Types".

Now we have the display of our text, but we still need to add the reset functionallity. For that bind a event to the on click event of the button and set in there both counters of the machine to 0.

We are still not done yet because if you would use it, the user cant rly interact with the widget. The reason for that is that we don’t caputer any input of the user. To fix that you simple need to change some class default values.

  • M Use Keyboard

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

  • M Use Mouse

    Activate this so the mouse movements get used to actually make the mouse visible and allow f.e. 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 make the simple machine interactable. This is very simple because we just need to activate 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

You can let your widget look more like the other SF widgets by using the "WindowDark" Widget provided by the starter project.

Just simply use it like every other widget in your interact widget (doesn’t need to be one) and add the content you want in the widget slot. Then you can set the tile by defining the title-variables 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 not just the the window, you need to bind the OnEscapePressed-Event of the interact widget (or custom stuff) to the OnClose-Event ot the WindowDark.