Adding UI - Login Queue - (Unity module)

Last updated on May 22, 2025

What's on the menu​

The related files are available in the Resources section and consist of the following components:

  • LoginQueueMenu_Starter.cs: A C# script where most of the implementation will be.
    • CS file: /Assets/Resources/Modules/LoginQueue/Scripts/UI/LoginQueueMenu_Starter.cs
  • LoginQueueMenu_Starter.prefab: A Unity prefab that is created from the Canvas UI GameObject.
    • Prefab file: /Assets/Resources/Modules/LoginQueue/Prefabs/LoginQueueMenu_Starter.prefab

The handler will be the one responsible to show the waiting menu and to close it when the player no longer in queue, which will make this integration work for every login integration in Byte Wars.

This login queue menu has two states:

  • In queue: the default view that shows informations regarding the queue.
  • Canceling: the loading screen indicating that the cancel request has been sent and currently waiting response.

Once the player exits the queue and successfully logs in, the game will take them to the main menu.

There are a few things already prepared for you in this login queue menu:

  • Library to enable the usage of AccelByte SDK's object.
using AccelByte.Models;
  • Current View variable with a custom setter getter to change the UI state. The variable is of an enum called UIState.
private enum UIState
{
    InQueue,
    Canceling
}

private UIState CurrentView
{
    get => CurrentView;
    set
    {
        switch (value)
        {
            case UIState.InQueue:
                inQueuePanel.SetActive(true);
                cancelingPanel.SetActive(false);
                StartCoroutine(SetSelectedGameObject(cancelLoginButton.gameObject));
                break;
            case UIState.Canceling:
                inQueuePanel.SetActive(false);
                cancelingPanel.SetActive(true);
                break;
            default:
                throw new ArgumentOutOfRangeException();
        }
    }
}
  • UI components reference that is bound to the component in the prefab.
[SerializeField] private GameObject inQueuePanel;
[SerializeField] private GameObject cancelingPanel;
[SerializeField] private TMP_Text positionInQueueText;
[SerializeField] private TMP_Text estimatedWaitingTimeText;
[SerializeField] private TMP_Text lastUpdateTimeText;
[SerializeField] private Button cancelLoginButton;
  • Reference to the starter wrapper that you will implement later on. Also the code to retrieve the reference at the start of this wrapper object.
private LoginQueueWrapper_Starter loginQueueWrapper;
private void Start()
{
    // Get wrapper reference.
    loginQueueWrapper = TutorialModuleManager.Instance.GetModuleClass<LoginQueueWrapper_Starter>();
}
  • Utility functions to update UI components.
private void SetPositionText(int position)
{
    positionInQueueText.SetText($"{position}");
}

private void SetEstimatedWaitingTimeText(int timeInSeconds)
{
    estimatedWaitingTimeText.SetText($"{timeInSeconds} Seconds");
}

private void SetLastUpdateTimeText()
{
    lastUpdateTimeText.SetText(DateTime.Now.ToString("HH:mm:ss"));
}

In Queue Panel​

The In Queue Panel is the default view that consists of four UI components:

  • positionInQueueText: displays the current player's position in the queue.
  • estimatedWaitingTimeText: displays the estimated waiting time of when the current player will be logged in.
  • lastUpdateTimeText: displays when the last update was received by the backend.
  • cancelLoginButton: allow the player to quit the queue and cancel the login attempt.

In Queue Panel Preview Unity Byte Wars

Canceling Panel​

Displays a text and an image animation indicating the cancel request is being processed.

Canceling Panel Preview Unity Byte Wars

Ready the UI​

  1. Open Byte Wars in Unity and open the LoginQueueMenu_Starter.cs file.

  2. Create a new function called LoginQueued(). This function displays the login queue information. You will use this function later as a callback when the SDK receives the login queue update info later.

    private void LoginQueued(LoginQueueTicket loginQueueTicket)
    {
        CurrentView = UIState.InQueue;
        SetPositionText(loginQueueTicket.Position);
        SetEstimatedWaitingTimeText(loginQueueTicket.EstimatedWaitingTimeInSeconds);
        SetLastUpdateTimeText();
    }

  3. Create a new function that will be trigger the cancel login. For now, this function will only transition the UI to the canceling state. You will call the actual cancel login functionality later on.

    private void CancelLogin()
    {
        CurrentView = UIState.Canceling;
    }

  4. Create a new function that will be the callback when the reponse to the cancel login was received. This function will simply transition the menu to the previous menu. In this case, it will go back to the login menu.

    private void LoginCanceled()
    {
        // Go back to the previous menu
        MenuManager.Instance.OnBackPressed();
    }

  5. Find the Start() function and replace the current implementation with the code below. This will bind the cancelLoginButton's OnClick to the CancelLogin() function that you have created.

    private void Start()
    {
        // Get wrapper reference.
        loginQueueWrapper = TutorialModuleManager.Instance.GetModuleClass<LoginQueueWrapper_Starter>();
        
        // Bind button.
        cancelLoginButton.onClick.AddListener(CancelLogin);
    }

  6. From the Project window, open Assets\Resources\Modules\LoginQueue\LoginQueueAssetConfig.asset and enable the Is Starter Active setting in the Inspector.

Since the wrapper is the one responsible to show this menu. You wouldn't notice any changes when trying the game at this point.

Resources​

に最終更新

On this page