Add game mode selection UI - Introduction to Session - (Unity module)

Last updated on October 24, 2024

What's on the menu​

In this section, you will learn how to prepare the user interface (UI) you will use to create and leave a session. The UI elements are available in the Resources section and consist of the following files:

  • SessionMenuHandler_Starter.cs: A C# script that will contain most of the implementation.
    • CS file: Assets/Resources/Modules/SessionEssentials/Scripts/UI/SessionMenuHandler_Starter.cs
  • SessionEssentialsMenuCanvas_Starter.prefab: A prefab that contains the UI elements.
    • Prefab file: Assets/Resources/Modules/SessionEssentials/Prefabs/SessionEssentialsMenuCanvas_Starter.prefab

Take a look at more details on how the UI is constructed.

Session menu canvas​

Below is a preview of the SessionEssentialsMenuCanvas_Starter.prefab. This prefab displays information about the session ID and a button to leave a session.

  • The SessionEssentialsMenuCanvas_Starter.prefab UI has several panels which represent the matchmaking states.

    • Default: showing buttons of available game modes.
    • Creating: showing a message that session creation is in process and a button to cancel the session creation.
    • Joining: showing a message that it's trying to join the game session.
    • Joined: showing a message that a player has joined a game session.
    • Failed: showing a message that the session creation has failed.

Default state​

This state displays buttons of available game modes in the Byte Wars project. The buttons of each game mode can be seen in the QuickPlayMenuCanvas_Starter prefab.

Image of the default state of the QuickPlayMenuCanvas_Starter prefab in the Unity prefab viewer Unity Byte Wars introduction to session

Creating state​

This state displays a message that session creation is in process. It also displays a button to cancel the session creation process.

Image of the creating state of the QuickPlayMenuCanvas_Starter prefab in the Unity prefab viewer Unity Byte Wars introduction to session

Joining state​

This state displays a message that the player is attempting to a game session.

Image of the joining state of the QuickPlayMenuCanvas_Starter prefab in the Unity prefab viewer Unity Byte Wars introduction to session

Joined state​

This state displays a message that the player has joined a game session.

Image of the joined state of the QuickPlayMenuCanvas_Starter prefab in the Unity prefab viewer Unity Byte Wars introduction to session

Failed state​

This state displays a message that the session creation process has failed.

Image of the failed state of the QuickPlayMenuCanvas_Starter prefab in the Unity prefab viewer Unity Byte Wars introduction to session

What's in the Starter Pack​

The SessionEssentialsMenuCanvas_Starter.prefab is responsible for showing the several states in creating a session.

Ready the UI​

In this section, you will learn how to prepare the UI prefabs.

  1. Open the SessionMenuHandler_Starter.cs file and go to a function called OnEliminationButtonClicked. Update the function by adding a log message like shown below.

    private void OnEliminationButtonClicked()
    {
        BytewarsLogger.Log($"create a session functionality not yet implemented");
        ...
    }

  2. Update the OnLeaveSessionButtonClicked() function with the following code:

    private void OnLeaveSessionButtonClicked()
    {
        BytewarsLogger.Log($"leave session functionality not yet implemented");
        ...
    }

  3. In Unity, go to Assets/Resources/Modules/SessionEssentials. There, you will find an asset config called SessionEssentialsAssetConfig.asset. Open it and enable Is Starter Active. This will activate the starter UI, allowing you to navigate through it when you play the game.

    Image of the Is Starter Active option in the SessionEssentialsAssetConfig file in the Unity Inspector Unity Byte Wars introduction to session

  4. Play the game in the editor, log in, and if your implementation was successful, you will be able to navigate to Play Online > Create A Session > Create Elimination, a Leave button will be there, and you will see the log output you created earlier.

    [SessionMenuHandler_Starter.cs] [OnEliminationButtonClicked] [Log] [124] - create a session functionality not yet implemented
    [SessionMenuHandler_Starter.cs] [OnLeaveSessionButtonClicked] [Log] [130] - leave session functionality not yet implemented

Resources​

Last updated on

On this page