ゲームモード選択 UI を追加する - セッション入門 - (Unity モジュール)

Last updated on October 23, 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.

Creating state

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

Joining state

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

Joined state

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

Failed state

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

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.

   

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

• The files used in this tutorial section are available in the Unity Byte Wars GitHub repository.
  • Assets/Resources/Modules/SessionEssentials/SessionEssentialsAssetConfig.asset
  • Assets/Resources/Modules/SessionEssentials/Prefabs/SessionEssentialsMenuCanvas_Starter.prefab
  • Assets/Resources/Modules/SessionEssentials/Scripts/UI/SessionMenuHandler_Starter.cs
  • Assets/Resources/Modules/SessionEssentials/Scripts/UI/SessionMenuHandler.cs
  • Assets/Resources/Modules/SessionEssentials/Prefabs/SessionEssentialsMenuCanvas.prefab