【Unity】ImageのFill(fillAmount / fillMethod)をスクリプトで制御する

この記事について
この記事でわかること
Imageとは？
ImageのFillをスクリプト制御
まとめ

この記事について

この記事ではImageのFillをスクリプトで制御する方法が学べます。

この記事でわかること

まず image.type = Image.Type.Filled にする
進捗は image.fillAmount（0〜1）
形状は image.fillMethod（Horizontal/Vertical/Radial90/180/360）
開始位置は image.fillOrigin、方向は image.fillClockwise
代表例：横バー／縦バー／円形クールダウン／扇形ワイプ

Imageとは？

Imageについては以下の記事を参考にしてください。

ImageのFillをスクリプト制御

Fillをスクリプトから参照する準備

まずはヒエラルキーで右クリックをしてImageを8つ用意します。
・「右クリック」→「UI」→「Image」
・2つずつImageを親子関係にします。（それぞれ親、子のpositionは調整してください）
・Front側のImageの「Source Image」に適当な画像をアタッチしてください。
・Front側のColorを適当な色にします。

次にスクリプトを4つ作成して、それぞれのFront側のImageにアタッチしてください。

横方向のプログレスバー（0→1）

左から右へ伸びていく典型的なゲージです。
HPバー、ロードバーなどに最適。（ロードバーなら0→1、HPバーなら1→0）

using UnityEngine;
using UnityEngine.UI;

public class Image_Fill_Horizontall : MonoBehaviour
{
    [SerializeField] private Image testImage; // 塗りつぶすImage
    [SerializeField] private float speed = 0.3f; // 1秒あたりの進行速度
    private float ratio = 0f; // 0~1

    void Start()
    {
        // 同じGameObjectにアタッチされているImageを取得
        testImage = GetComponent<Image>();

        testImage.type = Image.Type.Filled;
        testImage.fillMethod = Image.FillMethod.Horizontal;
        testImage.fillOrigin = (int)Image.OriginHorizontal.Left; // 左→右
        testImage.fillAmount = 0f;
    }

    void Update()
    {
        // ratioを徐々に増やす
        ratio += Time.deltaTime * speed;
        ratio = Mathf.Clamp01(ratio);

        // UIに反映
        testImage.fillAmount = ratio;
    }
}

実行してみると滑らかに変わっていきますね。
今回はupdateですが任意のタイミングで呼ぶようにしたら汎用性が高いですね。

縦方向のゲージ（下→上）

下から上へ伸びるゲージです。
水やエネルギーが「溜まる」表現に使えます。

using UnityEngine;
using UnityEngine.UI;

public class Image_Fill_Vertical : MonoBehaviour
{
    [SerializeField] private Image testImage; // 塗りつぶすImage
    [SerializeField] private float speed = 0.3f; // 1秒あたりの進行速度
    private float ratio = 0f; // 0~1

    void Start()
    {
        // 同じGameObjectにアタッチされているImageを取得
        testImage = GetComponent<Image>();

        testImage.type = Image.Type.Filled;
        testImage.fillMethod = Image.FillMethod.Vertical;
        testImage.fillOrigin = (int)Image.OriginVertical.Bottom; // 下→上
        testImage.fillAmount = 0f;
    }

    void Update()
    {
        // ratioを徐々に増やす
        ratio += Time.deltaTime * speed;
        ratio = Mathf.Clamp01(ratio);

        // UIに反映
        testImage.fillAmount = ratio;
    }
}

実行してみると何かが溜まっていくように見えますね。
こちらも横方向と同じで任意のタイミングで呼べると汎用性は高そうです。

円形クールダウン（Radial360）

スキルの再使用待機などに便利。時計のように円が埋まる／減っていく演出ができます。

using UnityEngine;
using UnityEngine.UI;

public class Image_Fill_Round360 : MonoBehaviour
{
    [SerializeField] private Image testImage; // 塗りつぶすImage
    [SerializeField] private bool clockwise = false;
    [SerializeField] private int origin = (int)Image.Origin360.Top; // Top/Right/Bottom/Left

    private float duration = 3.0f;
    private float t = 0f;

    void Start()
    {
        // 同じGameObjectにアタッチされているImageを取得
        testImage = GetComponent<Image>();

        testImage.type = Image.Type.Filled;
        testImage.fillMethod = Image.FillMethod.Radial360;
        testImage.fillOrigin = origin;
        testImage.fillClockwise = clockwise;
        testImage.fillAmount = 1f;
    }

    void Update()
    {
        if (t < duration)
        {
            t += Time.deltaTime;
            float ratio = Mathf.Clamp01(t / duration);
            testImage.fillAmount = 1f - ratio; // 残り時間の可視化
        }
    }
}

実行してみるとスキルの再使用でありそうな演出になりました。
Backの画像にSpriteやテキストをいれるだけでスキルやタイマーになりそうですね。

扇形ワイプ（Radial90/180）

ステージ開始演出や特殊ゲージに使用できそうで、扇形でパッと表示/非表示を作れます。

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.UI;

public class Image_Fill_Round180 : MonoBehaviour
{
    [SerializeField] private Image testImage; // 塗りつぶすImage
    [SerializeField] private bool clockwise = true;
    [SerializeField] private int origin = (int)Image.Origin180.Bottom; // 90/180用のOrigin列挙

    private float revealTime = 3.0f;
    private float t = 0f;

    void Start()
    {
        // 同じGameObjectにアタッチされているImageを取得
        testImage = GetComponent<Image>();

        testImage.type = Image.Type.Filled;
        testImage.fillMethod = Image.FillMethod.Radial180;
        testImage.fillOrigin = origin;
        testImage.fillClockwise = clockwise;
        testImage.fillAmount = 0f;
    }

    void Update()
    {
        if (t < revealTime)
        {
            t += Time.deltaTime;
            testImage.fillAmount = Mathf.Clamp01(t / revealTime);
        }
    }
}

実行してみると少しわかりにくいですが扇形に変わってますね。
他のものと比べると使用頻度は少なそうに思えますが特殊な演出に使えそうですね。