【開発中アプリ紹介】弾律 -Danritsu-：HeatmapDrawerによる進行確率の可視化

App

2025.04.22

現在開発中のアプリ「弾律 -Danritsu-」では、弾の流れや強化をプレイヤーが戦略的に構築していくというコアシステムにおいて、**分岐方向の確率を視覚化する仕組み（Heatmap）**が重要な役割を担っています。

この記事では、その中核機能である HeatmapDrawer を活用したUI演出について、実装コードとともに解説します。

なぜ進行方向の確率を見せるのか？
実装：HeatmapDrawer の中核ロジック
色の意味とプレイヤーへの伝わり方
今後の拡張予定

なぜ進行方向の確率を見せるのか？

タイルによっては弾が複数方向に分岐する可能性があり、それぞれの分岐は内部的に確率で制御されています。この確率分布を視覚的にプレイヤーへ示すことで、以下のようなメリットが生まれます：

プレイヤーが「どの方向に進みやすいか」を瞬時に判断できる
ルート構築の直感性が上がり、テンポ感が向上
操作しなくても“戦略の手触り”が伝わるUIになる

実装：HeatmapDrawer の中核ロジック

以下は実際の HeatmapDrawer.cs における色算出処理の抜粋です。

private Color CalculateHeatmapColor(PhaseWeight weight, PhaseType phase)
{
    int total = weight.up + weight.down + weight.straight;
    if (total == 0) return new Color(0.2f, 0.2f, 0.2f, 0.2f);

    float upRatio = weight.up / (float)total;
    float downRatio = weight.down / (float)total;
    float straightRatio = weight.straight / (float)total;

    Color upColor = new Color(1f, 0.2f, 0.2f);      // 赤：上方向
    Color downColor = new Color(0.2f, 0.5f, 1f);     // 青：下方向
    Color straightColor = Color.white;              // 白：直進

    // 混色処理
    Color mixUpDown = Color.Lerp(upColor, downColor, downRatio / (upRatio + downRatio + 0.001f));
    Color blended = Color.Lerp(mixUpDown, straightColor, straightRatio);

    return Color.Lerp(new Color(0.2f, 0.2f, 0.2f), blended, 0.7f);
}

→ 各マスにおける方向選択の確率を色でブレンド表示し、進行予測に深みを与えます。