Learning Unreal 5: How to Create Modular UI Elements

In a previous post, we explored some basic concepts of Unreal Motion Graphics – what it is, basic elements, and how to build a basic UI. In this post, we’ll take that a step forward and learn how to create modular UI elements.

Creating a Button

To start off, we’ll create a button that has preset image, on hover, and on pressed states.

  1. Create a new UI Widget. Right click on the content browser and go to UI -> Widget
  2. Name the Widget WB_Button.
  3. Open the widget and build the basic button. Search and drag a Button element type to the designer, then find and drag a text element on top of the Button element to stack them.
  4. To make the button appear more like it will by default, click the Fill Screen button in the top right of the designer and select Desired.
Example of where to find the desired zoom button in the ui designer.

Making variables

  1. Select the Text Block and check the Is Variable box in the Details panel. This will allow us to change the text displayed on the button.
  2. Do the same thing for the Button element, so we’ll have access to click events later.
Example of the details panel and the is variable field checked in the blueprint ui.

(Optional) Name the variables something meaningful

Update the names of the Text and Button elements to something more meaningful – I used the simple ButtonElement and ButtonTextElement names. This helps make it easier to understand when referencing variables, especially if you have a UI element that has multiple elements of the same type, such as multiple text fields.

Exposing the variables

By default, if you take the UI element now and place into another UI, you won’t have access to these variables. So we’ll have to do a few more things to expose the variables to any Widget that uses them.

Expose the button text variable

  1. Go to the Event Graph for the button (top right by default)
  2. The ButtonTextElement variable should be visible in the My Blueprint panel (top left on default). Drag this element out and choose Get.
  3. From the ButtonTextElement variable, drag and find a SetText (Text) node.
  4. Create a variable to update the text. On the In Text pin on the SetText node, drag and select Promote to Variable.
  5. Rename the variable to ButtonText.
  6. In ButtonText‘s details panel (default bottom left), select the Instance Editable and Expose on Spawn boxes. This allows for modification of this variable from another Widget Blueprint.
  7. Connect the SetText (Text) node to the Event Pre Construct node. Event Construct would also work, but using PreConstruct allows for seeing the text updates whenever you compile Unreal.
Example of what the blueprint looks like when exposing the text variable, including the instance editable and expose on spawn boxes checked in the ui widget graph.

Expose the button click event

  1. Go back to the Designer and select the Button Element.
  2. Scroll down to the bottom of the Details Panel. There will be an Events section. Several actions will be listed with a + button next to them. Click the + next to On Clicked. This will create a On Clicked (ButtonElement) event in the Graph.
  3. Create an event dispatcher called OnClicked. Drag to the graph and select Call then connect to the OnClicked(ButtonElement) custom event. (To see more on Event Dispatchers, check out my previous post on the topic).
Example of the event dispatcher being called from the On Clicked (Button Element) custom event in the ui widget graph.

Use the button in another UI Widget

  1. Create a new UI widget by right clicking on the content browser, User Interface -> Widget Blueprint
  2. Drop a Canvas Panel element onto the Designer
  3. Search, or look under the User Created section of the Palette for your button and drag onto the canvas.
  4. Set the text. Look in the Details panel and under Default near the top will be a Button Text field. That’s the field we exposed. Input your text.
  5. Set the click event. Scroll to the bottom of the Details panel. Under Events you’ll see an On Clicked event like when we exposed it. Click on the + and set up your event.

Customize the button

Now feel free to customize the button – import different images for the various button states, change tints and font type or size, and watch these changes populate to every instance of the button that exists within your various UI elements.

Apply to other UI elements

Now, tarry forth and explore this wonderful, time saving modular UI world with a wide variety of UI elements!

Personally, I’ve used it to create a game timer, Start and Exit game buttons on a main menu, and am currently building up a few other UI elements using the principles discussed here.

By Blueprints, Guides, Unreal Engine