UI Toolkit でのマスキング効果の適用

マスキングは、UI 要素のどの部分を表示するかを制御できる技術です。UI Toolkit では USS プロパティ overflow: hidden を使用して、もう 1 つの UI 要素の範囲外にある UI 要素の部分を非表示にできます。

要素によるマスキング

要素を使用して別の要素をマスクできます。要素によるマスキング効果を作成するには、マスキング要素をマスクされる要素の親要素として追加します。マスキング要素の overflow プロパティを hidden に設定します。マスキング要素の範囲外にあるマスクされる要素の部分が非表示になります。

以下の例では、矩形および角の丸みを帯びた形状でマスキング効果を作成する方法を示しています。

この例では、#MaskSquare 要素と MaskRounded 要素はマスキング要素で、Logo1 要素と Logo2 要素はマスクされる要素です。マスキング要素は、マスクされる要素の親要素になっています。この例では、背景画像付きの VisualElement を使用してマスキング効果を試しています。マスキング技術は、ラベルやボタンなどすべての要素に適用できます。

#MaskRounded 要素の border-radius プロパティは 50px に設定されています。これにより、角に丸みを帯びたマスキング効果が作成されます。

UXML では以下のようになります。

<UXML>
    <VisualElement name="MaskSquare" >
        <VisualElement name="Logo1" />
    </VisualElement>
    <VisualElement name="MaskRounded" >
        <VisualElement name="Logo2"  />
    </VisualElement>
</UXML>

USS では以下のようになります。

#MaskSquare {
    overflow: hidden;
}

#MaskRounded {
    overflow: hidden;
    border-radius: 50px;
}

#Logo1, #Logo2 {
    background-image: url("unity-logo.png");
}

任意の形状によるマスキング

任意の形状でマスキング効果を作成するには、次に示すように、マスキング要素の背景画像として SVG を設定します。

UXML では以下のようになります。

<UXML>
    <VisualElement name="MaskSVG" >
        <VisualElement name="Logo3" />
    </VisualElement>
</UXML>

USS では以下のようになります。

#MaskSVG {
    overflow: hidden;
    background-image: url("mask.svg");
}   

#Logo3 {
    background-image: url("unity-logo.png");
}

ネスト状のマスキングのバッチ中断を削減

ネスト状のマスキングは、要素と 1 つ以上の先祖の両方がマスクを定義する場合に発生します。この場合、マスクの共通部分によって最終的な可視範囲が定義されます。この技術を使用すると、複雑な視覚効果を作成したり、さまざまな基準に基づいて画像の一部を選択して表示したりできます。例えば、要素の特定の領域を表示し、他の領域はマスクして隠すようにマスクを定義することができます。

矩形形状でマスキングする場合、Unity は座標軸に沿った矩形をクリッピング領域として使用します。これを矩形クリッピングと呼びます。角に丸みを帯びた形状や任意の形状でマスキングする場合、Unity は矩形クリッピングの代わりにステンシルマスキングを使用します。ステンシルマスキングは、マスクをステンシルに格納します。ステンシルは、チャンネルあたり 8 ビットの特殊な画像タイプです。ステンシルに格納された形状によって、クリッピング領域が定義されます。詳細は、ShaderLab コマンド: Stencil を参照してください。

ステンシルマスキングは、ステンシルバッファと呼ばれる GPU 機能をマスキング操作に使用します。ステンシルには、画像修正とレンダリングへの影響を規定する GPU 関連のステートがあります。要素が同じステンシルステートを共有する場合、1 つのドローコールにバッチ処理できます。ただし、ネスト状のマスキングなど、ステンシルステートに変更があるとバッチ処理が中断されます。バッチ処理が中断されると、1 つのドローコールで複数の要素を効率的にレンダリングできなくなるため、パフォーマンスに深刻な影響を与える可能性があります。バッチ処理の中断を最小化し、レンダリングパフォーマンスを最適化することが重要です。

ネスト状のステンシルマスキングのバッチ中断回数を減らすには、すべてのマスクの先祖であるマスキング要素に UsageHints.MaskContainer を適用することを検討してください。

以下の図は、単一レベルのマスキング、ネスト状のマスキング、および MaskContainer が適用されたネスト状のマスキングのバッチ数を示しています。黄色はマスキング要素を示しています。オレンジ色は、MaskContainer が適用されたマスキング要素を示します。数字はバッチ数を示します。

A: 単一レベルのマスキング (1 バッチ)
B:ネスト状のマスキング (5 バッチ)
C MaskContainer を使用したネスト状のマスキング(2 バッチ)

追加リソース

• UsageHints
• 表示