【Unity】ImageのMaskをスクリプトで制御する方法【Mask / RectMask2D】

この記事について
この記事でわかること
Imageとは？
Maskをスクリプトで操作する
RectMask2Dをスクリプトで操作する
1. RectMask2DのPaddingで横ワイプ演出を作る
2. RectMask2DのSoftnessで少しずつ薄くする
まとめ

この記事について

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

この記事でわかること

Mask：親Imageのスプライト形状で、子Image/UIを切り抜く
RectMask2D：矩形領域でUIを切り取る。スクロールビューに最適
スクリプトから ON/OFF切り替え や マスク形状の差し替え が可能
実用例：丸いサムネ、角丸アイコン、スクロールリスト、ワイプ演出

Imageとは？

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

Maskをスクリプトで操作する

Maskとは？

MaskはUI要素の一部だけを 子オブジェクトに描画制限するコンポーネント です。
Mask をアタッチすると、そのオブジェクトの Image の形 が「切り抜き範囲」になり、子のUI要素だけがその範囲に表示されます。

特徴

Image の形状をそのままマスクに使う（丸や星形なども可能）
子オブジェクトにしか効果がない（兄弟や親には影響しない）
パフォーマンスはやや重い（ピクセル単位で描画をクリップするため）

RectMask2Dとは？

RectMask2DはUIの矩形領域で子オブジェクトを切り抜くコンポーネントです。
名前の通り「2D矩形ベースのマスク」で、単純な四角形の領域に限定されます。

特徴

矩形範囲のみ対応（丸や不規則な形は不可）
スクロールビューと相性が良い
パフォーマンスが軽い（単純な矩形クリップ処理のため）

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

まずはヒエラルキーで右クリックをしてImageを2つ用意します。
・「右クリック」→「UI」→「Image」
・2つのImageを親子関係にします。（今回はイメージしやすいように子の画像が親の画像とすこしずれるように配置しました。）
・SourceImageにSprite画像をアタッチ（親：背景、子：キャラクター）

次に以下のスクリプトを作成して、先ほどのImageにアタッチしてください。
※スクリプト名とクラス名は同じにしてください。

using UnityEngine;
using UnityEngine.UI;

public class Image_Mask : MonoBehaviour
{
    [SerializeField] private Mask testMask;

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

ここまで出来たら準備完了です！

Maskを有効、無効切り替え

今回はMaskの有効・無効の切り替えをスクリプトで書きます。（操作は分かりやすいようにインスペクターで行います。）

using UnityEngine;
using UnityEngine.UI;

public class Image_Mask : MonoBehaviour
{
    [SerializeField] private Mask testMask;
    [SerializeField] private bool Bool_Mask = true;
    [SerializeField] private bool Bool_MaskView = true;

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

    private void Update()
    {
        //Maskを有効・無効に切り替え
        if (Bool_Mask == true) testMask.enabled = true;
        else if (Bool_Mask == false) testMask.enabled = false;

        //MaskのViewを表示・非表示に切り替え
        if (Bool_MaskView == true) testMask.showMaskGraphic = true;
        else if (Bool_MaskView == false) testMask.showMaskGraphic = false;
    }
}

実行するとこのようにインスペクターでチェックボックスを操作してMaskの有効・無効が反映されることがわかります。

RectMask2Dをスクリプトで操作する

RectMask2Dを使用するためここからは「Mask」のチェックボックスをfalseにして、「Add Component」から「RectMask2D」をアタッチしてください。

RectMask2DのPaddingで横ワイプ演出を作る

今回はRectMask2DのPaddingのLeftをスクリプトで制御して左からMaskの範囲を縮めていくようにしました。
※Paddingを操作しても背景画像が消えるわけではないので背景画像も消したい場合は別の方法を取り入れてください。（Rect Transform等）

using UnityEngine;
using UnityEngine.UI;

public class Image_Mask : MonoBehaviour
{
    [SerializeField] private RectMask2D test_rectMask;
    public float speed = 200f; // 1秒あたり増える値（px）
    private float maxWidth;

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

        // RectTransform の幅を上限値として記録
        maxWidth = test_rectMask.rectTransform.rect.width;

        // 初期状態（全部表示）
        test_rectMask.padding = new Vector4(0, 0, 0, 0);
    }

    void Update()
    {
        Vector4 pad = test_rectMask.padding;
        pad.x = Mathf.Clamp(pad.x + Time.deltaTime * speed, 0, maxWidth);
        test_rectMask.padding = pad;
    }
}

実行するとこのようにPigDadyが左の方から消えていきます。

RectMask2DのSoftnessで少しずつ薄くする

今回はRectMask2DのSoftnessのY方向をスクリプトで制御して上下方向から画像を薄めていきます。

using UnityEngine;
using UnityEngine.UI;

public class Image_Mask : MonoBehaviour
{
    [SerializeField] private RectMask2D test_rectMask;
    [SerializeField] private int maxSoftness = 1000;  // 上下の最大softness
    [SerializeField] private float speed = 150f;     // 変化速度

    private Vector2Int currentSoftness;

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

        // 初期softnessは0
        currentSoftness = Vector2Int.zero;
        test_rectMask.softness = currentSoftness;
    }

    void Update()
    {
        int delta = Mathf.RoundToInt(speed * Time.deltaTime);
        currentSoftness.y = Mathf.Clamp(currentSoftness.y + delta, 0, maxSoftness);
        test_rectMask.softness = currentSoftness;
    }
}

実行するとこのようにPigDadyが上下の方から薄くなっていきます。閾値を超えたら完全に消すのような処理を入れてもありだと思います！