Unreal Engine Module - Manage Friends - Add blocked players menu and player actions menu

Last updated on January 13, 2024

What's on the menu​

In this section, you will learn how to prepare widgets that you will use to display blocked players and also action buttons to unfriend, block, and unblock players. The widgets are defined in the following classes.

  • First, there is a C++ class called BlockedPlayersWidget_Starter. You will use this class to call some functionalities in order to display blocked players. This class is defined in the following files.
    • Header file can be found in /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayersWidget_Starter.h.
    • CPP file can be found in /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayersWidget_Starter.cpp.
    • Blueprint widget can be found in /Content/TutorialModules/Social/ManagingFriends/UI/W_BlockedPlayers_Starter.uasset.
  • Second, there is a C++ class called BlockedPlayerWidgetEntry_Starter. You will use this class to display the blocked players' information, such as their display name and avatar. This class is defined in the following files.
    • Header file can be found in /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayerWidgetEntry_Starter.h.
    • CPP file can be found in /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayerWidgetEntry_Starter.cpp.
    • Blueprint widget can be found in /Content/TutorialModules/Social/ManagingFriends/UI/W_BlockedPlayerEntry_Starter.uasset.

Now, let's take a look at more details on how these widgets are constructed.

Blocked Players widget​

Blocked Players widget have several states representing each state of the request status: empty, loading, error, and not empty (showing the blocked players list). These states are achieved by using our custom Widget Switcher, the UAccelByteWarsWidgetSwitcher. The list itself is done by using a List View that takes an entry widget class and generate the entry dynamically. Below is the preview of the W_BlockedPlayers_Starter Blueprint widget:

Blocked players widget

The list to show the blocked players are defined in the BlockedPlayersWidget_Starter class header file.

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

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

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

Ws_BlockedPlayers->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Loading);

Blocked Player Entry widget​

Below is the preview of the W_BlockedPlayerEntry_Starter Blueprint widget. This widget displays blocked player information, such as display name, avatar, and the unblock button.

Blocked player entry widget

The functionality to show blocked player information is already prepared for you in the BlockedPlayerWidgetEntry_Starter class CPP file, particularly in the function below.

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

    CachedBlockedPlayerData = Cast<UFriendData>(ListItemObject);

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

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

Below are the declarations of the components used by this widget. The declarations can be found in theBlockedPlayerWidgetEntry_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))
    UCommonButtonBase* Btn_Unblock;

Player Action menu​

In the Module: Display a List of Friends, we have discussed the friend details widget. In addition to displaying friend details, this widget also acts as a player action menu that will show block and unfriend buttons. These buttons are generated dynamically during runtime.

Unfriend button and unblock button

When these buttons are clicked, they will trigger the following functions respectively. You can find these functions in the /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/ManagingFriendsSubsystem_Starter.cpp file. We will discuss more about this file later.

void UManagingFriendsSubsystem_Starter::OnUnfriendButtonClicked(const APlayerController* PC, const FUniqueNetIdRepl FriendUserId, const FOnUnfriendComplete& OnComplete)
{
    // TODO: Call unfriend request here.
}

void UManagingFriendsSubsystem_Starter::OnBlockButtonClicked(const APlayerController* PC, const FUniqueNetIdRepl BlockedPlayerUserId, const FOnBlockPlayerComplete& OnComplete)
{
    // TODO: Call block player request here.
}

Ready the UI​

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

  1. Open the BlockedPlayerWidgetEntry_Starter class CPP file, and you'll find the following function. This function will be triggered when the unblock button is clicked. Later, you will call the functionality to unblock a player in this function. For now, add the following log as the placeholder.

    void UBlockedPlayerWidgetEntry_Starter::OnUnblockButtonClicked()
    {
        // TODO: Call unblock player request here.
        UE_LOG_MANAGING_FRIENDS(Warning, TEXT("Unblock player is not yet implemented."));
    }

  2. Next, open the BlockedPlayersWidget_Starter class CPP file. There, you will find the following function. Later, you will call functionalities to get and display the blocked player list in this function. For now, add the following log as the placeholder.

    void UBlockedPlayersWidget_Starter::GetBlockedPlayerList()
    {
        // TODO: Get and display the blocked player list here.
        UE_LOG_MANAGING_FRIENDS(Warning, TEXT("Get blocked player list is not yet implemented."));
    }

  3. Next, open the /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/ManagingFriendsSubsystem_Starter.cpp file and add the following log for now. Later, you will call functionalities to actually unfriend and block players.

    void UManagingFriendsSubsystem_Starter::OnUnfriendButtonClicked(const APlayerController* PC, const FUniqueNetIdRepl FriendUserId, const FOnUnfriendComplete& OnComplete)
    {
        // TODO: Call unfriend request here.
        UE_LOG_MANAGING_FRIENDS(Warning, TEXT("Unfriend is not yet implemented."));
    }

    void UManagingFriendsSubsystem_Starter::OnBlockButtonClicked(const APlayerController* PC, const FUniqueNetIdRepl BlockedPlayerUserId, const FOnBlockPlayerComplete& OnComplete)
    {
        // TODO: Call block player request here.
        UE_LOG_MANAGING_FRIENDS(Warning, TEXT("Block player is not yet implemented."));
    }

  4. Now, build your project and open it in the Unreal Engine Editor. In the Unreal Engine Editor, go to /Content/TutorialModules/Social/ManagingFriends/. There, you will find a data asset called DA_ManagingFriends. Open it and enable the Is Starter Mode Active. Then, save the data asset again. This will activate the widgets we mentioned before, so you can navigate through them when you play the game.

    Activate Tutorial Module Data Asset starter mode

  5. Then, play the game in the Unreal Engine Editor and you should be able to navigate just like the image below. Also, you should be able to see the logs you just added earlier.

    Tutorial Module UIs quick test

    LogFriendsEssentials: Warning: Get blocked player list is not yet implemented.
    LogFriendsEssentials: Warning: Block player is not yet implemented.
    LogFriendsEssentials: Warning: Unfriend is not yet implemented.

  6. Congratulations! You set up the widgets correctly. Move on to the next section where you will implement the unfriend friends, block players, and unblock players functionalities.

Resources​

Last updated on

On this page