Skip to main content

Post-matchmaking UI - Quick match with peer-to-peer - (Unity module)

Last updated on November 25, 2024
info

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.

Unity Byte Wars: P2P Quick Match Lobby Prefab Preview

note

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.

Unity Byte Wars: P2P Quick Match - Team Entry Prefab

Player entry UI

To display team member information (such as usernames and avatars), this UI is used.

Unity Byte Wars: P2P Quick Match - Player Entry Prefab

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.

Unity Byte Wars: P2P Quick Match - Pause Menu 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.

Unity Byte Wars: P2P Quick Match - Game Over Menu 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