現場レベルのゲーム制作が、すべてここで学べます。
この講座はUnity ノンフィールドRPGの作り方講座の第8回です。
前回はダンジョンシーンの休憩の処理とカメラの移動処理を実装しました。
前回の記事：
第8回ではいよいよRPGに必須の戦闘画面を作っていきます。バトルシーンの初期設定を行い、UIの作成をしていきます。
バトルシーンの背景とカメラの設定を行う
バトルシーンを作成していきます。[Assets]→[Scenes]にある[Battle]をダブルクリックしてダンジョンシーンを開きます。
[Window]→[Rendering]→[Lighting]の順でクリックして、Lightingを開きます。
上にある[Environment]をクリックしてEnvironmentを表示します。
Environmentの一番上にある[Skybox Material]の右にあるオブジェクトピッカーをクリックして、[None]を選択します。
カメラの設定を行う
背景を黒くするためにカメラの設定を変更します。
Hierarchyビューにある[Main Camera]をクリックしてInspectorビューを表示します。
Transformを上記のとおり設定します。Cameraコンポーネントの[Clear Flags]を「Solid Color」に変更し、Backgroundの色を黒に変更します。
Gameビューを開いて背景が黒になっていることを確認します。
バトルシーンのUIを作成 敵ステータスウィンドウと戦闘用スキルボタンを作成
戦闘を行う時に必要なUIを構築していきましょう。
主人公のステータスウィンドウ、敵キャラクターのステータスウィンドウを作ります。
また、敵に攻撃＆防御、自身のHP回復を行えるスキルボタンを作成します。
ステータスウィンドウのプレハブをコピーして再利用
プレハブにしておいたステータスウィンドウをコピーします。一度作っておいた部品を使いまわしていきましょう。
まずHierarchyビューを右クリックし、[UI]→[Canvas]をクリックします。
Canvasオブジェクトを選択してInspectorビューを開きます。
Canvas Scalerコンポーネントの[UI Scale Mode]を[Scale With Screen Size]に変更します。
[Reference Resolution]のXを1080にYを1920に変更します。 [Screen Match Mode]を[Expand]に変更します。他のシーンと同じですね。 [Assets/Prefabs]フォルダにあるStatusプレハブを、HierarchyビューにあるCanvasオブジェクトにドラッグアンドドロップします。
一度作ってあるプレハブを使うだけなので簡単ですね。
敵キャラ用のステータスウィンドウ
敵キャラのHPを表示するためのステータスウィンドウを作成します。
[Assets/Prefabs]フォルダにあるStatusプレハブを、HierarchyビューにあるCanvasオブジェクトにドラッグアンドドロップし、名前を[EnemyStatus]に変更します。
次にEnemyStatusのInspectorビューを表示し、Transformで四角形で描かれているAnchor Presetの設定をShiftキーを押しながらMiddle-Centerに変更します。
RectTransformコンポーネントの設定を下の画像のとおり変更します。
使用しないステータスUIを削除
敵キャラのステータスではHPだけを表示するため、それ以外のステータステキストは削除します。
Level、Floor、Foodを削除しましょう。
EnemyStatusオブジェクトの下にある[Level][Floor][Food]をCtrlキーを押しながら複数選択して、Deleteキーで削除します。
FlameとHPがEnemyStatusの子オブジェクトになっている状態です。
そしてHPオブジェクトのTextMeshProの設定を変更します。
HPのTextMeshProコンポーネントのAlignmentの設定を上の画像のとおり変更します。
（HPTextの参照を間違ってNoneにしないように注意しましょう）
Gameビューに上画像のようにステータスウィンドウが2つ表示されていることを確認します。
戦闘スキルボタンの作成を行う
HierarchyビューにあるCanvasオブジェクトを右クリックし、[UI]→[Image]をクリックします。作成されたImageオブジェクトの名前を[Button1]に変更します。
Button1オブジェクトのInspectorビューを表示し、Transformで四角形で描かれているAnchor Presetの設定をShiftキーを押しながらBottom-Centerに変更します。
RectTransformコンポーネントの設定を下の画像のとおり変更します。
さらに、ImageコンポーネントのSource Imageに[GUI_Parts]→[GUI_Parts]→[bar_ready]をドラッグアンドドロップします。
Gameビューが以下の画像のようになっていればOKです。
スキルボタンにアイコン用のUIとテキスト用のUIを追加する
スキルボタンにはスキルのアイコンと効果（攻撃力や防御力）を表示するテキストを追加します。
Button1オブジェクトを右クリックして、[UI]→[Image]でImageオブジェクトを追加し、名前をIconに変更します。
まとめ
今回はバトルシーンの設定とUIの作成を行いました。
次回はさらにマスターデータの作成とバトルシーンのオブジェクト配置を行っていきます。
※マスターデータとは、敵キャラの名前・HP・攻撃力などの基本情報をまとめて管理するためのデータです。Unityでは ScriptableObject を使ってこれを実現します。
次の記事：
現場レベルのゲーム制作が、すべてここで学べます。
コメント