UI Toolkit - Integration in Workflow

[civic spindle]

I have a really hard time to see how to integrate UI Toolkit in our current workflow. (I have not extensively delve into yet because it still lacks some functionality that are a most, but it is getting there)

Most of the UI work is done by our artist by changing texture, creating animation, using Widget or utilizing prefab. Creating the layout does not seem that much different, but the stylizing feels wildly different and I feel that it is out of reach for non technical people. (The whole css looking stuff might be scary for them)

I am curious to see what is the expected workflow from a non technical artist. It would be really nice to have some sort of resources that I could share with my team so they understand more about what is UI Toolkit and how to utilize it from their different role.

[plush berry]

Hello! Here are some videos that should help give an idea on how devs and artists could work together on the same UI. The idea is that devs create the data and custom controls and artists stay entirely within the UI Builder without having to touch code. Devs can customize how custom control inspectors look and feel in the UI Builder's inspector, and artists can easily set bindings, change layout and styles, and add transition animations without code. They don't need to know CSS as a whole, though it does help and the up side is that there's wealth of resources on CSS out there.

One difficulty you will have is the layout systems: flexbox. Again, there's a wealth of resources online for flexbox, but it is complicated to understand. The UI Builder should at least make it easy for experimentation. You don't need full deep understanding of flexbox in order to use it.

Happy to dive into specifics if you wish.

Resources:

• Unity 6, up-to-date overview, from the community, that I think is pretty good: https://www.youtube.com/watch?v=6DcwHPxCE54&ab_channel=GameDevGuide
• A bit dated but the general overview still applies: https://www.youtube.com/watch?v=t4tfgI1XvGs
• flexbox help: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and https://flexboxfroggy.com/

[civic spindle]

How would you go about modifying toggle layout ? I cannot move element that are inside it the same way we can with the old Widget.
How would you modify the style of the element ? Everything seem to disabled.

[robust heath]

When an element creates child elements like this they are considered temporary and can not be modified via UXML. You can still address them with styles or access them with scripts. For this I would examine the classes that are on the elements and target them with style selectors.

[civic spindle]

Which would require a somehow known about technical details ?

In standard UI, we can simply do the following which was an integral part of our workflow.

[robust heath]

These temporary elements are not serialized, theres also no guarantee they will always exist. You can view the available classes in the docs https://docs.unity3d.com/Manual/UIE-uxml-element-Toggle.html

You can also use the UI Debugger to examine an element and see what classes it has if you want to target it.

Changing the parent order may not always work, it depends on how the element is configured.

For this example you can change the Flex Direction of the element to row-reverse

[civic spindle]

I see, so we cannot easily make "Widget Custom" like we used to do. That is kinda of a bummer.

[robust heath]

What do you mean Widget Custom?

Like UGUI?

[civic spindle]

How usual work flow is:
Create a Widget (Label, Button, Toggle, Background, etc.)
Change texture, font, add background and potentially reorder element or add new one.
Then prefab it to be reused.

[robust heath]

Yes that workflow is not the same here.

Create a Widget

[civic spindle]

How would you modify the toggle ?

[robust heath]

Change texture, font, styles using Style selectors

Create a Template to reuse it

https://docs.unity3d.com/6000.1/Documentation/Manual/UIE-about-uss.html

Templates are like prefabs

[civic spindle]

Yes but I cannot edit the toggle.

[robust heath]

You then drag the template into another UXML document and you can override the attributes of named elements. A bit like a prefab override.

[civic spindle]

So, I need to create one from scratch.

[robust heath]

You just want to edit its visuals or its logic?

[civic spindle]

Its visual

[robust heath]

For visuals you use the style sheets

You can also make limited changes directly on the element

If you want to change its child elements then you need to use selectors in the style sheet

[civic spindle]

I understand, but it seem more complicated than what we were used to do. And, personaly I have no issue doing this but trying to educate artist in doing so is what is hard.

If I want to switch to UI Toolkit, I need to show them that it we gain from it.

And, as stupid it might be, having to learn this will be hard to make them shallow this.

[robust heath]

Yes there is a learning curve. Style sheets let you make large changes across the whole UI without having to update each prefab. You can use themes to have multiple different styles.

[civic spindle]

So, that is why I was wondering if they were resources on this and what is the extent of the technical knowledge that is required.