Mission selection screens usually appear at the beginning of a game to provide players with a choice of missions. Sometimes a mission selection screen appears after a quick game tutorial familiarizes players with the game rules and mechanics.
Mission selection starts the game and takes players to a specific starting spot on the island for that mission. These screens can include details about mission statistics, provide information about the type of missions the player can choose from, or simply drop players into the selected mission.
The following tutorial teaches you how to create a mission screen that drops players into their selected mission.
Step 1: Research Mission Selection Styles
There are a number of ways to design a menu selection screen, depending on the amount of information you want to provide to players. Information can be in the form of mission descriptions or texture images of the mission level. For this example you’ll see examples of both to see the impact that you can create with just materials, or by strategically adding textures to your design.
Textures use a lot of memory and can eat up a significant portion of your total island memory count.
Deciding on the amount of information to include on the mission selection screen benefits the design phase.
Step 2: Design the Layout
Design the mission screen layout before opening UMG. Any design choices you make at this point are not permanent and can be redesigned without breaking any UI functionality. The screen layout is dependent upon what’s included on the mission selection screen.
These are 4 initial layout decisions to make at this stage:
Color Scheme - Use the 60 / 30 / 10 rule when using color in your UI.
Font Choice - Currently there are two font choices; Burbank and HeadingNow.
Materials - Use the UI Feature Template Materials to create your own unique look for your UI.
Images / Textures - Textures should be reserved for complicated art that cannot be easily re-created with materials, such as characters, or artistic containers.
The 60 / 30 / 10 rule means that 60% of the color used in your UI design should be the main color, 30% the secondary color, and 10% the accent color. This makes your UI easier to read and navigate.
When you’ve decided on a color scheme, create materials and material instances to use in your UI design.
For this example, the design is simple. There’s a call to action at the top of the screen telling players to “Choose Your Mission”, followed by three images labeled Mission 1, 2, and 3, and each with a START button.
Step 3: Design the Widget Layout
There are 4 main parts to the widget layout example:
Background Design
Mission 1 Tile Design
Mission 2 Tile Design
Mission 3 Tile Design
To create a widget that has working buttons, you need to use a Modal Dialog Variant Widget. There’s a special Viewmodel used with the Modal Dialog Variant Widget that provides a way to bind buttons to devices.
Inside the folder, create a Modal Dialog Variant widget.
Name the widget Mission_Select_UI.
Double-click the Mission_Select_UI widget to open the Widget Editor.
Background Design
In this example, the background design of the mission selection screen involves using materials to add blocks of color to the background, adding a call to action at the top of the screen, and adding a texture image of a character.
In the Widget Editor, do the following:
From the Palette panel, drag an Overlay widget onto the widget graph. This widget becomes the root widget and acts as the screen where the UI appears.
In the Widget Graph, expand the Overlay widget until its size is 1920 X 1080.
In the Hierarchy panel, right-click the Overlay widget to open the Context Menu. Select Rename from the dropdown menu and name the widget Root. This widget encompasses all widgets that make up the Mission Selection screen.
Change the graph layout to Desired. This lets you set the UI to the exact size you want it to appear on any screen.
You can view how your UI changes according to platform by selecting a screen from the Screen Size dropdown menu.
Drag an Overlay panel from the Palette panel under the Root widget and rename it Parent Container. This Overlay widget will house all parts of the Mission Select screen.
This widget should be the same size as the Root widget.
Change the alignment options for the Parent Container widget to Fill Horizontal and Fill Vertical.
Drag an Image widget from the Palette panel into the Hierarchy panel under the Parent Container widget.
Right-click the Image widget to open the Context Menu. Select Rename from the dropdown menu and name the widget UI Background Color.
Select the UI Background Color widget in the Hierarchy panel to open its options in the Details panel.
Under the Slot (Overlay Slot) options, use the following alignment settings:
Horizontal Alignment = Fill Horizontal
Vertical Alignment = Fill Vertical
Under the Appearance options, use the Brush > Image dropdown menu to select your primary color material. This makes the Image widget the color of the material.
Drag a Grid Panel widget from the Palette panel into the Parent Container widget and rename it Body. The Grid panel acts as a container for all the content of the UI. It also adds a flexible grid to the layout that organizes its child widgets in rows and columns. In this example, the content of the mission screen and the character image.
Under Slot (Overlay Slot) options, use the following settings:
Horizontal Alignment = Center Alignment
Vertical Alignment = Center Alignment
Padding = 64.0
Drag a Stack Box into the Body widget and rename it Content. A Stack Box uses either horizontal or vertical alignment to lay out its child widgets.
Change the alignment settings for the Content widget to Fill Horizontal and Fill Vertical.
Under the Behavior option, change the Orientation setting to Vertical.
Adding Callout Text
Drag a Text Box widget from the Palette panel and nest it under Content. This becomes the callout text prompting players to pick a mission.
Rename the Text Box to Choose Your Mission.
Select the Choose Your Mission widget from the Hierarchy panel to open its options in the Details panel.
Under Slot (Slot Overlay) options, use the following settings:
Size = Auto
Horizontal Alignment = Left Alignment
Vertical Alignment = Fill Vertical
Click the Text field, delete the default text and type Choose Your Mission.
Under the Appearance options, use the following settings:
Color and Opacity = Hex Linear E0137CFF
Font Family = HeadingNow
Typeface = 86Bold
Size = 85
Outline Size = 2
Mitered Corners = Check
Outline Color = Hex Linear FFFFFFFF
Drag an Image widget into the Content widget and rename it Spacer. This widget is used as a spacer to put space between the callout and the mission tiles.
Adding the Mission Tile Space
Drag an Overlay widget into the Content widget and rename it Tiles.
Drag an Image widget into the Tiles widget and rename it TileBG.
Select the TileBG widget in the Hierarchy panel to open its options in the Details panel.
Under the Slot (Overlay Slot) options, use the following settings:
Horizontal Alignment = Fill Horizontal
Vertical Alignment = Fill Vertical
Under the Appearance options, use the following settings.
Brush > Image = Secondary background material
Image Size:
X = 1200
Y = 32.0
Drag a Stack Box widget into the Tiles widget and rename it Mission Tiles. This Stack Box will order the mission tiles from left to right.
The background layout is complete. The mission selection screen should look pretty empty at this stage.
Next, you will lay out the three mission selection tiles and build them inside the Stack Box widget. You will also add a Character texture to the design to add visual interest.Mission 1 Tile Design
Mission tile design can provide information on the level and objectives and feature statistics about player objectives, and can even track the player’s progress in those objectives. This tile example provides a more simplistic design. There is a background texture that shows a representation of the level, a mission number, and a start button. Using a series of Stack Boxes provides a way to lay out widgets left to right or up and down. When you have a vertical or horizontal layout, a Stack box helps to keep the layout consistent.All three Mission tiles follow the same design pattern. Follow the directions below to build all three selection tiles.
Drag an Overlay widget into the Grid Panel in the Hierarchy panel and rename it Mission 1. This becomes a bucket that contains all the design elements for the Mission 1 tile.
Select the Mission 1 widget in the Hierarchy panel to open its options in the Details panel.
Under the Slot (Stack Box Slot) option, use the following Padding settings:
Left = 0.0
Top = 0.0
Right = 24.0
Bottom = 0.0
Drag an Image widget into the Mission 1 widget in the Hierarchy panel and rename it Mission1Image. This widget is the visual representation of Mission1.
Select Mission1Image in the Hierarchy panel to open its options in the Details panel.
Under the Slot (Stack Box Slot) options, use the following settings:
Horizontal Alignment = Full Horizontal
Vertical Alignment = Full Vertical
Under the Appearance options, change the following settings:
Image = Misison 1 texture
Image Size:
X = 256.0
Y = 256.0
Settling the image size provides another layer of control over the tile design.
Ordering the Tile Contents
Drag a Stack Box widget into the Mission 1 widget and rename it M1Content.
Select M1Content in the Hierarchy panel to open its options in the Details panel.
Under the Slot (Overlay Slot) options, change the following settings:
Horizontal Alignment = Central Alignment
Vertical Alignment = Central Alignment
This causes all the Stack Box’s child widgets to align in the center.
Under the Behavior option, set Orientation to Vertical. This causes all child widgets to stack vertically.
Drag an Overlay widget into M1Content and rename it M1Header. This overlay acts as a bucket for all the header assets and formats them according to the Overlay’s settings.
Select M1Header in the Hierarchy panel to open its options in the Details panel.
Under Slot (Stack Box Slot), change the following options:
Padding:
Left = 0.0
Top = 0.0
Right = 0.0
Bottom = 128.0
Size = Auto
Horizontal Alignment = Center Alignment
Vertical Alignment = Full Vertical
The unique padding settings provide padding on the right side of the Mission 1 tile.
Styling Mission Tile Text
Drag an Image widget into M1Header and change its name to M1Stroke.
Select M1Stroke in the Hierarchy panel to open its options in the Details panel.
Under Slot (Overlay Slot), set the alignment to Full Horizontal and Full Vertical.
Under Appearance options, use the following settings:
Image = Slice material
Image Size:
X = 200.0
Y = 32.0
Drag a Text Box into the M1Header widget and rename the widget, Mission_1.
Select the Mission_1 text widget in the Hierarchy panel to open its options in the Details panel.
Under Slot (Overlay Slot) options, use the following alignment settings:
Horizontal Alignment = Central Alignment
Vertical Alignment = Top Alignment
Change the Text to Mission 1.
From the Brush > Image tool, open the Color Picker and choose your accent color for the text.
Under Font set the following options:
Typeface = Bold
Size = 25.0
Letter Spacing = 65
Skew Amount = 0.28
Under Outline Settings set the following options:
Outline Size = 1
Separate Fill Alpha = Check
Apply Outline to Drop Shadow = Check
Outline Color = Select your main color from the Color Picker tool
Change the Shadow Color to your main color from the Color Picker tool. The font should look slightly 3D and have a distinct style different from the callout text.
Adding a Start Button
Drag a Quiet Button widget into the M1Content widget and rename it, START_M1_Button.
Select the START_M1_Button in the Hierarchy panel to open its options in the Details panel.
Change the button’s Text to START.
Under the Slot (Stack Box Slot) options, set the Min Height to 56. This shortens the height of the button.
Check Selection > Selectable. This makes the button selectable to the player.
Under Input, set the following options:
Touch Method = Down
Press method = Button Press
Use the steps to build the layout for Mission 2 and Mission 3.
Before you add the Mission 2 and Mission 3 tiles, the design should look like the picture below.
After all the mission tiles are complete, add a character to the design to give the UI some visual interest.
Add a Character Texture
Adding a character texture to the UI pulls in all the colors chosen for the design and adds to the UIs visual style. Remember to use the power-of-two and ensure the texture you use is a high quality that can scale to any size.
Drag an Image widget into the Body widget and rename it Character.
Select the Character widget in the Hierarchy panel to open its options in the Details panel.
Under Appearance, use the following settings:
Brush > Image = Character texture
Image Size:
X = 700
Y = 700
Under Slot (Grid Slot) options, use the following settings:
Horizontal Alignment = Right Alignment
Vertical Alignment = Full Vertical
Nudge = Use the X and Y axis tools to precisely place the character texture into place.
Once the mission section is complete, you’re ready to hook up the functionality of the buttons in your UI.
Step 4: Add a Viewmodel
A Viewmodel controls player information through a list of functions and provides a specific way to bind UMG Widgets to Creative devices. There is a specific Viewmodel that works with buttons, the CreativeModalDialogViewmodel. This Viewmodel only works with the Modal Dialog Variant Widget, and provides numerous button functions.
To use the Viewmodel, do the following:
Open the Windows menu from the Main menu bar.
Select Viewmodels from the dropdown menu. The CreativeModalDialogViewmodel panel automatically docs in the Widget Editor window.
All the button functions are added to the widget. Now you have to add the bindings to make the buttons function.
Step 5: Add Devices
Once the mission areas are set up, each area needs its own Teleporter device set up to receive the player. A Pop-Up Dialog device takes the Modal Dialog Variant widget and shows the widgets UI when triggered.
Pop-Up Dialog Device
Start by adding a Pop-Up Dialog device to the project. Modify its options, then add the Modal Dialog Variant widget to the device.
Drag a Pop-Up Dialog device into the viewport.
In the Details panel, set the following User Options:
Description = Mission Select Screen
Auto Display = Game Start
Response Type = 3 Buttons
These options identify the widget, determine when the UI shows in the HUD and the number of buttons attached to the widget.
Under the Advanced options, set the following options:
Default back button = None
Button 1 Text = START
Button 2 Text = START
Button 3 Text = START
Mask background = Check
Enabled During Phase = Gameplay Only
Scroll down to Modal Widget > Template Override Class and select your Mission_Select_UI widget from the dropdown menu.
Scroll up to User Options - Functions and under Show, open an Array Element.
Add the Player 1 Spawn Pad to the top field.
Select On Player Spawned for the Spawn Pad function.
Teleporter Devices
To reduce development time, create the first teleporter device and modify its options, then copy the device and put the additional devices in their respective mission areas.
Drag a Teleporter device into the viewport.
In the Details panel under User Options, uncheck Teleporter Rift Visible and Play Visual Effects.
Scroll down to User Options - Functions and under Teleport, open an Array Element.
Add the Pop-Up Dialog to the top field.
Select On Responding Button 1.
Duplicate the Teleporter device 2 times.
In each of the additional Teleporter’s User Options - Functions > Teleport > Pop-up Dialog Device functions, change the function to the corresponding button (On Responding Button 2, On Responding Button 3).
To start a mission, the player clicks the button associated with a mission area then is teleported to the selected mission area. To create this functionality, you will bind the button functionality to the buttons on the selection screen.
Step 6: View Bindings
View Bindings adds the logic that binds the device and widget function together.
In this example, the buttons are bound to the Teleporter devices through the Teleport function. When the player selects a mission, clicking the START button activates the connected teleporter and teleports the player to that mission area.
All buttons added to the Hierarchy are numbered. This makes it easy when binding the button function to the device.
To add the bindings, do the following:
Select the Start_Mission_1_Button in the Hierarchy panel to highlight it, then select View Bindings from the bottom toolbar. The View Bindings window opens with the Quiet Button already selected.
Select +Add Widget Start_Mission_1_Button. This creates a binding view underneath.
Select the left field that contains the Start_Mission_1_Button and select On Clicked > Event from the dropdown menu. The On Clicked event is added to the Quiet Button.
Select the right field next, and select CreativeModalDialogViewmodel > Response > Select from the dropdown menu. This adds a Response function to the button’s On Clicked event.
In the Response dropdown menu, select Button 1. The function is bound to the first Quiet Button.
Repeat these steps to bind the next two buttons.
At this point, all buttons should be bound to the teleporters, and the Mission Selection screen should appear when the player spawns into the game at the game start.
Result
The last step is to playtest the project to make sure that the UI works as intended. Launch a session, then the Mission Selection screen should appear after the player spawns onto the island, and the player should teleport to the mission selected from the UI.
On Your Own
There are a few ways you can change the design of the Mission Selection screen to make it unique to your own project.
You could change the background mission tile to a material instead of a texture. This can give the mission screen a different look.
You could add a tracker to each mission to track player statistics, or collected objects.
You could add a Round Settings device to respawn players and bring the Mission Selection screen back so players can select the other missions they haven’t played yet, and make selected missions unavailable after being successfully completed.
