Put it all together - Display friend list - (Unity module)

Last updated on October 24, 2024

Connect the UI to get friend list​

  1. Open FriendMenuHandler_Starter.cs and add a field that will hold a reference for the SDK wrapper.

    private FriendEssentialsWrapper_Starter _friendEssentialsWrapper;

  2. Update Awake using the following code:

    private void Awake()
    {
        _friendEssentialsWrapper = TutorialModuleManager.Instance.GetModuleClass<FriendEssentialsWrapper_Starter>();
    }

  3. Update OnEnable() with the following code:

    private void OnEnable()
    {
        if(_friendEssentialsWrapper==null)
            _friendEssentialsWrapper = TutorialModuleManager.Instance.GetModuleClass<FriendEssentialsWrapper_Starter>();
        GetFriendList();
    }

  4. Update GetFriendList with the following code:

    private void GetFriendList()
    {
        CurrentView = FriendsView.Default;
        _friendEssentialsWrapper.GetFriendList(OnFriendListCompleted);
    }

  5. Create a callback function to update the UI and data once the GetFriendList loading is finished.

    private void OnFriendListCompleted(Result<Friends> result)
    {
        CurrentView = FriendsView.Loading;

        if (!result.IsError)
        {
            if (result.Value.friendsId.Length > 0)
            {
                _friendEssentialsWrapper.GetBulkUserInfo(result.Value.friendsId, OnBulkUserInfoCompleted);
            }
            else
            {
                CurrentView = FriendsView.Default;
                Debug.LogWarning($"user don't have any friend, friend list = {result.Value.friendsId.Length}");
            }
        }
        else
        {
            ResultError(result.Error.Message);
            Debug.LogWarning($"failed to get friend list {result.Error.Message}");
        }
    }

  6. Create a callback function for _friendEssentialsWrapper.GetBulkUserInfo() called OnBulkUserInfoCompleted.

    private void OnBulkUserInfoCompleted(Result<ListBulkUserInfoResponse> result)
    {
        if (!result.IsError)
        {
            CurrentView = FriendsView.LoadingSuccess;
            GenerateFriendComponent(result.Value);
        }
        else
        {
            ResultError(result.Error.Message);
        }
    }

  7. Create the GenerateFriendComponent function to generate a friend list component.

    private void GenerateFriendComponent(ListBulkUserInfoResponse friends)
    {
        var friendComponent = loadingSuccessPanel.GetChild(0);
        foreach (var baseUserInfo in friends.data)
        {
            var displayName = !String.IsNullOrEmpty(baseUserInfo.displayName)
                ? baseUserInfo.displayName
                : $"bytewars player {baseUserInfo.userId.Substring(0, baseUserInfo.userId.Length - 10)}";
            var friendPanelObject = Instantiate(friendComponent, Vector3.zero, Quaternion.identity, loadingSuccessPanel);
            friendPanelObject.gameObject.SetActive(true);
            friendPanelObject.gameObject.name = baseUserInfo.userId;
            friendPanelObject.GetComponent<FriendEntryComponentHandler>().displayName.text = displayName;
            _friendEntries.TryAdd(baseUserInfo.userId, (RectTransform)friendPanelObject);
            RetrieveAvatar(baseUserInfo.userId);
        }
    }

  8. Create the RetrieveAvatar function, which calls an API using the AccelByte Gaming Services (AGS) Game SDK to fetch the avatar based on the user ID obtained from the loaded friend list.

    private void RetrieveAvatar(string userId)
    {
        _friendEssentialsWrapper.GetUserAvatar(userId, result => OnGetAvatarComplete(result, userId));
    }

  9. Create a callback function to handle the avatar data. In this callback, you will also set up the friend component using the data obtained from the GetUserAvatar function above.

    private void OnGetAvatarComplete(Result<Texture2D> result, string userId)
    {
        if (!result.IsError)
        {
            SetupFriendComponent(userId, result);
        }
        else
        {
            SetupFriendComponent(userId, null);
        }
    }

  10. Create the SetupFriendComponent function. You may have noticed that you have already declared OnFriendClicked, which will be used later to navigate to the friend details.

    private void SetupFriendComponent(string userId, Result<Texture2D> result)
    {
        _friendEntries.TryGetValue(userId, out var friendEntryComponent);
        Sprite avatar = null;
        
        if (friendEntryComponent != null)
        {
            var friendEntry = friendEntryComponent.GetComponent<FriendEntryComponentHandler>();
            if (result != null)
            {
                avatar = Sprite.Create(result.Value,
                    new Rect(0f, 0f, result.Value.width, result.Value.height), Vector2.zero);
                friendEntry.friendImage.sprite = avatar;
            }
            var friendButton = friendEntryComponent.GetComponent<Button>();
            friendButton.onClick.AddListener(() => OnFriendClicked(userId, friendEntry.displayName.text, avatar));
        }
        loadingPanel.gameObject.SetActive(false);
    }

  11. Create the OnFriendClicked function, as described earlier. In this function, you may have noticed the usage of the MenuManager. You employ the MenuManager to obtain the FriendDetailsMenuCanvas_Starter UI canvas object, allowing you to set up the necessary data to be displayed on the friend details UI.

    private void OnFriendClicked(string userId, string displayName, Sprite avatar)
    {
        MenuManager.Instance.AllMenu.TryGetValue(AssetEnum.FriendDetailsMenuCanvas_Starter, out var value);
        
        if (value != null)
        {
            var friendDetailMenu = value.gameObject.GetComponent<FriendDetailsMenuHandler_Starter>();
            var friendDetailsPanel = friendDetailMenu.friendDetailsPanel;
            var image = friendDetailsPanel.GetComponentInChildren<Image>();
            var friendDisplayName = friendDetailsPanel.GetComponentInChildren<TMP_Text>();

            friendDetailMenu.UserID = userId;
            image.sprite = avatar;
            friendDisplayName.text = displayName;
        }
        
        MenuManager.Instance.ChangeToMenu(AssetEnum.FriendDetailsMenuCanvas_Starter);
    }

Resources​

Last updated on

On this page