スライダーを HP（体力）ゲージにする
体力 33% 以下で Fill Area を差し替える
- HP（体力）ゲージを減らすサンプル
サンプル
参考

テストしていたプログラムの副産物として HP スライダーが出来たのでメモ。 EventTrigger のちょうどいいテストデータでもあります。

f:id:shikaku_sh:20210217173050g:plain:w450 — HP スライダーのサンプル

HP を割合（0.0F～1.0F）で簡単に表示できました。サンプルは大好きな EFZ 風にしてみました。

f:id:shikaku_sh:20210217174810p:plain:w600 — 神ゲー

スライダーを HP（体力）ゲージにする

Unity の UI コンポーネントから Slider を生成
Handle Slide Area を削除
Slider > Background
- Image
  - Source Image をゲージの背景画像（ダメージを受けた後の色）
  - Raycast Target を false
Slider > Fill Area > Fill
- Image
  - Source Image をゲージの背景画像（ダメージを受ける前の色）

これでグラフィックの設定は完了です。あとは Slider.value のプロパティに従って、割合表示させることが可能です。オプションはこちら：

Slider
- Min Value
- Max Value
- Value

体力 33% 以下で Fill Area を差し替える

f:id:shikaku_sh:20210217173446p:plain

Image コンポーネントは overrideSprite というデフォルトの Source Image を別の画像に切り替えるという簡易ロジックを持っているので、これを活用するとシンプル。

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

public class HpSliderBehaviour : MonoBehaviour
{
    [SerializeField]
    private Slider _Slider = null;

    [SerializeField]
    private GameObject _Fill = null;

    [SerializeField]
    private Sprite _OverrideSprite = null;

    private Image _Progress;

    // Start is called before the first frame update
    void Start()
    {
        _Progress = _Fill.GetComponent<Image>();
    }

    // Update is called once per frame
    void Update()
    {
        if (_Slider == null || _Progress == null) return;

        if (_Slider.value <= 0.33F)
        {
            _Progress.overrideSprite = _OverrideSprite;
        }
        else
        {
            _Progress.overrideSprite = null;
        }
    }
}