[UE5 Multiplayer Online Tutorial] 02-Start Game Menu Control

Table of contents

step

1. Improve the start game menu control

Second, control function realization

2.1 "Start Game" button to switch interface

2.2 "Create Room" and "Join Room" button switch interface

2.3 "Create room" button

---

step

1. Improve the start game menu control

Open "UMG_Main"

 First wrap a canvas panel around the control switcher

 Then adjust the control switcher to full screen

 Move the background image control to the same level as the control switcher

 Add another canvas panel in the control switcher

Add a vertical box to this canvas panel

Add one more size box as a child of the vertical box

 Added a button to the size box to return to another canvas panel

Add another size box below the size box as a blank line

 Add another size box and add two buttons

Go ahead and add a size box

The size boxes in the horizontal box are filled with a fill ratio of 4:1:4

 Add a control toggle and vertical box to the first of the three size boxes

 Add a "Switch Text" control to the vertical box to switch the number of people, and you need to set the switching option in the "Switch Texts" array.

Similarly, add a "Switch Text" control to switch the network

 add a button

Add a text control

 After creating the panel for creating the game, start creating the panel for joining the game

 Add the following two controls

 Add another scroll box and a vertical box to display the list of rooms

 Add two text controls to the third size box to display prompt information

Second, control function realization

2.1 "Start Game" button to switch interface

We hope to click to start the game, and the interface switches to two canvas panels

 Add the following node in the graph to realize clicking the "Start Game" button to switch the control switcher to the canvas panel with index 1

 When the back button is clicked, the control switcher switches to the canvas panel with index 0

 At this point, running the game has been able to switch:

2.2 "Create Room" and "Join Room" button switch interface

Add the click events of the "Create Room" and "Join Room" buttons below, these two buttons are just used to display the canvas panel for creating a room or joining a room

 Set the background color of the button to be fully transparent when it is not activated

Also fully transparent when activated

 Modify the activation state of the button after clicking

2.3 "Create room" button

Increase the click event of the create room button

(To be continued..)