【Unity】RPGを作るチュートリアルその73 メニュー画面の装備するアイテム選択の動作を実装
- 2025.05.08
- RPGチュートリアル
- RPG, Unity, ゲーム開発, チュートリアル
シンプルなRPGをUnityで作るチュートリアルシリーズの73回目です。
第72回ではメニュー画面の装備の機能について、装備箇所の選択画面、情報表示ウィンドウの動作部分を実装しました。
今回はメニュー画面の装備の機能について、装備するアイテムを選択するウィンドウの動作部分を実装していきます。
制作環境
MacBook Pro 2023 Apple M2 Max
Unity6 (6000.0.30f1) Silicon
作業内容と順序
シンプルなRPGを作る上でどんな作業が必要か、どんな順番で作っていくと良さそうか、別ページで検討しました。基本的にこの流れに沿って進めていきます。
チュートリアルの一覧
このシリーズ全体の一覧は以下のページにまとめています。
前回の内容
前回はメニュー画面の装備の機能について、装備箇所の選択画面、情報表示ウィンドウの動作部分を実装しました。
メニュー画面の実装方針
メニュー画面では、
- アイテムの使用
- 魔法の使用
- 装備の選択 ◀︎いまここ
- ステータスの確認
- セーブ
- ゲームの終了
- メニューを閉じる
の項目を作成します。今回はこのうち、装備の機能について、装備するアイテムの選択ウィンドウから実装していきます。
装備するアイテムの選択ウィンドウ
装備画面のウィンドウ構成として、
- 装備する箇所の選択画面
- 装備するアイテムの選択画面
- 情報を表示する画面
に分けてUIを作成しています。このうち、装備する箇所の選択画面と情報を表示する画面に関しては前回実装したため、今回は残りの装備するアイテムの選択画面を実装していきます。こちらも前回同様にそれぞれUIを制御するクラス、ウィンドウ自体を制御するクラスに分けて実装していきます。
装備するアイテムの選択画面の実装
この画面に関しては、
- 装備するアイテムの選択画面のUIを制御するクラス
- 装備するアイテムの選択画面のウィンドウを制御するクラス
- アイテム選択画面でアイテムに関する制御を行うクラス
- 装備の切り替え処理を行うクラス
を作成します。前回情報表示ウィンドウの動作を実装したので、新規で作る部分はそこまで多くなく、つなぎ合わせる部分があるくらいでしょうか。でもアイテム画面の選択ウィンドウのことを考えると、クラスも大きくなりそうです(白目)
また、装備するアイテムの選択画面のウィンドウを制御するクラスでは選択の機能を制御し、実際にどんなアイテムを対象にするかはアイテム選択画面でアイテムに関する制御を行うクラスの方で制御します。メニューのアイテム画面でアイテム個別に制御していたあのクラスと似たようなクラスです。
装備するアイテムの選択画面のUIを制御するクラス
装備するアイテムの選択画面のUIを制御するクラスでは、画面上部に装備箇所の名前、アイテム名を表示し、そのほかはメニューのアイテム画面と同様にリスト形式でアイテムの項目を保持します。色々と共通化してリファクタリングしたい気持ちもありますが、それをやり始めるとチュートリアルが終わらないので、コピペしてコードを書く精神的な苦行を入れつつ実装していきましょう。
Projectウィンドウの「Assets/Scripts/Menu」のフォルダに移動し、MonoBehaviourのスクリプトファイルを作成します。名前は [MenuEquipmentSelectionUIController] にしました。
作成した「MenuEquipmentSelectionUIController」の中身は以下のように記載しました。
装備するアイテム選択のUIについては、基本的な方針はアイテム画面や魔法画面と共通していて、画面に表示するアイテム数をInspectorウィンドウから変更する想定です。また、選択している装備のカテゴリ名の「_categoryText」や、そのアイテム名の「_equipmentItemNameText」についてもこのクラスを通して制御します。
SetItemText()のメソッドでは、リストに表示する各項目のアイテム名と個数をセットします。装備に関しては、アイテムを外すための「なし」という項目も表示するため、この個数を表示しないように、「SelectionItemController」で個数を文字列で指定できるオーバーロードのメソッドを用意して、そちらを呼び出すように分岐させています。このオーバーロードのメソッドについては後ほど既存のクラスの変更部分で解説します。
装備するアイテムの選択画面のウィンドウを制御するクラス
装備するアイテムの選択画面のウィンドウを制御するクラスでは、カーソルの移動やアイテム名のセットなど、メニューのアイテム画面や魔法画面の時と同様に実装します。装備に関しては、装備を外すためのコマンドを戦闘に表示したいので、所持アイテムの中から武器または防具でピックアップして、そのリストの先頭に外すの要素を入れます。基礎部分の動作はめっっっちゃ共通化したいのですが、涙を飲んでチュートリアル後に回したいと思います。
外すだけアイテムの制御とは異なるので、その部分の動作はこの画面特有になります。また、アイテムを装備していない時のIDは0にしたいので、アイテムデータを作成するときは0は使わない、という点を仕様として決めておきます。コメントでも残しておきましょうかね。
Projectウィンドウの「Assets/Scripts/Menu」のフォルダにて、MonoBehaviourのスクリプトファイルを作成します。名前は [MenuEquipmentSelectionWindowController] にしました。
作成した「MenuEquipmentSelectionWindowController」の中身は以下のように記載しました。(長いです)
装備関連のウィンドウやクラスに対する参照用フィールドを用意しています。画面内に表示する項目数は「ItemsInPage」で定義していますが、装備画面では現在装備中の項目も表示することからリストの表示数を7にしています。
また、装備中のカテゴリ名を「CategoryWeapon」と「CategoryArmor」のフィールドで定義しています。
SetUpWindow()のメソッド内では各種制御用のクラスの初期化処理を行なっています。所持しているアイテム関連の処理は、次に作成するアイテムに関する制御を行うクラスで行い、装備の切り替えに関しては個別にクラスを用意してそちらで行います。
キー入力を検知するのはSelectItem()のメソッドで、アイテム画面や魔法画面と共通化できたなぁ……と思いつつ、修正範囲が結構広くなりそうだったので、この時点では涙を飲んで同じ処理を書いています。
現在カーソルが表示されているアイテムに関しては、ShowSelectedItemDescription()のメソッドで説明を右側の情報表示ウィンドウに表示するようにしています。このメソッドから呼ぶ「MenuEquipmentSelectionItemController」のクラスのSetItemInformation()のメソッドでは、説明文の他にパラメータの変動値を表示する処理も行う予定です。
現在装備しているアイテムの情報はSetEquipmentInfo()のメソッドで画面にセットしています。画面を表示するタイミングで呼び出すため、このメソッドはSetUpWindow()から呼ばれています。
その他の部分についてはアイテム画面や魔法画面の時とほとんど同じで、メッセージ表示がないのでそこで差異があります。
アイテム選択画面でアイテムに関する制御を行うクラス
ウィンドウを制御するクラスに加えて、装備対象のアイテムを制御するクラスも作成します。メニューでアイテムや魔法を表示する時と同じような考え方で、装備できるアイテムの抽出を行います。
Projectウィンドウの「Assets/Scripts/Menu」のフォルダにて、MonoBehaviourのスクリプトファイルを作成します。名前は [MenuEquipmentSelectionItemController] にしました。
作成した「MenuEquipmentSelectionItemController」の中身は以下のように記載しました。
アイテム画面や魔法画面の時と同じように、装備の多少となるアイテム一覧を表示する画面の制御クラスです。基本的な構造は以前作ったものとほとんど同じです。
「_equipmentItemInfoList」のフィールドは、装備箇所の選択画面で選択したカテゴリの装備アイテムが格納されます。InitializeEquipmentItemInfo()のメソッドでは、武器を選択していれば武器のカテゴリのアイテム、防具を選択していれば防具のカテゴリのアイテムをリストに入れます。リストの先頭には装備を外すためのアイテムとして「なし」を追加します。
IsMatchCategory()のメソッドは検証用に用意していて、現在表示中のカテゴリと、アイテムのカテゴリが一致していることを確認します。武器の選択中なら武器のアイテム、防具の選択中なら防具のアイテムの場合にTrueを返すようにしています。
SetPageItem()のメソッドでは現在のページに表示するアイテムのセットアップを行います。装備を外すための「なし」に関してはアイテムの個数を数値ではなくテキストで直接セットしたいので、個別の処理を行なっています。
SetItemInformation()のメソッドは情報表示ウィンドウに、アイテムの説明と、装備によるパラメータ変動をセットします。この時表示するパラメータは、カーソルの位置にあるアイテムを装備した時の値で、右側に現在のパラメータからの変動値を表示するようにしています。情報表示ウィンドウ側の処理については前回のチュートリアルで作成しておいたので、それを使いましょう。
装備の切り替え処理を行うクラス
ステータスの装備のIDを変更する機能や、元々装備していたアイテムをパーティの所持アイテムに戻す機能などを担当するクラスも作成します。メニューのアイテム画面や魔法画面で個別の処理を行なっていた部分に相当します。装備に関してはメッセージの表示が必要ないのでいくらかシンプルに実装できるかと思います。
Projectウィンドウの「Assets/Scripts/Menu」のフォルダにて、MonoBehaviourのスクリプトファイルを作成します。名前は [MenuProcessorEquipment] にしました。
作成した「MenuProcessorEquipment」の中身は以下のように記載しました。
EquipmentSelectedItem()のメソッドでは、選択中の装備のカテゴリに応じて、ステータスのフィールドに値をセットします。武器を選択している場合は「equipWeaponId」のフィールドに、防具を選択している場合は「equipArmorId」のフィールドに選択したアイテムのIDをセットします。
この時、元々装備していたアイテムを所持アイテムに戻したいので、値をセットする前に以前のIDを変数に保持するようにしています。アイテムの増加処理、減少処理についてはCharacterStatusManagerのクラスに作成しておきます。この部分の説明については後ほど行いたいと思います。
既存のクラスの変更
作成したクラスに合わせて、既存のクラスも変更を加えていきます。変更したいクラスは以下の通りです。
- SelectionItemController
- MenuEquipmentWindowController
- CharacterStatusManager
SelectionItemControllerの変更
既存のSetItemText()の下に、引数の異なるオーバーロードを追加します。アイテムの個数を文字列で受け取り、そのままテキストにセットするようにしましょう。
MenuEquipmentWindowControllerの変更
フィールドの追加と、表示非表示の切り替えの処理を入れていきます。まずはフィールドとして、今回作成した装備選択画面の制御クラスを追加します。
続いて、前回実装したOnSelectedEquipmentParts()にて、選択された装備箇所をコンソールに出力していた部分をウィンドウ表示の処理に切り替えます。
ウィンドウの表示に関しては、各画面での同フレームでの入力検知を防ぐため、コルーチンを使って1フレームずらしています。コルーチンのShowSelectionWindowProcess()の中では、今回作成した装備選択画面の制御クラスの初期化処理を行って表示するようにしています。
OnSelectedEquipmentItem()は装備するアイテムの選択画面で装備が選択された時のコールバックで、装備箇所の選択画面を表示するようにしています。装備品が変わっているので、それを含めて再度確認するようにしています。
OnCanceledSelect()は装備するアイテムの選択画面でキャンセルされた場合のコールバックで、装備品を選択した場合と同様の処理を行なっています。このクラス内でやることは表示する画面の切り替えなので、どちらも同じ処理になっています。
HideWindow()では今回追加した「MenuEquipmentSelectionWindowController」に関しても非表示の処理を追加しています。
CharacterStatusManagerの変更
キャラクターのステータスを管理するクラスでも処理を追加します。まずは、装備を外すアイテムの「なし」に該当するIDを定義します。既存の「partyItemInfoList」のフィールドの下に「NoEquipmentId」のフィールドを追加しました。
続いて、既存のUseItem()のメソッドの下に、アイテム増加用のメソッドのIncreaseItem()、アイテム減少用のメソッドのDecreaseItem()、アイテムIDを確認するIsValidItem()のメソッドをそれぞれ追加しました。
IncreaseItem()で引数の個数を負の値にした場合は、減少させることを目的としていると判断し、DecreaseItem()を呼ぶようにします。増加させる場合はリストの要素を追加する可能性があり、減少させる場合はリストの要素を減らす可能性があるため、対応するメソッドを内部で呼んでいます。
アイテムの個数の比較では、IncreaseItem()は0以下、DecreaseItem()は0未満にして、条件が重複しないようにしています。両方とも0以下にすると、0を指定した場合に無限ループになるので注意が必要です(1敗)
スクリプトのアタッチ
スクリプトファイルを保存したら、ゲームオブジェクトにアタッチします。
ゲームオブジェクトの作成
必要なゲームオブジェクトについては先に作ってしまいましょう。
Hierarchyウィンドウから「MenuEquipmentWindowController」の子オブジェクトとして空のゲームオブジェクトを3つ作成します。それぞれ名前を [MenuEquipmentSelectionWindowController] 、[MenuEquipmentSelectionItemController] 、[MenuProcessorEquipment] にします。
UIを制御するクラスのスクリプトファイルをアタッチ
UIを制御するクラスからアタッチしていきます。Hierarchyウィンドウから「EquipmentItemParent」のゲームオブジェクトを選択します。
Inspectorウィンドウから「MenuEquipmentSelectionUIController」のスクリプトファイルをアタッチします。対応するゲームオブジェクトについてもアサインしましょう。
ウィンドウ内でアイテムに関する処理を制御するクラスのスクリプトファイルをアタッチ
先ほど作成した「MenuEquipmentSelectionItemController」のゲームオブジェクトを選択し、Inspectorウィンドウから同名の「MenuEquipmentSelectionItemController」のスクリプトファイルをアタッチします。
装備に関する処理を制御するクラスのスクリプトファイルをアタッチ
続いて「MenuProcessorEquipment」のゲームオブジェクトを選択し、Inspectorウィンドウから同名の「MenuProcessorEquipment」のスクリプトファイルをアタッチします。
ウィンドウを制御するクラスのスクリプトファイルをアタッチ
「MenuEquipmentSelectionWindowController」のゲームオブジェクトを選択し、Inspectorウィンドウから同名の「MenuEquipmentSelectionWindowController」のスクリプトファイルをアタッチします。UIの制御クラスや、アイテム、装備に関する制御クラスへの参照もアサインします。
装備するアイテムの選択画面への参照をアサイン
「MenuEquipmentWindowController」のゲームオブジェクトを選択し、今回作成した「MenuEquipmentSelectionWindowController」への参照をアサインします。
動作確認
スクリプトをアタッチしたら動作確認に入ります。
- EquipmentMenuParent
- EquipmentParent
- EquipmentInformationParent
についてそれぞれチェックボックスを外して非表示にしておきましょう。
ゲームを開始して、メニュー画面を開き、装備メニューを選択します。装備メニューでは装備する箇所を選択し、選んだカテゴリに対応するアイテムが表示されることを確認します。事前に「CharacterStatusSetter」で所持アイテム情報をセットしておくと良いかと思います。
アイテムの選択時は、画面右側の情報表示ウィンドウに、選択中のアイテムの情報が表示されることを確認します。決定キーを押した場合は、装備が変更され、元々の装備品が所持アイテムに追加されることを確認します。
今回のブランチ
まとめ
今回はメニュー画面の装備の機能について、装備するアイテムを選択するウィンドウの動作部分を実装しました。作成したクラスの処理の共通化をしたい欲がどんどん出てきましたが、チュートリアルを先に進めることを優先して涙を飲んで似たような処理を実装しました。
次回はメニュー画面のステータスの機能について、UIの作成を行なっていきます。
ゲーム開発の攻略チャートを作りました！
「ゲームを作ってみたいけど、何から手を付けていいか分からない！」
そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。
ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう！
-
前の記事
【Unity】RPGを作るチュートリアルその72 メニュー画面の装備箇所選択の動作を実装 2025.05.01
-
次の記事
記事がありません