Inline USS not being applied after build

Unity Version: 2020.1.0b14.4034 Personal
UI Toolkit Version: “com.unity.ui”: “1.0.0-preview.3”
UI Builder Version: “com.unity.ui.builder”: “1.0.0-preview.1”

Basically I’ve built multiple UIs (each one having its own UXML and USS file). One for dialogue, one for debug, one for pause menu, and one for battle. Each one is on a GameObject that is activated/deactivated as necessary, and each of those GameObjects are child to an empty GameObject. The Debug UI is the only one that is always enabled:
6089520--661317--upload_2020-7-14_11-55-59.png

Sometimes the pause UI was in the correct position after build, others not, it seems pretty much random. Debug UI never was. In the course of writing this, I realized that it seems like the Inline USS is not being applied at all… Currently it is all inline. After extracting all of my USS on both UIs to classes (which of course is ideal anyway), they both work fine after build. Still, seems like a bug. The problem was happening with the following panel settings and uxml (uss files not provided as they were empty).

PanelSettings.Asset (which each UI is using):

%YAML 1.1
%TAG !u! tag:unity3d.com,2011:
--- !u!114 &11400000
MonoBehaviour:
  m_ObjectHideFlags: 0
  m_CorrespondingSourceObject: {fileID: 0}
  m_PrefabInstance: {fileID: 0}
  m_PrefabAsset: {fileID: 0}
  m_GameObject: {fileID: 0}
  m_Enabled: 1
  m_EditorHideFlags: 0
  m_Script: {fileID: 11500000, guid: 782f629a2df6243629ea8fe2873666a4, type: 3}
  m_Name: PanelSettings
  m_EditorClassIdentifier:
  themeUss: {fileID: 11400000, guid: f567955c754d54a108d615cb51ccbf2f, type: 2}
  m_TargetTexture: {fileID: 0}
  m_ScaleMode: 0
  m_Scale: 1
  m_ReferenceDpi: 96
  m_FallbackDpi: 96
  m_ReferenceResolution: {x: 1200, y: 800}
  m_ScreenMatchMode: 0
  m_Match: 0
  m_SortingOrder: 0
  m_AtlasBlitShader: {fileID: 4800000, guid: 662b00f569c02f84bbc426d4c41ceb5e, type: 3}
  m_RuntimeShader: {fileID: 4800000, guid: 1e5f18a346ed454418f93aa7eaf55791, type: 3}
  m_RuntimeWorldShader: {fileID: 4800000, guid: 7082954141e3ccc43bc3b217cf12e2e0,
    type: 3}

pause.uxml:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1;
flex-shrink: 0;">
        <Style src="pause.uss" />
        <ui:VisualElement style="width: 300px;
margin-left: auto;
margin-right: auto;
flex-grow: 0;
flex-shrink: 1;
margin-top: auto;
margin-bottom: auto;">
            <ui:Button text="Resume" name="btn-resume" />
            <ui:Button text="Options" />
            <ui:Button text="Quit" name="btn-quit" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

debug.uxml:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="width: 150px;
margin-left: auto;
flex-grow: 0;
flex-shrink: 1;
margin-top: 5px;
margin-bottom: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
border-left-color: rgb(0, 0, 0);
border-right-color: rgb(0, 0, 0);
border-top-color: rgb(0, 0, 0);
border-bottom-color: rgb(0, 0, 0);
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
margin-right: 5px;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
opacity: 1;">
        <Style src="debug.uss" />
        <ui:Label text="FPS" style="font-size: 20px;" />
        <ui:VisualElement style="flex-direction: row;">
            <ui:Label text="Current: " />
            <ui:Label name="current-fps-label" />
        </ui:VisualElement>
        <ui:VisualElement style="flex-direction: row;">
            <ui:Label text="Average: " />
            <ui:Label name="avg-fps-label" />
        </ui:VisualElement>
        <ui:VisualElement style="flex-direction: row;">
            <ui:Label text="Min: " />
            <ui:Label name="min-fps-label" />
        </ui:VisualElement>
        <ui:VisualElement style="flex-direction: row;">
            <ui:Label text="Max: " />
            <ui:Label name="max-fps-label" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

Side note: Is there any concept of Z-index for layouts, so that I can insure my pause UI always renders above the debug UI, and therefore the buttons always work?




Thanks for reporting the issue. We’ll look into it.

As for…

If each UI is in a different UIDocument, the ordering will be a bit undefined because we had trouble with performance when trying to constantly sort the UIDocuments based on GameObject order. This will workflow will be improved in future versions.

That said, you could use a single UIDocument for all your screens. That way, the ordering of screens is fully defined within UI Toolkit. See this post for more info on this approach:
https://discussions.unity.com/t/800019/2

1 Like

Follow-up around the bug. It seems we have some issues with spaces inside UXML inline-styles attributes causing issues only in built Players. We were able to reproduce the issue and are now tracking this bug. Hopefully, it will be fixed soon. For now, please use USS for your styling.

4 Likes

Interesting. I should note, I didn’t edit any of it manually, all through the builder.

Anyway, thanks! This new system is really great so far.

Any update on this? Inline styles doesnt work at all for me in build.

Fix is still in progress.

1 Like