くそげ工房

UIデザイン一挙完成！タイトル画面刷新とサウンド演出の強化

個人ゲーム開発記、2Dタクティカル『Steel Symphony』の制作報告です。
早いものでもう新規プロジェクト立ち上げから二週間経過しました。

本日は、これまで「仮」の状態だったUIデザインを一気に本番仕様へブラッシュアップし、ゲームの没入感を高めるサウンド周りの実装を行いました。4月末のデモ版リリースに向け、視覚・聴覚ともに大きな前進です。

1. 【UI刷新】情報設計とデザインのブラッシュアップ

プレイ中の快適さを左右する各種ウィンドウのデザインが、ついに完成しました。

ユニット詳細ウィンドウの表示強化

ユニットリストから呼び出す詳細画面を大幅に強化しました。3言語対応の兵器区分表示（GetWeaponClassName）をメソッド化し、どの言語でもレイアウトが崩れず、かつ必要な情報が瞬時に目に入るデザインを実現しています。

---

戦術画面：システムウィンドウの強化

設定変更やタイトル戻りなどを行うシステムウィンドウも、ゲームの世界観に合わせたデザインへ。操作ロック（GameFlowController）との連動も完璧で、迷いのない操作が可能です。

---

戦況ウィンドウ（Sitrep）の実装

現在の勢力図や戦力値を一目で把握できる「戦況ウィンドウ」を実装。右側からのスライドイン演出とともに、戦場の緊張感を伝える重要なインターフェースが加わりました。

---

2. タイトル画面のブラッシュアップ

ゲームの「顔」であるタイトル画面を作り込みました。フェーズバナーの画像分離やフォントの選定（WDXL Lubrifont等）を経て、デモ版として恥ずかしくないクオリティまで引き上げています。

---

3. サウンド・演出基盤の構築（AudioMixer導入）

音の演出はゲームの命。今回は AudioMixer を導入し、BGMとSEの独立制御を可能にしました。

• BGMフェード制御: 無音からSEを経て、BGMが滑らかに立ち上がる演出を実装。
• 移動SEの実装: 4種類の移動音を使い分け、ユニットが止まれば音も即停止するキレのある制御を実現。
• 専用マネージャー新設: SceneSoundManager や MainTacticalSEManager により、シーンごとの音響管理を効率化しました。

4. バグ改修：ZOC判定のロジックミス解決

以前から保留していた「ZOC・移動範囲のズレ」を徹底調査。原因は、六角形（ヘックス）グリッド特有のGetNeighbors()における奇偶判定ロジックの誤りでした。ここを修正したことで、タクティカルゲームの肝となる移動ルールが正常化しました。

---

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

カテゴリ	内容
デザイン完了	ユニットリスト、詳細、システム、サイドパネル、戦況ウィンドウ、タイトル画面。
新規実装	AudioMixer導入、3言語対応兵器区分表示、移動SE制御、フェーズ別SE。
不具合修正	ZOC・移動範囲・包囲判定の計算ミス解決。
環境整備	日本語・中国語のフォント選定確定、Noto Sansによる補完設定。

---

6. 所感と次への課題

UIの作り込みと機能実装を並行して大量に消化した1日でした。特にZOCの計算バグが取れたのは大きな収穫です。

4月末のデモ版リリースは、今のペースなら十分に現実的なスケジュールだと確信しています。

残タスク：

• ボタンのホバー・クリックSEの実装
• 敵AIの思考中アニメーション検討
• 本番用画像への差し替え作業

引き続き、鋼鉄の交響曲（Steel Symphony）を組み上げていきます。

ユニットリスト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」に仕上げるのが直近の目標です。