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

Last updated on June 12, 2024

What's on the menu​

In this tutorial, you will learn how to prepare widgets that you will use to display a player's friend list. The widgets are defined in the following classes:

  • FriendsWidget_Starter: A C++ class you will to call functionalities to display the friend list.

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

  • FriendWidgetEntry_Starter: A C++ class you will use to display the friend's information, such as the 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

  • FriendDetailsWidget: A C++ class you will use to display individual friend information.

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

Friends widget​

The Friends widget has several states representing each state of the request status: empty, loading, error, and not empty (showing the friend list). These states are achieved by using a custom Widget Switcher: UAccelByteWarsWidgetSwitcher. The list itself is done by using a Tile View, which is a child of List View that shows the entry widget as a tile instead of a list. Below is the preview of the W_Friends_Starter Blueprint widget:

Accepted friends widget Unreal Byte Wars friend list

The list to show the friend list is defined in the FriendRequestsWidget_Starter class Header file:

protected:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UAccelByteWarsWidgetSwitcher* Ws_Friends;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTileView* Tv_Friends;

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

Ws_Friends->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. You have already used this widget to display some friend entries in the previously. This time, you will use this widget to display the player's friends' information. In this case, there is no option button to be displayed.

Accepted friend entry widget Unreal Byte Wars friend list

Friend Details widget​

Below is the preview of the W_FriendDetails Blueprint widget. This widget contains components to display individual friend information, such as a display name and avatar image.

Friend details widget

The functionality to display friend information is already prepared for you in the FriendDetailsWidget class CPP file, particularly in the function below:

void UFriendDetailsWidget::InitData(UFriendData* FriendData)
{
    ensure(FriendData);
    CachedFriendData = FriendData;

    // Display display name.
    if (!CachedFriendData->DisplayName.IsEmpty())
    {
        Tb_DisplayName->SetText(FText::FromString(CachedFriendData->DisplayName));
    }
    else
    {
        Tb_DisplayName->SetText(LOCTEXT("Byte Wars Player", "Byte Wars Player"));
    }

    // 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);
    }
}

The components to display friend information are defined in the FriendDetailsWidget 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;

Ready the UI​

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

  1. Open the FriendsWidget_Starter class CPP file. There, you will find the function below. Later, you will call some functionalities to get and display the friend list in this function. For now, add the following log as the placeholder:

    void UFriendsWidget_Starter::GetFriendList()
    {
        // TODO: Get and display friend list here.
        UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Get friend list is not yet implemented."));
    }

  2. Still in the same file, locate the function below. When the friend entries in the list are clicked, the function below will be triggered. The function will show the W_FriendDetails widget to display individual friend information. You don't need to do anything for this step.

    void UFriendsWidget_Starter::OnFriendEntryClicked(UObject* Item)
    {
        UFriendData* FriendData = Cast<UFriendData>(Item);
        ensure(FriendData);

        UAccelByteWarsBaseUI* BaseUIWidget = Cast<UAccelByteWarsBaseUI>(GameInstance->GetBaseUIWidget());
        ensure(BaseUIWidget);

        UFriendDetailsWidget* DetailsWidget = Cast<UFriendDetailsWidget>(BaseUIWidget->PushWidgetToStack(EBaseUIStackType::Menu, FriendDetailsWidgetClass));
        ensure(DetailsWidget);

        DetailsWidget->InitData(FriendData);
    }

  3. Build your project and open it in the Unreal Engine Editor. Play the game in the Editor, log in, and navigate to Social > Friends. If implemented successfully, you will see text saying No entry to show and the logs you added earlier.

    LogFriendsEssentials: Warning: Get friend list is not yet implemented.

Resources​

に最終更新

On this page