Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Resolved UI Builder renders very different from Game view

Discussion in 'UI Toolkit' started by gregcodercw, Oct 27, 2021.

  1. gregcodercw

    gregcodercw

    Joined:
    Dec 5, 2017
    Posts:
    15
    I'm having an issue where the UI Builder is rendering UI Toolkit differently than the Game view. I could use guidance as to how to resolve the issue.

    I created a new HDRP template project in 2021.2.0f1 to ensure my project wasn't the problem. I create a new UXMLTemplate. I add it to the new UIDocument in the scene. I add some simple elements to the UXMLTemplate and compare the rendering.

    UI Builder:
    upload_2021-10-27_15-47-52.png

    Game View:
    upload_2021-10-27_15-48-7.png

    The text color is different, label spacing is off, slider control has a different style.

    Some other settings (all defaults)
    upload_2021-10-27_15-49-43.png

    upload_2021-10-27_15-50-9.png

    I'm experiencing the same thing in my actual project. Am I missing a configuration? Thank you in advance.
     
  2. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    471
    Hey!

    There is a couple of things that might do it:
    1. In the UI Builder, it seems like you are using the "Active Editor Theme" (this can be found in the Viewport pane on the left of the Preview button) while the panel settings is using the "UnityDefaultRuntimeTheme". The editor and runtime themes are quite different. Switching the UI Builder to use the default runtime theme should get you closer in terms of rendering.
    2. The UI Builder is not currently aware of the panel settings at all. This means that some of the settings, like the scale mode-related settings may cause a difference between what you are seeing in the UI Builder and in the GameView. This is something we need to improve.
    3. The UI Builder canvas size is different than the Game View size. Depending on your use-case, you could ask the UI Builder to have the same size as the Game View (see image below for the settings to use).
    Hope this helps!
     

    Attached Files:

    uglypixels and Kaiymu_ like this.
  3. gregcodercw

    gregcodercw

    Joined:
    Dec 5, 2017
    Posts:
    15
    Ah! Thank you! #1 fixed it. This makes sense. There is theme for the editor and a theme for the game runtime and that UI Toolkit can make UI for both targets and also supports any custom theme. Got it.

    This being the case, it doesn't seem like an ideal new user experience. Is there going to be a lot of developers trying to use the same UXML in the editor and reuse it in their game? I'm wondering if in the UXML markup there could be some markup added that specifies an array of targets by the player. Could be targeting game versus editor or perhaps an array of targeted themes. If the user tries rendering the UI outside the target the editor sends a warning to console with an decent explanation and a warning it may not look right? When a user opens the UI Builder and no target is set, it prompts the user to set targets.

    ---

    For anyone else with this issue. Here's the UI dropdown:

    upload_2021-10-28_11-2-25.png
     
    mischa2k and JB1012 like this.
  4. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    471
    The workflow is definitely lacking. The UI Builder was originally done for the editor use case (runtime support didn't exist at the time) and there should be an overhaul around that to make the UI Builder more aware of the intent (i.e. creating a custom inspector is a lot different than creating a runtime screen).

    That being said, you can absolutely use the same UXML for editor and runtime (I do so in some personal projects). As long as you are aware of the theme, you can make it work. For an inspector like feature in a game, I would clearly not want it to look as it does in the editor.

    We will improve on this in the future.
     
    gregcodercw likes this.
  5. mischa2k

    mischa2k

    Joined:
    Sep 4, 2015
    Posts:
    4,347
    Agreed.
    Majority of users probably create runtime UIs, and it's not obvious why runtime it looks different from UI builder.

    Just figured this out now after adjusting the wrong theme all day :)

    Could you elaborate on how to configure it to simply always use the same theme?
    I don't really need a different theme for runtime, unless I am misunderstanding something about the implementation :)
     
  6. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    471
    I can't :)

    You won't be able to use the same theme everywhere because in the editor use-case, the "current" editor theme will always be applied and the editor and runtime themes do not necessarily have the same selectors defined, which would be a requirement for the themes to be truly interchangeable. At the moment, we are not shipping the editor themes as something that can be used in a build.

    In most cases, user-defined selectors should win against Unity-defined selectors, so with a lot of work, you should be able to create style sheets that would make the editor and the default runtime theme look the same way. Then you could add these style sheets to the uxml files directly and you would get more consistent results everywhere. The reason I say that I can't tell you how to simply do this is that you don't have access to the editor or default runtime theme files, so there would be a lot of trials and errors to get there, as we define a lot of selectors.

    We tend to try and have the same layout across the editor and runtime themes when we can, so that it is consistent, but the colors can definitely differ between runtime and editor (and even within the editor). What I personally do is use multiple style sheets in the following fashion:
    • One or more style sheets to dictate the layout I'm looking for (margins, paddings, flex, etc.) which I can reuse everywhere (and need to test against every theme I intend to use). When I need these in the editor, I usually add them directly to the uxml files; when I need these in the runtime, I usually import them in my own runtime theme.
    • Multiple style sheets to dictate the colors and font-related properties (one for the editor dark, one for the editor light, one for each runtime theme I intend to use). These, I usually add through code.
    We have a lot of work ahead of us with regards to the themes.
     
    mischa2k likes this.
  7. thejasper10

    thejasper10

    Joined:
    Mar 9, 2023
    Posts:
    7
    Hi everyone,
    i was having the same problem but none of the answers fixed it.
    I am really going crazy, i see a text in ui builder that change 1sec after i start the game view.
    It should be a simple text.
    Any suggestion?

    Thank you very much
    (i have Unity Default Runtime Theme and the MatchGameView option)

    upload_2023-3-17_14-35-49.png
     
  8. thejasper10

    thejasper10

    Joined:
    Mar 9, 2023
    Posts:
    7
    For others who had problems like this, i solved using px instead of % in the width assigned to the elements.
     
  9. Folstrym

    Folstrym

    Joined:
    Apr 11, 2016
    Posts:
    5
    For anyone that might run into this problem, I fixed it by changing the "Scale Mode" of my Panel settings to "Constant Pixel Size". First picture is with default value "Constant Physical Size", second picture is with "Constant Pixel Size". It fixes the overflow of my text. Cheers and good luck with UIToolkit ! ConstantPhysicalSize.png ConstantPixelSize.png
     
    drawingghost likes this.