パーティメニューを追加する - パーティ入門 - (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 display party members. The widgets are defined in the following classes:

• PartyWidget_Starter: This C++ class is what you will use to call some functions in order to display party members.

  • Header file: /Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidget_Starter.h
  • CPP file: /Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidget_Starter.cpp
  • Blueprint widget: /Content/TutorialModules/PartyEssentials/UI/W_Party_Starter.uasset

• PartyWidgetEntry_Starter: This C++ class is what you will use to display the individual party member information, such as display names and avatars.

  • Header file: /Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidgetEntry_Starter.h
  • CPP file: /Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidgetEntry_Starter.cpp
  • Blueprint widget: /Content/TutorialModules/PartyEssentials/UI/W_PartyEntry_Starter.uasset

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

Party widget

Below is a preview of the W_Party_Starter Blueprint widget. This widget consists of a container to display party members and a button to leave the party.

The components used in this widget are defined in the PartyWidget_Starter class Header file.

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

UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UHorizontalBox* Hb_Party;

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

Party entry widget

Below is a preview of the W_PartyEntry_Starter Blueprint widget. This widget has two states, which are to display individual party information and to display a button to add a new party member.

Here is the state preview to display individual party member information:

Here is the state preview to display the add party member button:

To switch between these states, the PartyWidgetEntry_Starter class CPP file has the following functions:

void UPartyWidgetEntry_Starter::SetPartyMember(const FUserOnlineAccountAccelByte& PartyMember, const bool bIsLeader)
{
    // Display party member information.
    Ws_PartyMemberState->SetActiveWidget(W_PartyMemberPanel);

    // TODO: Set and display party member information.
}

void UPartyWidgetEntry_Starter::ResetPartyMember()
{
    // Display the add party member button.
    SetPartyMemberColor(FLinearColor::White);
    Ws_PartyMemberState->SetActiveWidget(Btn_AddPartyMember);
}

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

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

UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UPanelWidget* W_PartyMemberPanel;

UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
UPlayerEntryWidget* W_PartyMember;

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

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

Player Action menu

This Friend Details widget that was outlined in the Friend list module, in addition to displaying friend details, also acts as a player action menu to show action buttons. These buttons are generated dynamically during runtime.

In this module, there are three buttons that will be generated automatically. Those are buttons for sending party invitations, removing (kicking) players from the party, and promoting a party member as the new leader.

You can find the functions for these buttons in the /Source/AccelByteWars/TutorialModules/PartyEssentials/PartyOnlineSession_Starter.cpp file. They are as follows:

Send party invitation:

void UPartyOnlineSession_Starter::OnInviteToPartyButtonClicked(const int32 LocalUserNum, const FUniqueNetIdPtr& Invitee)
{
    // TODO: Send party invitation.
}

Kick party member:

void UPartyOnlineSession_Starter::OnKickPlayerFromPartyButtonClicked(const int32 LocalUserNum, const FUniqueNetIdPtr& KickedPlayer)
{
    // TODO: Kick party member.
}

Promote party member to leader:

void UPartyOnlineSession_Starter::OnPromotePartyLeaderButtonClicked(const int32 LocalUserNum, const FUniqueNetIdPtr& NewLeader)
{
    // TODO: Promote a new party leader.
}

Ready the UI

In this section, you will learn how to prepare the widgets to use with the rest of this module.

1. Open the PartyWidget_Starter class CPP file and you'll find the function shown below. We will use these functions later, but for now, add the following log as a placeholder:

   void UPartyWidget_Starter::DisplayParty()
   {
       Btn_Leave->SetVisibility(ESlateVisibility::Collapsed);
       Ws_Party->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Empty);
   
       // TODO: Query and display party member here.
       UE_LOG_PARTYESSENTIALS(Warning, TEXT("Get party member list is not yet implemented."));
   }

2. In the same file, you will also find the function shown below. Just as before, this function is used later, so add the following log as placeholder:

   void UPartyWidget_Starter::OnLeaveButtonClicked()
   {
       // TODO: Call leave party here.
       UE_LOG_PARTYESSENTIALS(Warning, TEXT("Leave party is not yet implemented."));
   }

3. Build your project and open it in the Unreal Engine editor.

4. In the editor, go to /Content/TutorialModules/PartyEssentials. You will find a data asset called DA_PartyEssentials.

5. Open DA_PartyEssentials, enable the Is Starter Mode Active, and save the data asset. This will activate the widgets mentioned before so you can navigate through them when you play the game.

   

   

6. Play the game in the editor. Navigate to Main Menu > Social > Party and you will see You have not joined a party text if the implementation was successful. You will also be able to see the logs you added in the previous steps:

   Log output:

   LogPartyEssentials: Warning: UPartyWidget_Starter::DisplayParty Get party member list is not yet implemented.

Resources

• The files used in this tutorial section are available in the Unreal Byte Wars GitHub repository.
  • AccelByteWars/Content/TutorialModules/PartyEssentials/UI/W_Party_Starter.uasset
  • AccelByteWars/Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidget_Starter.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidget_Starter.cpp
  • AccelByteWars/Content/TutorialModules/PartyEssentials/UI/W_PartyEntry_Starter.uasset
  • AccelByteWars/Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidgetEntry_Starter.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/PartyEssentials/UI/PartyWidgetEntry_Starter.cpp
  • AccelByteWars/Source/AccelByteWars/TutorialModules/PartyEssentials/PartyOnlineSession_Starter.cpp