Add match session browser menu - Browse dedicated server joinable sessions - (Unity module)

Last updated on June 12, 2024

What's on the menu​

A Unity user interface (UI) prefab for browsing match sessions has been prepared for you. You will use a starter version of this UI so you can follow along with this tutorial, adding code to it from scratch. The starter UI is available in the Resources section and consists of the following files:

  • BrowseMatchMenuCanvas_Starter.cs: A C# that contains most of the match session browsing implementation. This class connects UI and the AccelByte Gaming Services (AGS) Game SDK service wrapper class to call its API.
    • CS file: Assets/Resources/Modules/MatchSessionDS/Scripts/UI/BrowseMatchMenuCanvas_Starter.cs
  • BrowseMatchMenuCanvas_Starter.prefab: A GameObject prefab based on the Canvas Panel UI GameObject.
    • Prefab file: Assets/Resources/Modules/MatchSessionDS/Prefabs/UI/BrowseMatchMenuCanvas_Starter.prefab

Browse match session canvas​

The prefab you will use to implement browsing match sessions is BrowseMatchMenuCanvas_Starter.prefab. The buttons and panels are already referenced in BrowseMatchMenuCanvas_Starter.cs. In BrowseMatchMenuCanvas_Starter class, the Start function will look like the code below. This codes is for UI setup, setting the buttons callback, and setting up event listeners. The last line in Start is for retrieving browsable match sessions.

private void Start()
{
    browseMatchSessionWrapper_Starter = TutorialModuleManager.Instance.GetModuleClass<BrowseMatchSessionWrapper_Starter>();
    matchSessionDSWrapper = TutorialModuleManager.Instance.GetModuleClass<MatchSessionDSWrapper_Starter>();

    backButton.onClick.AddListener(MenuManager.Instance.OnBackPressed);
    refreshBtn.onClick.AddListener(BrowseMatchSession);
    scrollRect.onValueChanged.AddListener(OnScrollValueChanged);
    BrowseMatchSessionEventListener.Init(gameSessionsList);
    BrowseMatchSessionEventListener.OnUpdate = OnGameSessionUpdated;
    GameManager.OnDisconnectedInMainMenu += OnDisconnectedFromMainMenu;
    BrowseMatchSession();
}

Here is the preview of the browse match session canvas. You will use it to display available game session entries.

Preview of the browse match session Unity Byte Wars joinable sessions dedicated server

Match item canvas​

The list of match sessions is displayed using a prefab component named MatchSessionItem.prefab. This panel presents necessary information of sessions. The prefab leverages the MatchSessionItem.cs script to update the user interface with provided data.

Preview of the match item Unity Byte Wars joinable sessions dedicated server

Ready the UI​

In this section, you will learn how to implement UI functionality before calling the AGS Game SDK API to browse match sessions.

  1. Open BrowseMatchMenuCanvas_Starter and modify OnBrowseMatchSessionFinished to handle the data returned from the function to browse match sessions as shown below.

    private void OnBrowseMatchSessionFinished(BrowseMatchResult result)
    {
        if (String.IsNullOrEmpty(result.ErrorMessage))
        {
            HideLoadingBackToMainPanel();
            if (result.Result.Length<1)
            {
                noMatchFoundInfo.SetActive(true);
            }
            else
            {
                noMatchFoundInfo.SetActive(false);
                RenderResult(result.Result);
            }
        }
        else
        {
            ShowError(result.ErrorMessage);
        }
    }

  2. To handle pagination received from the AGS Game SDK API, modify the OnScrollValueChanged function to call the starter wrapper class as shown below.

    private void OnScrollValueChanged(Vector2 scrollPos)
    {
        //scroll reach bottom
        if (scrollPos.y <= 0)
        {
            browseMatchSessionWrapper_Starter.QueryNextMatchSessions(OnNextPageMatchSessionsRetrieved);
        }
    }

  3. To handle the data retrieved from the next page of pagination, modify the OnNextPageMatchSessionsRetrieved function as shown below.

    private void OnNextPageMatchSessionsRetrieved(BrowseMatchResult nextPageResult)
    {
        if (String.IsNullOrEmpty(nextPageResult.ErrorMessage))
        {
            RenderResult(nextPageResult.Result, loadedModels.Count);
        }
        else
        {
            ShowError(nextPageResult.ErrorMessage);
        }
    }

  4. In the Unity Editor, open Assets/Resources/Modules/MatchSessionDS/MatchSessionWithDSAssetConfig.asset and tick the Is Starter Active checkbox. This will switch the script that's handling the UI from using BrowseMatchMenuCanvas to using BrowseMatchMenuCanvas_Starter.

  5. Play the game in the Editor. If your implementation was successful, when you navigate to the Browse Match Menu, you will see this log:

    [BrowseMatchMenuCanvas_Starter.cs] [BrowseMatchSession] [Log] [46] - Browse Match Session not yet implemented

Resources​

Last updated on

On this page