Skip to content

Latest commit

 

History

History
89 lines (53 loc) · 3.04 KB

CreateWidget.md

File metadata and controls

89 lines (53 loc) · 3.04 KB
Raw

Creating a Widget

This guide will go through creating and interacting with the widget.

For more detailed information about widgets, visit:
UMG UI Designer Quick Start Guide on UnrealEngine documentation.

Create the widget

  1. Create the widget by right-clicking in the Content Browser -> User Interface -> Widget Blueprint, and select the User Widget under Common.

  1. You can rename it or use the default name for the Widget Blueprint you created.
    Name it with the prefix WBP_ (WidgetBlueprint) followed by a suitable name for that widget, for this example: WBP_MyWidget

  1. Double-click on the created widget, and at the top-left side, search for Canvas and drag it onto the hierarchy root object.

  1. Do the same with, Text but drop it on top of the canvas panel.

  1. Set it as a variable, name it, and adjust its location as you wish.

Note

For more infomation about the widget layout/panels, visit: Widget Blueprints on UE documentation.

Widget Event Graph

  1. Navigate to the Event Graph of the widget, and create a new custom event, by right-clicking and searching for custom.

  1. Name it SetPositionText.
  2. Add a new Input variable, of type Vector.

  1. Create the following logic as shown in the image below.

Initializing the widget

  1. Navigate to the ModActor of your mod, and add a node called Create Widget.
  2. Plug it into BeginPlay, so it creates the widget when the mod actor spawns.
  3. Provide the widget class in the Class field.
  4. Create and plug the Add to Viewport as shown in the image below.

In order to use and access the newly created widget, we need to store it in a variable.

  1. Drag the Return value of the widget, and promote it to a variable.

Using the widget

For this simple example, we will get the player pawn location on the event tick, and use the widget's method to set the position text.

Tip

Avoid directly accessing the text component outside of the widget like in mod actor BP, try using methods to ensure low coupling between objects.

Results

We've created a simple custom widget where we can directly access it and call methods.


Bonus

It's common practice to ensure the displayed data is easily understandable and readable.

For example:

  • Formatting/appending the text with a description of the following data.
  • For vector types, divide the vector by 100 units for easy readability.