Post-matchmaking UI - Quick match with peer-to-peer - (Unity module)
Browsing P2P sessions is not supported in WebGL builds due to the AccelByte Gaming Services (AGS) SDK for Unity lacking the P2P functionality for WebGL.
Match lobby UI
The match lobby user interface (UI) is a predefined UI that was created using a canvas and a panel. This UI will be displayed when the players have successfully connected to the game server. It displays the information about the teams and their members, such as usernames and avatars. You can find this UI located in /Assets/Resources/Modules/MainMenu/MatchLobby/MatchLobbyMenuCanvas.prefab
.
The functionality to display player usernames and avatars has been provided for you so you can focus on implementing matchmaking.
The match lobby UI has two main buttons: the StartButton to travel the players to the gameplay level, and the QuitButton to quit the game. You can find the declarations for these buttons in /Assets/Scripts/UI/MainMenu/MatchLobbyMenu.cs
.
private void Start()
{
startButton.onClick.AddListener(StartGame);
quitButton.onClick.AddListener(LeaveSessionAndQuit);
}
To display the teams and their members, the match lobby UI uses the following sub-UIs:
Team entry UI
The match lobby UI will show one or multiple teams depending on the game mode. To distinguish the team members, it uses the team entry UI to group the players.
Player entry UI
To display team member information (such as usernames and avatars), this UI is used.
Pause menu UI
When your players enter the gameplay level, they will be able to open the pause menu. You can find this UI located in /Assets/Resources/Modules/MainMenu/GamePlay/PauseMenuCanvas.prefab
.
The pause menu UI has three main buttons: ResumeBtn
to close the pause menu, RestartBtn
to restart the game (which will only be displayed in local multiplayer), and QuitBtn
to quit the game. You can find the declarations for these buttons in /Assets/Scripts/UI/Gameplay/PauseMenuCanvas.cs
.
void Start()
{
...
resumeBtn.onClick.AddListener(OnClickResumeBtn);
restartBtn.onClick.AddListener(GameManager.Instance.RestartLocalGame);
quitBtn.onClick.AddListener(OnQuitBtnClick);
}
Game over UI
When the game is over, this UI will be displayed. You can find this UI located in /Assets/Resources/Modules/MainMenu/GamePlay/GameOverMenuCanvas.prefab
.
The game over UI has two main buttons: playAgainBtn
to play the game again (which will only be displayed in local multiplayer), and quitBtn
to quit the game. You can find the declarations for these buttons in the /Assets/Scripts/UI/Gameplay/GameOverMenuCanvas.cs
.
private void Start()
{
playAgainBtn.onClick.AddListener(OnPlayAgainButtonClicked);
quitBtn.onClick.AddListener(OnQuitButtonClicked);
}
Resources
- Files used in this tutorial sub-module section.
- Assets/Scripts/UI/MainMenu/MatchLobbyMenu.cs
- Assets/Scripts/UI/Gameplay/PauseMenuCanvas.cs
- Assets/Scripts/UI/Gameplay/GameOverMenuCanvas.cs
- Assets/Scripts/UI/TeamEntry.cs
- Assets/Scripts/UI/PlayerEntry.cs
- Assets/Resources/Modules/MainMenu/GamePlay/PauseMenuCanvas.prefab
- Assets/Resources/Modules/MainMenu/GamePlay/GameOverMenuCanvas.prefab
- Assets/Resources/Modules/MainMenu/MatchLobby/MatchLobbyMenuCanvas.prefab
- Assets/Prefabs/UI/TeamEntry.prefab
- Assets/Prefabs/UI/PlayerEntry.prefab