統計データプロファイルメニュー - 統計データを追跡し表示する - (Unreal Engine モジュール)

Last updated on June 12, 2024

What's on the menu

In this tutorial, you will learn how to prepare a simple Stats Profile menu widget to display the user's stats stored in AccelByte Gaming Services (AGS).

The Stats Profile menu you will add the code to has been created for you. The files are available in Resources and consists of four parts:

• The menu itself
  • StatsProfileWidget_Starter: A C++ class containing most of the stats implementation.
    • Header file: /Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/StatsProfileWidget_Starter.h
    • CPP file: /Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/StatsProfileWidget_Starter.cpp
  • W_StatsProfile_Starter: A Widget Blueprint class that is created with Unreal Motion Graphics (UMG).
    • Widget Blueprint file: /Content/TutorialModules/Storage/StatisticsEssentials/W_StatsProfile_Starter.uasset
• An entry widget that is used as a list entry to show the player's stats
  • StatsProfileWidgetEntry: A C++ class.
    • Header file: /Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/Components/StatsProfileWidgetEntry.cpp
    • CPP file: /Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/Components/StatsProfileWidgetEntry.h
  • W_StatsProfileEntry: A Widget Blueprint class.
    • Widget Blueprint file: /Content/TutorialModules/Storage/StatisticsEssentials/Components/W_StatsProfileEntry.uasset

備考

For more information about UMG, read UMG UI Designer.

The Stats Profile menu has three main widget components that represent states of the request to AGS:

• W_StatsListOuter: consists of the user's stats values that were retrieved from AGS.
• W_LoadingOuter: consists of circular throbber widget which indicates that you're waiting for a response from AGS.
• W_FailedOuter: shown when the game fails to retrieve data from AGS. Consists of a retry button.
• W_EmptyOuter: shown when the current user doesn't have any stats.

The widget component changes are possible using the Widget Switcher component. It works like a tab control switching through its children.

Here is the declaration of the Widget Switcher component in the C++ Header file:

private:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidgetSwitcher* Ws_Outer;

Here are the declarations of the main widget components:

private:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidget* W_StatsListOuter;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidget* W_LoadingOuter;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidget* W_FailedOuter;

To change what widget the Widget Switcher shows, we set the active widget directly like so:

Ws_Outer->SetActiveWidget(W_LoadingOuter);

Default state

The W_StatsListOuter widget component displays a list of the player's stats. The list is dynamically constructed using a Dynamic Entry Box widget component. The Dynamic Entry Box widget component acts as a container that can display a list of other widget components in an arrangement of vertical, horizontal, or grid.

Here is the declaration of the Dynamic Entry Box widget component:

private:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UDynamicEntryBox* Deb_StatsList;

Here is the preview of W_StatsListOuter.

Loading state

The W_LoadingOuter widget component consists entirely of a circular throbber which indicates that you're waiting for a response from the backend.

Failed state

The W_FailedOuter widget component consists of an error message and a retry button called Btn_Retry.

private:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_Retry;

Empty state

The W_EmptyOuter widget component consists of a message telling the player that the stats are empty.

private:
    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidget* W_EmptyOuter;

Ready the UI

In this section, we are going to prepare the UI for AGS Online Subsystem (OSS) stats integration.

1. Open AccelByteWars.sln in Visual Studio. From Solution Explorer, open the StatsProfileWidget_Starter Header file.

2. Create two new functions inside the UStatsProfileWidget_Starter class called StartQueryLocalUserStats and OnQueryLocalUserStatsComplete. You're going to set this function to the OnClicked of a button, so you need to add the UFUNCTION specifier.

   protected:
       UFUNCTION()
       void StartQueryLocalUserStats();

3. Implement the function to the CPP file. Open StatsProfileWidget_Starter CPP file and add the following code:

   void UStatsProfileWidget_Starter::StartQueryLocalUserStats()
   {
       // TODO (TutorialModule): start querying user's stats
   }

4. Call the function that queries the player's stats in OnActivated and bind it to the Btn_Retry OnClicked.

   void UStatsProfileWidget_Starter::NativeOnActivated()
   {
       Super::NativeOnActivated();
   
       Btn_Back->OnClicked().AddUObject(this, &ThisClass::DeactivateWidget);
       Btn_Retry->OnClicked().AddUObject(this, &ThisClass::StartQueryLocalUserStats);
   
       StartQueryLocalUserStats();
   }

5. Create another function as a callback for the query response. Open StatsProfileWidget_Starter Header file and add the following code:

   protected:
       void OnQueryLocalUserStatsComplete(const FOnlineError& ResultState, const TArray<TSharedRef<const FOnlineStatsUserStats>>& UsersStatsResult);

6. Create the definition for that function in its CPP file. Open StatsProfileWidget_Starter CPP file and add the following code:

   void UStatsProfileWidget_Starter::OnQueryLocalUserStatsComplete(
       const FOnlineError& ResultState,
       const TArray<TSharedRef<const FOnlineStatsUserStats>>& UsersStatsResult)
   {
       // TODO (TutorialModule): display player's stats based on query result
   }

7. Build your project and open it in the Unreal Engine Editor. In the Editor, open the W_StatsProfile_Starter Blueprint asset. Make sure that all widgets are bound properly in the Bind Widgets tab and the Parent Class is set to StatsProfileWidget_Starter.

   

8. From the Content Browser, open /Content/TutorialModules/Storage/StatisticsEssentials/DA_StatsEssentials, and enable the Is Starter Mode Active.

   

9. Play the game in the Editor. You should be able to log in and navigate to Profile > Stats. You should see an empty page with a back button.

Resources

• Files used in this tutorial
  • AccelByteWars/Content/TutorialModules/Storage/StatisticsEssentials/UI/W_StatsProfile_Starter.uasset
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/StatsProfileWidget_Starter.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/StatsProfileWidget_Starter.cpp
  • AccelByteWars/Content/TutorialModules/Storage/StatisticsEssentials/UI/Components/W_StatsProfileEntry.uasset
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/Components/StatsProfileWidgetEntry.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Storage/StatisticsEssentials/UI/Components/StatsProfileWidgetEntry.cpp