【Unity】Fill Amount で場面転換のトランジションをさくっと作る【UI】

【Unity】Fill Amount で場面転換のトランジションをさくっと作る

Unity には Image に設定できる「Fill Amount」という機能があります。

「Fill Amount」を使うと以下のようなトランジション演出を簡単に作成できます。

fillAmount-Transition

この記事では「Fill Amount」を使った場面転換のトランジションの作り方を紹介します。

バージョン情報

Unity 2020.2.0f1

Fill Amount とは?

Fill Amount は 0 から 1 の範囲で指定した割合だけ画像を表示する機能です。

FillAmount で値を変更

Image に Sprite をセットして、Image Type Filled に変更することで Fill Amount の項目が表示されます。

ImageType-Filled
Fill Amount 項目

Fill Amount の 5種類のタイプ

Fill Amount で画像を指定した割合だけ表示可能ですが、その表示方法には 5 種類のタイプがあります。「Fill Method」からタイプが変更できます。

Fill Method のタイプ

5種類のタイプの違いをそれぞれ紹介します。

Horizontal

画像を水平方向に割合表示。

Horizontal

Fill Origin」の設定から起点を変更できます。
Horizontal では Fill Origin に「Left」と「Right」が存在します。

上記 GIF では Fill Origin が「Left」に設定されています。

Vertical

画像を垂直方向に割合表示。

Vertical

起点を変更できる Fill Origin には「Bottom」と「Top」が存在します。
上記 GIF では Fill Origin が「Bottom」に設定されています。

Radial 90

画像を90度の領域で割合表示。

Radial 90

起点を変更できる Fill Origin には「BottomLeft」「TopLeft」「TopRight」「BottomRight」が存在します。

Clockwise」項目にチェックを入れることで反時計回りになります。

上記 GIF では Fill Origin が「BottomLeft」に設定されています。

Radial 180

画像を180度の領域で割合表示。

Radial 180

起点を変更できる Fill Origin には「Bottom」「Left」「Top」「Right」が存在します。

Clockwise」項目にチェックを入れることで反時計回りになります。

上記 GIF では Fill Origin が「Bottom」に設定されています。

Radial 360

画像を360度の領域で割合表示。

Radial 360

起点を変更できる Fill Origin には「Bottom」「Right」「Top」「Left」が存在します。

Clockwise」項目にチェックを入れることで反時計回りになります。

上記 GIF では Fill Origin が「Bottom」に設定されています。

コード紹介

今回は DOTween と組み合わせてトランジション演出を作成します。
DOTween は移動系のアニメーション(イージング)を簡単に実装できるアセットです。

DOTween のメソッド紹介&使い方を簡易解説 【Unity】DOTween のメソッド紹介&使い方を簡易解説!【GIF付き】

トランジション演出のコードは以下になります。

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class UIController : MonoBehaviour
{
    [SerializeField]
    Image image;

    [SerializeField]
    Image loadingImage;  // トランジション用の画像

    void Update()
    {
        // キーボードの Space キーで実行
        if(Input.GetKey(KeyCode.Space))
        {
            Play();
        }
    }

    void Play()
    {
        var sequence = DOTween.Sequence();
        sequence.Append(loadingImage.DOFillAmount(1, 0.5f)); // FillAmount を 0.5秒かけて 1 に変更
        sequence.InsertCallback(0.5f, () => image.sprite = Resources.Load<Sprite>("Textures/girl2")); // 画像差し替え
        sequence.AppendInterval(1f); // 1秒待機
        sequence.Append(loadingImage.DOFillAmount(0, 0.5f)); // FillAmount を 0.5秒かけて 0 に変更

        sequence.Play();
    }
}

上記コードを実装すると、以下のような場面転換のトランジション演出が再生されます。

トランジション演出

おわりに

Fill Amount の解説とそれを使ったトランジション演出の紹介をしてきました。
5種類の Fill Method と起点変更できる Fill Origin の設定を組み合わせることで、様々な演出の表現が可能です。

また Fill Amount を使って HPバーの増減を演出することができたり、他にも色々な用途で活用できる便利な機能となっています。