メインコンテンツまでスキップ

Put it all together - Game client integration - (Unity module)

Last updated on March 12, 2025

Connect the UI to custom matchmaking

In this section, you learn how to connect the custom matchmaking menu with the wrapper you created previously to connect the game client to the sample matchmaking backend service.

  1. Open the CustomMatchmakingMenu_Starter class and declare the wrapper variable.

    private CustomMatchmakingWrapper_Starter customMatchmakingWrapper;
  2. Replace the StartMatchmaking() function with the code below. This code calls the wrapper function to start the matchmaking by opening a WebSocket connection to the sample matchmaking backend service.

    private void StartMatchmaking() 
    {
    widgetSwitcher.LoadingMessage = CustomMatchmakingModels.RequestMatchmakingMessage;
    widgetSwitcher.EnableCancelButton(false);
    widgetSwitcher.SetWidgetState(WidgetState.Loading);

    customMatchmakingWrapper.StartMatchmaking();
    }
  3. Next, replace the CancelMatchmaking() function with the code below. This code calls the wrapper function to cancel the matchmaking by closing the WebSocket connection from the sample matchmaking backend service.

    private void CancelMatchmaking() 
    {
    widgetSwitcher.LoadingMessage = CustomMatchmakingModels.CancelMatchmakingMessage;
    widgetSwitcher.EnableCancelButton(false);
    widgetSwitcher.SetWidgetState(WidgetState.Loading);

    customMatchmakingWrapper.CancelMatchmaking(isIntentional: true);
    }
  4. Now, create a new callback function to handle when matchmaking started. This function switches the menu to the loading state and show the finding match message.

    private void OnMatchmakingStarted() 
    {
    widgetSwitcher.LoadingMessage = CustomMatchmakingModels.FindingMatchMessage;
    widgetSwitcher.EnableCancelButton(true);
    widgetSwitcher.SetWidgetState(WidgetState.Loading);
    }
  5. Next, create another callback function to handle when matchmaking stopped. If the matchmaking is stopped normally, this function switches the menu to the normal state. Else, it switches the menu to show the error message.

    private void OnMatchmakingStopped(WebSocketCloseCode closeCode, string closeMessage)
    {
    if (closeCode == WebSocketCloseCode.Normal)
    {
    widgetSwitcher.SetWidgetState(WidgetState.Not_Empty);
    }
    else
    {
    OnMatchmakingError(closeMessage);
    }
    }
  6. Now, create another callback function to handle when matchmaking payload received. This function switches the menu to the loading state and show the payload message (e.g. match found message and server found message).

    private void OnMatchmakingPayload(CustomMatchmakingModels.MatchmakerPayload payload)
    {
    widgetSwitcher.LoadingMessage = payload.message;
    widgetSwitcher.SetWidgetState(WidgetState.Loading);
    }
  7. Then, create another callback function to handle when matchmaking error. This function switches the menu to the error state and show the error message received from the matchmaker.

    private void OnMatchmakingError(string errorMessage) 
    {
    widgetSwitcher.ErrorMessage = errorMessage;
    widgetSwitcher.SetWidgetState(WidgetState.Error);
    }
  8. When the custom matchmaking menu is displayed, initialize the wrapper variable and bind the functions you created earlier to the corresponding buttons and events. To do this, replace the OnEnable() function with the code below.

    private void OnEnable()
    {
    customMatchmakingWrapper = TutorialModuleManager.Instance.GetModuleClass<CustomMatchmakingWrapper_Starter>();

    startMatchmakingButton.onClick.AddListener(StartMatchmaking);
    backButton.onClick.AddListener(MenuManager.Instance.OnBackPressed);

    widgetSwitcher.OnRetryButtonClicked += StartMatchmaking;
    widgetSwitcher.OnCancelButtonClicked += CancelMatchmaking;
    widgetSwitcher.OnStateChanged += OnSwitcherStateChanged;
    widgetSwitcher.SetWidgetState(WidgetState.Not_Empty);

    if (customMatchmakingWrapper)
    {
    customMatchmakingWrapper.OnMatchmakingStarted += OnMatchmakingStarted;
    customMatchmakingWrapper.OnMatchmakingStopped += OnMatchmakingStopped;
    customMatchmakingWrapper.OnMatchmakingPayload += OnMatchmakingPayload;
    customMatchmakingWrapper.OnMatchmakingError += OnMatchmakingError;
    }
    }
  9. Finally, when the custom matchmaking menu is closed, clear the function bindings by replacing the OnDisable() function with the code below.

    private void OnDisable()
    {
    startMatchmakingButton.onClick.RemoveAllListeners();
    backButton.onClick.RemoveAllListeners();

    widgetSwitcher.OnRetryButtonClicked -= StartMatchmaking;
    widgetSwitcher.OnCancelButtonClicked -= CancelMatchmaking;
    widgetSwitcher.OnStateChanged -= OnSwitcherStateChanged;

    if (customMatchmakingWrapper)
    {
    customMatchmakingWrapper.OnMatchmakingStarted -= OnMatchmakingStarted;
    customMatchmakingWrapper.OnMatchmakingStopped -= OnMatchmakingStopped;
    customMatchmakingWrapper.OnMatchmakingPayload -= OnMatchmakingPayload;
    customMatchmakingWrapper.OnMatchmakingError -= OnMatchmakingError;
    }
    }

Resources