How do apply masking ui toolkit?

Unity Engine
,
1

I tried with official reference and forum but couldn’t solve it.

Applying overflow: hidden didn’t mask it.

2

If an element has overflow:hidden, it will mask its children, as shown here.

9840672--1415877--simplemask.gif

What’s not working for you?

2 Likes
3

I also checked the hidden box like you did, but I didn’t see the desired result.

I guess I’m missing some func 9840708--1415892---Clipchamp-ezgif.com-video-to-gif-converter.gif

4

Is the object a child? It masks child objects.

5

No the object is parent.
I heard that apply overflow:hidden to masking elements.

6

Can you share your UXML/USS? I’ll have a look.

7

I’m exploring UI Toolkit for the first time today. Please let me know if anything goes wrong.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/Resources/UI/UI_MyInfo/MyInfoUss.uss?fileID=7433441132597879392&guid=38a9f4e9dee479643830e2ba0585d0dd&type=3#MyInfoUss" />
    <ui:VisualElement name="Base" style="flex-grow: 1;">
        <ui:VisualElement name="Container-Image" style="flex-grow: 0; height: 25%; flex-direction: row; align-items: center; justify-content: space-around; align-self: center; width: 100%; overflow: hidden;">
            <ui:Button parse-escape-sequences="true" display-tooltip-when-elided="true" name="Button-Profile" style="margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 5%; padding-right: 5%; padding-bottom: 5%; padding-left: 5%; background-color: rgb(193, 255, 186); width: 50%; height: 100%; align-items: center; align-self: center; justify-content: space-around;">
                <ui:VisualElement name="Image-Profile--Mask" class="Image-Overflow--hidden" style="flex-grow: 0; background-color: rgba(0, 0, 0, 0); flex-shrink: 1; height: 400px; align-items: stretch; background-image: url("project://database/Assets/circle.png?fileID=2800000&guid=70f548bfbd0b03441b19612cbceb5970&type=3#circle"); -unity-background-scale-mode: stretch-to-fill; overflow: hidden; visibility: visible; width: 400px;">
                    <ui:VisualElement name="Image-Profile" class="Image-Test" style="flex-grow: 1; background-image: none; -unity-background-scale-mode: stretch-to-fill; overflow: visible; visibility: visible; background-color: rgba(0, 0, 0, 0.35);" />
                </ui:VisualElement>
            </ui:Button>
            <ui:Button parse-escape-sequences="true" display-tooltip-when-elided="true" name="Button-Tier" style="height: 100%; width: 50%; background-color: rgb(255, 88, 88); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
                <ui:VisualElement name="Image-Tier" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); height: 100%;" />
            </ui:Button>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>
8

Ah! I see, we don’t support textured alpha masks yet, this is planned for later. The mask is basically defined by the VisualElement rectangle and its rounded corners.

1 Like
9

Ah ha, I didn’t know that. :slight_smile: Thank you.

10

++