Unity には Image に設定できる「Fill Amount」という機能があります。
「Fill Amount」を使うと以下のようなトランジション演出を簡単に作成できます。
![fillAmount-Transition](https://www.midnightunity.net/wp-content/uploads/2021/01/transition-sample.gif)
この記事では「Fill Amount」を使った場面転換のトランジションの作り方を紹介します。
目次
バージョン情報
Unity 2020.2.0f1
Fill Amount とは?
Fill Amount は 0 から 1 の範囲で指定した割合だけ画像を表示する機能です。
![FillAmount で値を変更](https://www.midnightunity.net/wp-content/uploads/2021/01/FillAmount-ChangeValue.gif)
Image に Sprite をセットして、Image Type を Filled に変更することで Fill Amount の項目が表示されます。
![ImageType-Filled](https://www.midnightunity.net/wp-content/uploads/2021/01/imageType-filled.png)
![Fill Amount 項目](https://www.midnightunity.net/wp-content/uploads/2021/01/FillAmount-Param.png)
Fill Amount の 5種類のタイプ
Fill Amount で画像を指定した割合だけ表示可能ですが、その表示方法には 5 種類のタイプがあります。「Fill Method」からタイプが変更できます。
![Fill Method のタイプ](https://www.midnightunity.net/wp-content/uploads/2021/01/FillMethod.png)
5種類のタイプの違いをそれぞれ紹介します。
Horizontal
画像を水平方向に割合表示。
![Horizontal](https://www.midnightunity.net/wp-content/uploads/2021/01/FillMethod-Horizontal.gif)
「Fill Origin」の設定から起点を変更できます。
Horizontal では Fill Origin に「Left」と「Right」が存在します。
上記 GIF では Fill Origin が「Left」に設定されています。
Vertical
画像を垂直方向に割合表示。
![Vertical](https://www.midnightunity.net/wp-content/uploads/2021/01/FillMethod-Vertical.gif)
起点を変更できる Fill Origin には「Bottom」と「Top」が存在します。
上記 GIF では Fill Origin が「Bottom」に設定されています。
Radial 90
画像を90度の領域で割合表示。
![Radial 90](https://www.midnightunity.net/wp-content/uploads/2021/01/FillMethod-Radial90.gif)
起点を変更できる Fill Origin には「BottomLeft」「TopLeft」「TopRight」「BottomRight」が存在します。
「Clockwise」項目にチェックを入れることで反時計回りになります。
上記 GIF では Fill Origin が「BottomLeft」に設定されています。
Radial 180
画像を180度の領域で割合表示。
![Radial 180](https://www.midnightunity.net/wp-content/uploads/2021/01/FillMethod-Radial180.gif)
起点を変更できる Fill Origin には「Bottom」「Left」「Top」「Right」が存在します。
「Clockwise」項目にチェックを入れることで反時計回りになります。
上記 GIF では Fill Origin が「Bottom」に設定されています。
Radial 360
画像を360度の領域で割合表示。
![Radial 360](https://www.midnightunity.net/wp-content/uploads/2021/01/FillMethod-Radial360.gif)
起点を変更できる Fill Origin には「Bottom」「Right」「Top」「Left」が存在します。
「Clockwise」項目にチェックを入れることで反時計回りになります。
上記 GIF では Fill Origin が「Bottom」に設定されています。
コード紹介
今回は DOTween と組み合わせてトランジション演出を作成します。
DOTween は移動系のアニメーション(イージング)を簡単に実装できるアセットです。
トランジション演出のコードは以下になります。
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();
}
}
上記コードを実装すると、以下のような場面転換のトランジション演出が再生されます。
![トランジション演出](http://www.midnightunity.net/wp-content/uploads/2021/01/transition-sample.gif)
おわりに
Fill Amount の解説とそれを使ったトランジション演出の紹介をしてきました。
5種類の Fill Method と起点変更できる Fill Origin の設定を組み合わせることで、様々な演出の表現が可能です。
また Fill Amount を使って HPバーの増減を演出することができたり、他にも色々な用途で活用できる便利な機能となっています。