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

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

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

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

バージョン情報

Unity 2020.2.0f1

Fill Amount とは？

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

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

Fill Amount の 5種類のタイプ

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

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

Horizontal

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

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

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

Vertical

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

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

Radial 90

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

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

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

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

Radial 180

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

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

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

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

Radial 360

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

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

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

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

コード紹介

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

2021年1月15日【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();
    }
}

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