敵の頭上にHPバーを実装してみる

概要

敵を倒していくゲームでよく見るHPバーの実装をやっていきます。

まずはどういう形で実装していくのか大まかな流れを書いていきます。

1. 敵にCanvasを子オブジェクトとして設置
2. そのCanvasにSliderを追加　(これがのちにHPバーになります)
3. Sliderを敵の頭上に配置
4. このSliderのデザインをHPバーっぽく調整
5. ダメージ与えた時にHPが減るようなスクリプトを書く
6. HPバーが常に自分の方向を向くようにスクリプトに追加

このような流れでやっていきたいと思います。

　Canvasを設置

敵にCanvasを設置してそこにSliderを追加します。

無事に設置できましたね。

Sliderを頭上にもっていく

無事にできましたが、これでは子オブジェクトのCanvasは敵と同じ動きをしてくれません。
HPバーは敵の頭上に常になければいけませんからもちろん敵と同じ動きをしなければいけませんよね。

そこで同じ動きをさせるためには
今追加したCanvasのインスペクタビューにあるCanvasコンポーネントのRenderModeをWorldSpaceに変更してください。
そうすることでアタッチしたオブジェクトと同じ動きをしてくれるようになります。
RenderModeについてはこちらのサイトでとてもわかりやすくまとめられていましたのでぜひご覧ください。

同じ動きをしてくれましたが、このCanvasにはSliderしかつけませんよね。今後の見やすさも兼ねてこのCanvasを小さくしておきましょう。
個人的には**rectTransformのScaleを(0.1 , 0.1 , 1.0)**くらいにするのがちょうどいいと思います。
Sliderの位置は適宜自分で好きな位置に調整してください。

SliderをHPバーっぽくする

このままではSliderのつまみがあったりSliderの色がそれっぽくないのでそれを調整していきます。

つまみを外す

ヒエラルキービューのSliderの下にあるハンドルスライドエリアのチェックボックスを外してください。そうすることでつまみが外れます。

フィルエリアを調整する

SliderのインスペクタビューにあるValueとMaxValueを同じ値にしてみると、値が一番右まで行かないですよね。これを修正するためにはFillAreaのRectTransformのポジションを全て0にしてください。

これでフィルエリアの調整も終了しました。

HPバーっぽく色を変更する

バーの色を変えてHPっぽくしましょう。
FillAreaの下にあるFillで体力の色
Backgroundでダメージ部分の色
をそれそれ変更できます。

それっぽい感じになってきました。あとはこれをスクリプトで動的に動かせるようにしましょう。

#　ダメージ時にスクリプトを書く
まあここら辺は自分で変数宣言とかいろいろ違うと思うので詳しくは書かないですが使用する関数だけ書いときます。

using UnityEngine.UI;
public Slider slider;
slider.maxValue = maxEnemyHP;
slider.value = enemyHP;

たったこれだけの関数だけで実装できます！簡単！

HPバーが常に自分の方向を向くようにする

いい感じですけどHPバーがキャラと一緒に回転してしまって見辛いので、バーを常に自分の正面を向くようにしましょう。
とっても簡単です。

GameObject.Find("SliderCanvas").transform.LookAt(GameObject.Find("Player"));

つまりはSliderがついてるCanvasをPlayerの方向に常に向けてねっていうことです。
これで終了です！お疲れ様でした！！