Add blocked players menu and player actions menu - Manage friends - (Unreal Engine module)

Last updated on October 24, 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 available in the Resources section and are defined in the following classes:

  • BlockedPlayersWidget_Starter: A C++ you will use to call functions to display blocked players.
    • Header file: /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayersWidget_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayersWidget_Starter.cpp
    • Blueprint widget: /Content/TutorialModules/Social/ManagingFriends/UI/W_BlockedPlayers_Starter.uasset
  • BlockedPlayerWidgetEntry_Starter: A C++ class you will use to display the blocked players' information, such as their display name and avatar.
    • Header file: /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayerWidgetEntry_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayerWidgetEntry_Starter.cpp
    • Blueprint widget: /Content/TutorialModules/Social/ManagingFriends/UI/W_BlockedPlayerEntry_Starter.uasset

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

Blocked Players widget​

The 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 a custom Widget Switcher: UAccelByteWarsWidgetSwitcher. The list itself is done by using a List View that takes an entry widget class and generates the entry dynamically. Below is a preview of the W_BlockedPlayers_Starter Blueprint widget:

Blocked players widget Unreal Byte Wars manage friends

The list to show the blocked players is 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().

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 Unreal Byte Wars manage friends

The function to show a 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(FText::FromString(
            UTutorialModuleOnlineUtility::GetUserDefaultDisplayName(CachedBlockedPlayerData->UserId.ToSharedRef().Get())));
    }

    // Display avatar image.
    const FString AvatarURL = CachedBlockedPlayerData->AvatarURL;
    Img_Avatar->LoadImage(AvatarURL);

    OnListItemObjectSet.Broadcast();
}

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

protected:
// ...
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UAccelByteWarsAsyncImageWidget* 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​

The Friend list module covered 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 Unreal Byte Wars manage friends

When these buttons are clicked, they will trigger the corresponding functions below. You can find these functions in the /Source/AccelByteWars/TutorialModules/Social/ManagingFriends/ManagingFriendsSubsystem_Starter.cpp file. More about this file will be covered later.

protected:
// ...
    void OnUnfriendButtonClicked(const APlayerController* PC, const FUniqueNetIdRepl FriendUserId, const FOnUnfriendComplete& OnComplete = FOnUnfriendComplete());
protected:
// ...
    void OnBlockButtonClicked(const APlayerController* PC, const FUniqueNetIdRepl BlockedPlayerUserId, const FOnBlockPlayerComplete& OnComplete = FOnBlockPlayerComplete());

Ready the UI​

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

  1. Open the BlockedPlayerWidgetEntry_Starter class CPP file and you'll find the function below. This function will be triggered when the unblock button is clicked. Later, you will call the function to unblock a player in this function.

    void UBlockedPlayerWidgetEntry_Starter::OnUnblockButtonClicked()
    {
    // ...
    }

  2. Open the BlockedPlayersWidget_Starter class CPP file. There, you will find the function below. Later, you will call functions to get and display the blocked player list in this function.

    void UBlockedPlayersWidget_Starter::GetBlockedPlayerList()
    {
    // ...
    }

  3. 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. This will activate the widgets so you can navigate through them when you play the game.

    Activate Tutorial Module Data Asset starter mode Unreal Byte Wars manage friends

  4. Play the game in the Editor, log in, and test navigating to the following locations:

    • Able to navigate to the Social > Blocked Players menu.
    • Able to navigate to the Social > Friends menu. When clicking the friend entry, the Block Player and Unfriend button will be shown on the friend details menu.

Resources​

Last updated on

On this page