Unity-スライダーを使わないゲージUIの作り方-

# はじめに
みなさんこんにちは成田です。
本記事ではHPなどで使うゲージのUIの作り方を解説していきます。

**スライダーは使わないです**

実際のゲーム会社でも使わない(らしい)ので、スライダーを使っている人はこの記事を機にスライダーを忘れましょう。1..2の...ポカン! これで忘れましたね。

※Unityのバージョンは6000.0.34f1を使用しています

# 事前準備
まずはUIを表示できるようにしましょう


Hierarchyウィンドウを右クリック -> UI -> Image でImageを作成。

![スクリーンショット 2025-06-04 180733.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/ee9240e4-2e71-4a04-a439-cf141ecdb018.png)

Imageを作成したら```ImageComponent```の```SourceImage```に四角い画像をアサインします。

画像は色を変更できるように白い画像にしましょう。

いい感じの画像がなかったら```Package manaager```から```2D Sprite```をインストールしましょう。

![スクリーンショット 2025-06-04 182044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/6d72d751-0cd3-470a-bca5-a95d97e76fc9.png)

こんな感じで2Dで使うSpriteが```Packages```に追加されます。

![スクリーンショット 2025-06-04 182819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/763dc0fa-0ef1-46e2-9b0f-64a6754b200e.png)

今回は```Square```を使います。```SourceImage```にアサインしましょう。

次に、```ImageType```を```Filled```に変更し、```Fill Method```を```Horizontal```に変更します。


![スクリーンショット 2025-06-04 190657.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/340a689a-393b-41f2-b2c2-e650cebbe2c5.png)

いいかんじに色や形を変えればHPゲージっぽくなりました。

![スクリーンショット 2025-06-04 184356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/ec0af641-f6ac-4ed1-a262-0d0b4fd0a6e8.png)

# ゲージの作成
おまたせしました。いよいよゲージを作っていきます。

Projectウィンドウを右クリック -> Create -> MonoBehaviour Script でScript を作成。
名前は``` HPGauge ```とします。

![スクリーンショット 2025-06-04 185443.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/6c28e3a4-4547-4c45-9f43-a81144ee0d39.png)

作成したScriptに以下のコードを記述します。
```cs
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
public class HPGauge : MonoBehaviour
{
    [SerializeField] Image _image;
    [SerializeField] float _maxHP = 100;
    [SerializeField] float _currentHP = 100;
    [SerializeField] float _changeValue = 20;

    // Start is called once before the first execution of Update after the MonoBehaviour is created
    void Start()
    {
        //HPの初期化
        _currentHP = _maxHP;
    }

    // Update is called once per frame
    void Update()
    {
        //Qを押すとダメージ
        if (Input.GetKeyDown(KeyCode.Q))
        {
            Damage();
        }

        //Eを押すと回復
        if (Input.GetKeyDown(KeyCode.E))
        {
            Heal();
        }
    }

    void Damage()
    {
        //0を下回らないようにする
        _currentHP = Mathf.Max(_currentHP - _changeValue, 0);

        //fillAmountに代入
        _image.fillAmount = _currentHP / _maxHP;

        Debug.Log($"HPの割合:{_currentHP / _maxHP}");
    }
    void Heal()
    {
        //_maxHPを上回らないようにする
        _currentHP = Mathf.Min(_currentHP + _changeValue, _maxHP);

        //fillAmountに代入
        _image.fillAmount = _currentHP / _maxHP;

        Debug.Log($"HPの割合:{_currentHP / _maxHP}");
    }
}

```
このコードを先ほど作ったImageにアタッチしましょう。
Qを押すとHPが減り、Eを押すとHPが回復します。

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/7d3a5609-c14a-4691-8bea-9fff71f671c6.gif)

このように、ゲージが変動します。
この際に```Console```のHPの割合と```Image```の```Fill Amount```に注目すると同じ値になっていることがわかると思います。

```Fill Amount``` は、Image コンポーネントの画像を 0〜1 の割合で表示するためのプロパティです。

たとえば
**最大体力が100、現在のHPが50のとき**

**50 / 100 = 0.5**

**画像を半分まで表示する**
といった感じで設定することができます。

ゲージUIはこのように作成することができます。

# スライダーでもよくない？

**よくないです**

たとえば、

**円形ゲージでつくりたい！**
**三角形のゲージをつくりたい！**

などの要望がプランナーからおりてきたときに対応ができません。

```Fill Amount```なら対応ができます。

```Fill Method```を```Radial 360```に変更して```Source Image```に円の画像をアサインすると簡単にできます。

```Source Image```の画像をどの方向・形で塗り進めるかを決める方式、これが```Fill Method```です。

```Fill Amount```をつかえば、画像素材さえあればだいたいのゲージは作れます。

最高ですね。

# 応用(DOTween)

はい、皆さん大好きDOTweenです。

DOTweenのインポート方法や詳細などは以下の記事を参考にしてください。
セットアップ方法や何ができるかがわかりやすく書いていると思います。

https://shibuya24.info/entry/unity-install-dotween

https://qiita.com/broken55/items/df152c061da759ad1471

さて、先ほどまでのゲージは安っぽい感じがしたと思います。
理由としては 1 -> 0.8 などの変動が一瞬で行われていたからですね。

**DOTweenはこの安っぽさを改善してくれます**

早速コードを書いていきます。
```cs
    void Damage()
    {
        //0を下回らないようにする
        _currentHP = Mathf.Max(_currentHP - _changeValue, 0);

        //fillAmountに代入
        _image.DOFillAmount(_currentHP / _maxHP, 0.5f);

        Debug.Log($"HPの割合:{_currentHP / _maxHP}");
    }
    void Heal()
    {
        //_maxHPを上回らないようにする
        _currentHP = Mathf.Min(_currentHP + _changeValue, _maxHP);

        //fillAmountに代入
        _image.DOFillAmount(_currentHP / _maxHP, 0.5f);

        Debug.Log($"HPの割合:{_currentHP / _maxHP}");
    }
```

```DOFillAmount```は```Fill Amount```の値を **現在値** から **指定した値(第一引数)** に **指定した時間(第二引数)** で補間して移動する、ということができるメソッドです。

今回は**現在のHPの割合に0.5秒で移動する**というコードですね。
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098591/c90ceffd-d47e-4e44-9ecb-1ed301473f4f.gif)
※gifだとすこしわかりづらいので自分のプロジェクトで実行してみてほしいです:bow_tone1:

```DOTween```をつかうと演出が少しリッチになります。
どんどん使っていきましょう。
# さいごに
ということで、今回はスライダーを使わずにHPゲージを作る方法を紹介しました。

「スライダー＝なんでもゲージに使える便利UI」と思われがちですが、柔軟性と拡張性の面では```Image + Fill Amount```の方が圧倒的に強いです。


また、```DOTween```を使えば、ちょっとした演出も簡単に追加できるので、UI全体のクオリティもグッと上がります。

ちなみに、スライダーがダメなわけではありません。

音量調整など、**ユーザーが値を操作するインターフェース**としてはスライダーが適しています。要は適材適所ですね。