円形ゲージとは？

円形ゲージは、HPやMP、クールダウン、ローディングの進捗などをリング状・扇形で表現するUIです。

UnityではImageコンポーネントのImage TypeをFilledに設定することで、画像を一定の割合で切り取って表示できます。

この機能を使うと、テクスチャ1枚でシンプルに円形ゲージを実装できます。

スライダーを使ったゲージの実装はこちらの記事も参考にしてください。

【Unity】Sliderからゲージを作る - GARNET LOG
GARNET LOG

基本的な実装

画像の準備

ゲージに使う円形のテクスチャを用意します。リング状の画像を使う場合は、中央を透過させたPNGを用意してください。

テクスチャをProjectウィンドウにインポートし、Texture TypeをSprite (2D and UI)に設定します。

Image TypeをFilledに設定する

HierarchyウィンドウでUIのImageを作成し、InspectorでImage Type（画像タイプ）を設定します。

  1. Hierarchyで右クリックし、UI > Image を作成する
  2. Source Imageにゲージ用のSpriteを設定する
  3. Image TypeをFilledに変更する
  4. Fill MethodをRadial 360に設定する

Fill Amountの値を0〜1の間で変化させると、ゲージが増減します。

Fill Methodの種類

Fill Methodにはいくつかの種類があり、表現したい形状に応じて使い分けます。

Fill Method説明
Horizontal左右に伸びるゲージ
Vertical上下に伸びるゲージ
Radial 9090度の扇形
Radial 180半円形
Radial 360完全な円形（最もよく使う）

円形ゲージにはRadial 360を使います。

スクリプトから制御する

ImageコンポーネントのfillAmountプロパティに0〜1の値を代入することでゲージを制御します。

HPゲージとして使う

using UnityEngine;
using UnityEngine.UI;

public class HpGauge : MonoBehaviour
{
    [SerializeField] private Image _gaugeImage;

    // 最大HP
    [SerializeField] private float _maxHp = 100f;

    private float _currentHp;

    private void Start()
    {
        _currentHp = _maxHp;
        UpdateGauge();
    }

    // ダメージを受けたときに呼ぶ
    public void TakeDamage(float damage)
    {
        _currentHp = Mathf.Max(0f, _currentHp - damage);
        UpdateGauge();
    }

    // 回復したときに呼ぶ
    public void Heal(float amount)
    {
        _currentHp = Mathf.Min(_maxHp, _currentHp + amount);
        UpdateGauge();
    }

    private void UpdateGauge()
    {
        // 現在HPを0〜1の割合に変換してfillAmountに代入する
        _gaugeImage.fillAmount = _currentHp / _maxHp;
    }
}

アニメーションさせる

fillAmountをコルーチンで時間をかけて変化させると、ゲージがなめらかにアニメーションします。

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class AnimatedGauge : MonoBehaviour
{
    [SerializeField] private Image _gaugeImage;

    // アニメーションにかかる時間
    [SerializeField] private float _animationDuration = 0.5f;

    private Coroutine _animationCoroutine;

    // ゲージをアニメーションさせながら指定した値に変える
    public void SetValue(float value)
    {
        // 前のアニメーションが残っていれば止める
        if (_animationCoroutine != null)
        {
            StopCoroutine(_animationCoroutine);
        }

        _animationCoroutine = StartCoroutine(AnimateCoroutine(value));
    }

    private IEnumerator AnimateCoroutine(float targetValue)
    {
        var startValue = _gaugeImage.fillAmount;
        var elapsed = 0f;

        while (elapsed < _animationDuration)
        {
            elapsed += Time.deltaTime;

            // 経過時間に応じてfillAmountを補間する
            _gaugeImage.fillAmount = Mathf.Lerp(startValue, targetValue, elapsed / _animationDuration);
            yield return null;
        }

        // 最終値を確実に設定する
        _gaugeImage.fillAmount = targetValue;
        _animationCoroutine = null;
    }
}

Fill Originで開始位置を変える

Fill Originでゲージの開始位置を変更できます。

Fill Origin開始位置
Bottom下（デフォルト）
Right右
Top上（時計の12時方向）
Left左

時計のように12時方向から始めたい場合はTopを設定します。

時計回り/反時計回りを切り替える

Clockwiseのチェックボックスで回転方向を切り替えられます。

まとめ

ImageのImage Type: Filledを使うことで、シンプルに円形ゲージを実装できます。

  • Fill MethodをRadial 360にすると円形ゲージになる
  • スクリプトからfillAmount（0〜1）を操作してゲージを制御する
  • コルーチンでfillAmountを補間するとなめらかなアニメーションを作れる
  • Fill OriginとClockwiseで開始位置と回転方向をカスタマイズできる

HPゲージやクールダウン表示など、使い道は多いです。