こんにちは、深夜です。
前回のゲーム開発記録（Lv.4）では、UIをスッキリさせて操作テンポを劇的に向上させるため、インベントリを完全廃止し、「スロット一体型魔法管理システム」への刷新を行いました。プレイヤーが手に入れたカードを直感的に管理できるようになり、バトル中の手触りがかなり洗練されてきました。
これまでの仕様変更を経て、戦闘部分の楽しさは徐々に形になってきましたが、今回はゲームの「メインサイクル」そのものに大ナタを振るいました。
本作のローグライクとしての戦略性と緊張感を極限まで高めるため、なんと「Slay the Spire型」の分岐マップ進行システムを新たに導入しました！
あわせて、マップ画面の横スクロール化、操作性の徹底改善、形成型絵文字を廃止したオリジナルドット絵（ローピクセル）アセットの導入など、ゲーム全体の完成度を大きく引き上げる大規模なアップデートを行いましたので、その開発の試行錯誤を詳しくご紹介します。
Slay the Spire型 分岐マップ進行システムの導入
今までは一本道で戦闘（Wave）が連続するシンプルな進行方法でしたが、プレイヤーが「次にどの戦場に挑み、どうやってデッキを成長させるか」を自分で選択できるローグライクならではの戦略性を楽しんでもらうため、分岐ルートを選択しながら進むマップシステムを導入しました。
全体スケールと全3章構成
本作のマップは全3章構成になっており、各章は「10ステップのルート分岐 ＋ 11マス目のボス戦」という構造をとっています。合計すると33ステップの長大な旅路になります。章の最深部で待ち受けるボスを撃破することで、次の章のマップへ進出できます。
ルートを構成する多彩なノード（マス）種別
プレイヤーが進路を選択するマスには、道中のゲームプレイに変化と戦略を与える以下の6つの種別（ノード）を実装しました。
- ⚔️ 通常戦闘：通常のエネミーとの戦闘。勝利することで新たな魔法カードを獲得でき、デッキの構築を進められます。
- 👹 エリート戦闘：強力な中ボスとのバトル。通常戦闘より難易度は高いですが、その分、より価値の高い強力な報酬を獲得できます。
- 🔨 魔法の工房：後述する「魔法の無料強化」ができるボーナスイベント。ノーリスクで戦力を底上げできる重要なオアシスです。
- 🎁 宝箱：戦闘を行わずに、魔法陣の設置やキャラクター育成に必要な重要リソース「魔石」を無条件で獲得できます。（検討中）
- ❓ 未知のイベント：プレイヤーの体力上限アップや、リソースの物々交換など、その場で偶発的なメリット・デメリットが発生するイベントです。（検討中）
- 💀 各章のボス：各章の最深部（11ステップ目）で待ち構える強敵。勝利すれば次章マップへと進めますが、敗北すればそこでゲームオーバーとなります。
「魔法の工房」による無料魔法強化イベントの実装
新しく追加したノードの目玉である「魔法の工房（🔨）」では、到達時にプレイヤーが手持ちの魔法を1つ選び、完全無料で1回だけ強化できるシステムを実装しました。
強化項目は、プレイヤーのビルド（戦術）に合わせて以下の2つの方向性から選択できます。
- レベルアップ：魔法の威力を増加させ、消費魔力（MP）を軽減し、再発動間隔（クールダウン）を短縮します。
- 最大所持枚数（同時設置数）の増量：その魔法陣をバトルフィールド上に同時に召喚・配置できる上限数を増やし、物量で圧倒できるようにします。
この強化結果は、カード詳細を確認するツールチップ上に「Lv.X」として即座に反映され、次の戦闘からすぐに強化された性能を実感できます。
「左スタート ➔ 右ボス」横スクロール型マップへの刷新と操作性の徹底改善
ルート分岐の導入に伴い、UIの方向性を従来の縦スクロール型から、直感的に右へ進む「横スクロール型」のレイアウトへと全面改修しました。
（通ったルート以外の線に色がついている点、同じイベントが制限なく連続する点は要修正ですね。）
ルート接続線（パスライン）の自動描画
どのマスからどのマスへ進めるのかを直感的に把握できるよう、ノード間を繋ぐ接続線（パスライン）をプログラム側で自動描画する仕組みを構築しました。これにより、左右等間隔の無駄のない美しいルートレイアウトが動的に生成されます。
操作のストレスを取り除く「自動中央センタリング」と「スナップバック解消」
マップが横に広がったことで「現在自分がどこにいて、次どこへ進めるのか」を見失いやすいという操作上の課題が発生しました。
そこで、マップ画面を開いた瞬間や、戦闘終了後にマップ画面に戻ってきた際、「現在選択・進行可能なノード（緑色に発光しているマス）」が画面の真ん中に自動でピタッとフォーカスされるセンタリング処理を実装しました。
また、フルHDなどのワイドなディスプレイ環境でもスクロールが途中で引っかかることなく、スタートの左端からボスの右端まで悠々とスクロール閲覧できるように可動域を拡大。
さらに、スクロール後に指やマウスを離した際、画面が勝手に初期位置に戻ってしまう「スナップバック現象（誤作動）」を完全に解消し、見たい位置で自然にピタッと留まる、滑らかでストレスフリーな操作性を実現しました。
ノードサイズの1.5倍拡大による視認性・操作性の向上
実機でテストプレイを繰り返す中で、PCのマウスでもスマホのタップ操作でも「ノードが小さすぎて狙ったマスをクリックしづらい」という操作性の問題が浮かび上がりました。
そこで、画面上の各マスのノードサイズを、思い切って従来の1.5倍に拡大することにしました！
- 通常ノード：
80px➔120px（1.5倍） - ボスノード：
100px➔150px（1.5倍）
ノードを単に大きくしただけだと、上下に隣り合うルート同士が重なってしまう不具合が起きたため、上下レーンの間隔を広げるレイアウトの最適化をあわせて実施しました。これに伴い、ルート接続線の太さも力強いデザイン（5px/6px）へと強化し、画面全体にメリハリのある頼もしいビジュアルを構築しました。
文字化け・豆腐化を根本解決！ドット絵（ローピクセル）アセットへの移行
これまでは戦闘アイコン（⚔️）や宝箱（🎁）などの表現に、仮としてシステム標準の「環境依存絵文字（Emoji）」を配置していました。しかし、プレイするOSやブラウザ環境によって、文字化けして四角い箱に化けてしまう「豆腐化現象」が多発する致命的な問題がありました。
この問題を根本から解決し、同時にクラシックなレトロゲームとしてのビジュアル世界観を統一するため、絵文字の使用を完全に廃止し、32×32ピクセル風の「8-bitドット絵」アイコンと専用の装飾枠画像に完全移行しました！
💡 【技術ワンポイント】2点間の座標からUI接続線を自動描画する幾何学計算
『Slay the Spire』のような分岐マップでは、マス同士を繋ぐ「ルート線」が欠かせません。
Unityで専用の線描画機能（LineRenderer等）を使わずに、通常のUI画像（Image）を1枚配置して回転させるだけで、2つのマスを美しく結ぶ接続線を簡単に自動生成することができます。
3つの計算ステップ
- 配置位置（中点）：始点と終点の真ん中（始点 + 差分ベクトル × 0.5）に画像を配置します。
- 線の長さ（距離）：2つのマスの距離（差分ベクトルの大きさ）をそのまま画像の横幅（幅）に設定します。
- 線の傾き（角度）：2点間のY座標の差とX座標の差から、逆正接関数（Atan2）を使って傾斜角度を求め、Z軸回転に適用します。
マスA (始点)
●
＼ ← 傾き角度（Atan2）
■ ← 中点（配置位置） ＆ 長さ（2点間の距離）
＼
● マスB (終点)
コピペで使えるサンプルコード（C#）
using UnityEngine;
using UnityEngine.UI;
public class UILineDrawer : MonoBehaviour
{
/// <summary>
/// 2つのマス（UI座標）の間に接続ラインを1本生成して描画する汎用メソッド
/// </summary>
/// <param name="fromPos">始点ノードの座標 (RectTransformのanchoredPosition)</param>
/// <param name="toPos">終点ノードの座標 (RectTransform of anchoredPosition)</param>
/// <param name="parentContainer">ラインを格納する親オブジェクトのTransform</param>
/// <param name="lineThickness">線の太さ（高さ）</param>
/// <param name="lineColor">線の色</param>
public static GameObject CreateConnectingLine(
Vector2 fromPos,
Vector2 toPos,
Transform parentContainer,
float lineThickness = 5f,
Color? lineColor = null)
{
// 1. 新しいUIオブジェクトを作成して親に配置
GameObject lineObj = new GameObject("ConnectionLine", typeof(RectTransform));
lineObj.transform.SetParent(parentContainer, false);
// 2. 画像コンポーネント（Image）を追加して色を設定
Image lineImage = lineObj.AddComponent<Image>();
lineImage.color = lineColor ?? new Color(1f, 1f, 1f, 0.5f); // デフォルトは半透明の白
lineImage.raycastTarget = false; // クリック判定を無効化して背後をクリック可能にする
// 3. RectTransformの設定（中心を基準にする）
RectTransform rt = lineObj.GetComponent<RectTransform>();
rt.anchorMin = new Vector2(0f, 0.5f);
rt.anchorMax = new Vector2(0f, 0.5f);
rt.pivot = new Vector2(0.5f, 0.5f); // 中心ピボット
// 4. 【幾何学計算】2点間の差分ベクトルを求める
Vector2 diff = toPos - fromPos;
float distance = diff.magnitude; // 2点間の距離（線の長さ）
float angle = Mathf.Atan2(diff.y, diff.x) * Mathf.Rad2Deg; // 傾斜角度（度数法へ変換）
// 5. 座標・サイズ・回転を適用
rt.anchoredPosition = fromPos + (diff * 0.5f); // 中点に配置
rt.sizeDelta = new Vector2(distance, lineThickness); // 横幅を距離、高さを線の太さに設定
rt.localRotation = Quaternion.Euler(0f, 0f, angle); // Z軸を傾斜角度に合わせて回転
return lineObj;
}
}実装時のちょっとしたコツ・注意点
- マスの「背面」に線を置く：マスの上に線が重なってしまうと見栄えが悪くなるため、ヒエラルキー上で「ライン用の親オブジェクト」を「ノード用の親オブジェクト」より上に配置（先に描画）しておくと、線がマスの背面に綺麗に隠れて自然な見た目になります。
- クリック判定（Raycast Target）をOFFにする：生成した線の
raycastTarget = falseにしておくことで、線をクリックしたときに背後にあるマスやスクロール操作の邪魔になりません。
まとめ：ゲームとしての「楽しさ」と「操作性」が一段上のレベルへ
今回の開発記録（Lv.5）では、分岐型進行システムというローグライクデッキ構築ゲームに欠かせないゲームサイクルがしっかりと完成しました。
【Lv.1】で構想した「ローグライクデッキ構築 × タワーディフェンス」という基本コンセプトから始まり、【Lv.2】の「魔法陣システム」、【Lv.3】の「Waveシステムとエンドレスモード」、【Lv.4】の「スロット一体型魔法管理」とパーツを組み上げてきましたが、今回の「分岐マップ」がそれらの仕様を一本の『ゲーム進行の旅路』として見事に繋ぎ合わせる骨格となってくれました。
自分で最適な育成ルートを予測し、エリート戦闘でリスクを取るか、それとも魔法の工房や宝箱で安全に強化を図るか、というプレイヤーごとの戦略性がゲーム全体に一気に生まれています。操作性の細かいチューニングや文字化け対策を行ったことで、インディーゲームとしての快適さや世界観の構築も一歩前進したと感じています。
次の開発記録では、マップの各章で遭遇する「未知のイベント」の詳細や、プレイヤーの戦闘を有利にする「パッシブ遺物（レリック）システム」の実装についてお届けする予定です。どうぞ楽しみにお待ちください！
それでは、また次回の開発記録でお会いしましょう！
ポチップ
コメント