【UE5】同じ時を刻んで同じ未来信じてるふたり...『プログレス』バーでマナカーブを作ってみた。【60回目】

★今回やったこと
・マナカーブ実装した！！！

こんばんは、「まる。」です！

カードゲームのデッキ構築において、
カードのコストバランスは生命線ですよね。

ということで今回は、前回作成したデッキ編集機能を発展させて、

『入れたカードのコスト帯が一目で確認できるマナカーブ』

を実装しました！📉

▼前回の開発記事はこちら

今回はUE使い向けに解説を入れてみました！（ややこしかったらごめんなさい🙇‍♂️）

TCG（トレーディングカードゲーム）らしさがグッと増した画面をサクッと紹介させていただきます😎

１．マナカーブって何？

簡単に言うと、デッキに入れたカードの「消費コスト（マナ）」が、
どのような割合で分布しているかを一目で確認できるグラフのことです。

MTGやデュエル・マスターズなど、
多くのカードゲームを遊んだことがある方ならご存知の通り、
強力なカードほど発動に必要な燃料（マナ）が多くなります。

もちろん、『HorizonNotes』も基本的にはそのルールに則っています。
さらに本作では、「変換したエーテル（マナ）をそのまま供給できる」という独自のシステムがあるため、
他のTCG以上にマナのやり繰り・管理が超重要になってきます。

デッキを組むときに、

「変換用に重いコストのカードをこれくらい入れて、あとは小回りが利くように軽いカードを多めにして…」

といった戦略的なバランス調整を直感的に行えるようにするために、
このマナカーブ画面が絶対に必要だったわけです！

2.C++でデッキ内の各コストの分布を取得する

まずは、編集中のデッキ内に「どのコストのカードが何枚あるか」
を計算して取得する関数を作成します。

ステップ1：集計用構造体（Struct）の定義

まずは、C++で集計したデータをブループリント（UI）へ渡すための「箱」を作ります。

（今回もC++のコード作成自体は、
Gemini先生やClaudeさんにお願いしています。
私はあくまで中身をチェックするディレクター係です😎）

ここで大事なポイントが「配列の要素数」です。

今回のUIでは、「0, 1, 2, 3, 4, 5, 6以上」とそれぞれのコスト帯の枚数を個別に計算してグラフ化するのが目的です。

全部で7つの段階に分かれているため、
配列の数は「7」で固定してあげます。

これを、デッキシステムを司るC++のヘッダーファイルに追加します。

C++

// DeckBuildLibrary.h に追加

USTRUCT(BlueprintType)
struct FDeckAnalytics
{
    GENERATED_BODY()

    // コスト帯ごとの枚数（Index 0 = 0コスト, Index 6 = 6コスト以上）
    UPROPERTY(BlueprintReadWrite, Category = "Analytics")
    TArray<int32> ManaCurve;

    // クラス（タグ）ごとの枚数
    UPROPERTY(BlueprintReadWrite, Category = "Analytics")
    TMap<FGameplayTag, int32> ClassDistribution;

    FDeckAnalytics()
    {
        // 0コスト〜6コスト以上の「7段階」として初期化
        ManaCurve.Init(0, 7);
    }
};

ステップ2：集計関数の定義と実装

次に、デッキ情報を受け取って集計結果を返す関数 CalculateDeckAnalytics を作ります。

この関数は、先ほど作った FDeckAnalytics 型のデータとして結果を返してくれます。

これも、先ほど同様ヘッダーファイル（入れ物）に追加します。

C++

    /** デッキ内のマナカーブとクラス分布を集計して返します */
    UFUNCTION(BlueprintCallable, Category = "DeckBuild|Analytics")
    static FDeckAnalytics CalculateDeckAnalytics(const FPlayerDeck& Deck);

STEP 3 : ソースファイル (DeckBuildLibrary.cpp) の実装

入れ物が出来たので、次はいよいよ実際に動かす部分（ソースファイル）を作成します。

細かい部分をすべて解説すると大変なので…
今回は一番のポイントは
 FMath::Clamp を使って「コスト6以上」をひとまとめにしている点です。

C++

#include "Utility/HorizonGameplayTags.h"

FDeckAnalytics UDeckBuildLibrary::CalculateDeckAnalytics(const FPlayerDeck& Deck)
{
    FDeckAnalytics Analytics;
    UAssetManager* AssetManager = UAssetManager::GetIfInitialized();
    
    if (!AssetManager) 
    {
        return Analytics;
    }

    for (const auto& Pair : Deck.SpellCardList)
    {
        FName CardID = Pair.Key;
        int32 CardCount = Pair.Value;

        FPrimaryAssetId AssetId(FPrimaryAssetType(TEXT("SpellCard")), CardID);
        
        // 事前ロード済みなので TryLoad で高速に取得
        if (UObject* LoadedObj = AssetManager->GetPrimaryAssetPath(AssetId).TryLoad())
        {
            if (USpellCardDataAsset* PDA = Cast<USpellCardDataAsset>(LoadedObj))
            {
                // ---------------------------------------------
                // 1. マナカーブの集計
                // ---------------------------------------------
                int32 BaseCost = 0;
                for (const FDataTableRowHandle& Handle : PDA->Data.CostTypeHandles)
                {
                    if (Handle.IsNull()) continue;
                    
                    FCardCost* Row = Handle.GetRow<FCardCost>(TEXT("AnalyticsCostLookup"));
                    if (Row && Row->ResourceTag == HorizonTags::Stat_Cost)
                    {
                        BaseCost = Row->Amount;
                        break;
                    }
                }
                
                // コストが6以上の場合はすべてIndex 6（上限）にまとめる
                int32 CostIndex = FMath::Clamp(BaseCost, 0, 6);
                Analytics.ManaCurve[CostIndex] += CardCount;

                // ---------------------------------------------
                // 2. クラス分布の集計
                // ---------------------------------------------
                if (PDA->Data.RequiredClasses.IsEmpty())
                {
                    Analytics.ClassDistribution.FindOrAdd(HorizonTags::Class_Neutral) += CardCount;
                }
                else
                {
                    for (const FGameplayTag& ClassTag : PDA->Data.RequiredClasses)
                    {
                        Analytics.ClassDistribution.FindOrAdd(ClassTag) += CardCount;
                    }
                }
            }
        }
    }

    return Analytics;
}

これでC++側の準備は完了です。

3.BP側で取得したマナカーブをプログレスバーに反映させる

C++のコンパイルが成功したら、
デッキ編成画面のウィジェットを開きます。

ここで、今回の主役になる今回の主役になる「プログレスバー」というUIパーツについて、ちょっとした補足をします。

■値が0.0の場合（空っぽ）

■値が0.5の場合（ちょうど半分）

STEP1 : プログレスバーや枚数表示のテキストを配列としてセットする

まずは、画面に配置した7つのプログレスバーと、
枚数を表示するテキストを、それぞれ「配列変数」にまとめて格納する準備をします。

（これは、後の処理を効率的に行う為です。）

①.配列変数を用意する

• 変数名: ManaCurveBars (型: ProgressBar のオブジェクト参照 / 配列にする)

• 変数名: ManaCurveTexts (型: テキスト のオブジェクト参照 / 配列にする)

②.Event Construct（初期化）での登録

Event Construct（ウィジェットが画面に表示された時に最初に呼ばれる処理）に Make Array（配列の作成） ノードを繋ぎます。

ここで先ほど配置したUIパーツを順番（0コスト〜6コスト以上）にピンに繋ぎ、作成した配列変数にセットしておきます。

STEP2 :  更新用関数（UpdateManaCurveUI）の実装
次に、C++から構造体（FDeckAnalytics）を受け取ったあとの処理をBPに書いていきます。

全体像はざっくりこんな感じです。（ちょっとむずいかも…）

1. 構造体をBreak(分解)し、
   ManaCurve配列から Max (Int Array) ノードを繋いで、
   一番枚数が多いコスト帯の「最大値（Max）」を取得します。
   

2. Branchで「Max > 0」かを判定します
   （デッキが0枚のときの「エラー」を回避するためです）。
   

3. Trueなら、事前に用意した ManaCurveBars（プログレスバーの配列） に対して For Each Loop を回します。

【ループ内で行う更新処理】

• プログレスバーの更新：
  ManaCurve 配列から現在の Index で枚数を取得してFloatに変換。
  それを最大値（Max）で割り算し、
  その結果を ProgressBar の Set Percent に繋ぎます。
  

• テキストの更新：
  ManaCurveTexts 配列から対象のテキストを引っ張り出し、
  Set Text に枚数を渡して表示を更新します。

ここでの一番の工夫は「割合（Percent）の計算」です。

まず、ManaCurve配列の中から「一番枚数が多いコスト帯（Max）」を見つけます。

そして、各コストの枚数をこのMaxで割り算します。

こうすることで、

「一番枚数が多いコストのゲージがぴったり1.0（100%）」になり、
他のコスト帯もそれに合わせて綺麗な山なりのグラフになってくれます。

STEP3：更新用カスタムイベントを作って完成！

いよいよ最後の仕上げです。

これまで作った機能をガッチャンコします。

冒頭で作成したC++の集計ノードを呼び出して、
その結果を先ほどのUI更新ノードに繋ぐだけ。

あとは、このイベントを「デッキにカードを追加・削除した時」に呼ばれるように間に挟んであげれば……
カードを出し入れするたびにぬるぬる動く、マナカーブUIの完成です👍

テスト実行

それでは、早速実行してみます。

■結果は…

うん、上手く行きましたね😎

枚数に応じてテキストやバーが変わってくれていることが確認できました。

これで、マナカーブの実装完了です🎉🎉

あとは「クラスごとの枚数」も表示させるようにしたいところですが……
実装手順は今回のマナカーブとほぼ同じになるはずなので、
そちらは裏でサクッとやっておきます！

まとめ

今回はマナカーブの実装をお届けしましたが、いかがでしたか？

グラフが動くと、デッキ編成画面も一気に本格的になってきましたね。

まだまだ細かい調整は必要ですが、
個人的にも順調な手応えを感じています👍

次回はいよいよ「デッキの保存・ロード処理」！

……と行きたいところなのですが、
まずは今の画面の操作感などを裏でじっくり仕上げようと思います。

そのため、システム開発のログは少しお休みして、
次からは例の

「noteの皆さんと一緒にゲームを作っていく企画」

の記事をメインにお届けしていく予定です！

皆さんとワイワイ進める企画、ぜひご期待ください！

もしこの記事が「参考になった」「開発の苦労が伝わった！」「続きが気になる！」と思ったら、
記事の下にある「スキ（ハートマーク）」を押していただけると嬉しいです！
皆様の応援こそが、毎日の開発と更新の何よりの励みになります。
最後までお読みいただき、ありがとうございました！
また次回の記事でお会いしましょう！

#プログレスバー #UIデザイン #データ駆動  #カードゲーム #デッキ構築型 #HorizonNotes