Unityに関連する記事です

 UI の機能を利用し、プレイヤーのライフ値(体力)を、数字ではなくグラフィカルに表示し、更新管理するための機能を実装します。


<確認動画 ーライフ用アイコンの生成と List への追加ー>
動画ファイルへのリンク



手順15 ーライフ表示機能ー

 新しい学習内容は、以下の通りです。

<学習内容>
 ・Canvas を利用して UI 用のゲームオブジェクトを作成する
 ・Listの使い方  Add メソッドー



設計


 UI の機能を利用し、プレイヤーのライフ値(体力)を、数字ではなくグラフィカルに表示し、更新管理するための機能を実装します。

 今回ライフについては、ライフ用のアイコン画像を用意し、それを、管理しているライフ用の変数と同期させることにより、
現在のプレイヤーのライフ値の数分だけ、ゲーム画面にもライフ用のアイコンを表示します。

 ゲーム開始時に表示して終了ではなく、ゲーム内のライフ値の増減に合わせて、UI のライフのアイコンも増減する機能も実装します。

 アイコン用のゲームオブジェクトの管理を行うため、List の機能を利用します。


UI 表示用のゲームオブジェクト群を作成する


 自分ひとりで作成できるかどうか、挑戦してみましょう。

 ヒントとして、ヒエラルキーにある Canvas ゲームオブジェクト群を提示します。
この通りでなくても問題ありません。

 どういう機能を持つゲームオブジェクトがあれば、ライフの表示を行うことが可能になるのか、考えて実装を行ってみてください。


ヒエラルキー画像



Canvas ゲームオブジェクトの作成をする


 Canvas ゲームオブジェクトの作成を行います。一緒に EventSystem ゲームオブジェクトも作成されます。

 Canvas を作成したら、忘れずにサイズの設定を行います。


Scene ビュー画像


インスペクター画像




PlayerInfoSet ゲームオブジェクトを作成する


 Canvas ゲームオブジェクトの子オブジェクトとして作成し、ライフ用のアイコンなどを管理するためのフォルダの役割を持ちます。

 今後、プレイヤーの情報の UI 表示を追加する場合には、このゲームオブジェクトに管理をさせる設計にしています。


Scene ビュー画像


インスペクター画像



LifeSet ゲームオブジェクトを作成する


 ライフのアイコンを管理するための役割を持つゲームオブジェクトです。


Scene ビュー画像


インスペクター画像



imgLifeBackground ゲームオブジェクトを作成する


 ライフ用のアイコンを並べて表示する際の、背景用のゲームオブジェクトです。


Scene ビュー画像


インスペクター画像



LifeTran ゲームオブジェクトを作成する


 ライフ用のアイコンを生成した際に、並べる位置と並べる方向などの規則を制御するためのゲームオブジェクトです。

 HorizontalLayoutGroup コンポーネントにより、並べる機能を実装していますが、
GridLayoutGroup コンポーネントでも構いません。

 これらのコンポーネントがどのような役割を持っているか、調べてみてください。


Scene ビュー画像


インスペクター画像



LifeIcon ゲームオブジェクト


 ライフ用の画像を設定し、アイコン表示させるためのゲームオブジェクトを作成します。
画像には任意の画像を設定してください。

 このゲームオブジェクトを複数生成することで、ライフの数分のアイコンのゲームオブジェクトとしてを使います。
そのため、どの位並べられるか、サイズ感、並べる間隔などを調整する必要があります。

 完成したら、プレファブにしておきますが、まだヒエラルキーから削除はしないでください。


Scene ビュー画像


インスペクター画像



LifeIcon ゲームオブジェクトを複製して並べて確認する


ライフの上限値を考えて、上限値までアイコンを並べることが可能かどうかを、LifeIcon ゲームオブジェクトを複製して確認します。
1つ1つのサイズ、並べた時の間隔などを確認し、ちょうどよい見た目になるように調整を行ってください。


Scene ビュー画像



 確認が終了したら、LifeIcon ゲームオブジェクトはすべてヒエラルキーより削除してください。


UIManager スクリプトを作成する


 ライフ用アイコンと、それを生成して表示するゲームオブジェクト群が完成しましたので、
続いて、スクリプトを利用して、指定した位置に複数のライフ用アイコンを生成する処理を実装します。

 日本語による処理の内容のコメントはあえて控えてあります。
どのような処理になっているのかを理解しながら処理を記述し、また、自分で処理を日本語化して、コメントを記述してください。


UIManager.cs


 スクリプトが完成したらセーブします。



 for 文内の下記の処理は三項演算子を利用して記述することも出来ます。

if (i < amount) {
    lifesList[i].SetActive(true);
} else {
    lifesList[i].SetActive(false);
}

   ↓

 lifesList[i].SetActive(i < amount ? true : false); 

 SetActive メソッドは引数に bool 型を取りますので、さらに省略できます。

   ↓

 lifesList[i].SetActive(i < amount); 

 色々な処理の記述方法を学習し、使い方を覚えておくことで、プログラムを書く技術を高めることが出来ます。


<Listの使い方  Add メソッドー>


 List クラスは <T> にジェネリック型(任意の型)を指定して、同じデータ型をまとめて管理するコレクション機能を持つクラスです。
配列と異なり、要素を自由に追加・削除できます。(要素数が可変する)

 List を利用するには宣言に合わせて初期化の処理が必要になります。

  // List の宣言と初期化
  [SerializeField]
private List<GameObject> lifesList = new List<GameObject>();


List.Add(T型) メソッド

 Listの末尾に引数で指定した要素(データ)を追加します。
引数が T 型となっていますが、これは List を宣言した際に使った型が自動的に入ります。
今回は GameObject 型の List を宣言していますので、Add メソッドの引数には GameObject 型のみ指定できます。

 そのため、Listで宣言している型と同じ型であれば Add メソッドで List に要素を追加することが出来ます

 lifesList.Add(Instantiate(lifePrefab, lifeTran, false));

追加された要素は、自動的に List の最後に順番に追加されていきます。
例えば、lifesList 変数にまだ1つも要素がなければ、lifesList[0] として1つ目に要素が追加されます。
そのあとに Add メソッドが実行された場合には、lifesList[1] として2つ目に要素が追加されます。


UIManager ゲームオブジェクトを作成し、UIManager スクリプトをアタッチして設定を行う


 ヒエラルキーに新しいゲームオブジェクトを作成して、UIManager スクリプトをアタッチさせます。

 ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択し、新しいゲームオブジェクトを作成します。
名前を UIManager に変更し、先ほど作成した UIManager スクリプトをドラッグアンドドロップしてアタッチします。


ヒエラルキー画像



インスペクター画像




 UIManager ゲームオブジェクトを選択して、インスペクターからアタッチされていることを確認した上で、表示されている変数にアサインを行います。

 LifeTran 変数には、ヒエラルキーにある Canvas ゲームオブジェクトの子オブジェクトである LifeTran ゲームオブジェクトをドラッグアンドドロップしてアサインします。
Transform 型の情報が登録されます。ライフ用アイコンを生成する地点の情報として利用します。

 LifePrefab には、Prefabs フォルダにある LifeIcon ゲームオブジェクトをドラッグアンドドロップしてアサインします。
GameObject 型の情報が登録されます。これが生成されるライフ用アイコンになります。

 lifesList 変数はそのままで問題ありません。こちらは、ゲーム実行中に情報が自動的に更新されます。
どうして登録しなくても問題がないのかを、しっかりと理解しておきましょう。

 PlayerInfoSet 変数にも、ヒエラルキーにある Canvas ゲームオブジェクトの子オブジェクトである PlayerInfoSet ゲームオブジェクトをドラッグアンドドロップしてアサインします。
Transform 型の情報が登録されます。


設定後のインスペクター画像


 以上で設定は完了です。


PlayerController スクリプトを修正する ーなぜこのスクリプトを修正するのかを考えるー


 UIManager スクリプトに、HP の値に応じて、ライフ用アイコンを生成する処理と、表示を更新する処理をそれぞれメソッド単位で準備しました。

 メソッドはいずれかから処理の実行命令を受け取らなければ動きません。
そのため、いまはまだ処理の準備ができただけであり、実際にゲームを実行しても、アイコンは生成されませんし、更新もされません。

 よって、処理の準備が出来たら、次はその処理を適切なタイミングで実行する処理を実装します。



 ライフ用アイコンは、HP の値と同期させることにより、ユーザーに現在のHPを伝える役割があります。
つまり、ライフ用アイコンを生成したり、表示を更新するための情報として、HP を管理しているスクリプトから命令を実行することが適切であると言えます。

 現在 HP の値を管理しているスクリプトは PlayerController スクリプトです。このスクリプト内に、適切なタイミングで
UIManager スクリプト内に用意した各メソッドを実行することができれば、HP の値分のライフ用アイコンの生成を行い、表示の更新を行うことが出来るでしょう。

 こういった設計部分を見直すことで、ロジックを考えていくことが出来ます。
処理全体の流れを把握できていないと、設計は理解できませんので、ロジックも組めません。



 今回の修正では、ゲームを実行した際に、UIManager スクリプトの SetPlayerInfo メソッドへと命令を行い、ライフ用アイコンの生成を行います。
また、HP の増減に応じて、ライフ用アイコンの表示も更新する必要があります。こちらも UIManager スクリプトの UpdateDisplayLife メソッドを実行して更新を行います。

 すぐにスクリプトの記述を見るのではなく、どのタイミングで命令を実行すればいいのかを自分なりに考えてから、スクリプトの内容を確認してください
TODO を付けてある部分がヒントになりますので、まずは修正案を見ずに自分の処理を書いて、ゲームを実行してみましょう。

 そうすることで、スクリプトを書く力を養うことが出来ます。


PlayerController.cs

<= クリックすると開きます。



MainCamera_Player ゲームオブジェクトの設定を行う


 PlayerController スクリプトを修正しましたので、このスクリプトがアタッチされている MainCamera_Player ゲームオブジェクトのインスペクターを確認します。


MainCamera_Player ゲームオブジェクト インスペクター画像




 uiManager 変数が新しく追加されていますので、ヒエラルキーにある UIManager ゲームオブジェクトをドラッグアンドドロップしてアサインします
自動的に UIManager スクリプトの情報が変数内に登録されます。


MainCamera_Player ゲームオブジェクト インスペクター画像



 以上で設定は完了です。

 MaxHp 変数の値分だけライフ用アイコンが生成されますので、MaxHp 値を 5 前後に調整しておきましょう。


ゲームを実行して動作を確認する


 すべての手順が完成しましたので、ゲームを実行してデバッグを行います。
MaxHp 変数の値分だけライフ用アイコンが生成されれば制御成功です。


<確認動画 ーライフ用アイコンの生成と List への追加ー>
動画ファイルへのリンク


 UIとしてライフ用アイコンが生成された場合には、UIManager ゲームオブジェクトのインスペクターを確認し、アイコンの情報が lifesList 変数に登録されているかを確認します。


<UIManager ゲームオブジェクトのインスペクター画像>




 どのようにして処理が動いているのかをしっかりと理解しながら、動作の検証を行ってください。

 合わせて、敵から攻撃を受けて HP の値が減少した際に、ライフ用アイコンの表示数が更新されるかどうかも確認しておきましょう。



 以上でこの手順は終了です。

 => 次は 手順16 ーUI の自作ー です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます