Unexpected behavior with playmode vs ui builder

Unity Engine
,
1

Unity Version 2021.3.9f1

I’m having some trouble with the UI Builder Preview not matching what is displayed in game. For example I have it looking like this in the builder

and yet when I enter play mode it looks like this and is always visible even when the window is not supposed to be visible

I have no scripts trying to do any logic with these, and other parts of this ui are working as expected. They were previously displaying but when I attempted to do these through the USS they began displaying these white circles in playmode. Is there something wrong with how I have this set up? It’s not exactly clear to me in any guides or information. In the builder it works great so I just don’t understand. Anyone have any insight?
each of these circles is a xml template that uses those #need-item-energy .need-border to personalize them, but the shape and sizing comes from the simple .need-item at the bottom there

Here are all my relevant uss and uxml files

This is the base need item uss

.need-item {
    flex-basis: 32px;
    height: 100%;
    flex-shrink: 0;
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-border.png?fileID=2800000&guid=678657a37f6911c488b2d28f274828e5&type=3#SimUI-needs-border');
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    -unity-background-scale-mode: scale-and-crop;
    justify-content: center;
    align-items: center;
    width: 32px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    overflow: hidden;
    margin-top: 1.5px;
    margin-bottom: 1.5px;
    -unity-background-image-tint-color: rgba(255, 255, 255, 255);
}

.need-item-background {
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-background.png?fileID=2800000&guid=c54cce99c05b935419b991a52e03afb7&type=3#SimUI-needs-background');
    width: 100%;
    height: 100%;
    display: flex;
    -unity-background-image-tint-color: rgb(255, 255, 255);
    align-items: center;
    justify-content: center;
    -unity-background-scale-mode: stretch-to-fill;
    overflow: hidden;
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    position: absolute;
}

.need-level-overlay {
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-level-wave.png?fileID=2800000&guid=fe21a13cc70a9e9448ebd3e2cd195a33&type=3#SimUI-needs-level-wave');
    width: 29px;
    height: 110%;
    display: flex;
    -unity-background-image-tint-color: rgb(99, 99, 99);
    align-items: center;
    justify-content: center;
    -unity-background-scale-mode: stretch-to-fill;
    overflow: hidden;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    top: -75%;
    position: absolute;
    left: 2px;
    -unity-slice-top: 0;
    -unity-slice-left: 0;
    -unity-slice-right: 0;
    -unity-slice-bottom: 0;
    flex-basis: auto;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
}

.need-border {
    flex-basis: 32px;
    height: 100%;
    flex-shrink: 0;
    border-left-width: 1.75px;
    border-right-width: 1.75px;
    border-top-width: 1.75px;
    border-bottom-width: 1.75px;
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
    border-bottom-color: rgb(255, 255, 255);
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    -unity-background-scale-mode: scale-and-crop;
    justify-content: center;
    align-items: center;
    width: 32px;
    margin-left: 1.5px;
    margin-right: 1.5px;
    position: absolute;
    top: 0;
    display: flex;
}

.need-icon {
    width: 55%;
    height: 55%;
    display: flex;
    -unity-background-image-tint-color: rgba(255, 255, 255, 255);
}

This is the next level up the needs container

#need-item-energy .need-border {
    border-left-color: rgb(142, 230, 255);
    border-right-color: rgb(142, 230, 255);
    border-top-color: rgb(142, 230, 255);
    border-bottom-color: rgb(142, 230, 255);
}

#need-item-energy .need-item-background {
    -unity-background-image-tint-color: rgb(4, 243, 255);
}

#need-item-hunger .need-icon {
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-icon-hunger.png?fileID=2800000&guid=2bdf9c23d11042945821815cee7c0d12&type=3#SimUI-needs-icon-hunger');
}

#need-item-hunger .need-border {
    border-left-color: rgb(250, 185, 126);
    border-right-color: rgb(250, 185, 126);
    border-top-color: rgb(250, 185, 126);
    border-bottom-color: rgb(250, 185, 126);
}

#need-item-hunger .need-item-background {
    -unity-background-image-tint-color: rgb(255, 160, 76);
}

#need-item-mental .need-icon {
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-icon-mental.png?fileID=2800000&guid=ee74a121492dd75458246e5c2805551a&type=3#SimUI-needs-icon-mental');
}

#need-item-mental .need-border {
    border-left-color: rgb(228, 228, 228);
    border-right-color: rgb(228, 228, 228);
    border-top-color: rgb(228, 228, 228);
    border-bottom-color: rgb(228, 228, 228);
}

#need-item-mental .need-item-background {
    -unity-background-image-tint-color: rgb(229, 229, 229);
}

#need-item-social .need-icon {
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-icon-social.png?fileID=2800000&guid=3527346b94870d347b40ed92f3dc0a49&type=3#SimUI-needs-icon-social');
}

#need-item-social .need-border {
    border-left-color: rgb(138, 236, 186);
    border-right-color: rgb(138, 236, 186);
    border-top-color: rgb(138, 236, 186);
    border-bottom-color: rgb(138, 236, 186);
}

#need-item-social .need-item-background {
    -unity-background-image-tint-color: rgb(71, 238, 161);
}

#need-item-fun .need-icon {
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-icon-fun.png?fileID=2800000&guid=5596b07a10e2da34e832db80f9c33d7b&type=3#SimUI-needs-icon-fun');
}

#need-item-fun .need-border {
    border-left-color: rgb(228, 214, 132);
    border-right-color: rgb(228, 214, 132);
    border-top-color: rgb(228, 214, 132);
    border-bottom-color: rgb(228, 214, 132);
}

#need-item-fun .need-item-background {
    -unity-background-image-tint-color: rgb(255, 229, 0);
}

#need-item-energy .need-icon {
    background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-needs-icon-energy.png?fileID=2800000&guid=76617e98810b65c49aa7e78d23554766&type=3#SimUI-needs-icon-energy');
}

This is the XML for the base need item

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <Style src="project://database/Assets/Metaterra/Visuals/UIToolkit/need-items.uss?fileID=7433441132597879392&guid=2dc200358b728a14db0edb38f2efc156&type=3#need-items" />
    <ui:VisualElement name="need-item" class="need-item">
        <ui:VisualElement name="need-item-background" class="need-item-background" />
        <ui:VisualElement name="need-level-overlay" class="need-level-overlay" />
        <ui:VisualElement name="need-border" class="need-border" />
        <ui:VisualElement name="need-icon" class="need-icon" />
    </ui:VisualElement>
</ui:UXML>

This is UXML for the next level up

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:Template name="NeedItem" src="project://database/Assets/Metaterra/Visuals/UIToolkit/NeedItem.uxml?fileID=9197481963319205126&guid=a1bd9ce27ef34664981080706e2d5b0b&type=3#NeedItem" />
    <Style src="project://database/Assets/Metaterra/Visuals/UIToolkit/need-items-base-commodities.uss?fileID=7433441132597879392&guid=3bd40dd15fd9e314fa5bea260c66db44&type=3#need-items-base-commodities" />
    <ui:VisualElement name="needs-container" style="flex-basis: 32px; top: -42px; flex-shrink: 0; position: absolute; left: 156px; justify-content: flex-start; align-items: center; width: 184px; flex-direction: row; flex-grow: 0; bottom: 93px;">
        <ui:Instance template="NeedItem" name="need-item-energy" style="display: flex;">
            <AttributeOverrides element-name="NeedBackground" focusable="true" />
        </ui:Instance>
        <ui:Instance template="NeedItem" name="need-item-hunger" style="display: flex;">
            <AttributeOverrides element-name="NeedBackground" focusable="true" />
        </ui:Instance>
        <ui:Instance template="NeedItem" name="need-item-mental" style="display: flex;">
            <AttributeOverrides element-name="NeedBackground" focusable="true" />
        </ui:Instance>
        <ui:Instance template="NeedItem" name="need-item-social" style="display: flex;">
            <AttributeOverrides element-name="NeedBackground" focusable="true" />
        </ui:Instance>
        <ui:Instance template="NeedItem" name="need-item-fun" style="display: flex;">
            <AttributeOverrides element-name="NeedBackground" focusable="true" />
        </ui:Instance>
    </ui:VisualElement>
</ui:UXML>

The UXML for the parent of that

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:Template name="NeedsContainer" src="project://database/Assets/Metaterra/Visuals/UIToolkit/NeedsContainer.uxml?fileID=9197481963319205126&guid=494c2d05d8e192e48a4d3524d0d8e94f&type=3#NeedsContainer" />
    <Style src="project://database/Assets/Metaterra/Visuals/UIToolkit/StyleSheet_Simulation_Base.uss?fileID=7433441132597879392&guid=801b064fbd62a8f4280dd91695e51cad&type=3#StyleSheet_Simulation_Base" />
    <ui:VisualElement name="CharacterBase" style="width: 431px; height: 100%; align-items: flex-end; flex-shrink: 1;">
        <ui:VisualElement name="CharacterBackground" style="width: 100%; height: 100%; background-image: url('project://database/Assets/Metaterra/Sprites/UI/ActionBarHead.png?fileID=21300000&guid=715ccd7aade250f47b199c5af08d6f86&type=3#ActionBarHead'); -unity-background-scale-mode: stretch-to-fill; -unity-slice-left: 0; -unity-slice-top: 0; -unity-slice-right: 0; transform-origin: left bottom; justify-content: center; align-items: flex-end; border-left-width: 0; margin-left: 0;">
            <ui:VisualElement name="DecorativeCenter" style="width: 397px; height: 83px; background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-ActionBar-FieldBackground-A.png?fileID=2800000&guid=c60b4d72aef38c342aecfe1c766ce463&type=3#SimUI-ActionBar-FieldBackground-A'); -unity-background-scale-mode: stretch-to-fill; align-items: center; margin-right: 25px; flex-direction: row; margin-top: 10px;">
                <ui:VisualElement name="SelectedCharacterDetails" style="align-items: flex-start; width: 100%; height: 100%; -unity-text-align: upper-left; justify-content: flex-start; margin-top: 0; flex-grow: 0; flex-shrink: 0.89; padding-top: 3px; padding-left: 25px;">
                    <ui:VisualElement name="CharacterPortraitTrait" style="flex-basis: 0; top: -160px; height: 150px; flex-shrink: 0; position: absolute; left: 0; background-image: url('project://database/Assets/Plugins/SimpleFileBrowser/Sprites/SimpleFileBrowserSlicedBackground2.psd?fileID=2800000&guid=6ff773ea42aedd04c8bb96a1fe9a73b8&type=3#SimpleFileBrowserSlicedBackground2'); -unity-slice-left: 0; -unity-slice-top: 0; -unity-slice-right: 0; -unity-slice-bottom: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 0; border-left-color: rgb(248, 51, 51); border-right-color: rgb(248, 51, 51); border-top-color: rgb(248, 51, 51); border-bottom-color: rgb(248, 51, 51); border-top-left-radius: 100px; border-bottom-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; -unity-background-scale-mode: stretch-to-fill; justify-content: center; align-items: center; width: 150px;">
                        <ui:Button display-tooltip-when-elided="true" name="CharacterPortrait" style="left: 0; top: 0; flex-basis: auto; width: 90%; height: 90%; border-top-left-radius: 100px; border-bottom-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; background-image: resource('NFTIcons/noun_1'); overflow: visible;" />
                    </ui:VisualElement>
                    <ui:Label text="Maximilianus" display-tooltip-when-elided="true" name="CharacterName" style="background-image: none; font-size: 24px; -unity-text-align: middle-left; border-bottom-width: 0; padding-bottom: 0; margin-top: 7px; -unity-font-style: bold; margin-left: 0; margin-right: 2px; margin-bottom: 1px; padding-left: 0; padding-right: 0; padding-top: 0; white-space: nowrap; color: rgb(255, 255, 255); align-items: flex-start;" />
                    <ui:Label text="is going to class" display-tooltip-when-elided="true" name="CharacterCurrentAction" style="background-image: url('project://database/Assets/Plugins/SimpleFileBrowser/Sprites/SimpleFileBrowserSlicedBackground2.psd?fileID=2800000&guid=6ff773ea42aedd04c8bb96a1fe9a73b8&type=3#SimpleFileBrowserSlicedBackground2'); font-size: 14px; max-width: 100%; white-space: normal; color: rgb(166, 166, 87); -unity-background-image-tint-color: rgb(55, 56, 47); -unity-slice-left: 0; -unity-slice-top: 0; -unity-slice-right: 0; -unity-slice-bottom: 0; -unity-background-scale-mode: stretch-to-fill; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -unity-text-align: middle-center; height: auto; padding-left: 5px; padding-right: 5px; justify-content: center; align-items: center; margin-left: 0; margin-right: 15px; padding-top: 2px; padding-bottom: 2px;" />
                    <ui:Instance template="NeedsContainer" name="NeedsContainer" style="position: absolute; top: 16px; opacity: 1;" />
                </ui:VisualElement>
                <ui:VisualElement name="Divider" style="position: relative; width: 7px; height: 55%; justify-content: flex-start; background-color: rgb(78, 80, 87);" />
                <ui:VisualElement name="CurrencyDetails" style="align-items: center; width: 100%; height: 100%; justify-content: center;">
                    <ui:Label text="$20.289" display-tooltip-when-elided="true" name="CharacterCurrency" style="font-size: 27px; -unity-font-style: bold; margin-left: -28px; padding-right: 0; padding-left: 0; color: rgb(255, 255, 255);" />
                </ui:VisualElement>
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

Then the final parent

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:Template name="HeroFooter" src="project://database/Assets/Metaterra/Visuals/UIToolkit/HeroFooter.uxml?fileID=9197481963319205126&guid=28aa7e5b75d47d741aea6cf281a465bb&type=3#HeroFooter" />
    <Style src="project://database/Assets/Metaterra/Visuals/UIToolkit/StyleSheet_Simulation_Base.uss?fileID=7433441132597879392&guid=801b064fbd62a8f4280dd91695e51cad&type=3#StyleSheet_Simulation_Base" />
    <ui:VisualElement name="Screen" picking-mode="Ignore" class="footer">
        <ui:VisualElement name="Bottom" picking-mode="Ignore" style="width: 100%; height: 100%; justify-content: flex-end; background-color: rgba(0, 0, 0, 0);">
            <ui:VisualElement name="Core" picking-mode="Ignore" style="height: 132px; flex-direction: row; justify-content: space-between; display: flex; opacity: 1; visibility: visible; background-color: rgba(0, 0, 0, 0);">
                <ui:Instance template="HeroFooter" name="HeroFooter" />
                <ui:VisualElement name="TimeBase" style="width: 501px; height: 100%;">
                    <ui:VisualElement name="TimeBackground" style="width: 100%; height: 100%; background-image: url('project://database/Assets/Metaterra/Sprites/UI/ActionBarTail.png?fileID=21300000&guid=f332d680042c8fb40aa2a88ccaace9a1&type=3#ActionBarTail'); -unity-background-scale-mode: stretch-to-fill; -unity-slice-left: 0; -unity-slice-top: 0; -unity-slice-right: 0; transform-origin: right; justify-content: center; align-items: flex-start; border-left-width: 0; margin-left: 0;">
                        <ui:VisualElement name="DecorativeCenter" style="width: 451px; height: 83px; background-image: url('project://database/Assets/Metaterra/Sprites/UI/SimUI-ActionBar-FieldBackground-C.png?fileID=2800000&guid=ebb125ee0e377c8428b52ad309b65f74&type=3#SimUI-ActionBar-FieldBackground-C'); -unity-background-scale-mode: stretch-to-fill; align-items: center; margin-right: 0; margin-left: 44px; margin-top: 12px; -unity-slice-left: 0; flex-direction: row; justify-content: center; padding-top: 5px;">
                            <ui:VisualElement name="SimulationTimeDetails" style="align-items: flex-start; width: 100%; height: 100%; -unity-text-align: upper-left; justify-content: flex-start; margin-top: 0; flex-grow: 0; flex-shrink: 0.75; padding-left: 48px; font-size: 12px;">
                                <ui:Label text="Wednesday, 09:50 PM" display-tooltip-when-elided="true" name="DayTime" style="background-image: none; font-size: 20px; -unity-text-align: upper-center; border-bottom-width: 0; padding-bottom: 0; margin-top: 7px; -unity-font-style: bold; margin-bottom: 2px; margin-right: 2px; margin-left: 1px; padding-right: 0; padding-left: 0; color: rgb(255, 255, 255);" />
                                <ui:Label text="September 31, 2022" display-tooltip-when-elided="true" name="Date" style="background-image: url('project://database/Assets/Plugins/SimpleFileBrowser/Sprites/SimpleFileBrowserSlicedBackground2.psd?fileID=2800000&guid=6ff773ea42aedd04c8bb96a1fe9a73b8&type=3#SimpleFileBrowserSlicedBackground2'); font-size: 13px; max-width: 90%; white-space: normal; color: rgb(54, 154, 22); -unity-background-image-tint-color: rgb(37, 54, 36); -unity-slice-left: 0; -unity-slice-top: 0; -unity-slice-right: 0; -unity-slice-bottom: 0; -unity-background-scale-mode: stretch-to-fill; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; -unity-text-align: middle-center; height: auto; padding-left: 5px; padding-right: 5px; border-left-width: 0; padding-top: 2px; padding-bottom: 2px; margin-left: 2px;" />
                            </ui:VisualElement>
                            <ui:VisualElement name="Divider" style="position: relative; width: 7px; height: 55%; justify-content: flex-start; background-color: rgb(78, 80, 87);" />
                            <ui:VisualElement name="PauseButtonArea" style="align-items: center; width: 56%; height: 100%; justify-content: center;">
                                <ui:Label display-tooltip-when-elided="true" style="font-size: 30px; -unity-font-style: bold;" />
                            </ui:VisualElement>
                        </ui:VisualElement>
                    </ui:VisualElement>
                </ui:VisualElement>
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

The only other item is the base style sheet I have on which is ```
.footer {
width: 100%;
height: 100%;
justify-content: flex-start;
opacity: 1;
}


literally just that. 

I have tried a bunch of different things to debug this. 
I've tried pulling everything out of any templates and having it just work through the root. I've tried not using as many overrides, tried merging all the USS into one, tried playing with settings, I'm just stumped and it seems it's not working the way it's supposed to? How could it be different from the preview window in playmode?

Is there anything I'm missing? I've tried scrubbing through the documentation and tutorials but nothings making this clear to me how to resolve this problem.
2

Turns out the issue couldn’t be reproduced in a clean project, but I was able to narrow it down in our project to having both: overflow: hidden with any kind of border radius set on the same element. Not sure why exactly this was the case, but we have an outline shader that uses Graphics.Blit() and while there were a typos in the above I fixed, as soon as I enabled “Clear Depthtexture” in the PanelSettings.asset, it worked.

1 Like
3

We did discover another issue with this, more details relating to the overflow hidden can be found here UI Builder Overflow Hidden Unity 2021.3.9f1