プレイヤー検索メニューを追加する - プレイヤーを検索する - (Unity モジュール)

Last updated on December 13, 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:

  • FindFriendsMenuCanvas_Starter: A UI menu to search for players by their display name or friend code.
    • CS file: /Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FindFriendsMenuHandler_Starter.cs.
    • Prefab file: /Assets/Resources/Modules/FriendsEssentials/Prefabs/FindFriends/FindFriendsMenuCanvas_Starter.prefab
  • FindFriendsEntryComponent: A UI component to display the player information, such as display name, avatar, and a send friend invite button.
    • CS file: /Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FindFriendsEntryHandler.cs
    • Prefab file: /Assets/Resources/Modules/FriendsEssentials/Prefabs/FindFriends/FindFriendsEntryComponent.prefab
ヒント

Take a look at the prefabs of these UI menus for more detailed information.

Find Friends Menu Canvas​

Below is the preview of the FindFriendsMenuCanvas_Starter.prefab. This menu consists of the following components:

  • Friend Code Text: A text field to input the friend code.
  • Copy Code Button: A button to copy the friend code.
  • Search Bar: A text field to input the display name of the player you want to find.
  • Search Button: A button to search for the player by their display name.

This menu also has several panels to display the search result, such as the default panel, loading panel, loading failed panel, and the search result panel.

Find friend prefab Unity Byte Wars search players

The search bar and the list that show the found player entries are defined in the FindFriendsMenuHandler_Starter.cs script. The script has the following fields to store the UI references:

[Header("Find Friends Components"), SerializeField] private GameObject friendEntryPrefab;
[SerializeField] private TMP_Text friendCode;
[SerializeField] private Button friendCodeCopyButton;
[SerializeField] private TMP_InputField friendSearchBar;
[SerializeField] private Button friendSearchButton;

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

This menu displays one player entry at a time upon a successful search instantiated in the resultContentPanel field. The script has the following property to store the current player entry:

private GameObject userResult;

The FindFriendsView enum is used to define the different views of the menu, such as the default view, loading view, loading failed view, and the search result view.

private enum FindFriendsView
{
    Default,
    Loading,
    LoadFailed,
    LoadSuccess
}

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

private FindFriendsView currentView = FindFriendsView.Default;

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

You can use the ClearSearchPanel() method to clear the search panel and destroy the current player entry.

private void ClearSearchPanel()
{
    resultContentPanel.DestroyAllChildren();

    if (userResult != null)
    {
        Destroy(userResult);
    }
}

The OnFriendCodeCopyButtonClicked() method is called when the player clicks the copy button. This method copies the friend code to the clipboard and displays a message to inform the player that the friend code has been copied.

private async void OnFriendCodeCopyButtonClicked()
{
    GUIUtility.systemCopyBuffer = friendCode.text;
    TMP_Text buttonText = friendCodeCopyButton.GetComponentInChildren<TMP_Text>();

    string originalText = buttonText.text;
    buttonText.SetText(FriendsHelper.FriendCodeCopiedMessage);
    friendCodeCopyButton.interactable = false;

    await Task.Delay(TimeSpan.FromSeconds(2));

    buttonText.SetText(originalText);
    friendCodeCopyButton.interactable = true;
}

Find Friends Entry Component​

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

Find friend entry prefab Unity Byte Wars search players

This prefab has a script component called FindFriendsEntryHandler.cs which holds the UI references for the display name, avatar, and the send invite button. The script has the following public getters and property to let other object change the information displayed.

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

public Image FriendImage => friendImage;
public TMP_Text FriendName => friendName;
public TMP_Text FriendStatus => friendStatus;
public Button SendInviteButton => sendInviteButton;

Ready the UI​

To prepare the UI prefabs, follow these steps:

  1. Open FindFriendsMenuHandler_Starter.cs and locate the FindFriend() method. This method is called when the player presses the Enter key or clicks the search button. For now, it only logs a warning message.

     private void FindFriend(string query)
     {
         BytewarsLogger.LogWarning("The FindFriend method is not implemented yet");
     }

  2. In Unity Editor, go to Assets/Resources/Modules/FriendsEssentials. You will find an asset config called FriendsEssentialsAssetConfig. 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

  3. Play the game in Unity 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 or clicking the search button. You will see a warning message in the console.

    [FindFriendsMenuHandler_Starter] [FindFriend] [Warning] [85] - The FindFriend method is not implemented yet

Resources​

に最終更新

On this page