Add friend list menu - Display friend list - (Unity module)

Last updated on December 13, 2024

What's on the menu​

In this tutorial, you will learn how to prepare the user interface (UI) that you will use to display a player's friend list. You will need the following files:

  • FriendsMenuCanvas_Starter: A UI menu to display the list of friends.
    • CS file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendsMenuHandler_Starter.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/Friends/FriendsMenuCanvas_Starter.prefab
  • FriendDetailsMenuCanvas_Starter: A UI menu to display individual friend information.
    • CS file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendDetailsMenuHandler_Starter.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/FriendDetails/FriendDetailsMenuCanvas_Starter.prefab
  • FriendsEntryComponent: A UI component to display friend information, such as display name and avatar.
    • CS file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendsEntryComponentHandler.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/Friends/FriendsEntryComponent.prefab
  • FriendDetailsComponent: A UI component to display individual friend information, such as display name and avatar.
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/FriendDetails/FriendDetailsComponent.prefab

Refer to the Resources section for the links to these files.

Friends Menu Canvas​

Below is the preview of FriendsMenuCanvas_Starter.prefab. This prefab contains the following panels:

  • Default Panel: Displays default text when there are no friends.
  • Loading Panel: Displays loading animation when the game is fetching the friend list.
  • Loading Failed Panel: Displays a message when the game fails to fetch the friend list.
  • Result Content Panel: Displays the list of friends.

Friends Menu Canvas Unity Byte Wars friend list

The components used in this prefab are declared in the FriendsMenuHandler_Starter.cs script. Below are the declarations of the components used in the prefab:

[Header("Friends Component"), SerializeField] private GameObject friendEntryPrefab;
[Header("View Panels"), SerializeField] private RectTransform defaultPanel;
[SerializeField] private RectTransform loadingPanel;
[SerializeField] private RectTransform loadingFailedPanel;
[SerializeField] private RectTransform resultContentPanel;

The CurrentView property acts as a switch to show the corresponding panel based on the current view.

private FriendsView currentView = FriendsView.Default;

private FriendsView CurrentView
{
    get => currentView;
    set
    {
        defaultPanel.gameObject.SetActive(value == FriendsView.Default);
        loadingPanel.gameObject.SetActive(value == FriendsView.Loading);
        loadingFailedPanel.gameObject.SetActive(value == FriendsView.LoadFailed);
        resultContentPanel.gameObject.SetActive(value == FriendsView.LoadSuccess);
        currentView = value;
    }
}

The result content panel is divided into two columns. The left column is prioritized to be filled in before the right column. The function to instantiate the entry component is defined as below:

private GameObject InstantiateToColumn(GameObject playerEntryPrefab)
{
    bool leftPanelHasSpace = resultColumnLeftPanel.childCount <= resultColumnRightPanel.childCount;
    
    return Instantiate(playerEntryPrefab, leftPanelHasSpace ? resultColumnLeftPanel : resultColumnRightPanel);
}

The function to clear the friend list is defined as below:

private void ClearFriendList()
{
    resultColumnLeftPanel.DestroyAllChildren();
    resultColumnRightPanel.DestroyAllChildren();

    friendEntries.Clear();
}

A variable to store the friend list:

private readonly Dictionary<string, GameObject> friendEntries = new();

Friend Details Canvas​

Below is the preview of FriendDetailsMenuCanvas_Starter.prefab. This prefab contains components to display individual friend information and several buttons to interact with the friend.

Friend Details Menu Canvas Unity Byte Wars friend list

The script has the following public getters to let other object change the information displayed and a user ID property to determine which user it currently showing.

public Image FriendImage => friendImage;
public TMP_Text FriendDisplayName => friendDisplayName;
public TMP_Text FriendPresence => friendPresence;

public string UserId { get; set; } = string.Empty;

Friend Components​

Below is the preview of the FriendsEntryComponent.prefab and FriendDetailsComponent.prefab. These UI components display friend information such as display name, avatar, and user presence.

Friend Component Unity Byte Wars friend list

Friend Details Component Unity Byte Wars friend list

The FriendsEntryComponent.prefab has a script component called FriendsEntryComponentHandler.cs which holds the UI references for the image and name. The script has the following public getters to let other object change the information displayed and a user ID property to determine which user it currently being displayed by this component.

public string UserId { get; set; } = string.Empty;

public Image FriendImage => friendImage;
public TMP_Text FriendName => friendName;

Ready the UI​

To prepare the UI menu to display the friend list, follow these steps:

  1. Open the FriendsMenuHandler_Starter.cs file. You will see a function called LoadFriendList(). This function is where you will implement the logic to load the friend list.

    private void LoadFriendList()
    {
        // TODO: Implement Load Friend List function here.
        BytewarsLogger.LogWarning("The LoadFriendList method is not implemented yet");
    }

  2. Find the OnLoadFriendListCompleted() function. This is where you will implement the logic when the LoadFriendList result received.

    private void OnLoadFriendListCompleted(Result<Friends> result)
    {
        // TODO: Implement Load Friend List callback functions here.
        BytewarsLogger.LogWarning("The OnLoadFriendListCompleted method is not implemented yet");
    }

  3. Find the OnEnable() function and add a call to the LoadFriendList() function as shown below. This function will be called when the UI is enabled.

    private void OnEnable()
    {
        // TODO: Define Module Wrappers and Load Friends here.

        if (CurrentView == FriendsView.Loading)
        {
            BytewarsLogger.Log("Already loading friend list");
            return;
        }

        LoadFriendList();
    }

  4. Play the game in the editor and navigate to Social > Friends. If your implementation up to this point is successful, you should see the following message in the console:

    [FriendsMenuHandler_Starter] [LoadFriendList] [Warning] [87] - The LoadFriendList method is not implemented yet

Resources​

Last updated on

On this page