Add a party menu - Introduction to party - (Unity module)

Last updated on March 24, 2025

What's on the menu​

In this section, you learn how to prepare UIs to display party members. These UIs are defined in the following classes:

  • PartyMenu_Starter: A C# class used to display party members.

    • CS file: Assets/Resources/Modules/PartyEssentials/Scripts/UI/PartyMenu_Starter.cs
    • Prefab file: Assets/Resources/Modules/PartyEssentials/Prefabs/PartyMenu_Starter.prefab

  • PartyMemberEntry: A C# class used to display the individual party member information, such as display names and avatars.

    • CS file: Assets/Resources/Modules/PartyEssentials/Scripts/UI/PartyMemberEntry.cs
    • Prefab file: Assets/Resources/Modules/PartyEssentials/Prefabs/PartyMemberEntry.prefab

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

Party menu​

Below is a preview of the PartyMenu_Starter prefab. This prefab consists of a container to display party members and a button to leave the party.

PartyMenu_Starter preview image Unity Byte Wars introduction to party

The components used in this menu are defined in the PartyMenu_Starter class.

[SerializeField] private Transform memberEntryContainer;
[SerializeField] private PartyMemberEntry memberEntryPrefab;

[SerializeField] private AccelByteWarsWidgetSwitcher widgetSwitcher;
[SerializeField] private Button leaveButton;
[SerializeField] private Button backButton;

Party member entry​

Below is a preview of the PartyMemberEntry prefab. This prefab has two states: displaying individual party information and showing a button to add a new party member.

Here is the preview of the state that displays individual party member information:

PartyMemberEntry individual party member info preview Unity Byte Wars introduction to party

Here is the preview of the state that displays the add party member button:

PartyMemberEntry add party member button preview Unity Byte Wars introduction to party

To switch between these states, the PartyMemberEntry class file has the following functions. The SetPartyMember() used to display the party member information, while the ResetPartyMember() used to display the add party member button.

public void SetPartyMember(AccelByte.Models.BaseUserInfo memberUserData, bool isLeader)
{
    cachedMemberUserData = memberUserData;

    SetPartyMemberColor(isLeader ? leaderColor : memberColor);
    memberNameText.text = string.IsNullOrEmpty(memberUserData.displayName) ?
        AccelByteWarsUtility.GetDefaultDisplayNameByUserId(memberUserData.userId) : memberUserData.displayName;
    avatarImage.LoadImage(memberUserData.avatarUrl);

    // Switch view to display member information.
    memberButton.gameObject.SetActive(true);
    addMemberButton.gameObject.SetActive(false);

    // Only set button interaction for non-current user entry.
    SetInteractable(GameData.CachedPlayerState.playerId != memberUserData.userId);
}
public void ResetPartyMember() 
{
    memberNameText.text = string.Empty;
    avatarImage.ResetImage();
    SetPartyMemberColor(Color.white);

    // Switch view to display add member button.
    memberButton.gameObject.SetActive(false);
    addMemberButton.gameObject.SetActive(true);
    SetInteractable(true);
}

Below are the declarations of the components used by this prefab. The declarations can be found in the PartyMemberEntry class.

[SerializeField] private Image outlineImage;
[SerializeField] private AccelByteWarsAsyncImage avatarImage;
[SerializeField] private TMP_Text memberNameText;
[SerializeField] private Button memberButton;
[SerializeField] private Button addMemberButton;

Player Action menu​

This Friend Details menu that was outlined in the Display 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 generated buttons to use. Those are buttons for sending party invitations, kicking players from the party, and promoting a party member as the new leader.

Unfriend button and unblock button Unity Byte Wars introduction to party

These buttons are bind to the functions below defined in the PartyEssentialsWrapper_Starter class, which which we'll discuss more in the next section.

public void OnInviteToPartyButtonClicked(string inviteeUserId)
{
    // TODO: Call function to send party invite.
}
public void OnKickPlayerFromPartyButtonClicked(string targetUserId)
{
    // TODO: Call function to kick player from party.
}
public void OnPromotePartyLeaderButtonClicked(string targetUserId)
{
    // TODO: Call function to promote party leader.
}

Ready the UI​

In this section, you learn how to prepare enable the menus mentioned in the previous section.

  1. Build your project and open it in the Unity editor. In the editor, go to Assets/Resources/Modules/PartyEssentials and open the PartyEssentialsAssetConfig.asset. Then, make sure to activate the module in starter mode by ticking the Is Active checkbox and the Is Starter Active checkbox.

  2. Next, play the game in the editor. You'll able to navigate to Main Menu > Social > Party.

Resources​

Last updated on

On this page