現場レベルのゲーム制作が、すべてここで学べます。
この講座は3Dダンジョン探索型RPGの作り方について解説しています。今回はその第19回目になります。
前回は戦闘システムの仕上げとセーブ＆ロード機能の実装を行いました。
前回の記事：
今回は戦闘していない移動画面でのスキル・アイテム使用が可能になる「ダンジョン探索中のメニュー画面」を完成させます。
これで街・戦闘・ダンジョン内のすべての機能が結合し、ダンジョンRPGシステムが完成します。
- ダンジョン探索中のメニュー画面を作成
- メニュー画面UI作成
- メニュー画面処理スクリプトを実装する
- まとめ
ダンジョン探索中のメニュー画面を作成
スキルやアイテムのデータを作成した際に「ダンジョン探索中でも使用できる」設定項目があったかと思います。
今回はダンジョンシーンにおいてメニュー画面を用意し、探索中に好きなタイミングで回復スキルやアイテムの使用を行えるようにしていきます。
メニュー画面UI作成
DungeonシーンのCanvas以下に空オブジェクトのMenuWindowを作成します。Canvas GroupがアタッチされていればOKです。
施設UIやスキル一覧画面と同じような流れで、次に子オブジェクトにWindowを作成します。
表示内容が多いため大きめのスペースをとります。
以降、必要になるUIパーツは以下です。
閉じるボタン：CloseButton
BattleシーンのSkillTableUIArea以下にあるCloseButtonなどをコピーし、Rect Transformの調整をするだけでもOKです。
ウィンドウ名表示部背景画像：WindowLogoBack
ImageオブジェクトをWindowの子オブジェクトとして作成し、下図のような設定を行います。
カラーコードはCCFFCC。透明度Aは204にしています。
ウィンドウ名表示テキスト：WindowLogoText
TextMeshProをWindowLogoBackの子オブジェクトとして作成。
表示内容はスクリプトで決定するためSimpleTranslationTextは不要です。
テキストのカラーコードは4B151Aです。
表示モード切替ボタン：Button_ModeChange_Right／Button_ModeChange_Left
このメニュー画面では「アイテム使用」モードと「パーティーキャラのスキル使用」モードの2種類を実装します。それらのモードを切り替えるためのボタンを左右方向それぞれで作成します。
Windowの子オブジェクトとしてButtonを作成し、そのButtonの子オブジェクトとしてTextMeshProとImage画像を作成します。
↑のカラーコードは00801A。
↑AnchorをStretch-Stretchにして画像を変更してカラーコードを00801Aに設定しました。
左ボタンのButton_ModeChange_Leftも同様に作成します。
Button_ModeChange_RightをコピーしてButton_ModeChange_Leftとリネームし、TextMeshProのテキスト内容を→から←に変えればOKです。
スキル・アイテムボタン表示Scroll View：ColumnsScrollView
SkillButtonUIとItemButtonUIをContent内に並べて表示するScrollViewを作成します。
作成したらColumnsScrollViewとリネームし、Rect TransformとImageの設定を行います。
ColumnsScrollViewの子オブジェクトのScrollbar Horizontalは削除し、Scrollbar Verticalを以下のように設定します（これまでと流れは同じ）。
次に、スクロールバーがはみ出ているのでScrollbar Vertical > Sliding Areaの調整を行います。
そしてSlidingArea > HandleのImage画像をScrollBarに変更。
今回は別々のScroll Viewにはせず、1つのオブジェクト内(Content内)でスキル一覧とアイテム一覧をそれぞれ切り替えて表示できる形式にします。
Content以下に2つの空オブジェクトを作り、BattleシーンにあるSkillsScrollViewとItemsScrollViewのそれぞれの中身を格納していく流れになります。
空オブジェクトにはVertical Layout Groupが必要です。
まずはViewPortのContentの調整を行います。
↑Vertical Layout GroupとContentSizeFilterを設定しました。
Contentの子としてSkillButtonUIsとItemButtonUIsという名前で二つの空オブジェクトを作成します。それぞれにVertical Layout Groupを設定します。
そしてBattleシーンにあるSkillsScrollView > Viewport > Contentの子オブジェクトにあるSkillButtonUIとItemsScrollView > Viewport > Contentの子オブジェクトにあるSkillButtonUIを全てコピーして移動させます。
これでスキル・アイテムボタン表示部分は出来上がりです。
選択アイテム／スキルの詳細表示UI
次は選択したスキル/アイテムの「アイコン画像」、「名前テキスト」、「説明文テキスト」をそれぞれ表示するUIを作成します。
アイコン画像：SelectDetailIcon
Windowの子オブジェクトとしてImageを作成し、SelectDetailIconとします。
アイコンの中身は後ほどスクリプトから表示させます。
名前テキスト：SelectDetailNameText
Windowの子オブジェクトとしてTextMeshProを作成し、SelectDetailNameTextとします。
スクリプトの中から後で表示文章を設定するのでSimpleTranslationText.csのアタッチは不要です。文字色のカラーコードは4B151Aにしています。
説明文テキスト：SelectDetailDescriptionText
名前テキストと同様の流れで作成します。
ここまでで説明欄UIの作成は完了です。
スキル/アイテム使用確定ボタン：Button_Decide
選択中のスキルまたはアイテムの使用を確定するボタンを作っていきます。TownButtonプレハブから変更を行って仕上げていきます。まずはプレハブをWindowの子オブジェクトとして設置し、Button_Decideとリネームします。
次にText（TMP）を編集します。スキル選択中かアイテム選択中かによってボタンの内容もスクリプトから変更するのでSimple Translation TextはRemoveしておきます。
選択強調用UI：SelectHilight
これまでと同様にSelectHilightも必要です。
BattleシーンなどのScrollView系オブジェクト > Viewport > Contentの子オブジェクトにあるSelectHilightをコピーしてSkillButtonUIsとItemButtonUIsの子オブジェクトとしてそれぞれ設置します。
なおAnchorが中央でない場合は中央にしておきましょう。
前衛・後衛ActorUI群
スキルやアイテムをアクターに対して使用する際、どのアクターを対象にするかを選ぶ必要があります。
そのためアクターの現在HP・TPを確認できつつクリックでアクターを選択できる必要があるため、その機能を既に持っているActorUIをBattleシーンからコピーしてきます。
少々大きいのでScaleを調整して配置すれば完了です。
メニュー画面を開くボタン：MenuButton
メニュー画面を開くためのボタンをCanvas以下の適当な位置に配置しておきます。Buttonを作成し、TextMeshProを削除。
↑Anchorをright-bottomにして位置やImage画像を変更して完了です。
メニュー画面処理スクリプトを実装する
各種スクリプトを編集してメニュー画面の処理やスキル＆アイテム効果発動に対応できるようにしていきます。
まとめ
これでダンジョンRPGシステムが完成しました。
次回はゲームに華を添える演出要素であるBGM(音楽)・SE(効果音)・アニメーションの実装とスマホ操作対応をそれぞれ実装して3DダンジョンRPG講座の締めくくりとします。
次の記事：
現場レベルのゲーム制作が、すべてここで学べます。
コメント