Elements look different in UI Builder

Hello UI Toolkit experts,

I really like working in the UI Builder ... until I want to see my UI in the game. It always looks way different. Even though I load the same theme and stylesheets. I can't figure out, what I am doing wrong, maybe you can help me.

Also, all my labels and texts keep disappearing (they reappear when I set the overflow to 'visible' though ...)

Here's a screenshot of the builder and the in game debugger:



I created a new theme file and imported the default unity theme as a base. I'm working with the beta release from last week.

BR,

Andrej

 

I am seeing similar kinds of issues. The player and runtime look very different for me from the UI Builder. Sizing, in particular, is different for fonts most often, which leads to layout differences. Elements like Toggle and Foldout layout strangely. I have ended up using my Game window to see updates to changes. It seems to update even when not in Play Mode, at least when using UI Document.

I am assuming this will eventually be resolved, unless you and I are missing some setting that I can't find. I think it is good to report this and hopefully, it is coming before too long.

 

Hi @antoine-unity, thank you for the reply.

I have had the UI builder set to "Unity Default Runtime Theme" and the Panel setting to the same theme. So that doesn't appear to be the issue.

My setting for Scale Mode was default of "Constant Physical Size" which has 96 DPI as the default. I switched to "Constant Pixel Size" with a scale of 1. I see not change whatsoever in the Game windows. I believe my display is probably already 96 DPI, so I would expect one.

It is still very different between the Game window/player and the UI Builder.

Here is an example.

UI Builder:


Game Window :


The general layout is OK most of the time, but specific element styles fall apart and sizes vary. For now, I keep the Game window open to a display with the UI Document (even when not in play mode it refreshes) so I can refer back to it after changes for the final product (not including runtime elements of course). The UI builder is still very useful for many look-ups and changes, just not the final view.

These may be known things or maybe there is something else to fix it you can find, but if not and your team wants, I will put together a repro project with just the basics and send or post it.

Thank you,

Justin

 

I also have a guess as to what may be part of this. The UI elements that need to have behavior running to exhibit correct display run in the Game window and player, but are not run by the UI Builder, but this is just a guess.

 

Yes, I highlighted all resources the styles are drawn from with arrows in my screenshot. Those are the exact same files (TSS and USS). With my example, this is most likely not the error.

By the way, what do you mean with 'sometimes'? What is the reason for the builder to use resources apart from the chosen TSS and USS files?

Does that mean, that the builder and game view have different physical sizes? That does not make sense for me. Hm.

 

Antoine will probably reply with a better answer, but let me share what I am seeing in case it helps. I don't think the issue has to do with your TSS.

You are using a Button in your example, in my example, you can see the layout of the buttons is very different in the Builder than in the Game view in my screenshots. So I have had the same issue with the label text not displaying the same in Game view / player as in the builder. Because of this, I have to adjust all my sizes and review them in the Game view to see the actual results. I believe this is because elements like the buttons, sliders, foldouts, etc. require their programmatic behaviors to have their final layout and this does not seem to be running in the Builder. So I think this is just a deficit of the Builder for now.

Doing the visual overflow can work to hack around the problem, but I just prefer to adjust my sizes, margins, etc. until it lays out appropriately. But this requires jumping back to your Game view (I suggest having a UI doc rendering to a display so you can just have it open and you do have not to hit play to see the results for a static doc).

As to the scaling, unless you change the default scaling in your panel presets, it should pretty much be the same between the Builder and Game view (see my previous response on scaling), it is just the specific elements I mentioned that are varying from what I can see.

 

Thank you very much, JG-Denver, for your extensive response. The explanation that different calculations are performed when showing the UI in the Builder versus those that are made in the game view explains the behavior of buttons and text fields.

I followed your suggestion and added a UI to my base scene and observe it in the game view while doing my changes in the builder. Instead of 'hacking' by setting the overflow to visible, I also tried to tweak sizes and spacings on the button, but I had no success.

Instead, every time, as soon as I add a radius to the border, the button is overlayed by a white rounded rectangle, like so:


I can't even change that white rectangle's color.
It is curious that I can show bits of the underlying pink UI element I have in the Builder by lowering the button's opacity:



The button seems to consist of multiple visual elements, but they're not accessible. Thus I can't make rounded buttons work.
It looks like I'll have to go with the hack after all.

BR,

Andrej

PS: Sorry that it took me so long to respond, I have not hat so much time for my game and Unity lately :/

 

Wierd, am not sure why your button is turning white. There might be some other USS override hitting it somehow, although I would assume an inline style should override it regardless.

You might check to see what styles are being applied to your button under Matching Selectors towards the top of the inspector in UI builder.

Then you might try styling in your USS instead of the inline styling which is what I have done successfully. You need to do this anyway if you want to style for hover and active states. So this for example will style every button the view:
Button {
background-color: //whatever
color: //text color here
}
Button:hover {
background-color: //whatever
color: //text color here
}
Button:active {
background-color: //whatever
color: //text color here
}

I am using rounded buttons myself and they working fine, so I don't believe the radius style is your problem. I am also in 2021.x, not everything works right in 2020.x.

Are you using any code to set styles? That is the only other thing I can think of.

Finally, Preview 17 just came out for the UI Toolkit, so you might want want to update your packages, it has some fixes.

 

Thank you for your response. I tried starting blank and created those rounded buttons. It worked.
When comparing all files, I found that the newly created panel settings file had 'Clear Depth Stencil' checked. Activating this in my old file finally did the trick for me.



I never manually unchecked that option - it was initialized like that when first starting to work with UI Toolkit.

BR,

Andrej

PS: I'm just always using the current version that comes with the beta releases of Unity.

 

I am seeing VERY different relative spacing in my in-game UI even with default unity runtime chosen:

 

Most of the positioning/sizing related problems caused because of TemplateContainer element (UI Builder has no TemplateContainer; but the runtime has). I usually solve this problem in USS.

Code (CSharp):

1. #MyPanelSettings > TemplateContainer {
2.     height: 100%;
3.     top: 0;
4.     bottom: 0;
5.     left: 0;
6.     right: 0;
7.     position: absolute;
8.     flex-grow: 1;
9. }

 

Thank you!