Search Unity

Inline USS not being applied after build

Discussion in 'UI Toolkit' started by krazykhris875, Jul 14, 2020.

  1. krazykhris875

    krazykhris875

    Joined:
    Jul 17, 2013
    Posts:
    9
    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:
    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):
    Code (CSharp):
    1. %YAML 1.1
    2. %TAG !u! tag:unity3d.com,2011:
    3. --- !u!114 &11400000
    4. MonoBehaviour:
    5.   m_ObjectHideFlags: 0
    6.   m_CorrespondingSourceObject: {fileID: 0}
    7.   m_PrefabInstance: {fileID: 0}
    8.   m_PrefabAsset: {fileID: 0}
    9.   m_GameObject: {fileID: 0}
    10.   m_Enabled: 1
    11.   m_EditorHideFlags: 0
    12.   m_Script: {fileID: 11500000, guid: 782f629a2df6243629ea8fe2873666a4, type: 3}
    13.   m_Name: PanelSettings
    14.   m_EditorClassIdentifier:
    15.   themeUss: {fileID: 11400000, guid: f567955c754d54a108d615cb51ccbf2f, type: 2}
    16.   m_TargetTexture: {fileID: 0}
    17.   m_ScaleMode: 0
    18.   m_Scale: 1
    19.   m_ReferenceDpi: 96
    20.   m_FallbackDpi: 96
    21.   m_ReferenceResolution: {x: 1200, y: 800}
    22.   m_ScreenMatchMode: 0
    23.   m_Match: 0
    24.   m_SortingOrder: 0
    25.   m_AtlasBlitShader: {fileID: 4800000, guid: 662b00f569c02f84bbc426d4c41ceb5e, type: 3}
    26.   m_RuntimeShader: {fileID: 4800000, guid: 1e5f18a346ed454418f93aa7eaf55791, type: 3}
    27.   m_RuntimeWorldShader: {fileID: 4800000, guid: 7082954141e3ccc43bc3b217cf12e2e0,
    28.     type: 3}
    pause.uxml:
    Code (CSharp):
    1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    2.     <ui:VisualElement style="flex-grow: 1;
    3. flex-shrink: 0;">
    4.         <Style src="pause.uss" />
    5.         <ui:VisualElement style="width: 300px;
    6. margin-left: auto;
    7. margin-right: auto;
    8. flex-grow: 0;
    9. flex-shrink: 1;
    10. margin-top: auto;
    11. margin-bottom: auto;">
    12.             <ui:Button text="Resume" name="btn-resume" />
    13.             <ui:Button text="Options" />
    14.             <ui:Button text="Quit" name="btn-quit" />
    15.         </ui:VisualElement>
    16.     </ui:VisualElement>
    17. </ui:UXML>
    debug.uxml:

    Code (CSharp):
    1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    2.     <ui:VisualElement style="width: 150px;
    3. margin-left: auto;
    4. flex-grow: 0;
    5. flex-shrink: 1;
    6. margin-top: 5px;
    7. margin-bottom: auto;
    8. padding-left: 5px;
    9. padding-right: 5px;
    10. padding-top: 5px;
    11. padding-bottom: 5px;
    12. border-left-color: rgb(0, 0, 0);
    13. border-right-color: rgb(0, 0, 0);
    14. border-top-color: rgb(0, 0, 0);
    15. border-bottom-color: rgb(0, 0, 0);
    16. border-left-width: 1px;
    17. border-right-width: 1px;
    18. border-top-width: 1px;
    19. border-bottom-width: 1px;
    20. margin-right: 5px;
    21. flex-direction: column;
    22. position: absolute;
    23. top: 0;
    24. right: 0;
    25. opacity: 1;">
    26.         <Style src="debug.uss" />
    27.         <ui:Label text="FPS" style="font-size: 20px;" />
    28.         <ui:VisualElement style="flex-direction: row;">
    29.             <ui:Label text="Current: " />
    30.             <ui:Label name="current-fps-label" />
    31.         </ui:VisualElement>
    32.         <ui:VisualElement style="flex-direction: row;">
    33.             <ui:Label text="Average: " />
    34.             <ui:Label name="avg-fps-label" />
    35.         </ui:VisualElement>
    36.         <ui:VisualElement style="flex-direction: row;">
    37.             <ui:Label text="Min: " />
    38.             <ui:Label name="min-fps-label" />
    39.         </ui:VisualElement>
    40.         <ui:VisualElement style="flex-direction: row;">
    41.             <ui:Label text="Max: " />
    42.             <ui:Label name="max-fps-label" />
    43.         </ui:VisualElement>
    44.     </ui:VisualElement>
    45. </ui:UXML>
    46.  
    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?
     

    Attached Files:

    krazykhris875, Jul 14, 2020
    #1

  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    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://forum.unity.com/threads/multiple-panel-architecture.930948/#post-6090921
     
    uDamian, Jul 15, 2020
    #2
    krazykhris875 likes this.

  3. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    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.
     
    uDamian, Jul 15, 2020
    #3
    reeseschultz, manuelgoellnitz, krazykhris875 and 1 other person like this.

  4. krazykhris875

    krazykhris875

    Joined:
    Jul 17, 2013
    Posts:
    9
    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.
     
    krazykhris875, Jul 16, 2020
    #4

  5. Onigiri

    Onigiri

    Joined:
    Aug 10, 2014
    Posts:
    482
    Any update on this? Inline styles doesnt work at all for me in build.
     
    Onigiri, Aug 12, 2020
    #5

  6. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    Fix is still in progress.
     
    uDamian, Aug 12, 2020
    #6
    Onigiri likes this.