Unityの戦闘UIをコードから分離してPrefab化した記録

Unityで制作しているスマートフォン向けゲーム「おはじきバトル（仮）」では、戦闘部分の機能を先に実装し、その後で画面デザインを作り直しています。

開発初期の戦闘画面は、OhajikiPrototypeBootstrap.csを中心にUIを生成・制御する構成でした。

試作段階では素早く画面を作れる一方、見た目を調整するたびにコードを確認する必要があり、Sceneビューで完成形を見ながら編集しにくい状態になっていました。

そこで今回は、戦闘UIの表示処理を分離し、SceneとPrefabを中心に管理できる構成へ移行しました。

この記事では、UIアセットを書き出す準備から、HPや必殺ゲージの状態を保ったまま表示部分を分けるまでの作業を記録します。

移行前に抱えていた問題

以前の構成では、戦闘の進行処理と画面表示に関する処理が、同じBootstrapスクリプトへ集まりやすくなっていました。

その結果、次のような問題がありました。

• 戦闘UIの配置をSceneビューで確認しにくい
• 枠や背景を変更するだけでもコード側への影響を確認する必要がある
• HP表示や必殺ゲージの状態と見た目が密接に結び付いている
• 一部だけをPrefab化すると参照が切れる可能性がある
• UI素材の依存関係を手作業で追うのが難しい
• 試作用コードが大きくなり、修正箇所を探しにくい

戦闘ロジックそのものは動作していたため、全面的に作り直すのではなく、現在の挙動を維持しながら表示部分だけを段階的に分離する方針にしました。

最初に表示コンポーネントを分離する

最初に、OhajikiPrototypeBootstrap.csから、戦闘UIに関係する表示コンポーネントを2つ分離しました。

今回、保存可能な形へ変更した主なコンポーネントは次のとおりです。

• PartyMemberStatusView
• SpecialGaugeView

PartyMemberStatusViewは、味方キャラクターのHPや状態を表示するためのコンポーネントです。

SpecialGaugeViewは、必殺ゲージの現在値や点灯状態を表示します。

単に画像やテキストをPrefabへ移すだけではなく、戦闘中に変化する値を引き続き反映できるよう、表示に必要な参照と更新処理を残しました。

見た目と状態を分けて考える

Prefab化で特に注意したのは、画面上の見た目と、戦闘中の状態を混同しないことでした。

たとえば、味方ステータスには次の2種類の情報があります。

Prefab側で管理するもの

• 外枠の画像
• HPゲージの位置と大きさ
• キャラクターアイコンの配置
• テキストのフォントと色
• 必殺ゲージの背景や装飾

実行時に更新するもの

• 現在HP
• 最大HP
• HPゲージの割合
• 必殺ゲージの現在値
• 必殺技を発動できるかどうか
• キャラクターごとの表示内容

見た目をPrefabへ移しても、現在HPなどのデータまでPrefabへ固定してしまうと、戦闘中の変化を表示できません。

そのため、Prefabには表示先となるImageやテキストの参照を持たせ、値そのものは戦闘処理から受け取る形にしました。

UIアセットを書き出すExporterを追加

既存の戦闘画面には、多数の画像、マテリアル、Prefab、ScriptableObjectなどが関連していました。

これらを一つずつ手作業でコピーすると、必要な素材の漏れや参照切れが起こりやすくなります。

そこで、戦闘表示に必要なアセットをまとめて書き出すために、BattlePresentationAssetExporterを追加しました。

Exporterを実行した結果は次のとおりです。

Export COMPLETE
targets: 97
saved: 95
existing references: 2
failed: 0
dependent assets: 171

書き出し先は、次のフォルダーです。

Assets/BattlePresentationExport 2

対象97件のうち95件を保存し、2件は既存の参照を使用しました。失敗は0件で、関連する依存アセットは171件ありました。

戦闘画面が想像以上に多くの素材へ依存していることも、この作業によって把握できました。

Exporterを使用した理由

今回の目的は、素材を別フォルダーへ複製することだけではありません。

移行対象と依存関係を一度整理し、Prefab化した後も必要な参照を維持することが目的です。

Exporterを用意したことで、次の利点がありました。

• 移行対象の数を確認できる
• 依存している素材をまとめて把握できる
• 手作業によるコピー漏れを減らせる
• 失敗件数をログで確認できる
• 元の戦闘画面を残したまま段階的に移行できる

特に、既存の動作を壊さずにデザインだけを変更したい場合は、元データを残しながら作業できる点が重要でした。

戦闘画面の外枠を作り直す

戦闘UIの構造を分離した後、画面全体の外枠も変更しました。

複数の案を比較し、最終的に青を基調として金色の装飾を加えた「青×金」の外枠を採用しました。

青だけでは画面が暗く単調に見えやすく、金色を増やしすぎると、HPやゲージよりも枠のほうが目立ってしまいます。

そこで、戦闘フィールドを囲む部分には青を使用し、角や境界の装飾に金色を配置しました。

作成した外枠はBattleFieldのPrefabへ適用しています。

味方ステータスをPrefabとして整理する

画面上部または下部に表示する味方ステータスも、Prefabとして扱えるように整理しました。

味方ステータスには、キャラクターごとに次の情報を表示します。

• キャラクターアイコン
• 現在HPと最大HP
• HPゲージ
• 必殺ゲージ
• 必殺技の発動状態
• 必要に応じた状態表示

キャラクターごとに同じ構造を繰り返すため、Prefab化との相性がよい部分です。

見た目を共通化しつつ、キャラクターデータと現在の戦闘状態だけを差し替えられる構成を目指しました。

必殺ゲージと発動操作

必殺ゲージは、ゲージがたまると光るようにし、点灯中のアイコンをタップすると必殺技を発動できる仕様です。

今回のUI改修では、ゲージの状態表示だけでなく、専用の必殺技アイコンも追加しました。

表示部分をSpecialGaugeViewへ分離することで、次の役割を整理できます。

• ゲージの値を受け取る
• ゲージ表示を更新する
• 発動可能なときだけ点灯する
• タップ操作を戦闘処理へ通知する

ゲージを増加させる条件や必殺技そのものの処理は、表示コンポーネントへ持たせません。

UI側は状態を表示し、プレイヤーの入力を伝えることに集中させています。

Waveとターン数の表示

戦闘画面には、現在のWaveとターン数も表示しています。

ターン数はWaveごとにリセットするのではなく、全Waveを通した累計値として計算します。

この値は、戦闘終了後のリザルトに表示するターン数と同じ計算になるようにしています。

戦闘中とリザルトで別々の値を計算すると、表示が一致しない可能性があります。

同じ値を参照することで、プレイヤーが戦闘中に確認したターン数と、クリア後の記録がずれないようにしました。

現在までに完成した部分

今回の改修で、次の部分まで作成できました。

• SPECIALゲージ
• BattleFieldのPrefab
• 青×金の戦闘画面外枠
• 味方ステータスUI
• 詳細表示用のアイコン
• Waveと累計ターン数の表示
• SPECIALアイコン
• キャラクター枠

Bootstrapへ集中していた表示処理を分離したことで、見た目の変更をPrefab側で進めやすくなりました。

まだ残っている作業

戦闘UI全体の移行は、まだ完了ではありません。

現在残っている主な作業は次のとおりです。

• エリアごとの戦闘背景
• 戦闘フィールドの床表現
• 敵HPの装飾
• 敵の行動カウント表示
• Android実機での最終調整

背景は、森林遺跡、溶岩遺跡、水没神殿、古代の塔、雷鳴の天空都市、大地の巨岩峡谷など、エリアごとに用意する予定です。

キャラクターやUIを見やすくするため、背景は少し暗めに調整します。

今回の作業で分かったこと

コードからUIを分離するときは、最初からすべてを作り直す必要はありませんでした。

今回のように、表示コンポーネントを小さく分け、必要なアセットを書き出し、動作を確認しながらPrefabへ移すことで、既存の戦闘処理を残したまま進められます。

特に重要だった点は次のとおりです。

1. 見た目と戦闘状態を分ける
2. HPやゲージを更新する参照を残す
3. 依存アセットをExporterで把握する
4. 一度にすべてを置き換えず、画面単位で確認する
5. 戦闘中とリザルトで同じデータを使用する
6. 最後はAndroid実機で確認する

Prefab化は、ファイルを作ること自体が目的ではありません。

デザインを調整しやすくし、戦闘ロジックと表示の責任を分けることが本当の目的です。

まとめ

今回は、おはじきバトル（仮）の戦闘UIを、OhajikiPrototypeBootstrap.csへ依存した構成から段階的に分離しました。

PartyMemberStatusViewとSpecialGaugeViewを保存可能にし、BattlePresentationAssetExporterを使って97件の対象と171件の依存アセットを整理しました。

その後、青×金の外枠、味方ステータス、必殺ゲージ、Wave・ターン表示などをPrefab中心の構成へ移しています。

まだ背景や敵側の表示、Android実機での調整は残っていますが、Sceneビューで戦闘画面を確認しながら変更できる範囲は大きく増えました。

今後はエリアごとの背景と敵UIを追加し、実機で文字やゲージの大きさ、タップしやすさを確認していく予定です。

関連する開発記録

• メニューUIをPrefabへ移行した記録