Invite to Game Session UI - Play with friends - (Unreal Engine module)

Last updated on October 24, 2024

About the Invite to Game Session UI​

The Invite to Game Session UI is a widget in Byte Wars that is attached to the Friend Details widget from the Friend list module. It is available in the Resources section and consists of a button and is defined in the following classes:

  • InviteToGameSessionWidget_Starter: A C++ class where most of the implementation will be.
    • Header file: \Source\AccelByteWars\TutorialModules\Play\PlayingWithFriends\UI\InviteToGameSessionWidget_Starter.h
    • CPP file: \Source\AccelByteWars\TutorialModules\PlayingWithFriends\UI\InviteToGameSessionWidget_Starter.cpp
  • W_InviteToGameSession_Starter: A widget Blueprint class that was created and designed using Unreal Motion Graphics (UMG).

Preview of the Invite to Game Session UI Unreal Byte Wars play with friends

Take a look at what has been prepared for you in the these files:

  • The menu consists of a single button called Btn_Invite. This is where player triggers the invite function.

    private:
    // ...
        UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
        UCommonButtonBase* Btn_Invite;

  • Since the menu is an attachment to the Friend Details widget, you need to have a way to access the cached friend data from it. That's where the GetFriendDataFromParentWidget comes in. Simply call that function, and it will return the cached friend data from the Friend Details widget.

    private:
    // ...
        UFriendData* GetFriendDataFromParentWidget();

  • Notice the FTimerHandle variable in the Header file. This is used as the disable timer to prevent a player from spamming the invite button.

    private:
    // ...
        FTimerHandle InviteDelayTimerHandle;

  • There's also a subsystem variable. This is a pointer to the subsystem class that you will implement later. The code to retrieve that pointer is in InviteToGameSessionWidget_Starter under NativeOnActivated.

    private:
    // ...
        UPROPERTY()
        UPlayingWithFriendsSubsystem_Starter* Subsystem;
    void UInviteToGameSessionWidget_Starter::NativeOnActivated()
    {
    // ...
        Subsystem = GetGameInstance()->GetSubsystem<UPlayingWithFriendsSubsystem_Starter>();
        check(Subsystem)
    // ...
    }

Ready the Invite to Game Session widget​

Remember, this widget is responsible for only sending the invite and nothing else. The invitation notification will be handled by a different UI system later.

  1. Open the InviteToGameSessionWidget_Starter Header file and add the following declaration:

    private:
    // ...
        void InviteToSession();

  2. Open InviteToGameSessionWidget_Starter CPP file and add this implementation:

    void UInviteToGameSessionWidget_Starter::InviteToSession()
    {
        const UFriendData* FriendData = GetFriendDataFromParentWidget();
        if (!FriendData)
        {
            return;
        }

        // disable button for 5 seconds to avoid spamming
        Btn_Invite->SetIsEnabled(false);
        GetGameInstance()->GetTimerManager().SetTimer(
            InviteDelayTimerHandle,
            FTimerDelegate::CreateWeakLambda(this, [this]()
            {
                Btn_Invite->SetIsEnabled(true);
            }),
            5.0f,
            false,
            5.0f);
    // ...
    }

  3. Still in the CPP file, navigate to NativeOnActivated function and add the following code:

    void UInviteToGameSessionWidget_Starter::NativeOnActivated()
    {
    // ...
        Btn_Invite->SetIsEnabled(true);
        Btn_Invite->OnClicked().AddUObject(this, &ThisClass::InviteToSession);
    }

  4. Unbind the function when the widget closes. In the CPP file, navigate to NativeOnDeactivated and add the following code:

    void UInviteToGameSessionWidget_Starter::NativeOnDeactivated()
    {
        Btn_Invite->OnClicked().RemoveAll(this);

        if (InviteDelayTimerHandle.IsValid())
        {
            GetGameInstance()->GetTimerManager().ClearTimer(InviteDelayTimerHandle);
        }

        Super::NativeOnDeactivated();
    }

  5. Build the project and open it with Unreal Editor.

  6. In the Unreal Editor, from the Content Browser, navigates to Content\TutorialModules\Play\PlayingWithFriends\UI\ and open W_InviteToGameSession_Starter. Make sure that all widgets are bound properly in the Bind Widgets tab and the Parent class is set to InviteToGameSessionWidget_Starter.

    Bind widgets tab Unreal Byte Wars play with friends

  7. Open Content\TutorialModules\Play\PlayingWithFriends\DA_PlayingWithFriends.uasset and enable Is Starter Mode Active. Save the Data Asset.

    Data Asset changes preview

  8. Play the game in the Editor, navigates to Online Play > Play Online > Create Match Session > Invite Friends. Click any friend and then Invite to Match Session. The starter UI will be shown if implemented correctly.

Resources​

Last updated on

On this page