フレンド検索メニューを追加する - プレイヤーを検索する - (Unreal Engine モジュール)

Last updated on June 12, 2024

What's on the menu​

In this section, you will learn how to prepare widgets that you will use to find potential friends by their display name and send friend invitation requests. The widgets are summarized in this tutorial and are available in the Resources section.

  • FindFriendsWidget_Starter: A C++ class you will use to call some functionalities to find potential friends.

    • Header file: /Source/AccelByteWars/TutorialModules/Social/FriendsEssentials/UI/FindFriendsWidget_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Social/FriendsEssentials/UI/FindFriendsWidget_Starter.cpp
    • Blueprint widget: /Content/TutorialModules/Social/FriendsEssentials/UI/W_FindFriends_Starter.uasset

  • FriendWidgetEntry_Starter: A C++ class you will use to display the search result's potential friends' information, such as their display name, avatar, and option buttons.

    • Header file: /Source/AccelByteWars/TutorialModules/Social/FriendsEssentials/UI/FriendWidgetEntry_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Social/FriendsEssentials/UI/FriendWidgetEntry_Starter.cpp
    • Blueprint widget: /Content/TutorialModules/Social/FriendsEssentials/UI/W_FriendEntry_Starter.uasset

Take a look at more details on how these widgets are constructed.

Find Friend widget​

The Find Friend widget has several states representing each state of the request status: empty, loading, error, and not empty (showing the search results list). These states are achieved by using the custom AccelByte Widget Switcher: the UAccelByteWarsWidgetSwitcher. The list itself is done by using a List View that takes an entry widget class and generates the entry dynamically. This widget also consists of a search bar. Below is the preview of the W_FindFriends_Starter Blueprint widget:

Find friend widget Unreal Byte Wars search players

These components are declared in the FindFriendsWidget_Starter class Header file:

protected:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UEditableText* Edt_SearchBar;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UAccelByteWarsWidgetSwitcher* Ws_FindFriends;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UListView* Lv_FindFriends;

Changing the state of this widget is done by calling Ws_FindFriends->SetWidgetState(). Here's an example on how to change the state to a loading state:

Ws_FindFriends->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Loading);

Friend Entry widget​

Below is the preview of the W_FriendEntry_Starter Blueprint widget. This widget displays friend information, such as display name, avatar, and option buttons. This will be in the entry widget class for the List View in the Find Friend widget.

Potential friend entry widget Unreal Byte Wars search players

The option buttons are categorized in a Widget Switcher named Ws_OptionButtons. The option buttons are the buttons to do actions such as sending a friend request. The Widget Switcher will help to display relevant option buttons based on what friend entry type is being displayed.

List View requires the entry widget to implement the IUserObjectListEntry interface. If you look at the parent of this widget's Header file, the FriendWidgetEntry_Starter, you can see that it inherits the UAccelByteWarsWidgetEntry, which has the IUserObjectListEntry implemented into it. For the widget to work properly as an entry widget, it needs to implement the NativeOnListItemObjectSet function, which is the setup function that the List View will call. This is where all the UI setup needs to be done. It has already been set up for you, so you can simply use it for any List View or call the NativeOnListItemObjectSet function directly to set it up manually.

void UFriendWidgetEntry_Starter::NativeOnListItemObjectSet(UObject* ListItemObject)
{
    Super::NativeOnListItemObjectSet(ListItemObject);

    CachedFriendData = Cast<UFriendData>(ListItemObject);

    // Display display name.
    if (!CachedFriendData->DisplayName.IsEmpty())
    {
        Tb_DisplayName->SetText(FText::FromString(CachedFriendData->DisplayName));
    }
    else
    {
        Tb_DisplayName->SetText(FText::FromString(
            UTutorialModuleOnlineUtility::GetUserDefaultDisplayName(CachedFriendData->UserId.ToSharedRef().Get())));
    }

    // Display presence.
    Tb_Presence->SetText(FText::FromString(CachedFriendData->GetPresence()));

    // Store default brush to be used to reset the avatar brush if needed.
    if (!DefaultAvatarBrush.GetResourceObject())
    {
        DefaultAvatarBrush = Img_Avatar->Brush;
    }

    // Display avatar image.
    const FString AvatarURL = CachedFriendData->AvatarURL;
    const FString AvatarId = FBase64::Encode(AvatarURL);

    // Try to set avatar image from cache.
    FCacheBrush CacheAvatarBrush = AccelByteWarsUtility::GetImageFromCache(AvatarId);
    if (CacheAvatarBrush.IsValid())
    {
        Img_Avatar->SetBrush(*CacheAvatarBrush.Get());
    }
    // Set avatar image from URL if it is not exists in cache.
    else if (!AvatarURL.IsEmpty())
    {
        AccelByteWarsUtility::GetImageFromURL(
            AvatarURL,
            AvatarId,
            FOnImageReceived::CreateWeakLambda(this, [this](const FCacheBrush ImageResult)
            {
                Img_Avatar->SetBrush(*ImageResult.Get());
            })
        );
    }
    // If no valid avatar, reset it to the default one.
    else
    {
        Img_Avatar->SetBrush(DefaultAvatarBrush);
    }

    // Display options based on friend's invitation status.
    Ws_OptionButtons->SetActiveWidgetIndex((uint8)CachedFriendData->Status);

    // Show the reason why the player cannot send invitation request.
    Btn_Invite->SetVisibility(!CachedFriendData->bCannotBeInvited ? ESlateVisibility::Visible : ESlateVisibility::Collapsed);
    Tb_CannotInviteMessage->SetVisibility(CachedFriendData->bCannotBeInvited ? ESlateVisibility::Visible : ESlateVisibility::Collapsed);
    Tb_CannotInviteMessage->SetText(FText::FromString(CachedFriendData->ReasonCannotBeInvited));
}

Since you will use this widget to display the search results of potential friends, the invite button will be displayed automatically thanks to the function above.

Below are the declarations of the components used by this widget. The declarations can be found in the FriendWidgetEntry_Starter class Header file.

protected:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UImage* Img_Avatar;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_DisplayName;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidgetSwitcher* Ws_OptionButtons;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_Invite;

Ready the UI​

In this section, you will learn how to prepare the widgets so you can follow along with the tutorials in this module.

  1. Open the FriendWidgetEntry_Starter class CPP file and navigate to the OnInviteButtonClicked function. This function will be triggered when the invite button is clicked. Later, you will call sending a friend invitation request in this function. For now, add the following log as the placeholder:

    void UFriendWidgetEntry_Starter::OnInviteButtonClicked()
    {
        // TODO: Call send friend request here.
        UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Send a friend request is not yet implemented."));
    }

  2. Open the FindFriendsWidget_Starter class CPP file and navigate to the OnSearchBarCommitted function. This function will be called when you submit any keyword on the search bar in W_FindFriends_Starter. Later, you will call the showing the search results of potential friends here. For now, add the following log as the placeholder:

    void UFindFriendsWidget_Starter::OnSearchBarCommitted(const FText& Text, ETextCommit::Type CommitMethod)
    {
        // TODO: Get and display find friend result here.
        UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Find friends is not yet implemented."));
    }

  3. Build your project and open it in the Unreal Engine Editor. In the Editor, go to /Content/TutorialModules/Social/FriendsEssentials/. Open DA_FriendsEssentials and enable Is Starter Mode Active. Save the data asset again. This will activate friends-related widgets including the widgets mentioned before, so you can navigate through them when you play the game.

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

  4. Play the game in the Editor. Log in and navigate to Social > Find Friends. Try to find a friend by clicking into the text input and pressing Enter. If implemented correctly, you will be able to see the log you added.

    LogFriendsEssentials: Warning: Find friends is not yet implemented.

Resources​

に最終更新

On this page