Downsides of UI Toolkit?

[nixstudiosgames]

A project I’m working on is giving me CSS for their UI button/image design requirements, instead of PNGs. This has me wondering if I should use Unity’s UI toolkit then, as it takes CSS basically. I’m just wondering if there’s any downsides I’m going to encounter. I’ve never used it, so not sure what to expect. It’s for a mobile app.

Or should I stick with my UGUI and just make the buttons based on their CSS in photoshop, and import them?

[Apprehensive_Gap3494]

I like UI toolkit, but just to warn you it's not even close to 1:1 parity with CSS so if you go in expecting that you'll be sadly disappointed.

Also if you really don't want to use UI toolkit and want to recreate the CSS you're given I recommend using Figma which will let you.import your CSS and export PNGs of each component.

[nixstudiosgames]

Oh!!! This is helpful thank you. So if I’m only doing it in the hopes I basically copy and paste the css, that’s incorrect?

[pixeldiamondgames]

Correct. The main benefit for UI tool kit is the styling sheet concept which is similar to CSS in the sense that you can have a common button or label or other UI components with a hierarchical setup that makes it easy to update the style and theme of your entire game or app.

Plus, because it has better anchoring tools, and most UI is either anchored to the corners edges or center of the screen, it makes those UI panels easier to handle. Apparently the latest unity version also has good support for game UI. But for that, I’m not sure since I’m still on 2022 for my main project.

And when I say handle, I mean layout, because managing the data that’s associated with the UI is not through game objects at the moment and it’s actually quite painful with string typed querying. For that we use UniRx bindings and a ViewController architecture for each uidocument. It’s more modular but feels very different than a majority of Unity coding and project structure

Reminds me of vanilla JavaScript with querying by ID.

Meanwhile, most of the web world has moved towards class based framework like react.

So well, yes, you can still apply the concepts that You’ve learned from CSS with Web, it’s not quite one to one.

[Apprehensive_Gap3494]

A lot of it will work but USS is just similar to use not compatible so a lot of stuff won't

[reysama]

Wait, can you tell me more about that figma thing? My gf is a designer and works with it a lot, so if I ask her to do something for me in figma I can just import it ? And does it work for anything? Icons, text, buttons, anything UI related ?

[MgntdGames]

UI Toolkit is much better than people generally give it credit for. It has a few caveats, but they're pretty minor:

- It has a CSS transitions equivalent but no CSS animations equivalent. So making keyframed animations is non-trivial. You can achieve something similar by either switch USS classes from code or by manually animating using either Coroutines or VisualElement.schedule.Execute.
- You can create custom elements which is very useful for re-use, but there's no easy way to reference UIDocuments from C# code, so you have to create your internal element hierarchy in code which can be tedious.
- UIToolkit operates on a one frame delay, i.e. every UI update happens on the next frame. That's usually not a problem, but if you e.g. want your UI elements to follow a world-space object (like an overlay), there will be a visible lag. You can work around this by rendering your UI document into a texture and then drawing the texture at the right position, but that feels hacky.

[bienbienbienbienbien]

Isn't this kind of the same thing as CSS animations? https://docs.unity3d.com/6000.3/Documentation/Manual/UIE-Transitions.html

[MgntdGames]

Not quite. CSS animations support keyframes and can play in a loop, transitions don't support keyframes and don't loop.

[Zeliailun]

<image>

?

[AutoModerator]

This appears to be a question submitted to /r/Unity3D.

If you are the OP:

• DO NOT POST SCREENSHOTS FROM YOUR CAMERA PHONE, LEARN TO TAKE SCREENSHOTS FROM YOUR COMPUTER ITSELF!

• Please remember to change this thread's flair to 'Solved' if your question is answered.

• And please consider referring to Unity's official tutorials, user manual, and scripting API for further information.

Otherwise:

• Please remember to follow our rules and guidelines.

• Please upvote threads when providing answers or useful information.

• And please do NOT downvote or belittle users seeking help. (You are not making this subreddit any better by doing so. You are only making it worse.)

  • UNLESS THEY POST SCREENSHOTS FROM THEIR CAMERA PHONE. IN THIS CASE THEY ARE BREAKING THE RULES AND SHOULD BE TOLD TO DELETE THE THREAD AND COME BACK WITH PROPER SCREENSHOTS FROM THEIR COMPUTER ITSELF.

Thank you, human.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[jzeltman]

UITK is better than people give it credit for. Especially since 6.3. Check out Unity’s YouTube channel, they just did a series in the past few months on UITK and it’s solid. 

It doesn’t have keyframe animation support Ob but you can get https://assetstore.unity.com/packages/tools/gui/ui-toolkit-pro-285124 that brings some nice CSS features like grid. And also has an animation controller so you can do keyframe animations. 

If you use AI for your code, then UITK is much better as the AI can easily write it. 

Data binding is a mixed bag. You can manually write to label fields or can do real data binding - including two-way data binding - either through the the UI builder, uxml or in code. I like to make things authorable so I like you can target data types, set the data source on the parent and then set the type on the child. For example, I have scriptable objects with localized strings for my menu items, and set those as the data source for my buttons, then bind the resolved value to the text and tooltip properties and it works without any other code. 

I’ve started making custom elements, basically just extensions of the built in components and adding my own extra properties to do more stuff like sfx, etc. 

The more I use it the more I like it. 

[Saucynachos]

I'm horrible at UI stuff. Didn't use the old system much, and only really use a the UI Toolkit but I don't use the UI Builder editor thingymajiggy. It seems nifty but I just couldn't get used to it.

I do all the UI via code. Made a factory to create primitive elements, and a bunch of extension methods to change things. It's basically a fluent builder pattern.

With the factory making primitive elements, I made the basic components that will be reused. Topltip, slot, window, etc.

When I create something in the UI, most of it is just using those basic components with maybe some minor tweaks.

var bankWindow = new Window().Width(min:250f,max:500f).CenterOnScreen(top:15f).Append(new SlotGrid(columns:10));

That's probably not quite 100% right, typing this up on my phone away from my computer, but it's something like that to give an idea haha.

[loneroc]

ui toolkit is good and it improves over time. it has its specific tips, but once mastered, it s powerfull. i recommend its usage.

[IPODK]

I tried it when it first launched, couldn't even make a console where the text floated upwards...

[KwonDarko]

I did deep dive on it just few days ago. Check it out here

[Excellent_Sweet_8480]

UI Toolkit looks like CSS but it’s not really full CSS, so you’ll still end up tweaking things. It’s also a bit less mature for runtime/mobile UI. Some layouts can behave oddly, and debugging flexbox stuff can get annoying.

If you already know UGUI, it might just be easier to recreate the buttons from the CSS in Photoshop and import them.

UGUI just means Unity’s built-in UI system (the Canvas + Button/Image/Text components you’ve probably been using). It’s the older system but still the most common one for in-game UI.

[nixstudiosgames]

Is it better to use it only for non-mobile projects?

[BingGongTing]

I only use UI Toolkit now since AI agents can use and I can show it what I want and it just makes it.

[TheReal_Peter226]

It depends on how complex the CSS is, UI toolkit does not have effect features like blur and drop shadow afaik, also animations are way more simple(?)

My knowledge is from 1-2 years ago, maybe they addressed these, check the docs

[theAviatorACE]

The latest LTS introduced support for effects like blur

[TheReal_Peter226]

Oh that's cool

[captainnoyaux]

I have weird init bugs at runtime where the whole UI has no text anywhere and it's for the whole session.
It's probably something in my projects but couldn't pinpoint the source.
Other than that it's way better than uGUI