UI Layout in UMG

Unreal Motion Graphics (UMG) is a powerful tool for building User Interfaces (UI). Whether you’re creating a simple pop-up or complex UI systems, understanding the core concepts of working in UMG gives you the freedom to experiment with this powerful tool.

To take your UI designs from paper to playtest, you need to understand how UMG builds UI. To acquaint you with proepr UI building workflows, this page is broken into the following sections:

• How to design the UI system you need.

• Widgets and how they work.

• Creating and layering user widgets.

• Editing a UI layout.

Designing UI Systems

Planning your UI design is key to creating good-looking and useful UI systems. Think about:

• The type of game you're building.

• The type of UI needed to support players and keep the gameplay fun and easy to understand.

• How the final UI is going to look.

For example, in the Fortnite HUD everything the player needs to understand about the game; relevant health and shield information to overall game stats are laid out around the screen.

Sketch out the UI design ideas you have. Use these sketches to guide how the UI is built in UMG.

Basic web design approaches can help you plan the layout for your UI before you begin building User Widgets. These approaches can be used to decide which parts of the UI need to be rigid and which can be flexible. Use the following web design approaches for UI layout:

• Absolute vs Relative Layout

• Padding and Spacing

Absolute Layout

Absolute layouts usually use precise calculations and coordinates to specify where to place elements on a screen. This is useful when a UI element needs to remain in place using the X and Y coordinates. The UI element should consider where the parent element is placed on the screen, the parent element starts at the top left corner of the layout.

An absolute layout design is best used for small elements that are part of a larger design. For example, use an absolute position for an icon. In UEFN, this can be set using the Alignment and Padding settings of the Image widget.

The icon remains in the same place regardless of the placement and size of the other UI elements around it.

Relative Layout

This type of layout works best for games that can be played on multiple platforms because it will adapt the UI to a large television screen or a small cell phone screen.

Padding and Spacing

Padding can be used to adjust small spaces between elements of a whole. Padding can be hard to manage for individual widgets in UMG. Instead, use the Alignment tools for images and text blocks, alignment provides more control over space and placement than padding.

This means after all the pieces are in place, if you still need a bit of space between elements, adjusting the padding settings of individual widgets adds the necessary space.

To force larger spaces between widgets, use an empty image or slot widget between container widgets and User Widgets. Below you can see that an Image widget is used to force space between each User Widget, providing space for each widget to clearly display information.

Understanding UMG Widgets

A UI should be designed in sections in UMG. Build UI by creating individual User Widgets and working in layers. Once all elements of a UI are ready, layer the individual sections under one parent User Widget. Building UI in layers means having more control over the design and layout of the overall UI.

To plan and create individual User Widgets, you must first understand the widgets available in the Palette panel. There are two main types of widgets; containers and elements.

Containers

A container holds multiple User Widgets, elements, and other containers to create a piece of the UI. An element can be an image, material, text, or more. The size of a container widget is determined by the size of the largest child element.

Container Widget	Purpose	Image
Grid	Lays out elements within a flexible grid pattern. Adds options to child elements for: Row Row Span Column Column Span Layer Nudge
Uniform Grid	Lays out child elements in rows and columns with equal spacing. Adds options to child elements for: Row Column
Overlay	Layers elements and other container widgets on top of one another. Overlay containers do not add extra options or settings to their child elements.
Stack Boxes	Lays out elements either horizontally or vertically (left to right, up to down). This container widget doesn’t space elements well on its own. Use other container or element widgets to create space in a Stack box.
Size Box	Introduces parameters that restrict the size of its child elements. Size Box containers do not add extra options or settings to their child elements.
Scale Box	Specifies how to scale UI to screen size.
Scroll Box	Creates a scrollable box to contain a collection of elements. Scroll Box containers do not add extra options or settings to their child elements.
Widget Switcher	Provides a way to "Tab" through widgets. In this container widget, one widget at a time is visible in the switcher. Widget Switcher containers do not add extra options or settings to their child elements.
Canvas	Anchors elements within a defined space. It is best used at the end of the design process as the parent container. Adds the following options to its child elements: Anchors Position X Position Y Size X Size Y Alignment Size to Content ZOrder

Element Widgets

The size of child elements can be set in the Details panel and inherit properties from the parent container widget.

Element Widget	Purpose	Images
Image	Provides a way to add textures (can be imported images or textures found natively in UEFN) and materials to the background or foreground of a User Widget.
Text Block	Adds text to the User Widget. You can control the size, font, spacing and more..
Quiet Button	A rectangular button with a transparent background.
Regular Button	A rectangular button with an opaque background.
Loud Button	A rectangular button with a yellow background.
Slider	A value slider that increases or decreases within a specified range.

To learn more about widgets in Verse, refer to Widget Types.

Creating and Layering User Widgets

User Widgets are UI files that contain everything you designed. When creating a User Widget, compartmentalize your design as much as possible. This means only using what you need in a User Widget to achieve the desired look for your UI element.

In the image below, four User Widgets were created for each component of the collected items hotbar. Each User Widget tracks the individual stats for the different components while maintaining the same UI design.

Designing separate User Widgets means that they can be layered inside a parent User Widget to create a more consistent and controlled look for the collection bar hotbar. It’s also easier for the Tracker device to track the stats for each individual component of the collection hotbar.

Click to enlarge image.

Designing UI in this manner takes practice. Follow the Making a Custom HUD tutorials and the Teenage Mutant Ninja Turtles tutorials to practice creating individual User Widgets to create a custom Squad look for a game.

Editing a Layout

Using individual User Widgets to create UI makes editing UI easy. Providing a way to edit that one piece without affecting other parts of the UI design.

Notice in the collection bar hotbar design above, all element labels are centered except for one. In this case the creator simply opens the User Widget for that one element and edits the label without causing issues for all the other elements of the collection bar hotbar.

If you are designing something more complex like an inventory system, you might find that you’re either using container widgets you don’t need, or are having trouble getting your element widgets to conform to the design. UMG has options that make editing a layout easy:

• Replace With…

• Wrap With…

Replace Widgets

Replace unnecessary widgets from the Hierarchy without breaking the layout. Right-click on the unnecessary widget, then select Replace With… and choose another widget to replace it with. The substitute widgets are all container type widgets.

The child widgets’ options change according to the new parent container used.

Wrap Widgets

One way to modify the layout without affecting all the child widgets is using the Wrap With... setting in the Hierarchy. Right-click on the child widget and select Wrap WIth… then select a container from the dropdown menu to take advantage of its properties and maintain the settings of the child widgets.

Playtest

Once your design is complete, playtest your design. You should be looking for the following:

• The UI serves a purpose. Don’t create UI for the sake of having UI, it should be useful.

• The UI is helpful and user friendly, players shouldn’t have to guess what the UI does while playing a game.

• The UI should blend into the game and complement the gameplay.

• Your UI elements don’t block gameplay.