Unityの2Dゲームで「プレイヤーのライフバー(HPバー)」を実装していきます。色々な方法がありますがシンプルな方法でいきます。
はじめに
Unityのバージョンは2021.3.14f1です。
下記のようなシンプルなライフバー(ヘルスバー)を実装していきます。ダメージを食らうと白部分が増えるという感じです。分かりやすいようにサイズを大きくしてありますが、実際はもっと小さいですね。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711009.png)
実装開始
ライフバーの見た目(UI)を作成してから簡単なスクリプトで実装していきます。
ライフバーのUI作成
まずはHierarchyで右クリックして、UI→Imageを追加。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711001.png)
名前をHPBarに変更してRectTransformを大体の位置になるように調整します。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711002.png)
HPBarをコピーして配下に移動。名前をHPBarCurrentにして、Image部のSourceImageをSpriteShapeFill、Colorを赤色にします。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711003.png)
HPBarCurrentのRaycasrPaddingを変更。ImageTypeをFilled、FillMethodはHorizontal、FillOriginをLeftに。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711004.png)
試しにFillAmountを変更して、ライフバーっぽくなればOK。
スクリプトの作成
HPBarと言う名前でスクリプトを作成します、中身は下記。
using UnityEngine; using UnityEngine.UI; public class HPBar : MonoBehaviour { [SerializeField] private Image _hpBarcurrent; [SerializeField] private float _maxHealth; private float currentHealth; void Awake() { currentHealth = _maxHealth; } public void UpdateHP(float damage) { currentHealth = Mathf.Clamp(currentHealth - damage, 0, _maxHealth); _hpBarcurrent.fillAmount = currentHealth / _maxHealth; } }
ダメージ量を渡すと、HPバーがダメージに応じて変化します。
Mathf.Clampは値の範囲制限ですね。
HPBarオブジェクトにスクリプトをアタッチして、変数をセットします。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711006.png)
試しにボタンクリックでダメージを食らうようにしてみます。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711007.png)
実行してボタンを押した時にダメージが食らえばOK。
![](https://nosystemnolife.com/wp-content/uploads/2023/07/20230711008.gif)
実際は敵から攻撃された時にダメージを食らう感じかな。