すべてをまとめる - ゲーム内ストアの基礎 - (Unreal Engine モジュール)

Last updated on February 4, 2026

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

カテゴリとストアアイテムを表示するためにUIを接続する

ShopWidget_Starter CPPファイルを開き、NativeOnActivated() 関数に移動して、以下のハイライトされた行を追加します。これにより、ウィジェットがアクティブ化されるとすぐに、前のステップで実装した GetOrQueryCategoriesByRootPath() 関数が呼び出されます。

void UShopWidget_Starter::NativeOnActivated()
{
// ...
    // Reset UI.
    SwitchContent(EAccelByteWarsWidgetSwitcherState::Loading);

    if (const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer())
    {
        StoreSubsystem->GetOrQueryCategoriesByRootPath(
            LocalPlayer->GetPreferredUniqueNetId().GetUniqueNetId(),
            RootPath,
            FOnGetOrQueryCategories::CreateUObject(this, &ThisClass::OnGetOrQueryCategoriesComplete));
    }
// ...
    OnActivatedMulticastDelegate.Broadcast(GetOwningPlayer());
}

SwitchCategory() 関数に移動し、その実装を以下のコードに置き換えます。この変更により、ストアカテゴリを受信した直後、またはプレイヤーがカテゴリを選択したときに、ストアアイテムが即座に取得されるようになります。

void UShopWidget_Starter::SwitchCategory(FName Id)
{
    if (const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer())
    {
        Tv_ContentOuter->ClearListItems();
        StoreSubsystem->GetOrQueryOffersByCategory(
            LocalPlayer->GetPreferredUniqueNetId().GetUniqueNetId(),
            Id.ToString(),
            FOnGetOrQueryOffersByCategory::CreateUObject(this, &ThisClass::OnGetOrQueryOffersComplete));
    }
}

OnRefreshButtonClicked() 関数に移動し、現在のコードを以下のスニペットに置き換えます。前述のように、この関数はステップ1の GetOrQueryCategoriesByRootPath() 関数呼び出しと同様に動作しますが、アクティブなタブを保存し、データを取得した後に再選択します。

void UShopWidget_Starter::OnRefreshButtonClicked()
{
    const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
    if (!LocalPlayer)
    {
        return;
    }

    OnRefreshButtonClickedDelegates.Broadcast();

    SwitchContent(EAccelByteWarsWidgetSwitcherState::Loading);

    Tv_ContentOuter->ClearListItems();	
    Tl_ItemCategory->SetVisibility(ESlateVisibility::Hidden);

    // Refresh store item.
    StoreSubsystem->GetOrQueryCategoriesByRootPath(
        LocalPlayer->GetPreferredUniqueNetId().GetUniqueNetId(),
        RootPath,
        FOnGetOrQueryCategories::CreateUObject(this, &ThisClass::OnRefreshCategoriesComplete),
        true);
    
    // Refresh balance.
    UAccelByteWarsActivatableWidget* BalanceWidget = GetBalanceWidget();
    if(BalanceWidget != nullptr)
    {
        BalanceWidget->DeactivateWidget();
        BalanceWidget->ActivateWidget();
    }
}

OnRefreshCategoriesComplete() 関数に移動し、その実装を以下のコードに置き換えます。この関数は、以前にアクティブだったカテゴリタブを再選択し、対応するストアアイテムを取得します。

void UShopWidget_Starter::OnRefreshCategoriesComplete(TArray<FOnlineStoreCategory> Categories)
{
    const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
    if (!LocalPlayer)
    {
        return;
    }

    FName LastSelectedTab = Tl_ItemCategory->GetSelectedTabId();
    Tl_ItemCategory->SetVisibility(ESlateVisibility::Visible);
    
    // Temporary unbind, as it will automatically select first tab when rebuild tab list, while we want to keep the previous tab selection. 
    Tl_ItemCategory->OnTabSelected.RemoveDynamic(this, &ThisClass::SwitchCategory);
    
    OnGetOrQueryCategoriesComplete(Categories);

    // Reselect tab if exist, otherwise select all item tab.
    const bool bLastSelectedTabExist = Categories.ContainsByPredicate([&LastSelectedTab](FOnlineStoreCategory& Category)
    {
        return Category.SubCategories.IsEmpty() && Category.Id.Equals(LastSelectedTab.ToString());
    });
    const FName TabSelectionTarget = bLastSelectedTabExist ? LastSelectedTab : FName(RootPath);
    Tl_ItemCategory->SelectTabByID(TabSelectionTarget);
    StoreSubsystem->GetOrQueryOffersByCategory(
        LocalPlayer->GetPreferredUniqueNetId().GetUniqueNetId(),
        TabSelectionTarget.ToString(),
        FOnGetOrQueryOffersByCategory::CreateUObject(this, &ThisClass::OnGetOrQueryOffersComplete),
        true);

    // Re-add after manually select and switch category, because re-add before it will be unstable.	
    if(IsActivated())
    {
        Tl_ItemCategory->OnTabSelected.AddDynamic(this, &ThisClass::SwitchCategory);
    }
}

プロジェクトをビルドし、完了したらUnreal Editorで開きます。
エディタで以下にリストされているファイルを開き、各ウィジェットブループリントの RootPath を設定します。Byte Warsの場合、アイテムショップは /ingamestore/item カテゴリ配下のすべてのアイテムを表示し、通貨ショップは /ingamestore/currency カテゴリ配下のすべてのアイテムを表示する必要があります。
- Content/TutorialModules/Monetization/InGameStoreEssentials/UI/W_ItemShop_Starter.uasset: RootPath を /ingamestore/item に設定
- Content/TutorialModules/Monetization/InGameStoreEssentials/UI/W_CurrencyShop_Starter.uasset: RootPath を /ingamestore/currency に設定

リソース

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

カテゴリとストアアイテムを表示するためにUIを接続する​

リソース​

カテゴリとストアアイテムを表示するためにUIを接続する

リソース