UIの追加 - ウォレットの基本 - (Unreal Engineモジュール)

Last updated on February 4, 2026

注釈：本資料はAI技術を用いて翻訳されています。

ゲームのセットアップ

Byte Warsには、ゲーム内で事前設定された2種類のゲーム内通貨が含まれています。これらの設定はSource/AccelByteWars/Core/UI/MainMenu/Store/StoreItemModel.hにあります。StoreItemModelファイルには以下の項目が設定されています:

通貨タイプの列挙型:

UENUM(BlueprintType)
enum class ECurrencyType : uint8
{
    NONE = 0,
    NATIVE,
    COIN,
    GEM
};

タイプに基づいて通貨コードを取得する関数:

class FPreConfigCurrency
{
public:
    static FString GetCodeFromType(const ECurrencyType CurrencyType)
// ...
};

コードに基づいて通貨タイプを取得する関数:

class FPreConfigCurrency
{
public:
// ...
    static ECurrencyType GetTypeFromCode(const FString& CurrencyCode)
// ...
};

各タイプで使用されるデフォルトの通貨コードを上書きするには、Config/DefaultEngine.iniファイルに以下の値を追加します:

[CurrencyCode]
Coin=<coin_currency_code>
Gem=<gem_currency_code>

メニューの内容

このセクションでは、プレイヤーのウォレット情報を表示するウィジェットを準備する方法を学びます。関連ファイルはリソースセクションにあります。

ウォレット残高ウィジェットエントリー

WalletBalanceWidgetEntry: アイテムの詳細を表示するために使用されるC++クラスです。このメニューは、すぐに使用できるコンポーネントとして提供されているため、変更する必要はありません。
- ヘッダーファイル: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/Components/WalletBalanceWidgetEntry.h
- CPPファイル: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/Components/WalletBalanceWidgetEntry.cpp
- Blueprintウィジェット: Content/TutorialModules/Monetization/WalletEssentials/UI/Components/W_WalletBalanceEntry.uasset

WalletBalanceWidgetEntryは、特定の通貨のプレイヤーの残高を表示する表示専用のウィジェットです。残高データの取得や更新のロジックは含まれておらず、渡されたデータを表示するだけです。このウィジェットは別のコンテナウィジェット内で使用します。

以下はWalletBalanceWidgetEntry Blueprintウィジェットのプレビューです:

WalletBalanceWidgetEntry preview image

このウィジェットで使用されるコンポーネントは、ヘッダーファイルで定義されています:

private:
    UPROPERTY(EditDefaultsOnly)
    FSlateBrush Brush_Coin;

    UPROPERTY(EditDefaultsOnly)
    FSlateBrush Brush_Gem;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_Balance;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UImage* I_CurrencySymbol;

ウィジェットを初期化するには、Setup()関数を使用します。これにより、入力テキストと通貨タイプに基づいてUIが更新されます:

public:
    void Setup(const FText& Balance, const ECurrencyType CurrencyType) const;

ウォレット残高ウィジェット

WalletBalanceWidget_Starter: アイテムの詳細を表示するために使用されるC++クラスです。このメニューは、すぐに使用できるコンポーネントとして提供されているため、変更する必要はありません。
- ヘッダーファイル: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/WalletBalanceWidget_Starter.h
- CPPファイル: Source/AccelByteWars/TutorialModules/Monetization/WalletEssentials/UI/WalletBalanceWidget_Starter.cpp
- Blueprintウィジェット: Content/TutorialModules/Monetization/WalletEssentials/UI/W_WalletBalance_Starter.uasset

デフォルトでは、このウィジェットは空のコンテナです。WalletBalanceWidgetEntryのインスタンスを追加して、これを埋めていきます。このウィジェットで使用されるコンポーネントは、ヘッダーファイルで宣言されています:

private:
// ...
    UPROPERTY(BlueprintReadOnly, meta = (BindWidget, BlueprintProtected = true, AllowPrivateAccess = true))
    UPanelWidget* W_Root;

このウィジェットには、Byte Wars統合用に調整された事前設定された変数とヘルパー関数が含まれています。

ウォレットロジックを処理するサブシステムへの参照:

private:
// ...
    UPROPERTY()
    UWalletEssentialsSubsystem_Starter* WalletSubsystem;

void UWalletBalanceWidget_Starter::NativeOnActivated()
{
// ...
    WalletSubsystem = GetGameInstance()->GetSubsystem<UWalletEssentialsSubsystem_Starter>();
    ensure(WalletSubsystem);
// ...
}

表示される通貨タイプごとにWalletBalanceWidgetEntryインスタンスを格納する変数:

private:
    TMap<FString, UWalletBalanceWidgetEntry*> CurrencyBalanceEntryMap;

WalletBalanceWidgetEntry Blueprintウィジェットへのクラス参照:

private:
// ...
    UPROPERTY(EditAnywhere)
    TSubclassOf<UWalletBalanceWidgetEntry> CurrencyBalanceClass;

メニューの準備

WalletBalanceWidget_Starterヘッダーファイルを開き、以下の関数宣言を追加します。

private:
    void ShowBalance(bool bWasSuccessful, const FAccelByteModelsWalletInfoResponse& Response) const;

    void UpdateBalance(const ECurrencyType CurrencyType);

WalletBalanceWidget_Starter CPPファイルを開き、ShowBalance()関数を実装します。この関数は、受信したレスポンスに基づいてプレイヤーのウォレット情報を表示します。

void UWalletBalanceWidget_Starter::ShowBalance(bool bWasSuccessful, const FAccelByteModelsWalletInfoResponse& Response) const
{
    if (!bWasSuccessful)
    {
        // If failed, set all balance text to error.
        for (const TTuple<FString, UWalletBalanceWidgetEntry*>& CurrencyBalance : CurrencyBalanceEntryMap)
        {
            if (!CurrencyBalance.Value || CurrencyBalance.Key.IsEmpty())
            {
                continue;
            }

            CurrencyBalance.Value->Setup(TEXT_BALANCE_ERROR, FPreConfigCurrency::GetTypeFromCode(CurrencyBalance.Key));
        }
        return;
    }

    if (const UWalletBalanceWidgetEntry* Entry = *CurrencyBalanceEntryMap.Find(Response.CurrencyCode.ToUpper()))
    {
        Entry->Setup(
            FText::FromString(FString::FromInt(Response.Balance)),
            FPreConfigCurrency::GetTypeFromCode(Response.CurrencyCode));
    }
}

引き続きCPPファイルで、UpdateBalance()関数を実装します。この関数は、各通貨タイプのWalletBalanceWidgetEntryインスタンスを作成してセットアップし、WalletBalanceWidget_Starterウィジェットに追加します。

void UWalletBalanceWidget_Starter::UpdateBalance(const ECurrencyType CurrencyType)
{
    const FString CurrencyCode = FPreConfigCurrency::GetCodeFromType(CurrencyType);

    UWalletBalanceWidgetEntry* Entry = CreateWidget<UWalletBalanceWidgetEntry>(this, CurrencyBalanceClass);
    ensure(Entry);

    Entry->Setup(FText::FromString("..."), CurrencyType);
    W_Root->AddChild(Entry);
    CurrencyBalanceEntryMap.Add(CurrencyCode, Entry);
// ...
}

WalletBalanceWidget_Starter CPPファイルで、NativeOnActivated()関数を見つけて、以下のハイライトされた行を追加します。これらの行はWalletBalanceWidgetEntryインスタンスをリセットします。

void UWalletBalanceWidget_Starter::NativeOnActivated()
{
    Super::NativeOnActivated();
// ...
    // Update balance.
    W_Root->ClearChildren();
    CurrencyBalanceEntryMap.Empty();

    UpdateBalance(ECurrencyType::COIN);
    UpdateBalance(ECurrencyType::GEM);
}

プロジェクトをビルドし、完了したらUnreal Editorで開きます。
Content/TutorialModules/Monetization/WalletEssentials/DA_WalletEssentials.uassetを開き、Is Starter Mode Activeを有効にします。Data Assetを保存します。
エディターでPlayをクリックし、Store > Item Shopに移動します。メニューの右上隅にウォレットウィジェットが表示されます。

リソース

このチュートリアルセクションで使用されるファイルは、Byte Wars GitHubリポジトリで入手できます。

ゲームのセットアップ​

メニューの内容​

ウォレット残高ウィジェットエントリー​

ウォレット残高ウィジェット​

メニューの準備​

リソース​