【Unity】RPGを作るチュートリアルその75 メニュー画面のステータスの動作を実装

【Unity】RPGを作るチュートリアルその75 メニュー画面のステータスの動作を実装

シンプルなRPGをUnityで作るチュートリアルシリーズの75回目です。

第74回ではメニュー画面のステータスの機能について、UIの作成を行いました。

今回はメニュー画面のステータスの機能について、ゲーム内の値を表示する機能を作成していきます。

 

 

制作環境

MacBook Pro 2023 Apple M2 Max

Unity6 (6000.0.30f1) Silicon

 

作業内容と順序

シンプルなRPGを作る上でどんな作業が必要か、どんな順番で作っていくと良さそうか、別ページで検討しました。基本的にこの流れに沿って進めていきます。

 

チュートリアルの一覧

このシリーズ全体の一覧は以下のページにまとめています。

 

前回の内容

前回はメニュー画面のステータスの機能について、UIの作成を行いました。

 

メニュー画面の実装方針

メニューの表示を確認
メニューの表示を確認

 

メニュー画面では、

  • アイテムの使用
  • 魔法の使用
  • 装備の選択
  • ステータスの確認 ◀︎いまここ
  • セーブ
  • ゲームの終了
  • メニューを閉じる

の項目を作成します。前回はステータスのUI部分について作成したので、今回はその動作を作っていきましょう。必要な値を画面上にセットするだけなので、そんなに複雑にはならない想定です。

 

ステータス画面の実装イメージ

ステータス画面のイメージ
ステータス画面のイメージ

 

ステータス画面ではパラメータの内容や、装備などが一覧で確認できるようにします。HPやMPに関しては最大値と現在の値を並べて表示します。経験値については次のレベルまでの値も表示するようにしたいと思います。

各パラメータの項目名テキストについてはそのままシーンのものを使い、右側の値部分はスクリプトから動的に変えていきます。

 

ステータス画面の実装

この画面に関しては、

  • ステータス画面のUIを制御するクラス
  • ステータス画面のウィンドウを制御するクラス

を作成します。基本方針としてはデータに存在している情報を画面にセットしていく流れになります。

 

ステータス画面のUIを制御するクラスの作成

ステータス画面のUIを制御するクラスでは、前回作成したUIのテキストへの参照をフィールドとして保持して、そこに値をセットするようにします。同じようなメソッドが並びそうですが、別のテキストと間違えないように頑張って実装しましょう。

Projectウィンドウの「Assets/Scripts/Menu」のフォルダに移動し、MonoBehaviourのスクリプトファイルを作成します。名前は [MenuStatusUIController] にしました。

UI用の制御クラス
UI用の制御クラス

 

作成した「MenuStatusUIController」の中身は以下のように記載しました。

情報を表示するテキストに対する参照を保持するためのフィールドを作成しています。まとまりごとにHeaderのAttributeを使って分けています。

各テキストに対しては、値をセットするためのメソッドを作成してあります。コード自体は長くなっていますが、やっていることとしてはシンプルに値をセットしているだけです。

InitializeText()では各テキストの表示を初期化するようにしています。UI作成時に任意で入れた値が残っていると混乱を招くので、ゲーム実行時に全て空欄にするようにしました。もし値が入っていなければ、「あれ? 処理が抜けてる?」と気づきやすくする狙いもあります。

 

ステータス画面のウィンドウを制御するクラスの作成

ステータス画面のウィンドウを制御するクラスでは、先ほどのUIを制御するクラスに対して値を渡す役割になります。ステータス情報はCharacterStatusManagerから簡単に取得できるようにしているので、対応するメソッドを呼び出してUIに値をセットしていきましょう。

Projectウィンドウの「Assets/Scripts/Menu」のフォルダに移動し、MonoBehaviourのスクリプトファイルを作成します。名前は [MenuStatusWindowController] にしました。

ウィンドウの制御クラス
ウィンドウの制御クラス

 

作成した「MenuStatusWindowController」の中身は以下のように記載しました。

ステータス画面では複雑な計算はそこまでないので、この制御クラスに機能を入れています。Inspectorウィンドウからは先ほど作成したUIを制御するクラスへの参照をアサインするようにします。

他のウィンドウ管理のクラスと同様に、「IMenuWindowController」のインタフェースを実装しています。

SetUpStatus()のメソッドでは、キャラクターのステータスを取得し、必要な値をテキストにセットしていきます。次のレベルまでの経験値に関しては多少計算が必要だったため、別メソッドとしてGetNextExp()で計算を行っています。

装備込みのパラメータについては、「CharacterStatusManager」のクラスに実装した、戦闘用パラメータを取得できるメソッドのGetCharacterBattleParameterById()を使って取得しています。

Update()からはCheckKeyInput()を確認して、キー入力を検知します。ステータス画面では決定ボタン、またはキャンセルボタンでメニューのトップ画面に戻るようにしたいと思います。メニューのトップ画面から遷移したフレームでボタン入力を検知すると、同じフレーム内で非表示の処理が入ってしまうことから、「_canClose」のフラグを使って同じフレームで検知しないようにしています。

ShowWindow()のメソッド内でSetCloseStateDelay()のコルーチンを呼び出し、1フレーム後にフラグを有効化することで同フレームでの検知を防ぎます。ウィンドウを閉じる時にも同様に、閉じる前に1フレーム待つことでメニューのトップ画面での同フレーム検知を防いでいます。

 

既存のクラスの変更

作成したクラスに合わせて、既存のクラスも変更を加えていきます。変更したいクラスは以下の通りです。

  • MenuManager
  • CharacterStatusSetter

 

MenuManagerの変更

「MenuManager」では、今回作成したステータス画面の制御クラスの「MenuStatusWindowController」への参照を追加します。前回実装した「_menuEquipmentWindowController」のフィールドの下に追加しましょう。

 

また、メニューで「ステータス」を選んだ時の分岐も実装します。分岐内で呼ぶShowStatusMenu()のメソッドは、ShowEquipmentMenu()の下に追加しました。

 

最後に、装備する箇所の選択画面でキャンセルボタンを押したらメニューのトップに戻れるように、コールバック用のメソッドも用意します。アイテムや装備の時と同様に処理を分けています。

 

CharacterStatusSetterの変更

「CharacterStatusSetter」のクラスでは、レベルの値を設定できるようにしてあるので、初期レベルに応じた経験値をステータス情報にセットするようにします。レベル3でも総取得経験値が0、みたいな状況になっていたので、取得した経験値とレベルがマッチするようにしたいと思います。

SetPlayerStatus()のメソッドで、経験値の取得にレベルの値を使用するため、レベルを設定する行と経験値を設定する行を入れ替えました。経験値の取得は後述のGetExp()のメソッドを使用します。

 

既存のSetPartyItems()の下にGetExp()のメソッドを追加しました。経験値とレベルの対応表から、現在のレベルになるために必要な経験値を取得し、それを返すようにしています。

 

スクリプトのアタッチ

スクリプトファイルを保存したら、ゲームオブジェクトにアタッチします。

 

UIを制御するクラスのアタッチ

ステータス画面の親オブジェクトである「StatusParent」のゲームオブジェクトを選択し、「MenuStatusUIController」のスクリプトをアタッチします。パラメータに対応するテキストについてもアサインしましょう。数が多いので大変ですが、テキストの親オブジェクトの名前を確認しつつ、フィールドと対応させていきます。

スクリプトのアタッチと参照のアサイン
スクリプトのアタッチと参照のアサイン

 

ウィンドウを制御するクラスのアタッチ

続いてステータスのウィンドウを制御するクラスについて、スクリプトファイルをアタッチします。「Managers」の下にある「MenuManager」を選択し、空のゲームオブジェクトを作成します。名前は [MenuStatusWindowController] にしました。

ゲームオブジェクトの作成
ゲームオブジェクトの作成

 

作成した「MenuStatusWindowController」のゲームオブジェクトを選択し、Inspectorウィンドウから「MenuStatusWindowController」のスクリプトファイルをアタッチします。UIを制御するクラスについてもアサインします。

スクリプトのアタッチと参照のアサイン
スクリプトのアタッチと参照のアサイン

 

また、「MenuManager」にもフィールドを追加したので、先ほど作成した「MenuStatusWindowController」をアサインします。

参照のアサイン
参照のアサイン

 

動作確認

スクリプトをアタッチしたら動作確認に入ります。

  • MenuBackground
  • StatusParent

についてはそれぞれ非表示にしておきます。

ゲームを実行し、メニューを開いて「ステータス」を選択し、ステータス画面が表示されることを確認します。基本パラメータの部分については、「ParameterTable」のデータにて各レコードで定義した値になっていることを確認します。装備込みのパラメータでは、装備しているアイテム名が表示され、基本パラメータに加算されていることを確認します。

ステータス画面の表示
ステータスオープン

 

基本パラメータの領域と装備の領域で行がずれていたり、力と攻撃力、身の守りと防御力など、対応するパラメータを横並びにした方がよかったのでは? と色々と直したい部分もありますが、一旦このまま進めていきます。ステータス画面で表示する情報に関しては、実際にゲームを動かしてみて、参照したい情報がすぐ確認できているか、といった部分も確認して調整していけると良いかと思います。

 

今回のブランチ

 

まとめ

今回はメニュー画面のステータスの機能について、ゲーム内の値を表示する機能を作成しました。表示する情報が多くなるほど、UIに対して操作を行う実装が増えていくものの、基本的には単純な値の設定で進めていけるので実装負荷はアイテムや装備に比べると少なめですね。

次回はメニュー画面のセーブの機能について、方針を考えつつUIを作成していきます。

 

     

ゲーム開発の攻略チャートを作りました!

CTA-IMAGE

「ゲームを作ってみたいけど、何から手を付けていいか分からない!」


そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。


ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう!