Match creation UI - Create joinable sessions with peer-to-peer - (Unity module)

Last updated on July 28, 2025
備考

AccelByte Gaming Services (AGS) SDK for Unity does not support P2P on WebGL. This module cannot be used in WebGL builds.

What's on the menu​

In this section, you'll learn how to prepare the UI menus for creating and browsing game sessions. These UIs are defined in the following classes:

  • CreateMatchSessionMenu: A C# class used to display the game mode selection before creating game sessions.

    • C# file: Assets/Resources/Modules/Play/MatchSessionEssentials/Scripts/UI/CreateMatchSessionMenu.cs
    • Prefab file: Assets/Resources/Modules/Play/MatchSessionEssentials/Prefabs/CreateMatchSessionMenu.prefab

  • CreateMatchSessionServerTypeMenu: A C# class used to display the server type selection (dedicated server or peer-to-peer) before creating game sessions.

    • C# file: Assets/Resources/Modules/Play/MatchSessionEssentials/Scripts/UI/CreateMatchSessionServerTypeMenu.cs
    • Prefab file: Assets/Resources/Modules/Play/MatchSessionEssentials/Prefabs/CreateMatchSessionServerTypeMenu.prefab

  • CreateMatchSessionP2PMenu_Starter: A C# class used to display game session states with a peer-to-peer, such as creating and joining the session.

    • C# file: Assets/Resources/Modules/Play/MatchSessionP2P/Scripts/UI/CreateMatchSessionP2PMenu_Starter.cs
    • Prefab file: Assets/Resources/Modules/Play/MatchSessionP2P/Prefabs/CreateMatchSessionP2PMenu_Starter.prefab

  • BrowseMatchMenu: A C# class used to display a list of joinable game sessions.

    • C# file: Assets/Resources/Modules/Play/MatchSessionEssentials/Scripts/UI/BrowseMatchMenu.cs
    • Prefab file: Assets/Resources/Modules/Play/MatchSessionEssentials/Prefabs/BrowseMatchMenu.prefab

  • BrowseMatchEntry: A C# class used to display individual joinable game session entries.

    • C# file: Assets/Resources/Modules/Play/MatchSessionEssentials/Scripts/UI/BrowseMatchEntry.cs
    • Prefab file: Assets/Resources/Modules/Play/MatchSessionEssentials/Prefabs/BrowseMatchEntry.prefab

Take a look for more details on how these UIs are constructed.

Create match session menu​

Below is a preview of the CreateMatchSessionMenu prefab. This prefab contains buttons to select a game mode before creating game sessions.

Create match session menu preview Unity Byte Wars joinable sessions peer-to-peer

The components used in this menu are defined in the CreateMatchSessionMenu class. When one of the game mode buttons is clicked, the selected game mode is stored in the SelectedGameMode property.

public static InGameMode SelectedGameMode { get; private set; }

[SerializeField] private Button eliminationButton;
[SerializeField] private Button teamDeathMatchButton;
[SerializeField] private Button backButton;

Create match session server type menu​

Below is a preview of the CreateMatchSessionServerTypeMenu prefab. This prefab contains buttons to select a server type before creating game sessions.

Create match session server type menu preview Unity Byte Wars joinable sessions peer-to-peer

The components used in this menu are defined in the CreateMatchSessionServerTypeMenu class. When one of the server type buttons is clicked, it will open the next menu based on the selected type. For example, if the peer-to-peer button is clicked, it will instantiate the CreateMatchSessionP2PMenu_Starter prefab.

[SerializeField] private Button dedicatedServerButton;
[SerializeField] private Button peerToPeerButton;
[SerializeField] private Button backButton;

Create match session P2P menu​

The CreateMatchSessionP2PMenu_Starter prefab contains a state switcher to display a specific menu based on the game session creation or join state. To switch the menu state, it uses the component defined below in the CreateMatchSessionP2PMenu_Starter class.

[SerializeField] private MatchSessionStateSwitcher stateSwitcher;

Below is the list of states included in this menu.

  • Create match state

    This state displays a message indicating that the request to create a game session is being sent. It also display a button to cancel the process.

    Create match session P2P menu create match state preview Unity Byte Wars joinable sessions peer-to-peer

  • Join match state

    This state displays a message indicating that the request to join a game session is being sent. It also display a button to cancel the process.

    Create match session P2P menu join match state preview Unity Byte Wars joinable sessions peer-to-peer

  • Leave match state

    This state displays a message indicating that the request to create or join a game session is being canceled.

    Create match session P2P menu leave match state preview Unity Byte Wars joinable sessions peer-to-peer

  • Error state

    This state displays any error messages that occurred during the game session process. It also shows a button to retry creating or joining the game session.

    Create match session P2P menu error state preview Unity Byte Wars joinable sessions peer-to-peer

Browse match menu​

Below is a preview of the BrowseMatchMenu prefab. This prefab displays a list of available game sessions to join.

Browse match menu preview Unity Byte Wars joinable sessions peer-to-peer

The components used in this menu are defined in the BrowseMatchMenu class.

[SerializeField] private AccelByteWarsWidgetSwitcher widgetSwitcher;
[SerializeField] private BrowseMatchEntry sessionEntryPrefab;
[SerializeField] private Transform sessionListPanel;
[SerializeField] private ScrollRect sessionListScrollRect;
[SerializeField] private GameObject listLoaderPanel;
[SerializeField] private Button refreshButton;
[SerializeField] private Button backButton;

When the menu is displayed or the refresh button is clicked, it will trigger the delegate below. You will use this delegate to query game sessions to be displayed in this menu.

public static event BrowseMatchHandler OnBrowseP2PMatch = delegate { };

Browse match entry​

Below is a preview of the BrowseMatchEntry prefab. This prefab displays an individual game session entry to join. It shows information such as the session owner, game mode, server type, and how many players are in the session.

Browse match entry preview Unity Byte Wars joinable sessions peer-to-peer

The components used in this menu are defined in the BrowseMatchEntry class.

[SerializeField] private AccelByteWarsAsyncImage sessionOwnerImage;
[SerializeField] private TMP_Text sessionOwnerText;
[SerializeField] private TMP_Text gameModeText;
[SerializeField] private TMP_Text serverTypeText;
[SerializeField] private TMP_Text memberCountText;
[SerializeField] private Button joinButton;

When the join button is clicked, it will trigger the delegate below. You will use this delegate to send a request to join the selected game session from the browse match menu.

public static event JoinMatchHandler OnJoinP2PMatchButtonClicked = delegate { };

Ready the UI​

In this section, you will prepare the menus mentioned earlier to start integrating the game session feature.

  1. Open the CreateMatchSessionP2PMenu_Starter class and create the function below. Later, you will use this function to send the game session creation request. For now, add the code below to switch the menu to the create match state.

    private void CreateMatchSession()
    {
        stateSwitcher.SetState(MatchSessionMenuState.CreateMatch);
    }

  2. You will also use the CreateMatchSessionP2PMenu_Starter class to join a game session. So let's declare a helper variable below to store the game session ID to join.

    private BrowseSessionModel sessionToJoin = null;

  3. Next, create the new function below. Later, you will use this function to send the request to join a game session. For now, add the code below to switch the menu to the join match state.

    private void JoinMatchSession(string sessionId)
    {
        stateSwitcher.SetState(MatchSessionMenuState.JoinMatch);
    }

  4. Create the new function below. Later, you will use this function to send the request to leave a game session. For now, add the code below to switch the menu to the leave match state.

    private void LeaveMatchSession(string sessionId)
    {
        stateSwitcher.SetState(MatchSessionMenuState.LeaveMatch);
    }

  5. Replace the pre-defined OnEnable() function with the code below to determine whether to create or join a game session when the menu is displayed. It also rebinds the retry and cancel buttons accordingly.

    private void OnEnable()
    {
        if (sessionToJoin == null)
        {
            stateSwitcher.OnRetryButtonClicked = CreateMatchSession;
            stateSwitcher.OnCancelButtonClicked = () => LeaveMatchSession(AccelByteWarsOnlineSession.CachedSession.id);
            CreateMatchSession();
        }
        else
        {
            stateSwitcher.OnRetryButtonClicked = () => JoinMatchSession(sessionToJoin.Session.id);
            stateSwitcher.OnCancelButtonClicked = () => LeaveMatchSession(sessionToJoin.Session.id);
            JoinMatchSession(sessionToJoin.Session.id);
        }
    }

  6. Next, replace the pre-defined Awake() function with the code below to bind the event when the join button from the browse match entry is clicked.

    private void Awake()
    {
        BrowseMatchEntry.OnJoinP2PMatchButtonClicked += (BrowseSessionModel sessionModel) =>
        {
            sessionToJoin = sessionModel;
            MenuManager.Instance.ChangeToMenu(GetAssetEnum());
        };
    }

  7. Replace the pre-defined OnDisable() function with the code below to reset any cache.

    private void OnDisable()
    {
        sessionToJoin = null;
    }

  8. In the Unity Editor, navigate to Assets/Resources/Modules/Play/MatchSessionP2P and open the MatchSessionP2PEssentialsAssetConfig.asset. Ensure the module is activated in starter mode by checking both the Is Active and Is Starter Active checkboxes.

  9. Finally, play the game in the Editor. You should be able to navigate to the main menu via Play Online > Create Match, select any game mode, and click on the Peer to Peer button. Then, the menu will switch to the create match state. Later, you will replace this behavior with the actual create and join game session request.

Resources​

に最終更新
On this page