フレンドリストメニューを追加する - フレンドリストを表示する - (Unity モジュール)

Last updated on June 23, 2025

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:

  • FriendsMenu_Starter: A UI menu to display the list of friends.
    • C# file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendsMenu_Starter.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/FriendsMenu_Starter.prefab
  • FriendDetailsMenu_Starter: A UI menu to display individual friend information.
    • C# file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendDetailsMenu_Starter.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/FriendDetailsMenu_Starter.prefab
  • FriendEntry: A UI component to display friend information, such as display name and avatar.
    • C# file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendEntry.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/FriendEntry.prefab

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

Friends Menu​

Below is the preview of FriendsMenu_Starter.prefab. This menu is used to display friend list.

Friends Menu Unity Byte Wars friend list

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

[Header("Friends Component")]
[SerializeField] private GameObject friendEntryPrefab;

[Header("Menu Components")]
[SerializeField] private AccelByteWarsWidgetSwitcher widgetSwitcher;
[SerializeField] private RectTransform resultContentPanel;
[SerializeField] private RectTransform resultColumnLeftPanel;
[SerializeField] private RectTransform resultColumnRightPanel;

The widgetSwitcher component is used to switch the menu between different states, such as the default view, loading state, empty result state, and error state. The resultContentPanel is used to display the friend request list by instantiating entries using the friendEntryPrefab.

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 shouldPlaceOnRightPanel = resultColumnLeftPanel.childCount > resultColumnRightPanel.childCount;
    
    return Instantiate(playerEntryPrefab, shouldPlaceOnRightPanel ? resultColumnRightPanel : resultColumnLeftPanel);
}

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 Menu​

Below is the preview of FriendDetailsMenu_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 Entry​

Below is the preview of the FriendEntry.prefab to display friend entry information such as display name, avatar, and user presence.

Friend Component Unity Byte Wars friend list

The FriendEntry.prefab has a script component called FriendEntry.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 FriendsMenu_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.

        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:

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

Resources​

に最終更新

On this page