カテゴリー: ゲーム制作

ユニットリストUI刷新とシステム基盤の再構築。16:9レターボックス＆操作ロック一元化

個人製作中の2Dタクティカル『Steel Symphony』開発記です。

ここ数日は、ビルド時の表示不具合（マゼンタ問題）という大きな壁を乗り越えつつ、ゲームの「手触り」と「堅牢さ」を一段上のステージへ引き上げる作業に没頭しました。

1. 【メイン改修】ユニットリストUIの視認性と操作性の向上

今回の作業で最も目に見えて進化したのが、戦闘中に表示されるユニットリストUIの全面的なブラッシュアップです。

見た目のビフォーアフター

これまでは機能を優先した仮素材の状態でしたが、自軍と敵軍の判別を容易にし、情報の優先度を整理しました。

---

仮実装では適当にImageオブジェクト、Textオブジェクトを配置して処理実装のみでしたが、見た目の調整を行いました。一覧に並べる要素(プレハブ)をしっかりデザイン。
デザインの刷新に加え、テキストエリアからはみ出す長い名称を自動で横スクロールさせる ScrollingText.cs を実装。限られたスペースでも情報を余さず伝えられるようになりました。

直感的な操作感：カメラ・カーソル連動

見た目だけでなく、リストとマップを繋ぐ「手触り」も強化しています。

• ホバー連動: リスト上の項目にマウスを乗せるだけで、マップカメラが自動的にそのユニットを捉えます。
• クリック連動: クリック時もカメラがユニットを中心に移動。

---

2. システムの必需品：3言語対応の汎用確認ダイアログ

ゲームの随所で必要となる、プレイヤーへの確認を求める汎用ダイアログ（ConfirmDialog）を実装しました。

---

こだわりの多言語対応

グローバル展開を見据え、日本語・英語・中国語（簡体字）の3言語に対応。「確定 / 取消」といった適切な表記をさっそく組み込み、メッセージやコールバックを動的に指定できる設計にしました。

---

---

出来上がり。バックのシステムウィンドウはまだデザイン出来てないです(笑)

3. 画面表示の最適化：16:9固定レターボックスの導入

PCゲームにおいて、プレイヤーごとに異なる解像度のモニターに対応するため、16:9固定のレターボックス表示（LetterboxCamera.cs）を導入しました。

• 表示の安定: 全シーンのCanvasを Screen Space - Camera に変更し、カメラアセットを統一。
• 解像度設計: 現在は 1280×720 を基本とし、製品版では 1920×1080 への引き上げを予定しています。
• 不具合解消: 起動時に前回の画面モード（フルスクリーン/ウィンドウ）が正しく復元されない問題も併せて解決しました。

---

4. 堅牢な設計へ：操作ロック制御の一元化

「演出中にボタンが押せてしまう」「敵ターンなのにカメラが動かせる」といったバグを根絶するため、GameFlowControllerを新設しました。

これまで各マネージャーに散らばっていた操作可能/不可能のフラグ管理を一括管理。演出の開始・終了に合わせて、一括でプレイヤーの入力を制御できる「交通整理」の仕組みが整い、プロジェクトの堅牢さが飛躍的に高まりました。

---

5. 本日の作業履歴まとめ

カテゴリ	内容
UI・操作性	ユニットリストUI刷新、カメラセンタリング、ホバー/クリック連動、自動スクロールテキスト。
新規実装	汎用確認ダイアログ（3言語）、16:9レターボックス。
環境整備	操作ロック（GameFlowController）の一元化。
不具合修正	解像度復元バグの解決。

---

6. 次のステップへ

UIの基盤とシステム設計が強固になったことで、ようやく「ゲーム性」の深掘りに集中できる状態になりました。深夜まで及んだ表示バグとの死闘も、今となっては開発の足腰を強くする良い経験でした。

次は、この整ったUIの上で、本格的な戦闘バランスの微調整やスキル演出の実装を進めていきます！

サイドパネル実装とグラフィック強化……のはずが、深夜のマゼンタ問題と死闘を繰り広げた1日

個人製作中の2Dタクティカルシミュレーション『Steel Symphony』開発記です。

昨日のメインテーマは「UIの完成度を高めること」と「視覚効果の強化」。サクサク進める予定でしたが、開発の神様はそう簡単に通してくれませんでした。予定外のバグ改修に時間を溶かされつつも、なんとか形にした12時間の記録です。

1. 本日のメイン：サイドパネルの実装とUI刷新

今回の作業の柱は、プレイ中の情報を一目で把握できるサイドパネルの実装です。

• SidePanelManagerの新設: ターン数、自軍・敵軍の総戦力、ユニット残数をリアルタイムで表示。戦況バーも搭載し、どちらが優勢か視覚的にわかるようになりました。
• ユニットリストの改良: プレイヤー用とエネミー用のPrefabを分離し、リストから各ユニットへのアクセスを容易に。
• ウィンドウ演出の強化: 各種ウィンドウにスライドインやスケールアップのエフェクトを追加。右クリックで詳細を閉じられるようにするなど、手触りの部分を徹底的に磨きました。
  
  まずはスクリプトとの連携確認から始め、数値表示を段階的に仕上げていきました。

右のパネルに無事連携した数値表示を実装完了。

あとは見栄えを良くする「皮」付けて一応の完成！

---

2. 視覚効果の強化と「エッジスクロール」の導入

2Dゲームとしてのクオリティを一段階上げるため、操作系と演出にも手を加えました。

• エッジスクロールの実装: 画面端にマウスを動かすとカメラが滑らかに移動する機能を導入。加速処理やUI上での無効化設定など、ストレスのない操作感を目指しました。
• UIカーソルの連動: リスト項目をホバーした際、マップ上のターゲットを自動追従する仕組みを構築。

---

3. 【予定外】深夜の「マゼンタ問題」との死闘

UIの実装が一段落し、ビルド確認を行ったところで事件は起きました。戦闘背景が、開発者にとって最も恐ろしい色……「マゼンタ（ピンク）」に染まっていたのです。

泥沼の調査過程

最初はパスの間違いやResourcesフォルダの構成を疑い、数時間を調査に費やしました。しかし、真の原因はもっと根深いところにありました。

• 原因: 2D Built-Inプロジェクトに後付けでURPを導入したことによる、レンダリングパイプラインの不整合。
• 結末: Shader Graphがビルド環境で正常に動作していなかったため、急遽、URPに依存しない純粋なHLSLシェーダーを書き下ろすことで解決しました。 Shader Graphはエディタ上では動くものの、ビルド環境ではMainTexが正常に渡らない状態だったため、 シェーダー自体を作り直すのが最も確実な対処でした。 同じ構成（Built-inテンプレート＋URP後付け）で詰まっている方の参考になれば幸いです。

不具合改修という「予定外の作業」に想定以上の時間を奪われましたが、結果としてHLSLの知識も深まり、プロジェクトの足腰は強くなった……と自分に言い聞かせています。

---

4. 昨日の作業履歴まとめ

カテゴリ	内容
新規実装	サイドパネル、戦況バー、エッジスクロール、ユニット詳細ウィンドウの連続切り替え。
改修・統合	SettingsManagerを戦術画面に統合。音量・言語設定・タイトル戻り等を実装。
トラブル解決	ビルド時マゼンタ問題の完全払拭。シェーダーをHLSLで再構築。
バグ修正	クリック判定のズレ（透明オブジェクト干渉）解決、二重リスナー登録の解除。
環境整備	Git導入（GitHub Desktop）。不測の事態に備えリポジトリ管理を開始。

---

5. 次のステップへ

UIの基盤とグラフィックの表示不具合がクリアになったことで、ようやく「ゲームプレイの調整」に本腰を入れられる状態になりました。

12時間ぶっ続けの作業は堪えましたが、深夜にマゼンタが消え、意図した背景が表示された瞬間の快感は個人開発ならではですね。次回は「SITREPウィンドウ」と「HELPウィンドウ」の中身を実装します。 現状は開閉だけできる空箱なので、ここに実際のゲーム情報を流し込んで 「使えるUI」に仕上げるのが直近の目標です。