Creating the UI widgets
To create UI widgets, first, select the All | Content | TopDown | Blueprints folder (or wherever you want to place the new widgets in the Content Drawer). Then, right-click in the empty area and choose User Interface | Widget Blueprint from the pop-up menu:
Figure 11.2 – Creating a UI widget from the editor pop-up menu
Now, click the User Widget button to pick the root widget:
Figure 11.3 – Clicking the User Widget button to create the widget
After picking the root widget, you should see a new item named NewWidgetBlueprint in the folder:
Figure 11.4 – The new widget blueprint
Rename the new widget to the name you want – I will choose BP_LobbyWidget. Then, repeat these steps and create two more widgets called BP_HUDWidget and BP_GameOver.
Now, let’s edit these widgets’ settings.
Creating BP_LobbyWidget
With BP_LobbyWidget created, double-click to open it in the Widget Editor. Now, you can design the user interface, as seen in Figure 11.5. To do this, follow these steps:
- Drag and drop a Canvas Panel property onto the screen design area.
- Place an Image control onto the screen with the following settings:
- Name:
BGImage - Anchors:
Stretch Both - Alignment:
(0.0, 0.0) - Brush | Image:
LobbyBG(you can downloadLobbyBG.pngfrom this book’sGitHub/PangaeaAssetsfolder and import it into the project)
- Name:
- Add a button to the screen with the following settings:
- Name:
ButtonHost - Alignment:
(0.0, 0.0) - Anchors:
Center - Position X:
1000.0 - Position Y:
500.0 - Size X:
500.0 - Size Y:
120.0
- Name:
- Add a TextBox control as the child of ButtonHost with the following settings:
- Horizontal Alignment:
CenterAlign Horizontally - Vertical Alignment:
CenterAlign Vertically - Text:
"Host" - Color and Opacity (RGBA):
(0.04, 0.15,0.5, 1.0) - Font:
- Font Family:
Roboto - Type Face:
Bold - Size:
48
- Font Family:
- Horizontal Alignment:
- Add one more button to the screen with the following settings:
- Name:
ButtonJoin - Anchors:
Center - Alignment:
(0.0, 0.0) - Position X:
1000.0 - Position Y:
700.0 - Size X:
500.0 - Size Y:
120.0
- Name:
- Add a TextBox control as the child of ButtonJoin and set it up with the same settings as step 4, except substitute Host with Join.
- Add an EditableTextBox control to the screen with the following settings:
- Name:
InputAddress - Anchors:
Center - Alignment:
(0.0, 0.0) - Position X:
1000.0 - Position Y:
700.0 - Size X:
500.0 - Size Y:
120.0 - Text:
"127.0.0.1"(the default is the local server IP address) - Justfication:
AlignText Center
- Name:
Again, you can see the result in Figure 11.5:
Figure 11.5 – Designing BP_LobbyWidget in the Widget Editor
Creating BP_HUDWidget
Now, with BP_HUDWidget created, open it in the Widget Editor. Then, design the user interface as seen in Figure 11.6. To do so, follow these steps:
- Drag and drop a Canvas Panel property onto the screen design area.
- Place a TextBox control in the top-left corner with the following settings:
- Name:
Timer - Anchors:
Top-left - Alignment:
(0.0, 0.0) - Position X:
50.0 - Position Y:
50.0 - Size X:
300.0 - Size Y:
60.0 - Justification:
AlignText Left - Color and Opacity (RGBA):
(0.04, 0.15,0.5, 1.0) - Font:
- Font Family:
Roboto - Type Face:
Bold - Size:
48
- Font Family:
- Name:
- Add a button to the screen with the following settings:
- Name:
ButtonLeave - Anchors:
Top-right - Alignment:
(1.0, 0.0) - Position X:
-50.0 - Position Y:
50.0 - Size X:
200.0 - Size Y:
80.0
- Name:
- Add a TextBox control as the child of ButtonLeave with the following settings:
- Horizontal Alignment:
CenterAlign Horizontally - Vertical Alignment:
CenterAlign Vertically - Text:
"Leave" - Color and Opacity (RGBA):
(0.04, 0.15,0.5, 1.0) - Font:
- Font Family:
Roboto - Type Face:
Bold - Size:
48
- Font Family:
- Horizontal Alignment:
Again, you can see the result in Figure 11.6:
Figure 11.6 – Designing BP_HUDWidget in the Widget Editor
Creating BP_GameOverWidget
For the last widget, with BP_GameOverWidget created, open it in the Widget Editor. Then, design the user interface as seen in Figure 11.7. To do so, follow these steps:
- Drag and drop a Canvas Panel property onto the screen design area.
- Place an Image control on the screen with the following settings:
- Name:
Background - Anchors:
Stretch Both - Alignment:
(0.0, 0.0) - Brush | Image:
None - Color and Opacity (RGBA):
(0.0, 0.0,0.0, 0.5)
- Name:
- Drag and drop another Image control on the screen with the following settings:
- Name:
Panel - Anchors:
Center - Position X:
0.0 - Position Y:
0.0 - Alignment:
(0.5, 0.5) - Brush | Image:
None - Color and Opacity (RGBA):
(0.2, 0.2,0.2, 0.5)
- Name:
- Add a TextBox control to the screen with the following settings:
- Name:
Title - Anchors:
Center - Alignment:
(0.5, 0.5) - Position X:
0.0 - Position Y:
-200.0 - Size X:
800.0 - Size Y:
100.0 - Justification:
AlignText Left - Color and Opacity (RGBA):
(1.0, 1.0,1.0, 1.0) - Font:
- Font Family:
Roboto - Type Face:
Bold - Size:
64
- Font Family:
- Name:
- Add one more TextBox control to the screen with the following settings:
- Name:
Result - Anchors:
Center - Alignment:
(0.5, 0.5) - Position X:
0.0 - Position Y:
0.0 - Size X:
800.0 - Size Y:
80.0 - Justification:
AlignText Left - Color and Opacity (RGBA):
(1.0, 1.0,1.0, 1.0) - Font:
- Font Family:
Roboto - Type Face:
Bold - Size:
48
- Font Family:
- Name:
- Add a button to the screen with the following settings:
- Name:
ButtonLobby - Anchors:
Center - Alignment:
(0.5, 0.5) - Position X:
0.0 - Position Y:
200.0 - Size X:
600.0 - Size Y:
80.0
- Name:
- Add a TextBox control as the child of ButtonLobby with the following settings:
- Horizontal Alignment:
CenterAlign Horizontally - Vertical Alignment:
CenterAlign Vertically - Text:
"Goto Lobby" - Color and Opacity (RGBA):
(0.0, 0.0,0.0, 1.0) - Font:
- Font Family:
Roboto - Type Face:
Bold - Size:
32
- Font Family:
- Horizontal Alignment:
The results can be seen in Figure 11.7:
Figure 11.7 – Designing BP_GameOverWidget in the Widget Editor
While designing the three UI widgets, we added four buttons to the screen: ButtonHost, ButtonJoin, ButtonLeave, and ButtonLobby. To make these four buttons functional, we need to create three functions (StartListenServer, JoinAsClient, and LeaveGame) and hook them to these button events (ButtonLeave and ButtonLobby share the LeaveGame function).
