Help me want to use UI Toolkit

Good day,

At first glance, UI Toolkit seems incredible, like the perfect tool for UI development. However, I find designing with it extremely complicated.

My frustration with UI Toolkit stems from how time-consuming it is to make the design look ‘right.’ While it offers borders, outlines, effects, and more, the different approach makes it difficult to customize components like the input field.

InputFields are crucial for my user interfaces, and I’ve spent days trying to make them look normal. The number of selectors needed to modify an InputField is overwhelming, and there’s no clear way to identify which selectors to use. It’s not as simple as dragging one selector onto the InputField; I need so many.

I tried creating a custom Textbox, but it feels like too much work for something that should be straightforward. I wonder why the Unity team uses a mock web-based UI instead of implementing real web-based UI. It seems unnecessarily unique when there are more practical, time-tested methods for managing workflow.

For instance, ASP.NET Blazor beautifully combines codebase with web design. A similar approach for Unity would be fantastic.

What are you trying to do specifically with a TextBox, for example? From my experience it has been mostly straight forward to style controls. Usually it’s been a case of looking at their structure in the builder, and writing the right UUS style selector the the appropriate element. That might involve using a child/descendant selector, or if the element already has a style, using a selector with the same name.

I’m just trying to do a basic input field design, but it seems so complicated to have to drag multiple selectors to every input field I make.

I’m trying to make it so that the place holder resides inside the input field, and then appears above it when selected.
I also have found it really frustrating to change the appearance, as the input field, the place holder and the background image are all disconnected from each other. It’s not like I can just click on the child object and adjust it’s appearance, I have to instead search for the right selector, and try to make that work. If I could just click on the child object, that may be less frustrating, but it’s grayed out and locked??

You should make a custom control that either subclasses the visual element, or encapsulates it. Then you can write USS styles that target your custom visual element, and also other that target children of it.

If you have a controls used across most of your UI, make a Theme Style Sheet (TSS) file that uses the appropriate syle sheets, assign it to your Panel Settings asset, and use that on your UI document component. Then the styles will be in effect across every UI Document that uses those panel settings.

I am seldom, if ever, manually dragging styles onto visual elements. I let the style selectors do that work for me. Most of my UI has no inline styling as well.

Visual elements that get generated by their parent elements can’t be edited. A lot of built in controls are making children via C# code, and as these aren’t serialised as part of the UXML they can’t be edited. Though you can still write USS selectors that affect them, and the UXML attributes you see on some controls can adjust them. You can do this with your own custom controls as well.

This sounds like less of an issue of styles and more needing to write a custom control that extends/encapsulates text box to do this specific behaviour.

1 Like

Workflow advice: use the attributes in the inspector to modify how the element should look like and behave. This allows you to see the changes in realtime, it even works in preview mode.

Once you are satisfied with the results that’s when you can apply the changes to USS. Ideally you have the inline designed element and a second element that you are applying the styles to in order to check for any differences. It helps to “Unset” those inline styles that you have successfully moved to USS, and perhaps even before doing so because you may find that a changed inline style isn’t actually contributing to the end result or you set it back to its default value (it still remains “changed” ie printed in bold in that case).

I struggled with this - because the original unity UI system you could say, hey i want this button pinned to the center, or, I want my settings button topright, or i want this “window” (small collection of things) ive made top left…

you cant do that in the new UI and it hurts your braincells. because to make a chat box bottom left you need like a group to say format to bottom, then a box to say format to left, then put your text box in it…

then should you want to add things to your text box, you can just go Hey link this text box and go mybox.text = “some message” no, you need to find the root, and then ask the root to find it and… a bit of you says, i dont want to do that just to show a few debug messages during gameplay… i want to just plonk the text where i said and set it.

Then as others have indicated, well if you want x you should make a custom… i just want a health bar, it was so easy with the UI slider… nope, now now you gotta faff…

I also (likely due to my clumsyness and not being confident in what i was doing and so maybe selecting wrong things) found it easy to reaaaaaaaaly freak out the UI builder to the point i even in the end removed all traces from my project of my new UI i was trying to make to replace the “old ui” one i had… and … it didnt go away!! I bust it… Im sure it was deep in some setting somewhere, but, i couldnt get it to unbreak… Im more than capable of making plenty of bugs for me to have to be fixing, without fighting the tool.

I did find some reasonable tutorials on unity, and found following those and their explainations fairly strong, but of course, it didnt answer everything… they never do… but, I feel I could do a good few things, but, I confess, I still prefer working with the old… just for simplicity and ive never noticed my UI being the cause of my issues… so, its a problem i guess i never needed to fix.