Search Unity

Bug USS custom properties (variables)

Discussion in 'UI Toolkit' started by Maverick, Sep 10, 2020.

  1. Maverick

    Maverick

    Joined:
    Dec 18, 2009
    Posts:
    240
    Hello,

    Trying to use USS custom properties (variables). But, it doesn't seem to work and it's in a way not compatible with UI Builder.

    In the builder there is no way to add custom properties and they do not work. Below is a screenshot for example from documentation.
    upload_2020-9-10_14-45-7.png
    upload_2020-9-10_14-47-5.png

    Is it a known issue, or I'm doing something wrong?
     
    Maverick, Sep 10, 2020
    #1

  2. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    700
    Hello, the UI Builder doesn't really support variables yet but can you show us the definition for variable --color1 so we can check it's properly defined and should have been successfully resolved, or if there could be an issue there? Thanks!
     
    JuliaP_Unity, Sep 10, 2020
    #2

  3. Maverick

    Maverick

    Joined:
    Dec 18, 2009
    Posts:
    240
    Here is the USS.
    Code (CSharp):
    1.  
    2. :root {
    3.     --color1: rgb(255, 0, 0);
    4. }
    5.  
    6. .label1 {
    7.     color: var(--color1);
    8. }
    9.  
    and generated UXML:
    Code (CSharp):
    1.  
    2. <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">
    3.     <ui:Label text="Label" display-tooltip-when-elided="True" class="label1">
    4.         <Style src="MainUSS.uss" />
    5.     </ui:Label>
    6.     <ui:Label text="Label" display-tooltip-when-elided="True">
    7.         <Style src="MainUSS.uss" />
    8.     </ui:Label>
    9. </ui:UXML>
    Using unity 2020.1.4 and latest packages.
     
    Maverick, Sep 10, 2020
    #3

  4. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    700
    Thanks for the info!

    Unfortunately for this to work on Runtime the syntax has to be slightly different for now, so you should declare your --color1 property on the .unity-ui-document__root selector instead of :root for it to work.

    Can you try that and let us know how it goes? :)
     
    JuliaP_Unity, Sep 10, 2020
    #4

  5. Maverick

    Maverick

    Joined:
    Dec 18, 2009
    Posts:
    240
    Hi.

    Unfortunately, that did not help. Below is the changed USS:

    Code (CSharp):
    1.  
    2. .unity-ui-document__root {
    3.     --color1: rgb(255, 0, 0);
    4. }
    5.  
    6. .label1 {
    7.     color: var(--color1);
    8. }
    9.  
    upload_2020-9-11_16-18-34.png

    upload_2020-9-11_16-18-56.png
     
    Maverick, Sep 11, 2020
    #5

  6. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    700
    Can you run the sample under Window > UI Toolkit > Examples > General > Root Selector (Runtime)? It's doing the same thing and is working here for us, from your screenshots/contents shared here looks like it's the same but can't be sure.
     
    JuliaP_Unity, Sep 11, 2020
    #6

  7. Maverick

    Maverick

    Joined:
    Dec 18, 2009
    Posts:
    240
    The example does work.
    upload_2020-9-11_16-53-50.png

    In your example you link everything via code, but if I change your example so USS is specified in the UXML I get same result.
    upload_2020-9-11_16-59-1.png

    together with a NRE:
    Code (CSharp):
    1. NullReferenceException: Object reference not set to an instance of an object
    2. Unity.UI.Builder.StyleSheetExtensions.FixRuleReferences (UnityEngine.UIElements.StyleSheet styleSheet) (at Library/PackageCache/com.unity.ui.builder@1.0.0-preview.6/Editor/Utilities/StyleSheetExtensions/StyleSheetExtensions.cs:45)
    3. Unity.UI.Builder.BuilderDocumentOpenUSS.FixRuleReferences () (at Library/PackageCache/com.unity.ui.builder@1.0.0-preview.6/Editor/Builder/Document/BuilderDocumentOpenUSS.cs:69)
    4. Unity.UI.Builder.BuilderDocumentOpenUXML.OnAfterDeserialize () (at Library/PackageCache/com.unity.ui.builder@1.0.0-preview.6/Editor/Builder/Document/BuilderDocumentOpenUXML.cs:662)
    5. Unity.UI.Builder.BuilderDocument.OnAfterDeserialize () (at Library/PackageCache/com.unity.ui.builder@1.0.0-preview.6/Editor/Builder/Document/BuilderDocument.cs:392)
    6.  
     
    Maverick, Sep 11, 2020
    #7

  8. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    700
    The error on the UI Builder should not be interfering with what you see on the Game View.
    I'm thinking this can be an issue with the selector not being applied to the actual root, can you try setting the style sheet to the rootVisualElement of the UIDocument to see if that changes anything?
    Also you may want to set the style sheet directly under the UXML tag, before any of the VisualElement declarations - that makes the example work using only UXML for example.
     
    Last edited: Sep 11, 2020
    JuliaP_Unity, Sep 11, 2020
    #8

  9. Maverick

    Maverick

    Joined:
    Dec 18, 2009
    Posts:
    240
    Adding stylesheet via code makes it work.

    Code (CSharp):
    1.  
    2. var uiDocument = GetComponent<UIDocument>();
    3. uiDocument.rootVisualElement.styleSheets.Add(styleAsset);
    4.  
    upload_2020-9-11_17-17-51.png
     
    Maverick, Sep 11, 2020
    #9

  10. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    700
    As I suspected, also setting the style sheet directly under the UXML tag, before any of the VisualElement declarations - that makes the example work using only UXML for example. I edited my previous message but probably after you saw it already.
     
    JuliaP_Unity, Sep 11, 2020
    #10