Unityに関連する記事です

敵の頭上にHPゲージを表示するための設計を考える

 敵について、最後の設計項目なりました。

・敵のHPは敵の頭上に横ゲージ表示し、現在値がグラフィカルに伝えられるようにデザインする。
・ゲージは右端がHP最大、左端がHP最小とする。
・ゲージは敵と一緒に移動する。

 プレイヤーが攻撃して敵にダメージを与えた際に、そのままでは敵のHPがどの位残っているのかわかりません。
残っているHPがわからないと、ユーザーが敵を倒す際の優先順位を考えたりできませんので、敵の残りHPがわかるようにHPを表示するように設計を考えましょう。
ただし数字だけよりも、ゲージであった方が残りHPが伝わりやすくなりますので、敵の頭上にHPのゲージ(HpBar)を表示するように考えていきましょう。

 また表示したHpBarは敵と一緒に移動してもらいたいので、そのためにはどうすればよいか、考えます。
武器の時と同じで、敵の子オブジェクトとしてHpBarを追加してあげれば一緒に追従して動いてくれそうです。
またUIにはSliderという部品があり、こちらをBar表示としてそのまま使えます。こちらを使うように設計しましょう。

敵の子オブジェクトにCanvasとSliderを追加する

https://gyazo.com/c834c0a34912a4b08254ab5af29f55e3

 敵のゲームオブジェクトを選択し、子オブジェクトとしてCanvasを新しく作成して追加しましょう。
そのCanvasの子としてUI部品であるSliderを追加します。このSliderをHpBarとして利用します。
ヒエラルキー上は下記の画像のようになっていれば大丈夫です。



Sliderの設定を変更する

 Sliderの子要素であるHandle Slide Areaは、マウスドラッグで値を変更する時に使用するものです。
今回は使用しませんので、ヒエラルキーで選択して削除しておきます。

 Sliderの子要素のRectTransformを確認していき、Fll AreaとFillをResetし、すべての値を0にします。
こうすることにより、Sliderの一番端の位置からBarが動くようになります。
(以前入っていた数字はHandleを利用する際の数字ですので、ここで0にしても問題ありません。)

  FillのImageコンポーネントのColorを変更することによって、HpBarの動くゲージの色を変更できます。
赤などのわかりやすい色に変更しておきましょう。

Fill Area


Fill


BackGround


Slider-1


Slider-2

Canvasの設定を変更し、ゲーム画面内に表示できるようにする

 通常Canvasはゲーム画面の手前に表示される設定になっていますが、そのままですと表示している位置と敵の位置とが調整できません。

 そこで、Canvasの設定を変更し、ゲーム画面内にCanvasを移動させられるようにします。
Canvasのインスペクターの中からCanvasコンポーネントを確認し、その中のRenderModeをWorldSpaceに変更しましょう。
そしてRectTransformの右上の歯車ボタンをクリックし、Resetをします。
これで敵の位置にCanvasが移動しました。あとはPosition.Yの位置とScale、Width、Heightの各値を調整し、上手く敵の頭上にHpBarが来るようにします。




 またCanvasのままですとわかりにくようであれば、名称をHpBarInfoのように、自分でわかりやすい名前に変更しておきましょう。

HPBarのUIを常にカメラの正面を向くようにする

 今のままだと、敵が横を向いた際に、HpBarも横方向を向いてしまうため見えなくなってしまいます。
UIは2Dとして設定していますのでカメラの正面を常に向いていてくれれば、この問題は解消できそうです。

 新しいスクリプトを作成し、名前をHpBarInfoにします。完成したら敵の子オブジェクトのCanvasにアタッチします。

<= +ボタンを押すと開きますので、自分なりの実装を行った上で確認をしてみましょう。


敵のHPとHpバーをリンクさせるための設計を考える

 無事にHpBarを表示することができました。ですがこのままでは、前回の索敵範囲と同様に処理が独立しまっており、
敵のHPが減少してもHpBarが一緒に減少しません。HpBarと敵のHPとをリンクさせて、攻撃を受けてHPが減少したら、HpBarも動くようにしましょう。

 設計を考えてみます。敵のHPの情報をHpBarに送ることが出来れば、ちゃんと情報がリンクでき、HpBarが動くように出来そうですね。
やり方としては、EnemyControlerクラスにてHpBarの処理をするのか、あるいは先ほど作ったHpBarクラスで処理を行うようにするのか、
どちらの方法でも対応できると思います。

 ここではHpBarInfoクラスにてHpBarの処理を行う方法を実装していきます。
まずはHpBarInfpクラスを修正していきます。

<= +ボタンを押すと開きますので、自分なりの実装を行った上で確認をしてみましょう。


 つづいてEnemyControlerクラスも修正します。こちらからHpBarInfoクラスに作成したメソッドを呼び出して、HpとHpbarとの同期を行います。
またHpが0になった場合にはHpBarを非表示にする処理も追加しておきます。

 下記のスクリプトはEnemyControlerクラスを抜粋したです。OnTriggerEnterメソッドの該当部分に追加します。

<= +ボタンを押すと開きますので、自分なりの実装を行った上で確認をしてみましょう。


 それでは実際に動かしてみましょう。プレイヤーの攻撃を受けた際に、敵のHpBarが減少すれば処理は成功です。
敵が倒れたアニメ処理を追加する場合には、破壊されるまで時間がかかりますので、その前にHpBarを非表示にする処理を追加しましょう。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

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

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

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

private



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

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