Unreal Engine Module - Manage Friends - Add blocked players menu and player actions menu
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
.
- Header file can be found in
- 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
.
- Header file can be found in
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:
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.
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.
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.
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."));
}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."));
}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."));
}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 calledDA_ManagingFriends
. Open it and enable theIs 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.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.
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.
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
- The files used in this tutorial section are available in the Byte Wars GitHub repository.
- AccelByteWars/Content/TutorialModules/Social/ManagingFriends/DA_ManagingFriends.uasset
- AccelByteWars/Content/TutorialModules/Social/ManagingFriends/UI/W_BlockedPlayers_Starter.uasset
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayersWidget_Starter.h
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayersWidget_Starter.cpp
- AccelByteWars/Content/TutorialModules/Social/ManagingFriends/UI/W_BlockedPlayerEntry_Starter.uasset
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayerWidgetEntry_Starter.h
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ManagingFriends/UI/BlockedPlayerWidgetEntry_Starter.cpp
- AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ManagingFriends/ManagingFriendsSubsystem_Starter.cpp