Add player search menu - Search for players - (Unity module)

Last updated on June 12, 2024

What's on the menu​

In this tutorial, you will learn how to prepare the user interface (UI) you will use to find players by their display name and send friend invitation requests. The files are available in the Resources sections and consists of the following:

  • FindFriendsMenuHandler_Starter.cs: A C# script you will to call some functionalities in order to find players.
    • CS file: /Assets/Resources/Modules/FriendEssentials/Scripts/UI/FindFriendsMenuHandler_Starter.cs
  • FindFriendsMenuCanvas_Starter.prefab: A prefab to display the found player information, such as their display name, avatar, and a button to send a friend invite.
    • Prefab file: /Assets/Resources/Modules/FriendEssentials/Prefabs/FindUser/FindFriendsMenuCanvas_Starter.prefab

Take a look at more details on how the UI is constructed.

Find Friend Canvas​

Below is the preview of the FindFriendsMenuCanvas_Starter.prefab. This UI consists of a search bar and a list to display the found player entries.

Find friend widget Unity Byte Wars search players

The search bar and the list to show the found potential friends are defined in FindFriendsMenuHandler_Starter.cs.

[SerializeField] private TMP_InputField friendSearchBar;
[SerializeField] private RectTransform friendListContent;
[SerializeField] private RectTransform defaultPanel;
[SerializeField] private RectTransform loadingPanel;
[SerializeField] private RectTransform loadingFailedPanel;
[SerializeField] private RectTransform loadingSuccessPanel;
[SerializeField] private Button backButton;

There is also the _panels field to store the panel value and the _usersResult field to store the search results.

private List<RectTransform> _panels = new List<RectTransform>();
private Dictionary<string, RectTransform> _usersResult = new Dictionary<string, RectTransform>();

The FriendFriendsView enum is used as the entry point to navigate between each panel.

enum FindFriendsView
{
    Default,
    Loading,
    LoadFailed,
    LoadSuccess
}

To switch to each panel, the property is defined that you can set.

private FindFriendsView CurrentView
{
    get => CurrentView;
    set => ViewSwitcher(value);
}
private void ViewSwitcher(FindFriendsView value)
{
    switch (value)
    {
        case FindFriendsView.Default:
            SwitcherHelper(defaultPanel);
            break;
        case FindFriendsView.Loading:
            SwitcherHelper(loadingPanel);
            break;
        case FindFriendsView.LoadFailed:
            SwitcherHelper(loadingFailedPanel);
            break;
        case FindFriendsView.LoadSuccess:
            SwitcherHelper(loadingSuccessPanel);
            break;
    }
}
    private void SwitcherHelper(Transform panel)
    {
        panel.gameObject.SetActive(true);
        _panels.Except(new []{panel})
            .ToList().ForEach(x => x.gameObject.SetActive(false));
    }

There is function called ClearSearchPanel() to help remove the search result

private void ClearSearchPanel()
{
    friendSearchBar.text = "";
    GetComponentsInChildren<FriendResultPanelHandler>().ToList().ForEach(x => Destroy(x.gameObject));
    _usersResult.Clear();
}

Friend Result Component​

Below is the preview of the FriendEntryComponent.prefab. This prefab displays player information, such as a display name, avatar, and a send friend invite button.

Potential friend entry widget Unity Byte Wars search players

This prefab has a script component called FriendResultPanelHandler.cs which holds the UI references for the display name, avatar, and the send invite button.

Ready The UI​

In this section, you will learn how to prepare the UI prefabs.

  1. Open FindFriendsMenuHandler_Starter.cs and add the code below. This line of code is to pass the callback function into the search bar reference that is already predefined.

    void Start()
    {
        // There are lines of predefined code, truncated for brevity. 

        friendSearchBar.onEndEdit.AddListener();
    }

  2. Create a function called FindFriend which will be triggered when the search bar is filled. Later, you will call the functionality to find a player and send a friend invitation request with this function. For now, add the following log as the placeholder:

    private void FindFriend(string displayName)
    {
        if (string.IsNullOrEmpty(friendSearchBar.text) || string.IsNullOrEmpty(friendSearchBar.text))
        {
            return;
        }
        
        ClearSearchPanel();
        //TODO: Implement friend wrapper
        Debug.LogWarning($"Find friends is not yet implemented");
    }

  3. Update your Start() function by adding FindFriend as a listener to the friendSearchBar reference.

    void Start()
    {
        // There are lines of predefined code, truncated for brevity. 

        friendSearchBar.onEndEdit.AddListener(FindFriend);
    }

  4. In the Unity Editor, go to Assets/Resources/Modules/FriendEssentials. There, you will find a asset config called FriendEssentialsAssetConfig. Open it and enable Is Starter Active. This will activate the friends-related UI starter files.

    Activate Tutorial Module Data Asset starter mode Unity Byte Wars search players

  5. Play the game in Editor. If the implementation was successful, you will be able to navigate to Social > Find Friends. Try to find a friend by clicking on the text input and pressing Enter, and you will see the log you added:

    Find friends is not yet implemented

Resources​

Last updated on

On this page