🧰┃ui-toolkit

[cursive quail]

What are you trying to do? Navigation move keys (usually arrow keys or controller direction) can change the focus for player UI (not editor). As it says the Next/Previous keys are not bound or supported but they also should not be needed due to the direction support.

You should not need to add any code to do this unless you want to customize what element is selected. By default it will find the next eleement in the direction you pressed. There is a known bug with sliders where the direction key will change the slider value instead of focus but we have a fix for that on the way.

You do need to make sure that you have focusable enabled for the elements you want to switch to. Its worth mentioning that direction navigation is not enabled in the UI Builder, you need to test it in the gameview.

[sullen bay]

So it turns out that the two focusable elements were something like this:

<container>
  <button0 /> -- focused
  <button1 />
</container>

But I hadn't realized that for some reason the container itself was focusable.

In this situation the arrow keys would appear to remove focus from the buttons (despite tab/shift+tab working fine). Once I disable focusable from the container the situation was resolved. I had assumed that left/right would use tabIndex order to iterate, but I guess they do something else.

[cursive quail]

They use the position. Tab index is just for tab and shift tab

[sullen bay]

In short: I had wrongly assumed the navigation keys didn't work.

In any case, they are all working now!

And the container is longer focusable.

Was just a frustrating time

It would be great to be able to see what is focused in the editor too!

Thanks for the reply @cursive quail

[still lantern]

Anyone know of a way to measure text without using a TextElement? I am using the MeshGenerationContext DrawText method to draw the actual text.

Looks like TextGenerator has a static GetPreferredValues, but it is internal, and the two classes it takes as parameters are also internal. So it is going to be a lot of reflection... 😢

[still lantern]

I spent like an hour tracking down the classes/properties/methods needed and started writing wrappers and stuff. Then decided to just use GUIStyle instead since that works close enough hahaha 😅

[ocean trail]

Anyone here done a Page Curl effect with UI Toolkit?
I was wondering if that's possible, since AFAIK you can't really run shaders on UI Toolkit UI.
How about custom matrices?

Some of it is possible using some fancy masks.
Though I still need to distort the page as it's being turned/curled.

[umbral sonnet]

Hello, I want to create level select via UI toolkit. My goal is to create design, where each set has own scroll view, which contains "path" from level buttons. Change set should be performed via right/left swipe. Is it possible to do it? Or it will have bad performance? Thank you for help and ideas! 😉

[errant harbor]

Anyone have a solution?

[merry schooner]

I can't seem to set borderColor thorugh code, unless I use a preset Color.

Example:
item.style.borderBottomColor = new Color(152, 104, 54, 255); //Doesn't work

item.style.borderBottomColor = Color.Black;
//Works

Anyone know why?

[rough scarab]

https://unity.huh.how/color/color-range

[merry schooner]

tysm this worked. 👍

[merry mountain]

sorry since forums is down i cant find much info over this so here it goes

https://docs.unity3d.com/Manual/UIE-UQuery.html
I am trying to use Query to find elements of my custom type that extends VisualElement.
But the query always returns 0 elements found? i thought it traverses hierarchy normally and not just direct children

but no matter what i try it will never traverse the hierarchy properly to evaluate it

just to make sure i am understanding this right

.Query<MyClass>().ToList();```
This should have had returned all objects that match this type right?

(debugged root, the objects exist normally, and the uquery object returns 0 matchers as well)

i guess ill just use foreach on a query state (didnt work)

[merry mountain]

Figured it out ffs

my file was constantly kept as read only due to some weird bug and it wasnt recompiling all this time

moving on

[undone laurel]

I have a script that loads a VisualTreeAsset which has a button on it.
I create (n) instances of that VisualTreeAsset and add them to the same root (declared elsewhere in the script).
Every time I instantiate the VisualTreeAsset, I grab the button component from it and assign a function to that button'sclicked event.
How do I determine which one of those buttons is pressed?

To help understand my thought process, here is something else I've done:

The VisualTreeAsset also has a dropdownfield. I use RegisterValueChangedCallback to do something similar with the dropdown. The callback this time passes a variable, which I can use to get the dropdownfield that caused the event to trigger. I already cannot do this with a button, afaik.

Once I have access to the dropdownfield, I can access its parent (repeat a few times) until I reach the TemplateContainer, which I can then pass to the root I mentioned before, doing int index = root.IndexOf(templateContainer). I use that specific index to differentiate that dropdown from other dropdowns.

I'm not sure if what I've done with the dropdownfield is a weird workaround, and I am missing something obvious that I can do instead for both the dropdownfield and the button?

[undone laurel]

looks like I need to use the button's "clickable" property, so that I can use button.clickable.clickedWithEventInfo instead of button.clicked

[tidal crater]

hey guys how can i solve MeshGenerationContext.Allocate problems 65535 vertx max and when i put some large text into text field it crashes is there anything to solve that, text overflow type, recycle etc i use multiline text

[merry mountain]

Okay im struggling a lot with this one.
I have a scroll view with several flex elements.

When i try to get their world bound position and then use that to translate a different (absolute positioned) object that i add to the scroll view content container its always mispositioned

correction, its only mispositioned if the scroll view is scrolled.

using the UI Debugger i can see the world bound position after translation is wrong, any suggestions how to tackle this?

[main tiger]

I'm new to unity and just wanted to know how do I get the old NORMAL text? all I can find is Text Mesh Pro

[uneven oyster]

#📲┃ui-ux is the right channel for that, but it's under Legacy

[merry mountain]

Made this post for anyone that wants to know how to use UxmlAssetAttributeDescription on unity 2022.3 and so on (instead of 2023.1f+ where its officially supported)

https://discussions.unity.com/t/explaining-access-to-unitys-uxmlassetattributedescription-of-ui-toolkit-for-version-2022-3f-lts/1489271

just leaving it here if someone tries to search for it in hopes it helps him

[umbral sonnet]

Hello, I am using ScrollView, for my vertical level select. My goal is automatically scroll it to last unfinnished level. I tried use internal function ScrollTo, which is working well, but desired visualelement is displayed on bottom part of the screen, is there any possibility how to show desired Visualelement on center of the screen? Thank you! 🙂

[merry mountain]

So if im understanding this right you want to scroll to the last level, but the last level should be potrayed on the center of the screen instead right?

A way i would "cheat this" is to add a padding visual element thats hidden and using that to scroll to instead

that way you offset your last object to always be slightly above instead

Or a different alternative solution is this:

Add an absolute position element that scales to 100% of the screen in your content container.
Add a child element called "target to scroll" thats styled so its offset from the bottom up to the point of center, or try to make a flex style that ensures that sort of alignment then scroll to that instead

[umbral sonnet]

Thank you very much for your help! 🙂 I am going to look and try your ideas 🙂

[queen cedar]

Im having issues with buttons not working, I seem to have found the issue which is that the button im trying to click is on a UI document object that has a lower sort order than another in the scene

Many of my UI documents have visual elements, which while empty/transparant, cover the entire screen

Which kinda "cover" the other documents button

Is there a way around this? Can i make a visual element not block interactions?

Or is having multiple UI documents for different "tabs" and ui's not a good idea?

[merry mountain]

The important part is that you have to ensure 2 things
A) Ensure display settings is consistent across ui documents so their sorting order matters
B) Make transparent elements to not have a PickingMode (its on the top right of ui builder) so pointers will ignore them

either that or ensure buttons are always the topmost ordered ui documents

if you show me your hierarchies or give me more details i can be more thorough

[queen cedar]

Changing the picking mode to ingore worked, thanks!

This is my hierarchy btw

What do you mean by keeping display settings consistent?

This thing?

[merry mountain]

Yeap

if you have different panel settings for each ui document

then their picking order is "per panel settings"

[queen cedar]

gotcha, tysm!

[sullen bay]

Anyone know how to get an SVG to work via USS?

Assets/_Game/Scripts/UiToolkit/Styles/HudHealth.uss (line 59): warning: Unsupported type GameObject for asset at path 'Assets/_Game/SVGs/GameUI/Syringe.svg' ; only the following types are supported: Texture2D, RenderTexture, Sprite, VectorImage
Suggestion: verify the import settings of this asset.
UnityEditor.AssetImporters.AssetImporterEditor:ApplyRevertGUI ()
Unity.VectorGraphics.Editor.SVGImporterEditor:OnInspectorGUI () (at ./Library/PackageCache/com.unity.vectorgraphics@8433adceaf/Editor/SVGImporterEditor.cs:386)
UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

.HudHealth-stabilizer-icon {
  width: 66px;
  height: 66px;

  background-image: url("/Assets/_Game/SVGs/GameUI/Syringe.svg");
}

If I provide the asset directly via code it works fine, but referencing the asset via USS fails.

[rough scarab]

If it's a subasset you may be able to do "/Assets/_Game/SVGs/GameUI/Syringe.svg#SyringeVectorImage" for example

if I can't get something to work in USS I usually do it via the UI builder, and then have a play with the results there

[sullen bay]

Oh awesome, that's what I was looking for.

Thanks

[dark blade]

to use url or resource you use ' ' not " "

like this ```css
background-image: url('/Assets/_Game/SVGs/GameUI/Syringe.svg');

[umbral sonnet]

Hello, I asked a question here yesterday about my problem with Scrollview and the ScrollTo feature. My goal has changed a little bit. I am creating a Level select that is scrollable vertically only, and the level sets are placed from bottom to top (so first level in scrollview hierarchy is last available level set in game).

My goal is to automatically scroll the scrollview to the last unlocked level => I found that this can be done via ScrollTo function. My problem is that the ScrollTo function will find scroll value which is placing desired visualelement to bottom of screen. The problem arises, because I have menu back button placed over level select on bottom part of screen. So I need to add some offset to found scroll position, to remove overlapping between desired visualelement and back button . On attached image you can see described problem, my goal is to have scrollto visualelement above red line.

I've already tried:

• suggested approach to create empty visualelement of desired height as child of button, but I am worried, that these objects will have some performance impacts, because from my unity experiences with old ui many objects in scrollview caused spikes (it is possible, that in one scrollview will have maybe 200 level buttons...)
• I tried use the scrollOffset property, but I couldn't get the required behavior

Is it possible to create this via some easy and elegant solution? Thank you! 🙂

[sullen bay]

Doesn't matter what style of quote you use

Or at least there was nothing wrong with what I had

[merry mountain]

Kubinna why would the first approach have performance impact?

An alternative would be to set the scrolls max value to be less than than the desired (the bottom), but i dont recall if scroll view has that as a public property, so you can try that out

[merry mountain]

to emphasize also on this, if you have 200 levels, why would an offset of just 1 element have performance impact basically thats what im asking

[tidal crater]

_valueInputField.RemoveFromHierarchy();```
```_valueInputField.Blur();
schedule.Execute(() => _valueInputField.RemoveFromHierarchy()).StartingIn(100);```

hey all , if i blur Text Field without delay it cannot release focus , i don't re-create _valueInputField again i just re add to its container and still has focus whats the reason for that ?

[zinc moon]

is there a way to multiply or divide a variable in uss?

[tidal crater]

I think you can access the variable you want through style and do your operations

[dark blade]

not possible afaik, instead you can do it via code

[sullen bay]

how are you supposed to make one of these?

If i duplicate it it gets all messed up

nvm found it

[zinc moon]

textmeshpro create font.

font asset creator

[sullen bay]

Was looking for the sprite asset, it's the text menu. Tmp has been kind of duplicated in 2022, it's not used directly anymore

Only for ugui

[zinc moon]

oh interesting. then why do the small fonts still suck? they gotta add subpixel rendering to text

[sullen bay]

You mean for tmp?

[zinc moon]

i mean text in ui toolkit still doesnt do subpixel rendering so its still illegible

[sullen bay]

Oh I haven't had a problem with it

Looks clean to me

[zinc moon]

textmeshpro was a major reason for that w old system

[sullen bay]

It's the exact same system though

They just duplicated the code

[zinc moon]

oh, then yeah

that sucks. tmpro is a bad system for ui text

[sullen bay]

It's just the same assets but in a different namespace

Agreed lol

If you've ever read the code

It's scary

It's just like one 5000 line function

[zinc moon]

i hate more or less all unity code written after 2015 tbh

[sullen bay]

But the concept is decent

[sullen bay]

Upm is good

And uitoolkit is good

[zinc moon]

the rendering tech is good for in world text or effects but again, no subpixel rendering means its trash for small text in ui

[sullen bay]

Right idea

[zinc moon]

i mean the code for it

i had to do a custom grid and i unfortionately decided to use their grid shit

[sullen bay]

The code is okay, just as usual very strange decisions

[zinc moon]

what a nightmare

[sullen bay]

A mix of over and under engineering

[zinc moon]

nah, all of it is massively overengineered garbage imo

[sullen bay]

Standard unity stuff

Yeah I agree

I mean for uitoolkit specifically

[zinc moon]

i mean, the design is good cuz css is good

but the lack of functionality is frustrating

like i need to do gradients

[sullen bay]

Mm. Well it is what it is

[zinc moon]

and the fact that uitoolkit renders in linear color space is a nightmare

because nothing looks the way it looks in unity because everything else in the universe uses srgb

that nobody caught that during dev makes me super irritated

[sullen bay]

I'm going to bed, but if it makes you feel better I agree that most of the stuff unity puts out is complicated garbage

[zinc moon]

i mean if you go through their code..its like "whhhhhhy"

night mate

[merry schooner]

Trying to create a tooltip-like visual element when hovering over another element.

I want to set the position of this tooltip equal to the mouse position, but this doesn't work correctly when the window size/editor window size changes.

    Vector2 pos = Mouse.current.position.ReadValue();
    RuntimePanelUtils.ScreenToPanel(activeToolTip.panel, pos);
    activeToolTip.style.left = pos.x;
    activeToolTip.style.top = Screen.height - pos.y;

Any ideas as to what I am doing wrong?

If it helps, this is my Panel Settings:

Changing the scale mode from Screen size fixes the issue, but I need the mode to be screen size.

[tidal crater]

hey , how i can capture editor windows size change event for my floating dockable toolbar i want to constrait it in editor size

[queen flint]

Hey, I have an custom editor that has a propertyfield that is set to serialized class that has its own propertydrawer. This serialized class has 4 bools which I use to determine the visibility of other elements. When I toggle the bools in the editor, its not reflected right away in the editor. If I deselect and reselect the editor the changes are reflected. I tried setting the Editor Dirty via EditorUtility.SetDirty(property.serializedObject.targetObject) after setting the displaystyle of the elements based on the bool value that was checked.

This was done in CreatePropertyGUI after everything else. What can I do to force a refresh of the Editor when a propertyfield value changes

[tidal crater]

is there any way to catch selection change in my custom editor with graph view

[dark blade]

use RegisterValueChangedCallback on that bool field, and setenabled of target element there

[merry mountain]

Okay i need help if someone is able

im trying to automate a process with a custom control / VE and i want to add Visual elements my user can do straight up whatever he wants with in the hierarchy.
But if i just add them they are greyed out so the user cant work with them (like changing their position and whatnot)

can i somehow achieve this?

[drowsy gate]

i'm going insane

i stretch one element in the builder

both that and another stretch

sometimes i can move relative positioned things

sometimes i can't

if i position it relatively, it's completely fucked in the ui builder

if i position it absolutely, it's completely fucked in the game

why can't i move a relative object that makes no sense

ok so

i CAN move it by changing the px values

but for some ungodly reason i can't just use my mouse

this is

so annoying

and makes no sense to me

and now

the ui works (jankily) but

the camera is more zoomed in?!!?!?

why are those things interacting with eachother?!!

ok it seems the relative resolution was not the same ratio as the original gamewindo

that's just my guess though

oh my god i'm going to rip my hair out THE ENTIRE THING BREAKS WHEN YOU MAKE THE WINDOW BIGGER

WHY DOES IT DO THAT

[rough scarab]

It would be much easier to help if you used complete sentences

You are likely not using the layout system properly

[drowsy gate]

it's 1am and i'm losing my patience and mind, apologies

[rough scarab]

The Panel Settings' Scale Mode functions similarly to the CanvasScaler component from UGUI

which defines how things are scaled when the screen resolution changes

but if you're not positioning things robustly to begin with you're going to have issues regardless

[drowsy gate]

i'm following (this)[https://learn.unity.com/tutorial/create-a-health-display-with-ui-toolkit?uv=2022.3&courseId=64774201edbc2a1638d25d18&projectId=64774283edbc2a143ab0e3b0#64d4de92edbc2a6a224380a7] unity tutorial. i'm on step 7.

in the tutorial, they absolutely position everything and it's all fine. in my game, the absolutely positioned elements are out of positioned and the wrong size when the screen size changes, despite the fact that i've selected "scale with screen size".

[drowsy gate]

so i need to position things relatively?

[rough scarab]

You don't need to do anything. I think you should post some screenshots so it's clearer what your setup is and perhaps where the issues lie

[drowsy gate]

This is how it looks in the UI preview

This is how it looks in game, with the default game window size

This is how it looks in game with the game window taking up the entire unity workspace

i have "scale with screen size" enabled
either i'm missing something or the computer is lying to me because it hates me and wants me to suffer

[rough scarab]

can you screenshot the UI hierarchy?

[rough scarab]

annoyingly it's hard to tell what could be going on. That looks correct. I'll mock it up on my end and see

[drowsy gate]

to my amateur eye it looks like it's not scaling with the screen size

but i clicked "scale with screen size"

i have to sleep now before my eyes fall out of my head, i will continue beating the ui tool into submission until it obeys me

[rough scarab]

If the root (HealthBarBackground) is absolute positioned and has width and height set, I can't seem to get anything to break

[drowsy gate]

i think i set it to 100%-100% but ill double check

wait

no it cant be 100-100

because it only takes up a smaller part of the bigger sprite

[rough scarab]

it's probably the %-based size that's ruining things

[drowsy gate]

i see

should i use pixels?

[rough scarab]

that would probably fix the issue, yeah

scale with screen size should already be handing the % part of things

I would only use %s on child elements if you needed to

or things that don't have images that need to relate to their children, like panels

[drowsy gate]

arent they both children of healthbarbackground though?

[rough scarab]

HealthBarBackground having %-based size would be the problem. I can's see what your setup is though, but that would not work

[drowsy gate]

ahh ok

any reason why not or is it juat a

"don't think about it just do it this way"

[rough scarab]

it means it won't respond to the Scale Mode

because it'll be fixed to %s no matter what

If the aspect ratio changes then that changes the size of the element in relation to the aspect ratio

which may change the way the children are positioned relative to the image applied to it

[drowsy gate]

but wont % scale with window?

is it not a literal percentage of the window size

i might be dumb

i need sleep

i'm shutting up and logging ofd unril tomorrow

[rough scarab]

It is if it's the root of the UI hierarchy

Either way, go to bed lol

[lusty dagger]

is there any event similar to GeometryChangedEvent but for when a label's text changes?

[rough scarab]

label.RegisterValueChangedCallback(evt => {});

[topaz dagger]

hiyo, trying out ui toolkit for the first time and im trying to figure out slicing

anyone got any resources that point me towards that?

googling typically shows me slicing for sprites

i want to be able to do something like give borders to my UI elements and have them not look stretched when i change its size

[topaz dagger]

what am i doin wrong?

i want this to properly be tiled and sliced

so that there is no stretching

[drowsy gate]

This fixed it

But I don't really understand

surely i always want the ui elements to take up a certain portion of the screen?

also i don't understand absolute vs relative positioning

[lusty dagger]

Thank you!

[lusty dagger]

I think not the top level containers, those should stay pixel based. Think about if it was 50% width 50% height. Then let's say you have a Samsung fold. Samsung fold as a massive width but a small height. So if it was percent based, your health background scale much wider than taller

[drowsy gate]

but won't that also happen if you use "scale with screen size"

[lusty dagger]

I think that's slightly different in that it scales width/height proportionally. So if you have a 500x500 px element, and your device is small, it will scale by lets say a factor of 0.5. So then it becomes 250x250. I could be wrong tho

[lusty dagger]

For this, look into 9 slicing

[drowsy gate]

I think that makes sense?

Pixel adjustment scales height and width, percentage adjustment scales them independently of eachother

[final harbor]

Anybody else having problems with generateVisualContent generated content being weirdly offset in Unity 6?

This is what the content should span

[final harbor]

generateVisualContent stuff just seems to arbitrarily offset stuff and doesn't align with the layout positions anymore. In 2022 version this worked perfectly fine and now is just broken. Fails in both the preview and player, although in the player it seems to be related to the scaling mode and the respective screen properties.

[final harbor]

Nvm, I figured it out. They changed how single pixel lines get drawn. I now actually have to deflate the rect by 0.5f so the border goes inwards.

[sullen bay]

is this meant to be showing the selectors in order of specificity?

[wary swan]

Anyone know why in DragonCrashers sample a clean scene, panel setting, ui document, the elements fit to safe zone, while doing the same in a blank project does not? Also commented out the code in SafeAreaBorder script, so that stuff should not interfare in some way.

[sullen bay]

It seems that USS variable defaults don't work in 2022.3.37

.EsButton {
  --button-border-top-left-radius: 10px;
  --button-border-top-right-radius: 10px;
  --button-border-bottom-left-radius: 10px;
  --button-border-bottom-right-radius: 10px;

  border-width: var(--button-border-width);
  border-top-left-radius: var(--button-border-top-left-radius, 24px);
  border-top-right-radius: var(--button-border-top-right-radius, 24px);
  border-bottom-right-radius: var(--button-border-bottom-right-radius, 24px);
  border-bottom-left-radius: var(--button-border-bottom-left-radius, 24px);
}

This doesn't set any border radiuses, but if I remove the , 24px it will set them all to 10px 😬

It is documented as supported though:
https://docs.unity3d.com/Manual/UIE-USS-CustomProperties.html

[rough scarab]

If any UITK dev is looking at the above, I just made a bug reporter report.

[umbral sonnet]

Hello, I am using scroll view and screen swaping system from UI toolkit sample (https://assetstore.unity.com/packages/essentials/tutorial-projects/dragon-crashers-ui-toolkit-sample-project-231178) but I am getting strange behaviour. System is based on changing display style of screens between states none and flex.

I found that if the scroll view screen is opened and closed without moving the scroll view, the next opening will be bugged => loses the last position and shifts the scroll view to the left (half cutout). In this bugged display if is scroll view moved, it will instantly fix half cutout, but still loses previous position.

Steps which lead to bug (you can see on video below)

• opening level select and moving with scroll view
• closing level select
• opening level select => everything is working fine
• closing level select without moving of scroll view
• opening level select => scroll view shifted to left, wrong position
• after moving with scroll view => shift is fixed

Do you have have any ideas why is it happening and how can I fix it? Thank you! 🙂

[broken marten]

Hey! I have a question regarding IMGUI, not sure if this is the right channel but i cant find any better one. Ive been trying to change the background color of a button. Searching the internet the usual tip is to create a texture2d and set it as the background. But that doesn work for me when it comes to buttons. It just shows like a grey bevelled image no matter what color i use. From reading online it seems that it used to be possible. Can anyone confirm that it still is possible to do for buttons? Or maybe something has changed? Im using 2022.3.

[rough scarab]

#📲┃ui-ux is the correct channel for non-ui-toolkit UI questions. #↕️┃editor-extensions is fine if it's related making extensions.
I'm not sure why you would be using IMGUI in 2022.

[drowsy gate]

what's the difference between absolute and relative positioning?

i assumed relative meant relative to the object above it in the heirarchy, but i have an element just under the document itself which changes based on positioning mode

[broken marten]

Who says I'm not using ui toolkit?

[rough scarab]

I have a question regarding IMGUI

[broken marten]

IMGUI is still relevant. Its widely used, its supposed to be supported (Am i wrong ?). There is a ton of material about it out there. If its not supposed to be used then Unity has to remedy that.

Ofcourse im using UI Toolkit. Ive worked with html/css based web development for a very long time so its very convinient.

I still want to sometimes understand things about Imgui.

[slow bear]

Small UI Toolkit focus question.

So I currently have a pause menu that I want to add controller support to. On pause I'm trying to call
_resumeButton.Focus()
So it calls the focus/correct tab index and I can use the navigation events as I normally would.

The issue is that focusing the button and/or the pause menu container does nothing. What DOES work is if I manually click within the container, then the tab indices are set appropriately and I can navigate using my controller or arrow keys/tab on the keyboard.

Is there an event other than focus I have to call on the container that simulates what a mouse click does? I've perused the docs and google but came up with nothing so far.

Small video to highlight what I'm talking about, trying to navigate the UI at the start with the controller to no avail. Click in container, then tab indexes are working fine and I can navigate with no issue.

At this point I'm half tempted to force a click on the container on pause, before I do something as drastic as that I wanted to make sure that there wasn't a part of UI Toolkit I was missing. As a note, I'm on 2022.3.17f1 and I know UI Toolkit has had some big changes on more recent LTS', but this is very late in the project and would prefer if I didn't have to upgrade.

If it helps, the pause menu is an imported separate UXML embedded within the game UXML.

[wary swan]

Still no clue on this one if anyone got any idea?`😅

[slow bear]

Oh my god, I think I have an idea on why this behavior is happening. Building to test.

[rough scarab]

Nobody is saying feel bad about using IMGUI. Nobody is saying don't use IMGUI. However it's not the recommended solution.
For editor the transition happened during 2021 while it wasn't the default, and then it was the default in 2022.1.
For runtime, debug menus IMGUI had a similar transition to UITK.
Asking why purely gets some context to either make recommendations or cautions if they were not aware of alternatives

[rough scarab]

Don't have the project downloaded but is there a preset that's overriding the default settings perhaps?

[wary swan]

Good point, will check it out.

[slow bear]

Nevermind, had a theory that pressing Escape also released focus from the game view window. Built to test and have the same behavior unfortunately.

The weirdest part is that the tab indexing works fine as long as I've clicked on it once in a session. Even if I close/re-enter the pause menu.

[wary swan]

Sadly no, only for textures audio and light.

[rough scarab]

Also noteworthy that AnimationClipEditor has barely changed since it was first made--before 2017. So it's not really a good example of them using IMGUI. Almost every new thing they make is UITK.

[slow bear]

I did it, the most scuffed solution imaginable, on pause I just simulate a mouse click. This "fixes" it.

I legitimately think this may be a bug with UI toolkit, I'm going to try replicating it on a smaller project.

I love UITK but small things like this pop up so often, hoping it's improved in the newer LTS and eventually Unity 6.

[molten sun]

Sorry if this is blindingly obvious, but how can I use UI Builder to create a custom serialized class property drawer? I can use it to make runtime stuff and editors but I just can't seem to figure out how to link a visual tree to a property drawer. Creating a field for it and then dragging it onto it in the inspector works for editors, but seemingly doesn't for property drawers. Can I connect it up with a file path or something? Also, if I can do that, then how would I make it that (for example) moving a file doesn't cause it all to just stop working?

[cinder shard]

Having an issue where if I toggle the root visual elements display while hovering over an UI element with a :hover tag, it never resets the tag and hovering/not hovering doesn't register anymore. Any easy fix I am missing?

[coarse hornet]

is ui toolkit unsuitable for production

[rough scarab]

The comparison of UI systems documentation is pinned. It's not yet marked recommended for runtime, but if you're educated and understand the listed limitations you can choose to use it

[slow bear]

Ive run into many problems on my project with UITK, but the improved workflow still makes it a net positive for myself.

[slow bear]

Has anyone ever had issues with UITK suddenly reverting your changes on save? Seems to be a relatively common occurrence on .17f1

[tepid geyser]

Is it possible to create a custom uss style that applies to all elements?

[wary swan]

You mean like https://docs.unity3d.com/Manual/UIE-tss.html? Or a all selectorhttps://docs.unity3d.com/Manual/UIE-USS-Selectors-universal.html?

[tepid geyser]

I think I'm trying to stretch USS in a bad way -- my goal is to set a USS "style" with a path to an audio clip that plays on hover of an element.

[near fossil]

Hi all, Looking for some suggestions/inspiration please. I'm trying to create a 2D printable document using Unity's UI toolkit. I've got the majority of it working fine, but my client is asking for one piece that is giving me trouble. It's a height diagram showing a screenshot of a 3D model with measurements around it to represent distance from floor and ceiling. I've edited out the model itself for confidentiality, but I think you can still get the gist of what I want to achieve.

Any ideas on how to draw these measurement lines accurately on this diagram? The numbers themselves I can get by measuring the distance between the actual 3d model and the floor/ceiling. However, now that I've got a screenshot of the model onto my 2d document, how do I draw these lines from the floor to the model and from model to the ceiling? There's the potential for varying models after the user configures them, so I want to do this programmatically. Is it possible to like, start at point A and travel upward until I hit a pixel with a different color value? Or something? It might be doable to have the line objects pre-existing and rescale themselves based on some complicated vector math (if I know the height of the model, and the distance from the ceiling, mayyybe I can convert that into a mostly-accurate pixel value...).
Any ideas would be appreciated!

[wary swan]

The rows, or just the specific measurement segment lines with text?

[near fossil]

the vertical segments (and horizontal ones at the top of the image). The rows were an easy background graphic

[wary swan]

Do you know the positions you want to draw the lines from on the screenshot? Or is that also part of your question how to get those positions?

[near fossil]

So I know the positions of the top and bottom of the overall graph, but I don't necessarily know where the model will be when this graphic is generated.

that's why I'm thnking maybe I can just assume the line goes from floor to ceiling (call it 10ft) but have it actually stop at the bottom of the model + distanceFromCeiling. So like, if the distance is 103" like in that image, how do I translate that to the line sprite's height?

[wary swan]

Right, but in the image you posted there are all kinds of measurements that are horizontal as well with different "anchor points" to the model.

[near fossil]

Exactly. That's why it's tricky. I may need multiple solutions for different line segments

Actually talking it out now, for the vertical ones I can maybe use height = a percentage of the graph's height based on whatever percentage 103" is out of 10ft.

[wary swan]

My brute force brain would first calculate all the measurements with reference to the screenshot. Then in the UI I would have a container and put the screenshot there and do all the calculations with % in respect to the screenshot size those numbers I know and have calculated.

[near fossil]

yes, I think that's kind of where I'm at as well.

I don't think there's an easyish way to do it using UI tricks, it's gonna have to involve lots of math

Anyway, thanks for being a sounding board. I appreciate the input!

[austere cairn]

How come my scrollview only goes horizontal?
it doesn't break to new line.
I've set the mode to horizontal, if I set it to both horizontal and vertical, they only go vertical.
What could be the issue?

I just want them to go horizontal and skip to next line.

[thick widget]

Is recommended to create a uss class for each single uxml component and edit those components directly from the USS class?

Like him is doing I mean... I know it's not English but hopefully you can understand what is he doing: https://youtu.be/u3dCf4ZFVyo?si=DBUq8G2CbkkDsgm3

[thick widget]

Could anyone help me?

[wintry cosmos]

Hi, I'm starting out with UI toolkit, but I'm getting stuck with templates/prefabs. I want to create a customized Foldout template that has an icon next to the label. Is this possible to do? As the Visualelement can't be modified. Is there also a way to save this change then later so that I can instantiate it from my code? (Probably through a template?)

[thick widget]

Look at this video https://youtu.be/pUFG1u6dNQ4?si=Fd7TukeWtFaH8Gbf

[dark blade]

https://hatebin.com/decsvbbevw here what i do to make foldout, maybe not the best way, and it's still unfinished, but the idea is you can make your own foldout, if you don't like how unity does, or trying to styling them to meet your demand is too painfull to you

[drifting glacier]

How to do this in UI Toolkit

.animated-color-change {
    transition-property: -unity-background-image-tint-color;
    transition-duration: 4s;
    animation: color-change;
}

@keyframes color-change
{

    0%
    {
        -unity-background-image-tint-color: red;
    }

    15%
    {
        -unity-background-image-tint-color: orange;
    }

    30%
    {
        -unity-background-image-tint-color: yellow;
    }

    45%
    {
        -unity-background-image-tint-color: green;
    }

    60%
    {
        -unity-background-image-tint-color: blue;
    }

    75%
    {
        -unity-background-image-tint-color: indigo;
    }

    100%
    {
        -unity-background-image-tint-color: violet;
    }

}

[thick widget]

I need help with that...

[tidal crater]

Hey all, how can i handle max 65k vertex error with ui toolkit, text field is causing that error due to long text , but my text field is multiline scrollable but it still renders the characters ...

[dark blade]

you can't, they not implement those yet in unity uss, atm you could use tween or maybe tried ui toolkit animation, but that done via C#

[prime raft]

they said they'd released a feature called marker or sth soon for this exact purpose. for now, you can try as kutub0769 stated.

[tidal crater]

Hi 2022.3.33f1 TextField, TextElement classes have a bug on visiable text.

The feature that comes with the vertical slider on the Text Field does not work.

When you turn on the vertical slider on the Text Field, the feature in the text element

                FieldInfo render = type.GetField("m_RenderedText", BindingFlags.NonPublic | BindingFlags.Instance);
                FieldInfo original = type.GetField("m_OriginalText", BindingFlags.NonPublic | BindingFlags.Instance);
                FieldInfo fake = type.GetField("m_Text", BindingFlags.NonPublic | BindingFlags.Instance);

these sections always contain exactly the same values, which prevents the textfield from recycling and causes the text fields to always fill the 65k vertex limit in long texts.

When the scroll view is open, which method calculates only the visible text part of the text field and where is it done, can someone help?

In this way, maybe I can change m_RenderedText with reflection.

[tidal crater]

Where can I consult people about problems with the UI toolkit xd

Even one of the questions I opened in the forum does not receive a response from the mods or the relevant people, I can not reach anyone in the same way in discord ..

[thick widget]

is that the right naming convention?

Is the same for uss classes?

[tidal crater]

is there any update related to this article ?

https://discussions.unity.com/t/textfield-character-limit-text-will-be-truncated-because-it-exceeds-49152-vertices/887961

[molten sun]

Why can't I change or remove the label for the first PropertyField in my VisualElement? Am I doing something wrong or is this page in the issue tracker incorrectly saying it was fixed already? https://issuetracker.unity3d.com/issues/ui-toolkit-propertyfield-can-not-have-no-label
I'm using 2022.3.39f1.

using UnityEditor.UIElements;
using UnityEngine.UIElements;

[CustomPropertyDrawer(typeof(Attribute))]
public class AttributeDrawer : PropertyDrawer
{
    public override VisualElement CreatePropertyGUI(SerializedProperty property)
    {
        VisualElement rootElement = new VisualElement();

        var baseline = new PropertyField(property.FindPropertyRelative("baseline"), "THIS DOESN'T DO ANYTHING");
        baseline.label = "THIS DOESN'T WORK EITHER";

        var modifier = new PropertyField(property.FindPropertyRelative("modifier"), "For some reason this works though");

        rootElement.Add(new Label(property.displayName));   // This also works
        rootElement.Add(baseline);
        rootElement.Add(modifier);

        return rootElement;
    }
}```

In my example, if I swap the order in which I Add baseline and modifier to rootElement then it inverts which one doesn't work so that the first one added is always the problem one.

I mean, changing the label on a property is about as fundamental to the basic functionality of a custom property drawer as it gets right? Surely this has to be pilot error on my part?

Also setting either baseline.label to null, or the constructor argument to null does nothing.

[rough scarab]

Set it to ""

[ocean snow]

Hello, can anyone help me understand how to change button's text position relatively to the center of the button in the builder? I know where align is, but that's just 3 presets, I need the text slightly higher

[limpid grove]

Have you tried spacing in text option?

[ocean snow]

These are the only options for text inside the button USS no?

[limpid grove]

Yea, if that paragraph spacing isn't what you want then maybe clear text from that button and add label to it, and position it accordingly

[ocean snow]

Hm okay thanks, that was the approach I wanted to avoid for simplicity's sake but we do what we must haha

[thick widget]

Hmm, and how could i make the text to be inside the limits?

[limpid grove]

wrap option I think

[limpid grove]

I might be wrong, maybe just adding enter (/n) to the text will do what you want 😄

[ocean snow]

oh true, I could've added an empty line bellow an modify the paragraph padding xD

Also while I'm here, is this "weird" tweening behaviour intended? The fact that if I move the cursor to another button rather than "outside" the animation just stops at whatever point it was when I got to the other button? I'm using the :hover pseudoClass

The issue disappears when no delay is set in any animation

[limpid grove]

Unfort that out of my scope of knowledge atm

[wary swan]

Anyone who can point me to any docs or info of how to set up sorting for MultiColumnTreeView / alike?

[molten sun]

Thanks, although I tried that too, and it had no effect in the PropertyField constructor or when setting its .label. It works on the second field as expected however.

[arctic grail]

Hello, why does setting the width of an element that has a flex grow parent makes the parent to grow bigger? Is it a bug?
img1: two panel with flex grow
img2/3: the same panels with b that has a child with a width of 500px

[rough scarab]

I don't really understand what the difference between the first and second fields are

I can only presume that there's a custom property drawer doing something manually

[molten sun]

The only difference I know of is the order they appear in. If I invert the order in which they are drawn then whichever comes first will always have the default label, but the second will always work as expected - I can remove that one, or change it to whatever I like. This is the only custom property drawer (or custom editor or attribute or anything else) in my project, and I've tried making sure that there are no attributes attached to any of the relevant properties.

[rough scarab]

Flex grow makes the element grow to fill the remaining space. It will first be the size it or its children declared it to be. You can override that initial width using flex-basis

[rough scarab]

I'll have to test it on my end...
If that's true it does sound like a bug. A work around would be to register a geometry changed event and manually remove the label from the hierarchy when it's populated

[molten sun]

That'd be great if you could, and thanks for having a stab at this one - it's been driving me nuts for days now XD
I'll have a crack at the geometry changed event for now then. Come to think of it, another thing I haven't tried is drawing the whole thing using the UI Builder, so once I figure out how to I'll try that too.

[molten sun]

Wait! I think I've got it. It's something to do with the default [Range] attribute. I need to test this some more, but entirely removing all range attributes from the class my property drawer draws seems to solve it.

[rough scarab]

The property drawer for that attribute probably ignores that behaviour... Annoyingly

[ocean snow]

Hey guys, what is the "proper" way to nest all the UXML docs to create a larger UI with broken down components?

[limpid grove]

Hey, maybe my settings are somewhat wrong, but anyone experience issue where you want to save it return to last saved state?

I just lost like 30 min of setuping menu

[arctic grail]

I get it but since the new child is smaller than the parent, it should not make the parent grow right (see images)? 🤔

[rough scarab]

If the element starts by allocating more space than the other siblings then it will be larger than them once they divide the remaining width between them

[arctic grail]

Ah ok it works like that, I just tested with normal css and it's exactly the same behavior, it's a bit counter-intuitive 😅

[limpid grove]

Can I add Gradient to Visual Element? I am finding some info about GradientField but I can't grasp how to add it, do I need to create new special style for it?

[limpid grove]

If anyone is looking for it, you need to code that element. There are examples in Window > UI Toolkit > Samples, not that helpful tbh. Here is implementation example that semi worked for me https://discussions.unity.com/t/background-gradients/810125/6.

[rain wind]

Anyone know how to get screen point of an inspector element drawn from a PropertyDrawer?

Doing it at runtime seems easy enough, but uitk is in editorwindow space for inspectors etc and i can't seem to find an easy way to get the editor window from the PropertyDrawer

[rain wind]

I feel I must be missing some built in util for this, but when in doubt, reflect away

public static EditorWindow GetEditorWindow(VisualElement ve)
{
    var ownerObject = ve.panel?.GetType()
        .GetProperty("ownerObject", BindingFlags.Instance | BindingFlags.Public | BindingFlags.FlattenHierarchy);

    Assert.IsNotNull(ownerObject);
    var dockArea = ownerObject!.GetValue(ve.panel);
    var actualView = dockArea?.GetType().GetProperty("actualView", BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.FlattenHierarchy);

    Assert.IsNotNull(actualView);
    return (EditorWindow)actualView!.GetValue(dockArea);
}

public static Vector2 GetScreenPosition(VisualElement ve)
{
    var editorWindow = GetEditorWindow(ve);
    return editorWindow.position.position + ve.worldBound.position;
}```

[potent ginkgo]

Am I just special or can you actually not rename USS files?

fixed screenshot*

Apparently you can rename the file in the Asset explorer and it does reflect in the UIBuilder (I renamed it to "debug-overlay-style", but the reference in the uxml file to the style sheet does not get updated. Somehow it still works, guessing the FileID (or guid?) takes over for the filename reference if it doesnt find that or something.. odd stuff

thats actually kinda weird. I edited the uxml with junk values and apparently all it cares about is the guid and the rest is just... there, not doing anything? Because it still works as long as the guid is the same

[stone urchin]

Is there anything like WPF's (Avalonia too) tag property on elements?

It's basically just to attach anything you want on elements. You can also set it in XAML. I used it in a project for localization and i would like to port that system to Unity

I just needed an unused property to put the translation key on

The only other option i can think of is naming the elements based on their key

which wouldn't really work if two elements need the same key

Could also use the classlist

something like .loc-key

[merry kettle]

in Unity 6 new UI Toolkit feature i was testing the new binding system, basically because i thought it will have options to avoid gc allow when setting label text. but i found not matter what i do, the label will re calc array size which will always gen garbage. So i was wondering why is there no stringbuilder like label with a fixed max size to prevent this. How can i create such thing my self? i dont wanna alloc when for example having a timer run O_o

[sullen bay]

Why does the selector .HudWeapon .EsButton-content > * match this first element but not the second?

[thick widget]

I need help on detecting pressed buttons once i change the uxml on the screan...

When I start the game this is the deffault UI (i also get a log, probably is related to my case)

Then I get all buttons in all UIs and detect when the firstone is pressed in this code https://paste.ofcode.org/TfrSA6VvGUd2QhZcx9dtj

When the first button is pressed it leads me to this other UI following the next method in the next code https://paste.ofcode.org/qDfXSqMndcWSFuJrh9TQXG

But then when i try to click the gallery button it doesn't detect me the click

[limpid grove]

Hey, I dynamically creating buttons and want to add image to them. One way I found is to use button.style.backgroundImage and assign new StyleBackground with path to Sprite. Although I am passing sprite to that button and to get path I am using AssetDatabase class which isn't available in build. There has to be easier way to assing Sprite to button from code?
https://docs.unity3d.com/Manual/UIB-styling-ui-backgrounds.html

[limpid grove]

You have 2 UIDocuments on same GameObject? How you know which is "taken" when you use "GetComponent"?

[thick widget]

Hmm, they are not two UI docs...

One is the UI document and the other both are scripts that are supposed to control de whole UI

[limpid grove]

Yea but in UserInterfaceController.cs you are getting startMenu and GameHUD as UI Document. So it will have same UI document. So I am assuming your Game Hud doesnt work coz you never assigning logic to it. That's why you probably have those errors.

Co he never finds stuff like gallerybutton coz its not in this UI document

[thick widget]

Oh, I understand you

[thick widget]

Hmm and how would you fixe that?

Getting just one UI doc and managing just one?

[limpid grove]

Or instead of GetComponent just assing them in inspector if you want to keep it like it is

[thick widget]

hmmm, could you help me with that? 😅

I'm crashing xD

[limpid grove]

Watch this series maybe it will help you: https://www.youtube.com/watch?v=Gy6ypxHcpUA&list=PLmdJ8so4ffmvVKgECJF4FlnTfOq-2DcYa&index=2

[thick widget]

then should it be something like this?

but what should i drag to those ui docs spaces?

[limpid grove]

They only can get one Type so that shouldn't be hard to figure out 😛

So since you were getting 2 UIDocuments I assumed you have 2 UI Documents on scene, but I can see only 1. Where is your UI Document with game HUD?

[thick widget]

That's what I don't understand, right now I just have one, should be there one UI doc per screen or I should just change the source asset property?

[limpid grove]

Idk which is better, but both ways have different workflows. I think you should combine them into one UI document and just work with visibility for now. Then you can do GetComponent and work on it.

[limpid grove]

Nvm I tried to overcomplicate it.

[thick widget]

Ohh, you mean combine all uxml into one?

That's probably the best option

[sullen bay]

I have just one

And it feels good

<ui:UXML
  xmlns:ui="UnityEngine.UIElements"
  xmlns:es="EffortStar.UiToolkit.Elements"
  xsi="http://www.w3.org/2001/XMLSchema-instance"
  engine="UnityEngine.UIElements"
  noNamespaceSchemaLocation="..\..\..\UIElementsSchema\UIElements.xsd"
  editor-extension-mode="False"
>
  <Style src="../Styles/Base.uss" />
  <Style src="../Styles/Shared.uss" />
  <Style src="../Styles/Greenbox.uss" />
  <Style src="../Styles/Cursor.uss" />
  <Style src="../Styles/Box.uss" />
  <!-- <Style src="../Styles/Graybox.uss" /> -->
  <Style src="../Styles/Font.uss" />
  <Style src="../Styles/EquipmentInfo.uss" />
  <Style src="../Styles/EquipmentCompact.uss" />
  <Style src="../Styles/ToggleLayer.uss" />
  <Style src="../Styles/Modal.uss" />
  <Style src="../Styles/CharacterExperienceSummary.uss" />
  <Style src="../Styles/FullScreenContainer.uss" />
  <Style src="../Styles/ReplaceWeapon.uss" />
  <Style src="../Styles/ReplaceWeaponSimple.uss" />
  <Style src="../Styles/ReplaceWeaponCompare.uss" />
  <Style src="../Styles/ProgressBar.uss" />
  <Style src="../Styles/Hud.uss" />
  <Style src="../Styles/HudHealth.uss" />
  <Style src="../Styles/HudInstability.uss" />
  <Style src="../Styles/HudAbilities.uss" />
  <Style src="../Styles/HudWeapons.uss" />
  <Style src="../Styles/InstabilityEffect.uss" />
  <Style src="../Styles/Banner.uss" />
  <Style src="../Styles/InstabilityBanner.uss" />
  <Style src="../Styles/EsButton.uss" />
  <Style src="../Styles/ModInfo.uss" />
  <Style src="../Styles/ModCompact.uss" />
  <Style src="../Styles/Tooltip.uss" />
  <es:TooltipContext>
    <es:Hud />
    <es:CharacterExperienceSummary />
    <es:ReplaceWeapon />
    <es:MessageBanner />
    <es:InstabilityBanner />
  </es:TooltipContext>
</ui:UXML>

And this is <es:Hud>

<ui:UXML
  xmlns:ui="UnityEngine.UIElements"
  xmlns:uie="UnityEditor.UIElements"
  xmlns:es="EffortStar.UiToolkit.Elements"
  xsi="http://www.w3.org/2001/XMLSchema-instance"
  engine="UnityEngine.UIElements"
  editor="UnityEditor.UIElements"
  noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd"
  editor-extension-mode="False"
>
  <es:ToggleLayer hide-position="top" visible="true">
    <ui:VisualElement class="Hud-container" picking-mode="ignore">
      <ui:VisualElement class="Hud-left" picking-mode="ignore">
        <es:HudHealth />
        <es:HudAbilities />
        <es:HudWeapons />
      </ui:VisualElement>
      <es:HudInstability />
    </ui:VisualElement>
  </es:ToggleLayer>
</ui:UXML>

Then everything is accessed like this:

namespace EffortStar.UiToolkit {
  [ExecuteInEditMode]
  public sealed class UiMain : MonoBehaviour {
    [SerializeField, Required] UIDocument? _document;

    public CharacterExperienceSummary CharacterExperienceSummary { get; private set; } = null!;
    public ReplaceWeapon ReplaceWeapon { get; private set; } = null!;
    public InstabilityBanner InstabilityBanner { get; private set; } = null!;
    public MessageBanner MessageBanner { get; private set; } = null!;

    public Hud Hud { get; private set; } = null!;

    void Initialize() {
      Assert.Assigned(_document, nameof(_document));

      var root = _document.rootVisualElement;

      CharacterExperienceSummary = root.RequireQ<CharacterExperienceSummary>();
      ReplaceWeapon = root.RequireQ<ReplaceWeapon>();
      InstabilityBanner = root.RequireQ<InstabilityBanner>();
      MessageBanner = root.RequireQ<MessageBanner>();
      Hud = root.RequireQ<Hud>();
    }

    // Initialize in OnEnable to support hot reload.
    void OnEnable() {
      // Cannot allow exceptions to escape OnEnable or else the component will
      // be disabled in edit mode.
      try {
        Initialize();
      } catch (Exception e) {
        Debug.LogException(e);
      }
    }

    // Keep enabling because it becomes disabled randomly in edit mode.
    void OnValidate() {
      enabled = true;
    }

[kindred mountain]

Is there any way to bind a VisualElement into a static variable?

[sullen bay]

Could anyone explain why/how flex-grow could be 0 here given the matching selector rules.

.HudWeapons-swap-arrow {
  background-image: url("/Assets/_Game/SVGs/UI/Resources/Icons/SwapArrowDown.png");
  background-size: contain;
  flex-grow: 1;
}
.HudWeapons-swap-arrow.-right {
  transform: rotateZ(180deg);
}

If I delete the second rule here then flex-grow: 1 is applied as expected.

Seems that somehow it's being reset to 0

Ah nvm, I can't use rotateZ in USS, it's rotate: 180deg instead.

[stone urchin]

Is there a UI Toolkit alternative to https://docs.unity3d.com/ScriptReference/RectTransformUtility.ScreenPointToLocalPointInRectangle.html

It's pretty important for something i'm making

[arctic grail]

Hello, where can I find the default unity styles on windows? (those imported in UnityDefaultRuntimeTheme.tss : @import url("unity-theme://default");)

[cinder shard]

Can someone direct me to how to modify default UI elements? In particular i am trying to get the the toggle to do space between the label and checkbox but modifying alignment settings of the toggle itself doesn't change anything given the containers of the lower elements are set to expand

[dark blade]

i guess you can achieve that simply with uss, or make your own custom element, so you will have more and easier control over it

[carmine python]

I have a windowed mode when building on run time. I want my assets to NOT change size when I change the window size. How do I do it?

[rough scarab]

There are a number of helper extensions https://docs.unity3d.com/ScriptReference/UIElements.VisualElementExtensions.html that are related to point transformations

but events like PointerEnter tend to have the local space position passed in

so you can just use those

[stone urchin]

How do i get rid of this? When i deselect items in my ListView using ClearSelection, the last selected items stays grey and if i press any direction key, it reselects them

[drifting glacier]

How to set aspect ratio in Unity USS

[dark blade]

this is frustating me too, for whatever reason they are still in focus state

[stone urchin]

You can't tho for some reason they have a page about making an AspectRatio control but don't bother including it by default. The scene view in my thing uses it since it's a render texture i don't want scaling problems with https://docs.unity3d.com/6000.0/Documentation/Manual/UIE-create-aspect-ratios-custom-control.html

[arctic grail]

https://docs.unity3d.com/6000.0/Documentation/Manual/UIE-encapsulate-uxml-with-logic.html#element-first-approach
In the first code snippet of Element-first approach, there is this constructor:

    // Custom controls need a default constructor. This default constructor 
    // calls the other constructor in this class.
    public CardElement() {}

What does it mean "This default constructor calls the other constructor in this class." ?

[cyan lava]

I'm having some issue full screening some panels in UI Toolkit. Would someone spare me and drop a hint? 🥺

[harsh merlin]

how do you put UI on a gameobject like i want to put it on a monitor but i cant seem to find how

[paper summit]

Are you using the ui toolkit?
Please don't crosspost

[harsh merlin]

no

[paper summit]

Then this is not the right channel

[harsh merlin]

bro its not that deep ur not even staff

[paper summit]

I was just going to direct you to the right place (before I saw you already did). I am a resident.
Either way, you got the answer in the other channel

[harsh merlin]

i understand

[small wigeon]

Is there any way to override the colour of a VectorImage background?

[west anvil]

Is it worth it for me to start using the UI Toolkit at runtime, or does it make more sense for me to stick to Unity UI?

Not sure where the community is at with this rn or if I'm just not understanding the scope of using UI Toolkit.

[small wigeon]

in the pinned messages there is a link to a comparison, you should use that to determine if UI Toolkit will be able to do everything you need at runtime

[ancient shale]

In 2019, people asked for z-index support. Rougly 5 years later, UI Toolkit still does not support z-index.

In 2024, the support for z-index is in Planned stage.🥲

[dark blade]

so i make my own button

        public UIEButton()
        {
            this.Class(ussClassName);
            this.RegisterCallback<ClickEvent>(OnClick);
        }

        ~UIEButton()
        {
            this.UnregisterCallback<ClickEvent>(OnClick);
        }

        private void OnClick(ClickEvent evt)
        {
            _onClick.Invoke();
        }

``` i know unity has built in Button Element, but whatever, my question is do i need to implement the Destructor and do unregister callback there?, and this button i will use both in editor UI and Runtime UI, thanks in advanced

[rough scarab]

You almost never should be using a destructor.
And no, it has no value here anyway as the event is completely contained within the button, and once dereferenced it's gone. If the element was unattached from a panel the event wouldn't be called so it also doesn't need to be unsubscribed from in that case either.

[dark blade]

thanks for the reply, from many tutorial and sample from unity, i also see they're not calling desctructor too, but just to make sure, if we implement using Manipulator, unregistering callback must be called, that is where im confusing

ohh and also since this will be use in editor scripting too, afaik when we enter play mode, and leave it, unity cleaning up(maybe) everything, but because this is on editor does unity also handle it?

[cinder shard]

In UI Toolkit is there a way to change the defaults of UXML
I want it to always match game view and have the main camera as the background, but its pretty frustrating to have to manually set that every single new uxml

[stone urchin]

hurts so much, i basically can't do what i want without it. I mean, there is a workaround but it sucks

[tidal crater]

How can i add a foldout correctly in a list view element

Basicly i create a list view then i set make item a visual element that contains foldout and in foldout there are seperate properties but when i expand or collapse that inner foldout it ist working at all what should i add to uss classes to work correctly

[cinder shard]

What's the proper way to handle various types of user interaction? In particular I want to build my UI with multiple input types (using the new input system) in mind. So I have been using pseudo-classes to help trigger various transistions. The issue I am experiencing is when using :hover this only applies to mouse movement. No biggie, I use :focus to transistion when selected via gamepad or keyboard. But the issue comes when a mouse user clicks a button that has :focus it selects the button locking the state to :focus until they click something else. Is there a way to handle this i am missing using just UI or do I need to clear the focus programmatically?

[undone laurel]

Hi, I want to create a button template that I can create instances of using UIBuilder.
I'd like to change the text of each instance of the button template, without modifying the original.
However, I'd also like to be able to make changes to the original, so that all instances receive those changes.

These two pages both state that TemplateContainer's internal hierarchy is read-only. https://docs.unity3d.com/Manual/UIB-structuring-ui-elements.html and https://docs.unity3d.com/Manual/UIB-structuring-ui-templates.html

This post from 4 years ago states:

AttributeOverrides node lets you override the value of an attribute of a child template. The element is addressed by name and can receive any number of attributes. Currently UI Builder does not support this though (it is planned).
https://discussions.unity.com/t/containeroverride-let-you-add-things-inside-templates-inside-specific-elements/806476/2

I've been unable to find a solution that allows me to do what I want within UIBuilder. Is it possible?

[undone laurel]

Ok. I believe the answer to my question is:
On the original button, hit "Extract Inlined Styles to New Class".
Then, every time I create a new button that wants to use the same style as the original button, I use that style class.

[west anvil]

Sobs meticulously

I just learned how to use UI Toolkit and was literally just about to dive into it to quickly prototype my mobile game lmfao bye

[limpid grove]

Hello, I am rather new to UI Toolkit but can someone explain me why first focus in this works, but the other doesn't?

        var mainButtons = root.Query(className: "mainButton").ToList();

        mainButtons[0].Focus();

        foreach (var button in mainButtons)
        {
            button.RegisterCallback<NavigationMoveEvent>(e =>
            {
                Debug.Log(e.direction);
                
                if (e.direction == NavigationMoveEvent.Direction.Down)
                {
                    var button = root.Q<VisualElement>("ScenarioTypeButton");
                    button.Focus();
                }
                
            });
        }

With this I can toggle visibility of the button, but I can't focus it. I don't understand why.

Or can someone point me in direction of proper navigation implementation?

[arctic grail]

Is there only one button named "ScenarioTypeButton" ?

because from the doc, Q will only return the first matching element

[limpid grove]

And I want all the buttons to focus on 1 button

[small wigeon]

check the event debugger, I suspect you may be fighting the navigation system

you could also try cancelling the event so it doesn't propogate further

[umbral sonnet]

Hello, I want to create a scene transition animation and my whole UI is through the UI toolkit. I found out that the animation can only be done through adding/removing the class that causes the animation to be created. Initially I want to have the screen covered from leaves, and after the scene is loaded, call a function which will uncover the screen (moves the leaves to the side). The problem I have is that before I hit Play button in editor I see, that camera is fully covered from leaves, after that is scene loading (unity dialogs etc.) after is scene fully loaded I see the result state - leaves instantly disappear, without any animation 😦 . Uncovering is done via AddToClassList/RemoveFromClassList functions and called on Start function in one "special" script.

Do you have any idea how to fix it? Thank you! 🙂

[dark blade]

is there any chance unity will redesign UI Builder?, having ability to see how our UI would like is a must right, step aside i really don't want to touch UXML file directly, has zero knowledge for it, and i don't think i will touch it too, too many thing to learn already, anyway couple problem i see is

1. Import USS, i really don't understant why we even need to OpenFilePanel to find file that 100% in the project, make it as a list, then use object picker to select the USS would be way easier right, then for some reason after reopen the window, the active uss would be the first uss we assign
2. the grey out child of element, we can see the style name, yet why we can't just double click it, instead need to type manually
3. our custom control
   there is a lot more problem with UIBuilder Window but i'm not that good in english make my argument for it

[cinder shard]

For what its worth you can click on the UXML to set the main camera as the background to see it in place:

I agree with the other points. It feels very clunky to add USS especially

[nocturne timber]

hi, im using the ui-toolkit for the first time, and I can barely touch anything, not even remove the label from a slider, or to change the size of the visual element inside the slider having to modify it from the size of the .unity-base-field__label selector doesn't make much sense to me, am I doing something wrong? or to remove the label from a slider do I have to do it by code? and to change the sizes of things do I always have to go to the base selectors?

[rough scarab]

You would make a selector that targeted what you wanted to change, yes.
Generally that would be hierarchical (not just a single class) so it was properly restricted to that element.

The greyed out elements are constructed by the control, so you can't modify them directly. If you wanted to remove the label you would probably set its display to none.

In this case if you just set the label to an empty string I think it'll be removed, but not sure.

[nocturne timber]

okay thanks, i droped the use of the slider, and tbh im not having much trouble with the rest for now, i just finished my first Alpha of my pause menu , now is time to see how hard is to implement the code logic i want

[woeful mauve]

Anyone know how to create a Vector Image for the UI Toolkit ?

[small wigeon]

if you want to load an svg you need the Vector Graphics package

if you want to draw lines at runtime use the painter2D property on the mesh generation context

[woeful mauve]

I didn't find this package :/

[small wigeon]

you have to manually add it because it's a preview package

[dark blade]

i set my background color to

.uie-foldout {
    margin: 2px 0px;
    background-color: rgba(40, 40, 40, 74)
}

yet the color become like this, and when i inspect to color, its r:40, g:40, b:40, a:255, so they are not accepting my alpha value, why?

[still lantern]

Anyone know how to set a custom style from c#?

 private static CustomStyleProperty<Color> s_TrackColor = new CustomStyleProperty<Color>("--track-color");

[scenic brook]

Try changing opacity. Looks like the opacity is separated into a separate variable for some reason.

[woeful mauve]

Anyone know how to use dataSource "Binding" from the UI Builder ? I have tried a lot of thing, followed the documentation about it but nothing works

[kind whale]

Heyo everyone, for people with experience using Toolkit, how has it been so far? Would you say its feature complete to ship a game with and what problems have you faced using it?

I'm recently had bad experiences with a plugin for UnityUI (uGUI) and having been burned I'm looking into a new and hopefully easier solution then just the native uGUI experience

So would you recommend toolkit?

[kind whale]

Also does anyone have any idea when the custom shader and world space support will be added? It says its inprogress in the road map. Is this expected to be released with the final version of Unity 6?

[woeful mauve]

No, its planned for future updates along Unity 6 and above

I wait this feature too

[woeful mauve]

If you want to display your UI in "world space", you can render the texture into a RenderTarget, put the the RenderTarget texture in a material and apply the material on a mesh

[kind whale]

Thanks for the advice on worldspace. I assume its also possible to do the same for custom shader support. Just render it to a rt, and then apply a shader on the mesh fragment

[woeful mauve]

Exact, but for some kind of shader like backdrop blur, i didn't know if its possible right now 🧐

[kind whale]

ah that makes sense. Im sure there are some crazy hacks but prob not performant at all haha

[woeful mauve]

The RenderTarget is a native fonctionnality, but for the shader side, this is pretty tricky ahah

[kind whale]

if its possible to clip out the toolkit canvas or do layers. maybe something could be done. but again, it wont be pretty lol

and i wouldn't do more then 1 layer

[woeful mauve]

Idk, i never do that in UI Toolkit, im using since 2 days 😁

[rough scarab]

Because alpha is 0-1

[woeful mauve]

Does anyone know a way for the constructor of a VisualElement to be called at creation time?
The constructor is called when I create the component from code, but is not called when I add it from the UI Builder 😬

[rough scarab]

How do you mean? The default constructor will be called

[unborn bluff]

Has anyone made a better method for making text glow yet?

The current method seems more like a glorified outline than what I am trying to go for.

I am trying to avoid just making images for the buttons due to wanting to make localizing easier down the line.

Most custom glow components that exist for the toolkit can only generate around the box rather than the actual text itself.

[dark blade]

thanks, it's work

[kind whale]

Did you have any luck solving this issue? Hoping to hear some sort of official answer

[unborn bluff]

Nope was forced to stick with the sprite method for now sadly

i know some scripts that are good for general elements but nothing that will actually wrap around the text itself

[woeful mauve]

Hi !
Anyone know how to set custom icons set for AppUI ? It use the default set but i don't know how to update it 🤔

[kind whale]

dang, maybe when custom shader support comes in this will be easier

realy hope its planned for the final release of Unity 6

[unborn bluff]

i crave it for unity 2022

[woeful mauve]

I pray for it to, Unity are working on it actually

[woeful mauve]

Anyone already have this problem with UI Toolkit ?
#archived-code-general message

I'v make all the ui from UI builder and have followed the entire doc related to Toolkit

[nocturne timber]

Hi, i have a problem with UI ToolKit, the transitions i do, when i finish do it them, them work fine, but after restarting unity or after sometime they stop working and do it insta, is this a normal problem? how can i solve this? i even started a new project, just with a simple interface with 1 transition and is happening too

[nocturne timber]

And i finded that, deleting the css class that give the transition, and do in it again, with the exact same values, make it work again, but them stop working again

could be a bug of the version?

i find this guy that had the exact same problem https://discussions.unity.com/t/uibuilder-transition-animation-not-working/939276

[thick nest]

Hello @topaz slate , which version of Unity and which version of App UI are you using? I know there's a bug about font loading/rendering when using custom fonts in Unity 6 builds.

[thick nest]

Anyone know how to set custom icons set for AppUI ? It use the default set but i don't know how to update it 🤔
@woeful mauve there is some documentation about it :

• Create a new USS Icons set with Icons Browser: https://docs.unity3d.com/Packages/com.unity.dt.app-ui@2.0/manual/custom-icons.html#icon-browser
• Add icons directly in your existing stylsheets via a custom selector: https://docs.unity3d.com/Packages/com.unity.dt.app-ui@2.0/manual/custom-icons.html#adding-custom-icons

[woeful mauve]

The problem is related to Panel component, i have the same problem

[woeful mauve]

I found the problem few days ago, the documentation is not really clear at some point 😅

[thick nest]

In next releases of App UI, the use of custom font definitions in USS will be dropped in order to use the default ones provided by ui-toolkit (NoInter) directly. So that will unblock people trying out App UI at runtime with Unity 6 until a proper fix is made by UITK team 😉

[thick nest]

Feel free to give suggestions by using Report a problem on this page at the bottom of the documentation pages, that will be taken in account for next versions 🙂 Feedbacks are always welcome!

[barren bane]

Hi! I don't know if this should be that complicated to find... I'm trying to recreate this type of label:

Where if you double click, it lets you change the name of the element

I seem to miss where to find how to implement this, and I don't even know how to start honestly

[barren bane]

Is it normal that ListView Children().Count() is always 0? and ElementAt always returns null?

[gritty crescent]

when I add a class with AddClassToList to a visual element, if the visual element is a GroupBox, the changes to margin are ignored. Is there a way to set the priority so the class I add takes precidence over this?

[dark blade]

the easiest way would be make custom control, and has textfield in in, by default its readonly, then ofc u need to register click event callback, and when u click 2 times, read only to false, so you can edited

[west umbra]

Is it normal that a UIDocument simply being active drops FPS by 10-15%? No actual UI exists in it, curious on overhead.

[drifting glacier]

Is UxmlElement supposed to be in UnityEngine.UIElements

[drifting glacier]

Turns out VS was just making stuff up. The project builds just fine but VS pretends there is a problem.

[trail oasis]

if i bind a visual element to a property does that mean i cannot edit them ?

i currently bind a vector3 field but they become disabled in inspector so i cannot edit them

i dont get it

[left geode]

Any runtime window system already exist for UIToolkit?

Spent a few hours experimenting with UIToolkit and ECS and I have a basic window system but I'm wondering if something similar exists already?
I tried to search for "window system" and "window manager" but I can't find anything 🤔

[dark blade]

i don't think so, maybe you make the field read only?, or better more, just paste your code

[scenic brook]

I'm using new PropertyField to write a property field. However, the content of those properties is usually inside a foldout with a label. Is there any way to get rid of that foldout except for creating CustomPropertyDrawer for each possible property?

[scenic brook]

Ended up with something like this:

rootElement.schedule.Execute(() =>
{
  var children = valueField.Children().ToArray();
  foreach (var child in children)
  {
    if (!(child is Foldout))
      continue;
    var grandchildren = child.Children().ToArray();
    foreach (var grandChild in grandchildren)
    {
      child.Remove(grandChild);
      valueField.Add(grandChild);
    }
    valueField.Remove(child);
  }
});

It doesn't look elegant, but it seems to do the job. 🤔 On the downside, it has a frame of delay.

[dark blade]

can you just target the foldout using uss?, then set display to none

[scenic brook]

It makes foldout disappear including the content inside. The second part is not what I aim for.

[hard pewter]

Any pieces of advice how can I make this icons in editor more crisp? These are built in icons and I just slapped them on as a background-image for a visual element with fixed dimmensions. IIRC I already tried using Image instead and got even worse result, but maybe there are some settings I dont know about.

Or should I export this icon and import copy with different import settings to make a difference?

[scenic brook]

Mipmaps can change the way downsized textures are displayed. Compression also can affect the image's quality. If you want to have an image sharp, I would suggest creating a texture with a resolution that perfectly matches your needs (that way Unity won't need to automatically downscale/upscale it). Also, I would turn off compression and mipmaps.

[hard pewter]

I cant do so with built in icon so reimporting it is then!. Ill try and see the results

[rough scarab]

Some images will have more resolution if you append @2x before the file name.

[hard pewter]

actually that works, no need for importing anything, thanks! 😄

[dark blade]

so you actually just want to remove the icon then?, basically its just header+label?, then target the foldout icon, and once again set its display to none

anything beside can handle by uss class, you need to make custom element for it

and cmmiw you don't want the foldout, but keep the label, and again because foldout has on click to show and hide the content, this cannot done simply by target the element from uss, well you can make it disabled, so its will not receive click event, but you need to style it too, since unity disabled has style by itself,

so a custom property drawer, but you don't want that, because its will be so tidious to make property drawer for each class need that, then the solution is custom attribute

[limpid grove]

Hey guys, I have and issue while I start my game. I am navigating with keyboard through my UI and on start I am focusing one of the button so I could start navigating around, but until I click with mouse it's not working? What am I missing?
Edit: It's actually happening whenever I come back to main menu. Other UIs work instantly.

[limpid grove]

Ok, UI Toolkit has it's own Event System, so Unity Event System was interfering with it's behaviour

[merry mountain]

any good ideas as to how to go about a 2d listview? or should i just make my own wrapper that captures element selected and fake a 2d listview?

[dark blade]

https://docs.unity3d.com/Packages/com.unity.dt.app-ui@0.4/api/Unity.AppUI.UI.GridView.html a grid view right?, i never know unity has it for UI Toolkit already, maybe you can try

or if this didn't work. you can use Scroll view for it, as long the element is uniform a simple flex wrap can done it, but if not uniform, you must calculate the position yourself, since just using flex wrap will make the positioning ugly

[merry mountain]

Yea my problem was if i could somehow simplify the selection process

but i guess i cant, so i did it manually right now by making a gridview by hand and registering to buttons

but this is annoying sigh*

[unborn bluff]

Hello I am using Unity 6000.0.11f1 . I created a custom control with a TabView set as it's content container. When I add Tabs to it from UIBuilder they don't seem to work as intended. The Tabs are not swapping when clicked. I noticed that when adding it this way the selectors are not applied to the Tabs.

Adding Tabs to this TabsView from a script by Querying for it first seems to work as intended.

Is there a work around for this and should I report it as a bug on the forums?

[cinder shard]

So the more I use ui-tookit the more I kind of feel like its really good for menus, but when it comes to things like huds or in world UI its not as great. Is that feeling just me missing something or is it still a WIP in that department?

[shadow quartz]

They are currently working on World Space and better implementations for run time HUD like things.
At the moment for Unity preview they were focusing on QOL, bug fixes, and performance fixing.

Edit: When clicking the link it doesn't auto scroll down to the UI Toolkit changes.
Click the show topics button and choose UI Toolkit to see all the changes.

Here is a link to the Unity release note comparerer. I set the link to show just the changes from Unity 6 preview 10 to Unity 6 preview 18.
Just to show the vast amount of fixes they have been working on.
https://alpha.release-notes.ds.unity3d.com/search?fromVersion=6000.0.10f1&toVersion=6000.0.18f1#UI Toolkit

[muted geyser]

Anybody knows workaround to bind button clicks using runtime binding system?

[dark blade]

afaik binding for button is for its text

[scenic brook]

Changed my code according to your suggestion, and now it seems to work better:

rootElement.schedule.Execute(() =>
{
    foreach (var child in valueField.Children())
    {
        if (child is Foldout foldout)
        {
            foldout.Q<Toggle>().style.display = DisplayStyle.None;
            var visualElement = foldout.Q<VisualElement>("unity-content");
            if (visualElement != null)
                visualElement.style.marginLeft = 0;
        }
    }
});

Thanks. ❤️

[flint bough]

If I want to have an element pulsate (so basically apply a sin-wave to the size of the element for a short period of time)
Can I do that within ui toolkit or should I use a tweening library and do it from code?

[scenic brook]

Here is the documentation about this topic:
https://docs.unity3d.com/Manual/UIE-Transitions.html

[flint bough]

yes I know about that, but I do not see how to implement a shake/pulsating animation using that. I would still need to change the scale/size etc multiple times and then the only thing I can do is have uss handle the transition instead of transitioning myself

[flint bough]

Or do I missunderstand something. Is there a way to achieve this using transitions?

[scenic brook]

I think it's quite versatile (yet I feel like it still needs some features). Here is an example of how to configure pulsating:

// Cache configuration that could be applied to multiple VisualElements
List<StylePropertyName> buttonTansitionProperties = new List<StylePropertyName>{ new StylePropertyName("scale") };
List<TimeValue> buttonTansitionDurations = new List<TimeValue>{ new TimeValue(0.2f, TimeUnit.Second) };
List<EasingFunction> buttonTansitionEasing = new List<EasingFunction>{ new EasingFunction(EasingMode.EaseInOutSine) };

// Apply configuration
button.style.transitionProperty = buttonTansitionProperties;
button.style.transitionDuration = buttonTansitionDurations;
button.style.transitionTimingFunction = buttonTansitionEasing;

// Start loop
bool easeIn = true;
button.schedule.Execute(() =>
{
  button.style.scale = easeIn ? Vector2.one : Vector2.zero;
  easeIn ^= true;
 }).Every(300);

You can configure it differently depending on your needs. .Every can be also replaced with some other methods if you need something different for different purposes.

[flint bough]

Nice thanks! But yeah, basically you have to call the size changes yourself via code in the last lines right?

Is there a reason the transition duration 0.2f is not synced up with the scheduling 300?

I guess 300 is 0.3f?

[scenic brook]

Yes. When configured properties are changed, the VisualElement automatically animates itself.

[flint bough]

could I just change the size 5 times on the spot without the scheduling and it would queue up the transitions?

[scenic brook]

Not really. I haven't tested what would happen if it was synced. Feel free to test it yourself.

[flint bough]

but isn't 300 = 0.3f? So basically the transition already ends after 0.2 seconds, then you wait for 0.1 seconds and only transition back then?

This is how I understand the code but it seems I misunderstand it, since then the animatino would be choppy right?

[scenic brook]

Yes. My sample code had a short breaks between animations.

[flint bough]

ah ok

I'll try what happens without scheduling

if I just change the property 5 times on the spot

[scenic brook]

I think the last applied value will be animated. If you want to sequence different animations, you would probably need to schedule them during execution. I haven't played much with this system though, so I might be wrong.

[indigo goblet]

ok i'm confused.

I am in unity 2021.3, trying to make a UXML for a SettingsProvider.

I can create the UXML in uibuilder with no issues, but when i try to open the UXML file from the windows explorer the contents of the file are completely different from the contents inside UIBuilder, i see none of the controls nor containers i've created

here's what i mean, btw.

is there any particular reason for this behaviour? i just want to add a USS file thats inside the package cache, which i cant do that from inside the UIBuilder because it deems the file "outside" of the project

turns out unity does not like it when i open the UXML file thats inside an embedded package

for... whatever reason it causes this descrepincy

which... is odd

[languid pond]

Hi. Is there a concept (I was not able to find one myself) to load a component into a visual tree, that has it's own scripted logic? I dont need a custom control in the sense to manipulate properties in the editor. I just want to load the control (that has an own visual tree with multiple components, e.g. buttons) and set a property in c#, rest should be handled by the component. Creating an instance of a VisualTreeAsset lacks the scripting part.

[hybrid crystal]

hey, unfortunately there isnt. You'll have to either create a custom control or do it in from a controller class

[woeful mauve]

Imagine a world where Unity use Razor instead of Toolkit for UI when CoreCRL ready 😳

[merry mountain]

Okay does anyone know why NavigationCancelEvent isnt working when i try to listen for it on my root element?
I have added a Input System UI Input Module but when i try to input cancel nothing happens (debugged the event and its never received)

[merry mountain]

okay so i have to set the EventSystem to have the ui document object as selected

[floral pendant]

Hey all! Been in Unity a while but I'm new to UI Toolkit. I am trying to programatically temporarily hide an element in my UI. I am using .style.display = DisplayStyle.None;. When I want to re-enable it, I change to .style.display = DisplayStyle.Flex, but it does not come back (and does not show in debugger). Is there a nuance I am unaware of that would explain this?

[merry mountain]

No it is not a nuance something else must be happening

DisplayStyle None/Flex only hides the element, it doesnt remove it

can you provide some part of your code to help you out more?

[floral pendant]

I realized as soon as I walked away that I was calling Clear() on the container once the other class was done using it, so that explains that. I just changed that code to use .RemoveFromHierarchy(); on the elements then null its references. Is that a decent way to dispose of elements I no longer need? Or is there a Destroy() equivalent?

[rough scarab]

They're just normal C# classes, so yes that's how you dispose of them correctly

[verbal epoch]

Hi!!! I have a custom inspector that I created from the Unity editor with the new UI Toolkit.

But now I want to add fields (ObjectField) to the Custom Inspector using a script when clicking a CustomInspector button... But these Field are cleared when I select another object. And I have to recreate them.

How can I save the changes I make from the script in the VisualElement of my customInspector?

I've looked in the documentation, but I haven't been able to find how to do it.

Thanks in advance.

[scenic brook]

If you use custom fields, then sometimes you want to register callbacks and assign a new value to the edited objects whenever such a callback is called.
https://docs.unity3d.com/ScriptReference/UIElements.CallbackEventHandler.RegisterCallback.html

Personally, I find it comfortable to store data inside of ScriptableObjects, that way any modifications are applied directly to the asset. In other scenarios, you might want to make sure you're actually modifying the edited asset instead of its copy (you would probably struggle the most with structs). In some scenarios, you would want to use methods such as .FindProperty or .GetArrayElementAtIndex.
https://docs.unity3d.com/ScriptReference/SerializedProperty.html

Also keep in mind that sometimes you need to set asset dirty and/or save the asset manually.
https://docs.unity3d.com/ScriptReference/EditorUtility.SetDirty.html

[shadow quartz]

@fervent echo Continuing the UI conversation here.

For the topic of performance of UI being effected by render pipelines there are a couple things to think about. These you can actual see in a filtered view in the profiler.

Starting with Camera stacking. If you have HUD UI that uses camera stacking different render pipelines handle it differently. Some can batch the UI render state and just overlay it so it doesn't need any new calculations until the UI values is changed like layout from text increase, resolution change, or certain styling properties.

If you use URP for example with camera stacking where one camera is marked as an overlay you can make it be the only camera that renders UI Elements.
In some cases you can seperate the UI that changes like life counter, scores, and so forth from the still images like HUD icons to make it where the never changing UI elements or GUI controls never need recalculation saving on render and small amount of processing performance. Haven't ran into this myself so don't know how big of a performance hit it was, but some mobile devices have reported having worse performance during UI events. Specially during the OnEnable calls or the calls where the UI elements are first rendered and attached to panels or canvases.

From Unity 2023.3 into Unity 6, the Unity devs have started to do stuff with what is called Render Graph where PSO aka Pipeline State Objects have started to be introduced.
I bring this up because Unity now has Shader Graph built support for UGUI, but not yet for the UI Toolkit. Depending on how this is implemented or if they already got some of it implemented at all for UI yet, the UI Toolkit could be behind in some scenarios while ahead in other scenarios during the initial render steps or when reenabling if one had cached data already to speed up the rendering being turned back on.

https://discussions.unity.com/t/graphicsstatecollection-tracing-and-warmup-in-unity-6/951031?clickref=1101lzELUpI7&utm_source=partnerize&utm_medium=affiliate&utm_campaign=unity_affiliate

This makes it where in some cases the maximum frame time could be vastly lowered during rerenders of UI if they got it for UGUI. Haven't checked UGUI updates lately in Unity 6 patch notes. This could also be eventually added to runtime rendering of UI Toolkit as well to improve performance.

Edit: For maximum frame time think of cases where you are loading into a new area and you get that initial frame lag during loading or the first render of objects. This also could happens when completely switching scenes and not just move from area to area within a scene.

Turned off some caching and saved shader data to show what it looks like for the first frame if you don't catch that render information.

Anyways this is just a small amount of things that could effect UGUI vs UI Toolkit performance difference.
@fervent echo If there is anything you want me to test or look into I could try and test it. Due note I mainly work in URP, but I could try out other pipelines.

Oh and when I mentioned batching static UI. If I remember right this is the profiler marker if you ever want to see it in your profiler.

[fervent echo]

this all sounds so complicated 😅 is ui toolkit more performant than ugui by default?

[shadow quartz]

For sanity sake reasons I am going to use Unity 6 and not worry about other versions of Unity and focusing on URP.
This is what I saw and again I would have to check the new updates for UGUI in Unity 6 to make sure this is still accurate.

TLDR: UI Toolkit wins more often in my use cases when there are a lot more child objects with values being changed or layouts being changed while UGUI has better over all batching and culling.

Performance on first load up or recaching.

UI Toolkit kit won in most areas as long as you don't have a crap ton of binded properties, but in most cases when equal amount of properties are binded it wins during first load up.

When doing batch calls for frame updates UGUI wins a little bit more often with Camera stacks as along as the canvases don't have a crap ton of child objects to go down and update the layout. Some layout updates are not batched in UGUI even if a child UGUI had no changes, but the parent object has been changed, the child still gets a layout call.

Don't know about culling performance for when one UI element renders over another, but I know UGUI can do culling if enabled as long as the full underneath element is not seen.

[fervent echo]

interesting, does the ui toolkit also recalculate everything every frame like ugui does when you dont split it into lots of canvases? because that would be a big performance win

[shadow quartz]

So for the UI Toolkit when talking about runtime performance there are a couple main things to think.
Edit: Please note there will always be some areas this information is not 100% accurate in so just aheads up.

TLDR: There are ways to prevent that from happening and make it where the UI Elements only update as needed during callbacks or certain event calls. This also includes a way to make all UI need only a single draw call with panel settings.

For caching to prevent frame updates every second you can do a couple things with UI Toolkit to beat the performance of UGUI and prevent it from needing updates every frame.

There is a function called generateVisualContent that is a delegate for Visual Elements. This is not called every frame or every render refresh. It is only called when a repaint is needed do to layout or when certain properties change. You can use this to have code only run when the layout has been changed and not every frame update.

For the most part you can initialize most of a UI element in the constructor and register callbacks during onPanelAtach.
This way you only do certain UI Element functions once without needing to update per frame.

Same thing with Registering event callbacks. If you only want something to happen during interactions with UI just using those can help prevent some unneeded frame updates as well.

With panel settings. As far as I know this hasn't changed, but this was the case in 2022 LTS early releases I will need to double check this.
Most cases the UI Toolkit can batch frame data for UI Elements based on the Panel Settings.

If multiple documents share the same instance of a panel settings they can be batched while UI Documents with different panels setting instances are not batched with each other. So if you can make it where you have one panel settings for your runtime UI it is a lot better for batching static draw calls to prevent rerenders via frame updates.

If you are using Sprite Atlas for images UI Toolkit has static and dynamic atlasing for panel settings. Each panel setting has one large texture for dynamic atlases and not sure how many for static. The dynamic atlas is populated as elements are added to the panel. Depending on your settings for the atlas if you are using images for the UI backgrounds you can save performance there compared to UGUI performance for updating rendering for UGUI controls with images assigned to them.

Here is a slightly older post, but there is a response from a Unity dev going over some of the panel batching and some of the atlas settings for performance.
The Unity dev response is the second message in this forum post.
https://discussions.unity.com/t/ui-toolkit-runtime-ui-performance/892273/2?clickref=1100lzzsDYjr&utm_source=partnerize&utm_medium=affiliate&utm_campaign=unity_affiliate

[fervent echo]

damn ui toolkit sounds super complicated, with ugui you can just do create > image and create > button and thats basically it. from what im seeing ui toolkit is 100x harder to use and learn

[shadow quartz]

So the things mentioned here are the behind scenes stuff of the UI Toolkit. You don't have to worry about it honestly. Most of this is done automatically for the user, but just gave the information for context.

There is more going on behind the scenes for UGUI actual which is why there is a lot of performance hits when changing a parent canvas.

Also most of the runtime things people have to use is actual just an set of options in the inspector.

The generateVisualContent and callbacks are if you want to code custom stuff for customized UI controls and elements.

[fervent echo]

so when you said there are ways to make ui toolkit more performant you meant unity themselves could do them but not us?

[shadow quartz]

And thankfully Unity has them done by default already in most cases.

For users the main thing to worry about is having to many Panel Settings that could break batching or for some reason doing something that changes resolution or layout of the UI, but for the most part that wouldn't be the case if there are just changing text, or common properties.

It basically makes it where more things are done for users without us having to worry about them and less chances we shoot ourselves in the foot.

[fervent echo]

that's a relief, still unfortunately have to learn web development though 😅

[shadow quartz]

Well honestly no. I think a major misconception is a lot of people hear the words web development and think stuff like JavaScript frameworks like React, Vue, or Angular.

Honestly it feels like Unity UI Toolkit is closer to .net MAUI which is a .Net Framework that uses C# and XML just like how Unity uses C# and UXML.
Coding in a .Net based UI framework is a lot more approachable for Unity devs than a JavaScript developer.

To be clear you can 100% code UI Toolkit in pure C#. This includes the Layout and styling. You don't have to use USS aka style sheets or a visual tree asset aka UXML or what is made with the UI Builder.

If you code the UI Toolkit with C# mostly it feels like monobehavior, but instead of stuff like OnEnable, Update, or FixedUpdate you got.

The class constructor for declaring initalization which can replace Awake/Start.
Depending on your use cases, but most of the time the onPanelAttach and onPanelDeattach methods act like OnEnable and OnDisable.

For update you have the MainGui series of callbacks to use.

Also I don't know why this isn't mention too often, but depending on the type of UI Toolkit element you are using you can still use OnEnable, OnDisable, and Update in the code for the UI Element.

[fervent echo]

i like ugui's style where i move the thing on the screen, its very unintuitive to type in all the dimensions and coordinates of everything in text and then having to check if i like how it looks. i guess that thing you mentioned earlier where you can still do that with ui toolkit fixes that issue though but idk how well that works

[shadow quartz]

Have you seen the UI builder yet with it's drag and drop options without code.

[fervent echo]

no i haven't! did it come with unity 6 or has it always been a thing?

[shadow quartz]

It was actually the very first release years ago. They just keep updatng it. and adding more options.
With the UI Builder you can create style classes, apply them, drag and drop element positions, and set default setting like text, background images and the such without code. There is a panel in the UI BUilder to also show you the code it makes as well, because it generates the code for the UXML (structure of the UI) and the USS (styling of the UI). There is an option to enter runtime preview mode to see how it looks in runtime mode aswell.

Also built in visual animation tool for your UI. Due note they are still adding more features to this, but right now you can choose different properties and create transitions in the UI Builder visually without code.

Also due note like Unity Gameobjects there is a prefab like system with the UI Builder as well. So you can create UI pieces and make them as prefab like objects.

[fervent echo]

ok that changes a lot actually, i thought i had to do all that via text like a web developer. this makes transitioning to the ui toolkit way less painful imo

[shadow quartz]

Okay not sure if videos are allowed in the Discord so not sure if my next message will be blocked, but it is just a small minute video showing the UI Animation, UI Prefab, and a couple other things as well.

Edit: Oof Discord compressed the crap out of the video sadly.
Going to try a reupload

Welp anyway just a small screenshot image instead.
Bottom right has the fold out with the Animation Transition setting.

[fervent echo]

this entire screen looks confusing, so many things 😅 ugui was much simpler, just a recttransform component and image and button components and thats basically all you needed. and oh wow easing functions are built in? ugui did not have that

[shadow quartz]

Yeah, Due note most of the time you don't need half these opened. I am just making a complicated Sprite Editor with Animation tools built in.
If you are doing RunTime dev you will have a lot simplier life.

Breaking it down and knowing what they are makes it a lot simplier.

The bottom two windows can be closed if you don't need to worry about seeing the code in editor every moment.

The bottom left is your premade UI library or the window that shows all the UI prefabs in your project so you can drag and drop them into the UI Builder.
The bottom left can just be thought of as your UI Builder project view with the list of assets.

Middle left is your heiarchy so instead of a scene view you only see the UI Heiarchy.
Right is your ui elements inspector showing all possible styling properties and the default variable values for it like text, background images and so forth.

Once you realize it is just a different view that combines a heiarchy like scene view, a project view in the form of a UI Library window, and that the properties panel is just the inspector it makes it a lot easier to get started and go make stuff.

[fervent echo]

i see, thank you for the explanation, learning the ui toolkit doesnt seem as bad as i initially thought now 👍

[solid copper]

How can I have these buttons all have the same width and same font size

To elaborate I don't want to hard code values, and I work more with percentage than pixel size

I could just go in and make the uss property to 16.67% width but I want to know if there is a way without doing it like this such as how using grow works

otherwise how do I make sure it doesn't grow to size of content but the content fits the space given

[shadow quartz]

Is this for runtime or editor UI?
The only difference for answer would be simpliest way to set same font size.

[solid copper]

Runtime

Tab container

Tab Button

[shadow quartz]

Common thing is to have a parent visual element act like a button container.
The button container set as a Flex element.
Set the button as the child of the Button Container.
Have the buttons have the same flex grow/flex shrink property.

The grow and shrink property controls how elements shrink and grow in size compared to their sibling UI elements in a flex container.
If they all have 0 grow/shrink than they will make themselves all take the same layout space as long as your text doesn't make the button sizes change like one button has a lot more text than another.

[solid copper]

So instead of something like this

[shadow quartz]

That works if the tab is your container that is flex based

[solid copper]

ah ok

[solid copper]

These are the properties I've changed for the parent element

[shadow quartz]

I would be careful relying on setting the inline styles properties of the UI Elements. If you have elements needing similar styling it would be faster, easier, and less of a headache to change the value of all of them by just using a style class selector.

[solid copper]

I am doing that for the individual buttons

[shadow quartz]

Your wanting something like this right

[solid copper]

Which is this

[solid copper]

Essentially yes

This is the inspiration

[shadow quartz]

For the button width instead of 16.66% try to set it to auto.
Auto will make them adapt to the size of the container while automatically checking the usable space of the container.

[solid copper]

Ok, only thing now is that the longer words are wider buttons

Should I unset the flex value in the buttons?

[shadow quartz]

That is what I was meaning by bigger words need one more tweak. There are a couple ways to do it.
Making a visual example and screen shotting it.

[solid copper]

And this is the containers values, I'm using inline there since it's just the one element

[shadow quartz]

So just making sure for this example. You want something like this.
Where different buttons have different text sizes and they adapt to the same width and font size based on the text in them.

[solid copper]

yes

[shadow quartz]

No matter if one has less text than the others.

[solid copper]

yes

[shadow quartz]

For the buttons you can just set the Flex basis. This is the starting size of the ui object or buttons in this case for a flex container.
The grow and shrink values act like a multiplier for the basis initial value.

[solid copper]

I see

[shadow quartz]

To have the buttons be uniformly spaced out in the container for the buttons or the flex container object.
You can set the Justify Content which controls the spacing of children objects.

[solid copper]

Thanks

[shadow quartz]

See if that works for you.

Due note if one buttons text becomes to big you might just have to adjust the Flex Basis value a little.
Once you get the flex basis value to what looks nice you don't have to worry about the buttons in most cases changing anymore in this scenario.

[solid copper]

Looks to be working

[shadow quartz]

Some people will use the button with the largest text as the base for choosing what Flex Basis is needed.
Makes it easier to figure out what value works the best.

[shadow quartz]

Glad that works. If the flex container or your tab container changes sizes it should auto adjust the buttons positions and sort them evenly for you as well this way.

[solid copper]

I'll test it out a little

[shadow quartz]

Sounds good. Glad I could help a little bit.
Edit: If you need anymore help you can just ping me. Just a warning for some reason Discord can lag for pings on bigger servers so might take me a second to see it.

[verbal epoch]

thanks for the response. However, what I do is create an ObjectField by script when I press a button in the same CustomInspector... (I do this without problems with a root.Add(objectoField)), but I can't get that "visualtree.field" generated by the script to be maintained in the custom inspector.

Currently, when I generate the Field by "pressing the Custom Inspector button", it remains only until I select another object, because when I select the CustomInspector object again, the field is no longer displayed.

Sorry if I didn't understand your previous answer correctly.

greetings

[scenic brook]

So the problem is not updating an existing asset, but simply remembering the state of UI? Unity has implemented a way of toggling automated serialization of some control's state, such as scroll positions or foldouts states:
https://docs.unity3d.com/Manual/UIE-ViewData.html
https://discussions.unity.com/t/can-someone-explain-the-view-data-key-and-its-uses/782670/2
However, it probably won't work for non-supported controls (such as creating of new ObjectFields). Perhaps you could take a look at the source code of this feature and figure out how to extend it to meet your needs.

When I create customizable editor windows, I store my settings in PlayerPrefs, which is good enough for a small number of settings. Then during window Initialization, I get the PlayerPrefs value and generate the window accordingly. However, PlayerPrefs aren't meant to keep a huge amount of data, so it's worth keeping such data in some other form. Multiple assets generate some sort of ScriptableObject to store such settings, which is especially handy if you want them to persist and be shared with your coworkers through your version control system. Such ScriptableObjects are usually treated as singletons and the reference to them is stored as a static reference. Attribute [HideInInspector] can be useful if you want the modified data to be hidden from users.

[verbal epoch]

Yes! Exactly!
Thanks for the reply. I see that it's going to be more complex than I thought...
I'm going to read the documentation you sent me to see if I can solve my problem.

When you say "look at the source code of this function", what function are you referring to?

Regards

[tired pawn]

new to UI Builder. Why does my enum not stay within the panel?

[scenic brook]

https://docs.unity3d.com/ScriptReference/UIElements.VisualElement-viewDataKey.html
This one

[small wigeon]

How do I look at the contents/source for ToolbarDark.uss?

[solid copper]

is there a solution to removing the blue outline on focused elements yet? I couldn't find any solutions in the forums, though I am using Unity 2022.3.32f1

[rough scarab]

Use the UITK debugger to find out what the selector that does it is, and override it with your own

https://unity.huh.how/ui-toolkit/styling

[small wigeon]

Just to be clear, this is an internal unity stylesheet, I can't find it's source online

[strange ivy]

I have been facing an issue with Input events not triggered for buttons I am using both Input System and deleted the Library folder but no help.

Any idea why would the input event stop triggering. I am not sure what caused the issue but it was working all the while up until now and suddenly I dont see the events triggered anymore

The input for the controls were working up until today and I am not able to figure out what changed now the control events are not working

[dark blade]

the problem come from your enum field, its has min width for the label

[tired pawn]

how would i change the min width for the label?

[tired pawn]

ok I was able to figure it out and make a bit of progress - but have now encountered a different problem

these text fields - seems they're too small and the margins make it not display the text properly

[hollow grove]

how can I modify that object please

[strange ivy]

Bump

[dark blade]

first of all are you use this for runtime or editor purpose?, if for editor then switch the unity default runtime theme to active editor theme or dark editor theme since you use dark mode to see the real style of your UI

the second, the input text field for integer field are the element i highligted in my picture, try target that in your uss, so in your case i guess .textfield > unity-text-input and style there

[dark blade]

and this also answer your question @hollow grove

[tired pawn]

Thanks so much. Yeah it's for runtime purpose. Am not familiar with uss so I'll have to research how to do it

[languid pond]

Hi. I was wondering, if runtime support for emojis (emoji fallback) is somewhat working for some1. I did the steps latest posted in https://discussions.unity.com/t/emojis-support/870313/36 and have basically the same result. Working in the UIBuilder, but not in the Simulator or Game.

[opaque quarry]

Hey guys, Im quite new to UI toolkit and I have an issue with the dropdown field. I am trying to create a settings menu where the player can change their keybinds. I have all the choices written out but when I go in game I can't seem to click on them and see the options. I can click but nothing happens. Im not sure what im missing. Any help would be greatly appreciated

[rough scarab]

If you can't interact with any controls go through this list: https://unity.huh.how/ui-toolkit/input-issues

[thick widget]

How did they added here others uxml in a uxml?

[lusty dagger]

Has anyone used PrimeTween with UI Toolkit. i'm not sure what functions to use to animate the UI elements

[rough scarab]

Dragging from the Project tab in the Library at the bottom left

[high nexus]

I'm learning Unity with a focus on UI design using UI Toolkit. I've been using Figma for prototyping designs. Yesterday I discovered that there are several solutions available for converting such a design directly into Unity. Does anyone here have experience in both Figma and UI Toolkit and can suggest a solution? For example, there is a Unity Importer plugin, a plugin named FigmaToUnity, and others.

Another question: I haven't switched to Unity 6 yet. Does it support world space UI for UI Toolkit yet? I was watching the Unity Engine Roadmap video and saw world space UI toolkit advertised.

[rough scarab]

No, that's a Unity 7 feature (unless they want to get it in for a 6.x release)

[rough scarab]

I've not tried a solution yet and am just doing it manually (probably are forced to as the UI artist refuses to use any groups lol)
But it's also on their own roadmap to support importing from Figma, which I imagine will also be Unity 7

[round temple]

Man this unity ui scaling is making me go nuts...
I make some ui in ui toolkit which is called to 1920 x 1080 and when I see it in game, the ui scaling is different. Then I change it from free aspect to 1920 x 1080 and it works fine... But my fps drops badly when I'm on that resolution (or any resolution apart from free aspect) also, when I build, it remains on free aspect

So basically, how do I create ui to scale to free aspect ratio

[teal dragon]

Is this .button tag meant to be there?

[regal quarry]

Built-in buttons should have all the required tags/classes already.

[teal dragon]

I was following the tutorial aha, but why is the .button tag there? It looks out of place. Nevermind, just opened up the toolkit again and it isn't there

magic

[regal quarry]

I thought you took a screenshot while dragging it with the mouse. It shouldn't be there otherwise.

[teal dragon]

Nah i wasn't dragging or anything ahaha, it was just glitched, gone now though! Also I can't find an image field in the library

[regal quarry]

There's no image element, as any visual element can have a sprite/texture attached as the background

[teal dragon]

Ohhhhh okay you use the visual element, got it

cheers!

[teal dragon]

I have a visual element in the centre and then another visual element the child of that, which is all good, but i try putting another visual element outside of the first one and it changes where the centre point is

Without vs with third visual element

[dark blade]

i don't think its exists out of the box, but you can use Tween.Custom() fill the tween setting, then use on value changed on tween for manipulate your ui

[dark blade]

because the third visual element are taking up the space, see the flexgrow is 1

[teal dragon]

If i wanted different UI on this do i need an entire new sheet?

[dark blade]

explain how you want your ui structure to be

[teal dragon]

So there is a little dot currently in the centre, and then i would like an inventory bar

[dark blade]

you can make either the dot or inventory bar position to absolute instead of relative

or a better more, seperate its uxml tree, i see no corelation for a dot(i think this is crosshair) and a inventory in same ui hierarchy

[teal dragon]

Yeah the dot is my cross hair. I haven't used this system before so i'm still learning how to use it haha. So i create a new uxml file and then do i add a new "UI Document" component to my UI gameObject?

[dark blade]

i think you can use many UI document, but just put it in different game object, or you can make one main UXML files, and all other uxml or custom control be child there, just use margin, padding or positioning absolut the set its position wherever you want

[teal dragon]

ahhh okay okay, thanks

[kind whale]

Hello. does anyone know how to make a button animate with clicking?

I know :active exists. but it seems to only carry out the transition if I hold the button.

:focus is cool, but that keeps the transition unless i click away

i want to click once quickly, and have it carry out the transition or animation

any ideas?

[unborn bluff]

Hi. I'm using the Mega City - Metro Demo. How do I change the color of all the text in the Main Menu "Options" settings, so that they can be seen clearer considering the Game Logo is in its background?

@coarse granite On the Demo's Git page, it shows that You are one of the Contributors for the Mega City - Metro Demo project for Unity...can you Please help me regarding my question above this message?

[coarse granite]

Hey! You need to change the USS styles, depending on the Control.
There is a file called metro-styles.uss , and there you can change some styles to match your needs.
Also, selecting the UI Control, you can see the styles applied to it, and change them in the uss file or directly in the UI Builder.
For the options there, you would need to change 3 styles:

1. .custom-selector .unity-label
2. .custom-toggle .unity-label
3. .custom-slider .unity-label
   Good luck!

[unborn bluff]

@coarse granite Thank You. I was able to change the color, but I would also like to have all the settings in the menu moved to the right of the Logo picture, instead of all the settings words being directly covering the logo picture. How do I achieve this goal?

[coarse granite]

You will need to play with the styles. This is very specific for your design.
https://learn.unity.com/tutorial/ui-toolkit-first-steps
https://docs.unity3d.com/Manual/UIE-USS.html

[unborn bluff]

Thank you

[coarse granite]

Similar to the screenshot that I sent you before, you can select the VisualElements in the Hierarchy and check what styles are using.
And then modify those styles.

[unborn bluff]

I tried, but I can't seem to figure it out, unfortunately.

[shadow quartz]

Hello Unity devs, I need some feedback help if anyone is okay with looking at the two pictures.
I am currently looking for feed back on how I am doing some in file documentation.

Currently working on the last major step before a public release of a set of custom Sprite Editor Tools I was making for the community to use for free with no credit needed to be given or anything. I am working on figuring out a good way to document classes and features in the files without people needing to leave the IDE so they can just see a quick example of how to use things.

Could you tell me how these look to you. Both these are in the same file.
Basically I have a summary describing the class and what it can be used for with mentions of where there are used if people need to look for real examples in my tools.
Than after the summary I have an example of how to create a new instance or how to use the class and it's values from another class.

Due note I realized after taking these screen shots I should add some information on the EventModifiers and passing in a mouse button in the part where I declare the MouseDragManipulator variable just in case people haven't used the input event filter system the UI Toolkit has.

Edit: Also ignore the typos in the remarks area. Fixing them right now.

[tough tusk]

What would people say the current state of the UI Toolkit is for in-game UIs? I saw in the unite conference stuff that UI Toolkit was mentioned in reference to Unity 7 (which I figure it still many many many years away from even being able to use it in beta form) so I am curious about this since when I last heard (which is probably 1+ years ago since I took a break to play around with Godot) I thought it was pretty close to the "current" system, just missing a few minor things but was usable for many use cases.

I don't have many advance requirements from a visual standpoint (for example, I don't care about being able to use shaders or anything like that), the requirements for me would be:

• create interactive elements:
  -- buttons
  -- sliders
  -- radio / checkboxes
  -- input fields
  -- drop downs / selects
• be able to click and drag for a number of actions like:
  -- move ui windows
  -- resize ui windows
  -- move ui elements (like in inventory systems)
• scrollable content
• handle dynamic content (ie. an parent elemnt can grow / shrink based on it content)
• be able to use images to create custom themed ui for all ui elements (windows, button, etc...)
• custom mouse cursor
• ui element support for both screenspace and world space (only 2d support)

Would the current state of the UI Toolkit check all of these boxes?

[ancient shale]

The current ui toolkit does not support z-index

[tough tusk]

how does it handle if 2 ui element are in the same space? do it order by order in tree? is it consistent in how it handles it however it does?

[rough scarab]

Look at the feature comparison that's pinned to this channel

Order in the tree is the only ordering method inside of a document.
There is no worldspace UI yet.

[tough tusk]

Hm..., looking at that list it seems only the worldspace ui is not supported for my requirements so I guess I can just use the uGUI system for that part, thanks for the info

[teal dragon]

How do i change the colour of the text in the toolkit using code? I'm not sure how to do it

[dark blade]

target the color uss property, using USS

like if you want change label color, then in your uss

.unity-label
{
  color: red
}```

[thick widget]

Heey what's up? I really need help with this... I need that padding to crop the char in every moment so i can change the screen size to a portrait one and mantain the buttons/text scales. How could i do that?

[thick widget]

Or for example here... how could i fixe that?

Could someone help me a bit with that even working directly in the uxml...?

[kind whale]

anyone have issues with UIToolkit not firing transition events if a transition happens too soon after creation?

[kind whale]

I have an issue where if I try to change the USS style to transition a LayoutElement too quickly after its creation, the TransitionRunEvent, TransitionStartEvent, and TransitionEndEvent wont fire

[teal dragon]

How do i do it with a c# void? like:

void changeColor(Color color)
{
   label.color = red;
}

[kind whale]

Depending on how your stuff is, u grab a reference to your DisplayElement, and set it via _displayElement.style.color = color

[rough scarab]

Also worth noting that a method/function is not called a "void", void is the lack of a return type, nothing more

[teal dragon]

Apologies yes, i like calling them voids aha

[teal dragon]

public List<Label> criminalTexts;
public UIDocument uiDocument;

void Start()
{
    var root = uiDocument.rootVisualElement;

    Debug.Log(root.Q<Label>("Victor"));
    criminalTexts.Add(root.Q<Label>("Victor"));
}

This is returning an error on line 47 which is where i add the label to the list of labels, i can't get past that currently

[kind whale]

I can't exactly help you with syntax easily, u could try asking chatgpt to help u

Utterly useless for many things, but great for syntax sometimes

[teal dragon]

The debug works fine though, i can do it just like:

public Label label;
void Start()
{
   var root = uiDocument.rootVisualElement;
   label = root.Q<Label>("Victor");
   label.style.color = Color.red;
}

[shrewd tinsel]

how do i get rid of this giant annoying blue block T

[rough scarab]

This is UGUI, ( #📲┃ui-ux ) not UIToolkit
But here's your answer: https://unity.huh.how/gizmos/disabling-icons

[shrewd tinsel]

thankyou, I finally did figure it out

with help in beginner code

[thick widget]

I really need help with this 😢

[thick widget]

@limpid grove sorry to ping you, but you helped me soo well the last time with ckeckboxes... Could you try to help me with that?

[limpid grove]

No worries, let me see

[thick widget]

Thankk you soo muuchh!! would you prefer taking a look at it directly from a .unitypackage?

[thick widget]

Did you get anything? 🤨

[limpid grove]

1. Why you want to do both rotations? Most of modern games are focused only on one.
2. Idk if there are 2 different setups for those. UI Tooklit is still fresh and either you would have to have 2 different UI documents and just swap those on when person rotates phone or in 1 document but turn on visbility depends on rotation. This is done from code

[thick widget]

Oh, nice tip, thanks! ill try to create different uxmls and create a system to swich them by code in different sizes

[proud horizon]

Im trying to make a health bar but whenever I put my fill into the slide it becomes way bigger(vertically) then the healthbar, can someone please help

[proud horizon]

i found a fix

[gritty crescent]

I've got a render texture that I need to stay put on the lefthand side. However, it's in a vertical flex group, because of a dynamic gameplay element that appears above it. Right now, on ultrawide, it will sit in the center. How can I have it glued to the left side of the screen, no matter what the monitor setup is?

[kind whale]

Does UIToolkit support automatically scaling text within its DisplayElement?

The text size % doesn't seem to reflect its own size, rather the entire screen

[dark blade]

try use position: absolute

[lone island]

Unity.AppUI Navigation sample, I'm unable to set the HomeScreen background to transparent:
I added
.background-color-transparent {
background-color: rgba(0,0,0,0);
}
to the AppUI.uss
and added
AddToClassList("background-color-transparent");
in the HomeScreen constructor but it's not working. help

[teal dragon]

How do i change a buttons text at runtime using the unity toolkit?

[rough scarab]

Find the button with a query and set its text property https://docs.unity3d.com/ScriptReference/UIElements.Button.html

[teal dragon]

Amazing thank you!

[thick nest]

I don't think App UI NavigationScreen element has a background color. I believe you are trying to remove the background of the Panel root element.

.appui-panel {
  background-color: rgba(0,0,0,0);
}

I would also suggest to familiarize yourself with UIToolkit Debugger in order to identify what styling is applied on elements.

[teal dragon]

Player opens menu by pressing "J"

When i press play and then "J" it looks like the first image, then when i press "J" to get out of the menu and then enter it again it looks like the second image. To enter and exit my menu i am disabling the gameObject

[lone island]

I already set the root panel with the transparent background color. I'll keep looking.

[lone island]

I have an Unity.AppUI.UI.IconButton selected in a Unity.AppUI.UI.Panel of a UIDocument.uxml, how do I get an icon image to load in the UI Builder window?

figured it out, had to add the icons.uss stylesheet and type the name 'asterisk' in the icon field

[lone island]

why would var panel = root.Q<Panel>("splash-root-panel") ?? root.GetFirstAncestorOfType<Panel>(); be returning null?
I have the UI Kit sample that works on, but a similar UIDocument setup with the same .uxml setup with only a Panel and an Avatar and it doesn't find either.

[lone island]

figured that one out also, wrong UIDocument reference 😄

[lone island]

can't figure out how to make a Navigation system have transparent background.
for the UI Kit ExampleTransparent all they did was set the Panel background <appui:Panel style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0);">
I've also tried setting all of the context containers (all of the containers in the entire heirarchy) to transparent background color and still isn't transparent.. help

[rough scarab]

You need to use the UI Toolkit debugger, as it shouldn't be difficult to see what's causing such things

[lone island]

I am using the debugger. It's showing a host of 'AppUI' ViewElements like StockView, ScrollView, .appui-navhost__item, etc that are not playing well with my intent. As I keep setting their backgrounds to transparent, they still are not see-through

was hoping someone with experience would say 'add these manipulators to a style sheet and voila'

[rough scarab]

Then whatever you're doing either doesn't have enough specificity in a selector (if you're using USS styles)

Use the debugger to see how they applied that style, if it says inline then you'll have to override it via code

If it's using a complex selector then you will have to create a selector with the same specificity or above

[lone island]

the backgrounds of everything i'm selecting is transparent.. still can't see through something

[rough scarab]

Hide them completely by setting their display to none until you find what you're looking for

[lone island]

that's counterproductive

[rough scarab]

You do it with the debugger so it'll be reset later and it lets you find what you're looking for

[lone island]

as stated, already doing that, one by one finding more containers, but it appears it wasnt designed to be transparent, like the screens, scrollview and scroller

this finally did something
#appui-navhost__item {
background-color: rgba(0,0,0,0);
}

btw, telling me to figure it out is not helping

[rough scarab]

If someone is to help you they're going to debug it themselves, not just know the solution. Everyone mentioning the debugger are just trying to give you the tools to do it how we would

[lone island]

If someone wants to help, they'll bump someone on the AppUI team that knows exactly how to do it and sends word. Just typing to hear yourself type cause you're bored is not helping.

[clever crest]

Hi, I am trying to theme the unity editor with uss.
For some reason, this works:

.dockHeader {
    background-color: #000000;
}

but this doesn't:

:root {
    --background: #000000;
}

.dockHeader {
    background-color: var(--background);
}

Could somebody please explain why?
I tried different var names too, just in case --background is taken by default or sm and that's not it.
Thanks in advance!

Forgot to mention, this is what I'm following:
https://docs.unity3d.com/6000.0/Documentation/Manual/UIE-USS-CustomProperties.html

[lean barn]

I never tried to stylized the Unity editor directly but maybe the :root element is overwritten somewhere else by a Unity built-in stylesheet one.

[clever crest]

I highly doubt they made a mistake in docs, could be the case tho, idk

[lean barn]

Now that I look at the doc did you try that "var(--color-1, #FF0000);"

with your own --background variable it will tell you if it find the variable or just choose the default value

if it choose the default value it simply dosen't take into account the :root block

if it doesn't choose the default value it means your --background variable is probably overwritten somewhere else

[clever crest]

iirc I did and it just did nothing, I used #000000 as the default value and it just wasn't used

I don't have unity open and I've already hardcoded everything but yeah, this was just an interesting bug ig

[summer solar]

Yo! I'm having some trouble with layout groups and its really stumping me. Whenever i add something to Preview Toolbar's horizontal layout group, the group changes size and even pushes other layout groups around. I have NO idea what could be causing this, since theres absolutely no padding on any of the layout groups. does anyone know what's going on?

[summer solar]

I'm heading to bed, please ping me if anyone answers!

[rough scarab]

layout groups are a UGUI thing, not a UI Toolkit thing, so the correct channel is #📲┃ui-ux . Though the answer is probably that UGUI's layout is bad and buggy, and takes some very specific massaging to not have issues like this

[shy cedar]

I have a relatively complex UI, with multiple things that are full screen, with only 1 that isn't hidden at a time. Trying to get UI Builder to work with this, but when I click on a button that is showing, it instead goes to one of the panes that I have hidden. Is there a way to to scroll through what is clicked on?

[summer solar]

ah, whoops 😅

[rough scarab]

Have you set visibility to hidden, or display to none? Because hidden is still interactable, but display none is not

[fast zinc]

hi can you help me

[rough scarab]

No. If you have a question ask and wait like everyone else. It's against our conduct to ping people who aren't in convo with you

[fast zinc]

um ok calm down buddy i just spawned..

[teal dragon]

Using THIS I have created a worldspace canvas, but how do i set the size? It isn't working properly for me

[cobalt nimbus]

Hello! I need to build scrollable list with arbitrary textures fit in that list by width, meaning that I would resize texture but keep proportions.

I see that scrollable list is achieved by ListView class in UIToolkit. I also see that there is no "Image" equivalent to Image class in classic UI. AFAIK to place image I just can use VisualElement and set it's background texture through code, then I can resize element's width / height to be the same with texture. The one thing which is unclear to me is how then simply fit this element to list to have unified width?

[lone island]

I got AppUI working in my project with MVVM: AppBuilder, App, Services, etc. and Navigation all working together nicely.

[lone island]

There seem to be some bugs in Unity.AppUI 2.0.0-pre.11 which affect the AppBar:
The Drawer button is not displaying.
the NavigationScreen method are not public virtual, which they should be to allow for the overriding of the AppBar per screen context by derived NavigationScreen classes.
protected internal virtual void SetupAppBar(AppBar appBar)
protected internal virtual void SetupDrawer(Drawer drawer)
protected internal virtual void SetupBottomNavBar(BottomNavBar bottomNavBar)
protected virtual void OnEnter(NavController controller, NavDestination destination, Argument[] args)
protected virtual void OnExit(NavController controller, NavDestination destination, Argument[] args)
should be
public virtual void SetupAppBar(AppBar appBar)
...

[lone island]

In AppUI, how does one setup the destination so that pressing the escape key will not navigate away from the current destination?

[dark blade]

so this is work

        [Header("Container Settings")]
        [UxmlAttribute("Group-Label")]
        public string Text
        {
            get { return _text; }
            set
            {
                _text = value;
                _label.text = value;
            }
        }

but this is

       [UxmlAttribute("Group-Label")]
        public string Text { get; set; }

then on Constructor
_label.text = Text;
```not working, why?

so i uxml file i set the text uxml attribute to whatever i want, then when i open editor window, the constructor are getting called right?, then why the text uxml attribute are still null, not whatever i set from ui builder

[rough scarab]

Because deserialization happens after the object is constructed. The Text property is called late.

[dark blade]

ok then https://docs.unity3d.com/6000.0/Documentation/ScriptReference/UIElements.UxmlAttributeAttribute.html the unity doc i found they used auto property too, but that's it, they not showing when to assign the value to ui element, what are the solution then?, do i really need to use full property?

[rough scarab]

The property will be called after the object is constructed, so you must perform your logic after that point, or preferably, in the property

[dark blade]

something like

  var group = MyCustomGroup();
  group._label.text = group.Text;
``` this is weird, i must be super wrong, now i need to make my ui TextElement to public, and assign like that really meh...

[shadow quartz]

Anyone by any chance run into a fun bug with the UI Builder where hitting save deletes the loaded stylesheets and uxml controls after starting to crash all of Unity and than stops crashing to a visual render bug in the Editor.

At the top left you can see some of the USS styles classes like font-gold started to duplicate and some class labels got pushed out of the UI menu into a different menu inside of the UI Builder.

Edit: Even though the UXML file is showing in the UI Builder after crashing and recovering the actual file is deleted out of the project view.
And yes got a bug report going to the issue tracker for it.

[stuck ibex]

anyone have experience with overlay or editor tool fields losing focus when trying to edit? after taking certain actions ('F' to focus, or submitting a change with 'tab' or 'enter'), all fields thereafter have focus stolen, where i can't even open the Overlay menu without it immediately closing

trying to make sense of it in the debugger, clicking a float field when things are working:

what i see after getting into this state when things aren't working:

i'm unable to reproduce it in other projects using the same and different versions of the editor, so assuming it's either some particular preference or setting that's wonky, or a plugin that's particular to this project

[blissful dock]

hello, there seems to be a problem with textfield in UWP builds. Is this a known issue? I have built my entire UI in UI toolkit. Is there a workaround? I've tried using an On screen key but it doesnt seem to be working if my game is fullscreen. What are my options?

[unborn bluff]

Hi, I'm struggling with UI Toolkit and UI Builder.
Can anyone recommend some good beginner friendly tutorials out there? There doesn't seem to be anything on learn.unity.com.

[ashen moss]

Hay everyone, thought I would try picking on the collecive brain.

When building out collections of screens with UI Toolkit, is is better to:

• Build one all mighty UI Document
• Or create separate UI Documents for each screen?

This was easier to manage in the old Unity UI, but seems less clear in the new UI Toolkit world.

Or if anyone has any pointers for how to manage UI estate on a single screen in the brave new world?

[lusty dagger]

Does scrollview have a callback for when an element is added to it? It seems like it doesn't have OnValueChanged

[potent ginkgo]

Should we always be using % and getting fancy with flex and stuff or should we be using px for things?

In regards to supporting multiple resolutions

[lilac mortar]

is there something like :active but for a click with right button? when i want to use an item from my inventory i want to use right-click

[dark blade]

so i want my a button with left click and or right click, mutliple click something like that, and this can be achieve by doing this

        private Clickable clickable;
        public event Action<EventBase> OnClick
        {
            add
            {
                if (clickable != null && clickable.target == this) this.RemoveManipulator(clickable);

                clickable = new Clickable(value);
                clickable.activators.Add(new ManipulatorActivationFilter() { button = MouseButton.LeftMouse });
                clickable.activators.Add(new ManipulatorActivationFilter() { button = MouseButton.RightMouse });
                this.AddManipulator(clickable);
            }
            remove { if (clickable != null) clickable.clickedWithEventInfo -= value; }
        }
```but the how would i separate which key are trigger?, if using register callback click event, we have evt.button that tells which button are use, but how about clickable? and afaik to be able use :clicked, we need to use Clickable

[fickle perch]

does anyone have a good rundown on how UITK deals with spaces?

it's very unclear to me what space all the rects/bounds are in

for example, there's GeometryChangedEvent which has a rect

The new dimensions of the element.
which doesn't really say what the position is relative to, or if position is even populated

and then there's Visualelement.localBound

Returns a Rect representing the Axis-aligned Bounding Box (AABB) after applying the transform, but before applying the layout translation.
after applying what transform? and what layout translation, relative to the panel or relative to the parent?

and finally there's VisualElement.layout, which is the only one where it's clear what space it's in:

The position and size of the VisualElement relative to its parent, as computed by the layout system

all this is bc I need event callbacks whenever a VisualElement's bounds change in screen (window/client) space, alternatively a way to read those values directly, if it exists somewhere

I suppose I can use IPanel.Pick, assuming it's performant as heck

[solid maple]

I don't know about GeometryChangedEvent and localBound, but I use VisualElement.worldBound when trying to determine position on screen or in "panel" space. There's also some info about it here: https://docs.unity3d.com/Manual/UIE-coordinate-and-position-system.html

[fickle perch]

oooh hidden information thank you!

Use the worldBound property to retrieve the final window space coordinates of the VisualElement

testing now

seems to work!! heck yea thanks

[solid maple]

np

[ashen moss]

Thanks @solid maple , good info.
So far the best ui toolkit resource I've found is gpt/copilot. It might not always be right but usually seems to put you in the right direction

[timber wing]

Has anyone here encountered a problem with RegisterValueChangedCallback on dynamically created list items?
In this image, when you check the box, the value field should appear in the same row, but the callback is always called on the last item in the list, even though it registered on the first. The only custom element here is the PropertyDrawer around each item.
Is this a bug or am I missing something?

[hybrid rivet]

Can you guys help me my Slider bar for my health is broken

it goes empty at 0.5

[potent ginkgo]

What dictates the UI Builder root uxml Canvas Size? It doesnt appear to be in the uxml file itself and may always be different than whatever you set it to locally when working on a team

[timber wing]

For the sake of completeness, in case anyone else ever runs into this problem:
I have reproduced it in a new project and it is indeed a bug and should hopefully get fixed. The issue is here:
https://issuetracker.unity3d.com/issues/registervaluechangedcallback-gets-called-on-the-last-element-of-a-list-when-any-element-is-changed

[lone island]

found a but in AppUI SwipeView.cs when not using wraparound and more than 1 visible item:
SwipeView.cs

Line 905
From
newValue = Mathf.Clamp(newValue, 0, count - m_VisibleItemCount);
To
newValue = Mathf.Clamp(newValue, 0, count);

Line 1225
from
: Mathf.Clamp(value + 1, 0, childCount - visibleItemCount);
to
: Mathf.Clamp(value + 1, 0, childCount);

Line 1247
From
: Mathf.Clamp(value - 1, 0, childCount - visibleItemCount);
to
: Mathf.Clamp(value - 1, 0, childCount);

[dark blade]

so i make multi column list view https://pastebin.com/8aH4TzmJ , but why its not showing up in my editor window?, no error at all showing up

[chrome linden]

yo guys, any idea why the text looks weird in game view?

i haven't used unity's ui toolkit before but ive never seen anything like this happen with normal web development using css and html

herer are my panel settings:

also here are the text properties

[potent parrot]

I'm not very experienced with ui toolkit, but I wonder if it happens with other fonts?

[rough scarab]

No idea, but it's generally a good idea to use FontAssets not Font files. Also the game view scale might be messing with what you're seeing

[chrome linden]

alright ill create a font asset in case that fixes it

[chrome linden]

yup, that fixed it!

thanks

[viral marsh]

Hey, I'm having some trouble with binding in UI Toolkit. I've a custom EditorWindow and during the GUI creation I've the following code to bind a label text to a string of a plain C# object.

Label sensorName = sensorView.Query<Label>("SensorName");
sensorName.SetBinding("text", new DataBinding
{
    dataSource = sensor,
    dataSourcePath = PropertyPath.FromName(nameof(sensor.DeviceName)),
    bindingMode = BindingMode.ToTarget
});

The sensor object is an Interface, but the actual sensor passed as a dataSource is a IMUDevice.

public interface SensorDevice 
{
    public string DeviceName { get; }
}

public class IMUDevice : SensorDevice
{
    private string _DeviceName = "Unnamed device";
    public string DeviceName { get { return _DeviceName; } }
}

I did checked that I can actually retrieve the correct DeviceName from the sensor object, but in the binding I get the following error from Unity :

Could not retrieve the value at path 'DeviceName' for source of type 'IMUDevice': the path from the source to the target is either invalid or contains a null value

So it does correctly identify my sensor object as an IMUDevice but can't find the DeviceName property... Why ? What am I missing ? I've followed the example from the Unity docs here : https://docs.unity3d.com/2023.2/Documentation/Manual/UIE-runtime-binding-define-data-source.html

Thanks a lot for any help.

[fickle perch]

okay good lord is there a nice way to change the width of vertical scrollbars in UITK?

it feels wrong to make a USS selector for all like, 5 elements in there, with an explicitly set width

I feel like I'm missing some top level setting for width somewhere

[rough scarab]

Pretty sure you just have to style it

iirc though it's like two elements that have set widths

Looking at a random USS file I have, 3 😛

I hope when they introduce calc (if they ever do) they move to using more variables for stuff like that

[fickle perch]

hmmm how did you manage to do it with three?

I've set the width for all four of these and I still need to deal with the vertical margins

[rough scarab]

Ah, I may have the buttons hidden

[fickle perch]

> vertx: it's probably just two
> look inside
> it's five

[rough scarab]

Look, git blame says 11/09, and I felt it wasn't a big deal when I did it. Feelings clouded my judgement 😛

[fickle perch]

unity's slim scrollbars mocking me while I'm struggling with getting unity's runtime scrollbar to be slim

is clouding my judgment rn

[rough scarab]

I like to remove all the margins and padding and just center things with fixed-widths

I find it weird how much styling they've put into it, when it really feels like they could have relied on flex to do the work

[fickle perch]

yeah it feels weirdly hardcoded

[rough scarab]

(it might also be that they have used tools we don't have access to, like exporting it from Figma, and that caused the setup to feel that way)

[fickle perch]

i see

[fickle perch]

I really wish UITK's visual editor had proper variable support

it'd be nice if you could edit variable colors

without having to go to manually edit the USS file

[ashen moss]

Everything on the ui toolkit still feels preview, years after its introduction.
But use the ui debugger to inspect ui on screen to get a better feel for the class names for each component.

But tbh, I abandoned the ui builder tool and craft the ux in c#, as it solves the issues of string lookups for binding and events

[woeful mauve]

There is a way to apply post processing shader on ui based on uitk ?

[dark blade]

how actually bind to serialized property work on list view or multicolumn list view, when the make item are made via scripts, and not just use Uxml file, so my data are like this:

    [CreateAssetMenu]
    public class FileData : ScriptableObject
    {
        [Serializable]
        public class Data
        {
            [SerializeField] private string originalFullPath;
            [SerializeField] private string targetFullPath;
            [SerializeField] private string singer;
            [SerializeField] private string title;
            [SerializeField] private string extension;

            public Data(string originalFullPath)
            {
                this.originalFullPath = originalFullPath;

            }
        }
      [SerializeField] private List<Data> datas;
    }

and i make Multi Column list view, so for example for my singer column var textField = new TextField() { isDelayed = true, name = "cell-singer" };, i expect i can just give binding path textField.bindingPath = "singer", but they are not connect

currently iam relly on value change callback

        private VisualElement MakeCell_Singer()
        {
            var textField = new TextField() { isDelayed = true, name = "cell-singer" };
            textField.SetValueWithoutNotify("Ary Kencana");
            textField.RegisterValueChangedCallback((evt) =>
            {
                var index = (int)textField.userData;
                serializedObject.FindProperty("datas").GetArrayElementAtIndex(index).FindPropertyRelative("singer").stringValue = evt.newValue;
                serializedObject.ApplyModifiedProperties();
                evt.StopPropagation();
            });

            return textField;
        }

        private void BindCell_Singer(VisualElement element, int index)
        {
            var textField = element.Q<TextField>("cell-singer");
            textField.userData = index;
            textField.value = serializedObject.FindProperty("datas").GetArrayElementAtIndex(index).FindPropertyRelative("singer").stringValue;
        }
```, but of course if can use binding its way more cleaner right,

what should i pass on binding path?

ofc i'm not forget to give binding path to multi column list view too

            multiColumnListView = new MultiColumnListView()
            {
                bindingPath = "datas",
                ...
            };

[woeful mauve]

Anyone tell me if the “Custom UI Shading” and "World Space" features for the ui toolkit will be available in the next version 6.1 or 6.2?

[rough scarab]

There is no listed timeline for either feature

[woeful mauve]

I don't understand the features planned on the Unity roadmap

We can see what features Unity is working on, but we don't know the progress, so it could just as well come out in the next version, or in 2 years 👀

[hollow kernel]

@woeful mauve I agree, it's really hard to find information about the current state of things. I am currently trying to figure out if Unity has solved gamepad support with UI Toolkit, just found a forum post from 2023 talking about how it's unsupported, and then there is no further information.

Does anyone here know, should I be able to expect gamepad navigation to work? Are the navigation issues I'm experiencing just a "skill issue"

[rough scarab]

I'm not sure what the issues are, if you use the new input system it seems to work as expected for me

you can bind navigation to whatever you want

Also, all roadmap info is best sourced from Discussions

the threads from Unite are generally where all the latest info is given out, at least now when Unite was so recent

[lunar rain]

Assuming they are doing the development incrementally, it is really hard to estimate the progress or the work left to do. Many features can get even years of delay from the planned timeline so giving any promises would just be disappointing for customers waiting for the features. On some bigger features (like ones related to rendering in general) they might be able to give more specific timelines but for UI features that they work with very limited team size, the timeline is very unexpected. Talking about "Custom UI Shading" specifically, they are reworking the shader graph and shader system very thoroughly so it might not be their top priority at the moment to bring new shader graph types etc. before the new systems are ready.

[low yoke]

You can see what we have planned, and what we're working on at our public roadmap: https://unity.com/roadmap

This is also where you can tell us which of these things are most important to you, and suggest things that aren't there.

[woeful mauve]

Yeah but we need some explanation about the current state of features

For example, Unity reworking the shader graph, but we dont know why.. What is the problem with the current shader graph ?

Another example is about ui Toolkit, Unity deprecate old gui stuff in Unity 7, but currently ui Toolkit miss a lot of things

Why deprecate a tech by a new tech that miss 50% of the old tech features 👀

[rough scarab]

Because Unity 7 is still a long way away

and they have functional prototypes of shaders, animation, etc. Everything that's missing

[woeful mauve]

That can good to have like a progress bar of the state under each features in the roadmap, just to have an "approximation" of the dev state

[rough scarab]

The graph tech has had a bunch of iterations that they've learned from, and they've been reworking it for a very long time. They are using it as a springboard to embrace block shaders in the case of moving ShaderGraph to it

[lunar rain]

We can only assume they will implement the UGUI features to UI toolkit by then. According to a post from couple years ago, everything related to UI was developed by team of 17 developers (UI toolkit, old UI, localization, bugs, on all unity versions). Deprecating a feature will give them more resources to work on the new system and I feel like it would be worth sacrifice in this case assuming they get vast majority of the old features to the new system by then

[woeful mauve]

Because currently, i dont know if i need to use canvas, or going on ui Toolkit and wait missing features 🤔

[rough scarab]

There's a ton of converging reasons behind every choice with Unity 7 that make a ton of sense when you look at the whole picture

[low yoke]

That would be nice but it isn't always as simple as a progress bar. You can also trust that we're less likely to change things, deprecate things or break things unless we're going into a whole new version of unity. If something is truly additive then perhaps within an lts, but usually at a major revision like 6.something.

[rough scarab]

As the "recommended solution" is UGUI as listed in the documentation if you have worries just follow that advice

Personally I'm embracing it because I understand our project's needs, I feel capable of hacking the internals to my liking, and I would rather turn to dust than use UGUI again

[woeful mauve]

Did you know if an equivalent of World Space and "backdrop blur" are possible with UI Toolkit ?

No tutorial about that on youtube

[rough scarab]

There is no worldspace solution, you would have to use render textures. I haven't done it myself and would personally avoid it

I can't find when they said they'd have world-space, they've shown it a couple of times. It's not something I require so I've not kept up with it

[lunar rain]

The progress bar being stuck at 95% for years would definitely be disappointing for many users and so would it dropping back to 20% due to them completely reworking the feature be

[solid maple]

I've worked on a worldspace asset solution for 3D/VR based on UI toolkit. It's far from perfect but it supports shadergraph if anybody is curious about implementation

[woeful mauve]

I feel like some features start being developed, then get paused for 4 years, then start development again.

[rough scarab]

Can you elaborate on "supports shadergraph"? Did you add Shadergraph support to the UITK internal material, or do you just feed an RT through your own material

[rough scarab]

Yeeeep, tell me about it

[woeful mauve]

Interesting

[rough scarab]

I'm planning to look into shadergraph support for the internal material in a couple of weeks, but it would be totally unsupported hackery of my own design 😄

[solid maple]

This does custom rendering, so I render the UITK tree and just render my own quads for each element

It's not too efficient but it can work for small use cases atm

[rough scarab]

Oh wow, awesome. Sounds like a lot of work, I presume you're not supporting a load of things because of that?

[lunar rain]

That is sometimes the case. They work with limited resources and have many things to do with varying priorities. That's exactly why showing any kind of progress or status would not be a great idea

[solid maple]

Yeah

[woeful mauve]

Sure, but seing a features in progress state since 4 years is not really good as well

[rough scarab]

it's been in development for longer than that, and I've been using it the whole time.
Imo the most worrying thing isn't that the features are in progress, it's that the layout (especially around text) still has bugs and inconsistencies across versions

[woeful mauve]

All games use UI and must be a big priority as rendering and other stuff like that

[lunar rain]

Not optimal but more or less what the reality is. As vertx said, usually the best timeline is the one you get from Discussions where the actual devs working on the features might give some insights into their progress but still their approximations are sometimes very far off the actual release date due to many factors

[woeful mauve]

When i see Unity GDC, im like a dog waiting its bone to eat

Unity show a lot of things, but you need to wait a very long long time before access it

[woeful mauve]

Like CoreCLR ? 😁

[rough scarab]

A lot of major things are deferred to Unity 7 because of that, yeah lol

[woeful mauve]

I wait this features since the first .NET Core version, i prey for a beta soon

[rough scarab]

Alpha will still be a while out I imagine

[woeful mauve]

Unity are going in the good way now, i wait for all its coming great features

[woeful mauve]

Like ~1 year ? (6.2 ~ 6.3)

[rough scarab]

I have no idea, I would imagine. There's no reasons to make assumptions though

[hybrid oar]

I was just happy to see th u6k let's you render a mesh using the MGC

I thought I was going to have to setup a rendering pipeline to render my preview meshes in the ui

[acoustic oyster]

Hi everyone, I have just upgraded to Unity 6 and have started switching to the new way you create custom UI elements. Everything so far seems pretty straightforward however there is an issue that I am not sure how to resolve. Let's say I have an attribute that I want many elements to be able to declare in the UXML files. I have created an abstract custom element class and I have declared a new attribute there. Then I create new element classes that inherit that abstract class. However, the attribute seems to not generated/compiled as I can't change it.

So something like this, as an example:

namespace Project
{
    public abstract class CustomBaseElement : VisualElement
    {
        private string labelText = null;

        [UxmlAttribute]
        public string LabelText
        {
            get => labelText;
            set
            {
                labelText = value;
                OnLabelChanged();
            }
        }

        protected virtual void OnLabelChanged() { }
    }
}

namespace Project
{
    [UxmlElement]
    public partial class MyCustomElement : CustomBaseElement
    {
        public void Initialize()
        {
            // ...
        }
        protected override void OnLabelChanged()
        {
            Debug.Log(LabelText); // <- Should be Custom Label, but it is always null
        }
    }
}

<MyCustomElement label-text="Custom Label" />

However, if I do this, it works fine

namespace Project
{
    [UxmlElement]
    public partial class MyCustomElement : VisualElement
    {
        private string labelText = null;

        [UxmlAttribute]
        public string LabelText
        {
            get => labelText;
            set
            {
                labelText = value;
                OnLabelChanged();
            }
        }
        
        public void Initialize()
        {
            // ...
        }
        protected void OnLabelChanged()
        {
            Debug.Log(LabelText); // <- Works fine
        }
    }
}

I used to do the same thing with the previous UXMLTraits, by defining abstract traits classes and it worked fine

[hybrid oar]

I have only just barely started using the new version, but having written source generators i suspect they are not scanning the class hierarchy

No wait

Your abstract class isn't partial, could that be it?

[acoustic oyster]

Just a sec, will check

Hmm, no still nothing :/

I guess it is like you said

But that worked

namespace Project
{
    [UxmlElement]
    public abstract partial class CustomBaseElement : VisualElement
    {
        private string labelText = null;

        [UxmlAttribute]
        public string LabelText
        {
            get => labelText;
            set
            {
                labelText = value;
                OnLabelChanged();
            }
        }

        protected virtual void OnLabelChanged() { }
    }
}

namespace Project
{
    [UxmlElement]
    public partial class MyCustomElement : CustomBaseElement
    {
        public void Initialize()
        {
            // ...
        }
        protected override void OnLabelChanged()
        {
            Debug.Log(LabelText); // <- Works
        }
    }
}

So I guess both have to be marked as uxml element's and be partial

[hybrid oar]

Oh yeah definitely, the way source generators are setup its not really a good idea to try to do things across a class hierarchy, its more flexible and maintainable to have the end developer mark everything where they want generation to apply

So you treat all classes the same for generation purposes

[ashen moss]

That is awesome @solid maple and here's hoping you can share in the future 😄 UI Toolkit is such a nightmare 😄

[ashen moss]

With Custom elements / classes, tbh, I am just building the screen structure in C# as it also solves a lot of the binding issues for events and such. I've not even touched UXML in weeks now.

For instance, with this custom visual element

public class FAQItemVisualElement : VisualElement
{
    private Label txtQuestion;
    private Label txtAnswer;

    public FAQItemVisualElement()
    {
        // Create container for text fields
        var faqItemContainer = UIToolkitExtensions.CreateVisualElement(this, "faq-item-container");

        // Create first text field
        txtQuestion = UIToolkitExtensions.CreateVisualElement<Label>(faqItemContainer, "faq-question");

        // Create second text field and set it to be initially hidden
        txtAnswer = UIToolkitExtensions.CreateVisualElement<Label>(faqItemContainer, "faq-answer");
        txtAnswer.style.display = DisplayStyle.None;

        RegisterCallback<PointerDownEvent>(OnPointerDown);
    }

Which draws a container and two child text elements.

The UIToolkitExtensions is just an extension class I wrote to instantiate a visual element with a set of class names

Then in the Screen class, I am simply adding the custom class to my document using

UIToolkitExtensions.CreateVisualElement<FAQItemVisualElement>(faqList, "faq-item")

If you need it without my extension code, let me know.

But I avoid the uXML at all costs now and just build screens in c#

Then style their position, layout and look in the CSS using the "classes"

[cinder rivet]

Does someone know if this page is up-to-date?
https://unity.com/roadmap/unity-platform/ui

there is stuff in progress since March 2021 and we approaching 2025

[rough scarab]

Yes.

It has capacity to do a lot of the things that are marked in progress or planned, but they are either not supported well, or require doing it all manually

[cinder rivet]

Sad to see shadows, gradients, or blur only in « under consideration » category…

[woeful mauve]

If Custom UI Shading feature come, i think we Can create whatever you want, shadows, blur, etc

[cinder rivet]

Yup, I see it’s more prioritary on the roadmap, that’s good, but I’m impatient getting those out-of-the-box

[woeful mauve]

Yeah same for me, this feature as been planned since Unity 2019

[cinder rivet]

Is there really no way to delete the TextElement embedded within Button elements? I have nothing to display but an icon and it adds a garbage padding inside of it

[solid maple]

Maybe you can try styling it with something like "Button > TextElement { display: none; }" in USS

And what version of Unity/UITK are you using? Because in 2022.3 buttons are text elements and don't have any children

[cinder rivet]

Yes that's my workaround but I wish there was a way to remove it 😵‍💫

I'm using Unity 2023.2.13f1

they can have an icon or text, but I would have preferred they provide them empty by default, that sucks

[solid maple]

Okay maybe they changed it, or they just have it hidden in 2022.3

[fickle perch]

I wish USS supported z-index and/or the flex order property

currently making tabs for my UI, and hierarchy order being used for both z sorting and flex order is messing it up :c

[cinder rivet]

Has anyone tried any 3rd party solution which would use html/css while being performance-friendly? 😰

[ashen moss]

#Sigh, another day, another oddity with UI Toolkit, wondering if anyone else has come across this.

Setting:

textField.selectAllOnFocus = true;

Seems to work fine in the editor, but when run on an Android device, does nothing.

Any ideas?

[vocal gazelle]

Is there a better solution for the UI editor to not need the null gates? This is using the UXML-first approach from here: https://docs.unity3d.com/Manual/UIE-encapsulate-uxml-with-logic.html