【Unity】UIToolkitでマスクをする方法

UIToolkitでマスクをする時に少しハマったのでまとめておきます
(意外と少ない....)

矩形マスク

上の画像のように四角のマスクをする際は簡単です

マスクとなるVisualElementの子に、マスクしたい要素を配置します

その後、InspectorからOverflowをhidden(右側の選択肢)に変更します

styleの重要な部分だけ抜き取っています

<engine:VisualElement style="flex-grow: 1; justify-content: center; align-self: center;">
    <engine:VisualElement style="overflow: hidden;">
        <engine:VisualElement style="background-image: url(banzai_kids_boy1.png);" />
    </engine:VisualElement>
</engine:VisualElement>

上記のようなUXMLになっていれば、子要素に矩形のマスクがかかっているはずです

任意の形でマスク

調べた限り、SVGを使ったマスクしか方法がなさそうです

SVGとはScalable Vector Graphicsの略で、その名の通り 点と線を用いて描画する形式です

XMLベースの、2次元ベクターイメージ用の画像形式の1つである。

ただし、今回は一般に使われているSVG画像は使いません
(自分が試した限り使えなかったので、使えた方は教えていただきたいです)

Unityが用意しているScriptableObjectで表現されたSVGを使用します

1. SVGの用意

Unityが用意している2DPainterのSaveToVectorImageを使います

適当なcsスクリプトを用意して貼り付ける

// 詳細は以下２つの記事を参考にしてください
//【Unity】【UI Toolkit】Painter2Dの描画結果をVectorImage型のアセットとして保存&読み込む
// https://light11.hatenadiary.com/entry/2024/01/23/194238
//
// 【Unity】【UI Toolkit】Painter2Dを使ってベクターグラフィックスを描く（基礎編）
// https://light11.hatenadiary.com/entry/2024/01/16/195750

[MenuItem("Assets/Create/MaskVectorImage")]
public static void MaskVectorImage()
{
    using var painter = new Painter2D();

    painter.fillColor = Color.red;
    painter.BeginPath();
    painter.MoveTo(new Vector2(100, 100));
    painter.LineTo(new Vector2(200, 200));
    painter.LineTo(new Vector2(300, 100));
    painter.Fill();

    // VectorImageを作成する
    var vectorImage = ScriptableObject.CreateInstance<VectorImage>();
    painter.SaveToVectorImage(vectorImage);

    // activeObjectのあたりにアセットを作成する
    var activeObject = Selection.activeObject;
    var folderPath = "Assets";
    if (activeObject != null)
    {
        folderPath = AssetDatabase.GetAssetPath(activeObject.GetInstanceID());
        if (!AssetDatabase.IsValidFolder(folderPath))
            folderPath = Path.GetDirectoryName(folderPath);
    }

    var assetPath = folderPath + "/MaskVectorImage.asset";
    assetPath = AssetDatabase.GenerateUniqueAssetPath(assetPath);
    AssetDatabase.CreateAsset(vectorImage, assetPath);
    AssetDatabase.SaveAssets();
}

上記のコードでマスクのためのSVGが出力できます
MoveTo, LineToや、そのほかの操作を追加することで、より複雑なマスクを生成できます
今回は一番単純な三角形です

Projectの適当なところで右クリックし、MaskVectorImageメニューを選択肢VectorImageを作成します

2. Background設定

矩形マスクの時の状態を使いまわしましょう
マスクをしていた矩形のBackgroundにVectorImageを設定していきます

画像を設定する右側のドロップダウンからVectorを選択します

先ほど生成したVectorImageをセットし、BackgroundのColorのAlphaを0にします

すると任意の形でマスクされていることがわかります