🧰┃ui-toolkit

[pure sandal]

oh it is? Someone else wondered why I didn't use it as well, so I assumed it was for in-game stuff as well

ahhh it uses PointerMoveEvent and grabs the mouse position from that, I see

Cool I'll give this stuff a shot and lyk. Appreciate it

[pseudo dock]

np

[pseudo dock]

by the way, just a tip because coordinate systems get complicated; I usually name variables with the space they're in, so pointerSS is the mouse in screenspace, posWS is a position in worldspace, posOS is a position in object (local) space, etc

[pure sandal]

Gotcha, that sounds really useful

I'm currently having a random issue tho where the layout is returning NaN

[pure sandal]

Hey, update. So this actually seemed to fully fix my problem.

Not only that, but it seemed to fix another issue I had before. Originally I'd instantiate the visualDragger on the fly, which means certain values wouldn't be computed when I needed them. So it would "blip" into existence and you'd see a flash when grabbing the item. Now, using this method it seemlessly transitions.

Thank you! ^^

[light estuary]

Is there a styleclass like :hover to easily style when a button is clicked?

[pure sandal]

Yes, :hover works in USS

@light estuary

[light estuary]

Thank you but not what I was asking. I was asking if there was a similar thing for clicked.

[pure sandal]

oh sorry I didn't see

wouldn't :active be what you're looking for?

I think :focus might be a thing too?

[light estuary]

I'll look into it. Thank you.

:active was exactly what I needed! 🙂

[light estuary]

is there a way to get an imported template to take up the whole screen?

I've been loading it through code so a code solution is welcome too. if (Game.GameState == GameState.Title && root.Q("DesktopTitle") == null) { root.Clear(); root.Add(Resources.Load<VisualTreeAsset>("UI/Desktop/DesktopTitle").CloneTree()); }

The solution was var ve = Resources.Load<VisualTreeAsset>("UI/Desktop/DesktopTitle").CloneTree(); ve.style.flexGrow = 1; root.Add(ve);

[pure sandal]

By the way, I've been told to stay away from Resources.Load. An alternative would be to define a public variable of type VisualTreeAsset, and drag the UXML into that variable on the inspector. Then you can instantiate it using

myAsset.Instantiate();

Which would give you the instanced root visualelement.

Other people may be able to provide more insight. For small projects it's probably fine though, but wanted to let you know of another way of doing it ^^

[light estuary]

Interesting. Thank you.

[light estuary]

anyone have any luck styling a scroller? I am having a bear of a time trying to reduce it's size and making it match the theme of the rest of the UI.

[runic gale]

Hi all, very little info online, is there a way to make a 9-slice use tiling instead of stretching with a UI Builder visual element?
The corners of my sprite display normally, but the edges are noticeably stretched...
I've tried messing around with slice values, but that just makes things wacky, fast.

Is there no UI Builder / UITK alternative to the 9-slice tiling available on Unity UI elements?

[distant cedar]

I'm just beginning to learn this, but I believe the recommended way is to use a 9 sliced sprite instead of a texture + Slice in UIBuilder

Or actually, for tiling, I have no idea...

I'm still struggling with trying to style unity's built in controls. I can apply my style only to the parent VE, all the child VE remains unstyled. Not sure what the recommended way is. It is possible to style them using their inherit selectors, but then all such VE's will be styled the same way...

Concrete example: I want to style a progress bar like a health bar, but I don't want all progress bars to be health bars.

[pseudo dock]

Add a USS class to the health bar my-health-bar, and in the USS combine selectors like .my-health-bar .unity-progress-bar

https://docs.unity3d.com/Manual/UIE-USS-Selectors.html
here's the rules for combining selectors

(I say in the USS, but you can use UI Builder as well)

[distant cedar]

Thanks!

How would you do a selector that matches my health bar and either unity's progress or background? Tried this, but this somehow matched non health bar progress bars:
.health-bar .unity-progress-bar__progress, .unity-progress-bar__background

[distant cedar]

This works: .health-bar .unity-progress-bar__progress, .health-bar .unity-progress-bar__background But is there no way of making a parenthesis?

[pseudo dock]

A comma is used to separate multiple selectors that should get the same style

[distant cedar]

yes, but if we had a parenthesis we could do: .health-bar (.unity-progress-bar__progress, .unity-progress-bar__background)

we want child of .health-bar, that child can be any in list

[runic gale]

I've created a sprite, set it to full rect, changed the slicing in the sprite editor, and then left the slice in UI Builder alone, but it still causes stretching instead of tiling on the vertical and horizontal midsections
I could be slicing it incorrectly somehow but I'm pretty certain I did that correctly

[somber arrow]

is it possible to get the world position of a visual element?

[thorny seal]

I'm not able to find any information about increasing the scroll speed of the Scroll Rect in the Toolkit, anyone know how to increase that speed?

[somber arrow]

pc or mobile?

[thorny seal]

PC

[somber arrow]

Have you tried horizontal-page-size och vertical-page-size?

[thorny seal]

I don't even see that option, is that what allows it to update more per scroll tick?

[somber arrow]

yes

https://docs.unity3d.com/Manual/UIE-uxml-element-ScrollView.html

[light estuary]

Anyone know of a way to trim text to fit in it's container?

[faint raven]

Hey friends, I'm new to ui toolkit and could use a hand understanding something:

I have a UIDocument on a top level GameObject called "Root" in a Scene which represents the main UI panel for the Scene. I have an arbitrary number of instantiated "Block" GameObjects nested under the "Root", and each one has its own UIDocument which contains information about the given "Block".

I have a specific VisualElement "Block Container" in the "Root" UIDocument that I want each of the "Block" UIDocuments to be nested under. Is there a way to configure things so that each time a "Block" GameObject is instantiated under "Root" that its UIDocument will be nested under that "Block Container" Visual Element? Or do I have to manually move the "Block" UIDocument's root VisualElement to "Block Container"?

[distant cedar]

I think the recommended approach is to only have one UIDocument: https://forum.unity.com/threads/multiple-panel-architecture.930948/

[stray estuary]

i have a scroll view, and it works very well, but the only problem is that i want it to put the children
Across with wrap,
instead of down.

(ignore that they are the error image, im just testing)

[distant cedar]

Alternatively if you want to have several, you could just make a monobehaviour that adds the "Block" root to the "Root" root in Start().

[distant cedar]

There is an attribute for scoll view called "Mode" set that to horizontal

[stray estuary]

is that in the inspector? or do i have to change it in code?

[distant cedar]

it is in inspector

[stray estuary]

found it, 🙏 thank you

and then sorry, one last thing,

instead of what it does right now where they go off the screen to the right
is there anyway to make them wrap downwards?

ie)

---

[dusk geyser]

Hey everyone. I'm struggling with something. Is there a way to make a DropdownField with a key/value pair as a list of choices? Example from Odin Inspector:

`[ValueDropdown("TextureSizes")]
public int SomeSize1;

private static IEnumerable FriendlyTextureSizes = new ValueDropdownList<int>()
{
{ "Small", 256 }, // The first value is what we see in the dropdown, the second is an actual value of the property
{ "Medium", 512 },
{ "Large", 1024 },
};`

[distant cedar]

Not sure, but one possibility might be to change the wrap setting on the container visual element with a stylesheet

[stray estuary]

yeah, i was googling around, and apparently changing it with code works? idk, ill figure it out, thanks for the help tho

[distant cedar]

we can't change the inline style but by using a stylesheet with a selector for ".unity-scroll-view__content-container" probably will work

or with code

[marsh copper]

I'm having a problem with the UIToolkit transition

when i click the mouse, it will toggle the active class but the transition does not work as expected (transition not smooth at all, just jump randomly).

[quiet roost]

I wanted to add In app purchases for my game but I am using UI Builder instead of regular UI so how would I add In App Purchases

[peak nimbus]

I'm trying to start on UI toolkit but despite a lot of googling I just can't find the right information. I want to have a single simple text on screen that displays the speed of the car driven (using RCC). I can't figure out how to have a label display the value of a variable.

[wind gorge]

you need to do transition: translate 1s

[pseudo dock]

Just query the label by name and set the text like so container.Q<Label>("speedometer").text = speed

[marsh copper]

no no, i just figured it out

if you use percentage for the translate it will not animate and the transition will jump to the end. Using pixel (px unit) will work normally

i'm using 2021.3.9f1 btw, anyone having this problem?

[halcyon wraith]

Hello! I'm having a bit of a hard time figuring out how to make a visual element overlap another

Is there a setting I can use to do that?

[wind gorge]

position: absolute

[halcyon wraith]

it does the trick! Thank you!

Also, how can I edit sliders? I can't seem to change the properties in the inspector

[halcyon wraith]

some are greyed out (sorry forgot the picture)

[distant cedar]

How would you make a background texture only stretch in one direction?

I want "stretch-to-fill" but only for x axis, y axis should not stretch at all

[distant cedar]

🦗

Ended up using a custom control that set the height of the VisualElement to the sprite's original height

But now I wonder if it is possible to make a progressbar that fills up smoothly.

Unity's progress bar does this: https://i.gyazo.com/4e6b16a4c4e7a6e01ad2bbdc70aceec4.mp4

It's not using alpha when progress is between pixels, making it look stuttery

[ebon summit]

is there a built in way to get the CSS behavior of perceivability with USS opacity https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html#opacity

this looks pretty awful and i don't know how else to implement this disabled effect

[fringe tusk]

This might be a simple mistake, but i have uitoolkit rendering to a render texture. I think I converted my mouse movements to texture space, but how do I trigger the buttons I set up in that UI Document?

[celest wren]

Is there a way to see the modified styles of a UI document, much like one does in a browser? I have this code:

    void ToggleLogDisplay()
    {
        Debug.Log($"Toggling log display to {!isOpen}");
        if (isOpen)
        {
            logsSection.style.top = new StyleLength(new Length(Screen.height - toggleButtonHeight, LengthUnit.Pixel));

        }
        else
        {
            logsSection.style.top = originalTopOffset;
        }
        isOpen = !isOpen;
    }``` And it is making the visual element disappear, but I need to see what change has been made to it to figure out WHY it disappears.

In Chrome I could just do this, for instance:

[wind gorge]

There is a ui debugger

It's kinda garbage though

[celest wren]

Awesome, thanks! It meets my needs!

So I figured out why the VisualElement disappears, I am setting it's top positioning to screenHeight less, say, 100px. Screen.height reports as 1536, but my VisualElement only starts to appear at numbers below 850 or so. So it looks like I need to get the unadjusted height, or height / (DPI / 72), or whatever. Is there a way to do that without just guessing what the DPI of the device is?

[wind gorge]

are you sure the element is not behind something else?

[celest wren]

I am sure. Take a look:

1. Below screen height
2. Not below screen height

[wind gorge]

I don't quite get what the pics are intended to show, it is obvious that an element will not be visible if it is below the screen height

if you'd like to align your element to the bottom, just use bottom: 0

[celest wren]

Right, but the screen height != the screen height. Screen.height reads as 1536. So anything 1536 or more from the top should be below the screen. Anything less than 1536 from the top of the screen should be showing at least one pixel. However, that is not the case. The visual element doesn’t show until around 830 px from the top or less. This leads me to believe it might be a DPI thing

Ah, it was because the panel settings were set to scale with screen size, whatever that means.

[halcyon wraith]

Hello! Wondering if anyone found a way to change slider properties? Basic things like background color, filler color and everything. I've tried looking online, but couldn't find much.

[halcyon wraith]

Found out about .unity-progress-bar__background, but it sadly doesn't allow me to change them differently

[weak fog]

What's the preferred way of implementing shortcut/hotkeys? I.E if I have something selected and press Ctrl + T run some code

[uneven oyster]

https://docs.unity3d.com/Manual/ShortcutsManager.html
Scroll all the way to the bottom for notes about custom ones

[weak fog]

I see, so I suppose a good idea would be to wrap that in some kind of Manipulator

[distant cedar]

It is only me or when setting visualElement.style.translate from c# the UI builder freezes?

[fresh glen]

Hello everyone.(I speak English poorly and use an online translator.Incorrect translation is possible).
How do I use the script to add to the List all Visual element with the name:Item 0,Item 1,Item2 and the rest. Thanks

[humble monolith]

Hello, I want to put my character (a game object) at the red dot position (who is a visual element), how to do this when I try to get red dot position I got 0,0

[median crane]

Search for screentoworldposition function

[humble monolith]

Not concluent for the moment https://forum.unity.com/threads/get-the-world-position-of-an-ui-element.1356479/#post-8558984

[humble monolith]

I post it on Unity forum, thanks for the advise

[median crane]

nope, you need to convert dot to world pos

not player to screen pos

based on post i see there

seems like you are converting player pos to screen pos and then passing screen pos to players world pos

if that makes sense

@humble monolith

[humble monolith]

Sorry the naming convention is bad, player position is my dot

[median crane]

so your player, who is scene object needs to move to red that, that is UI element

player.transform.position = Camera.main.ScreenToWorldPoint(redDot.transform.position);

thats all you need

might be redDot.GetComponent<RectTransform>().position, or something

you might try that out

[humble monolith]

Ho get the redot element

    public GameInfo gameInfo;
    private Button btnConnect;
    private Button btnApprove;
    private Button btnSave;
    private Label lblAccount;
    private Label lblBalance;
    private Label lblTotal;
    private VisualElement lstItems;
    private VisualElement playerPosition;

    [SerializeField]
    VisualTreeAsset itemPlayer;

    VisualElement root;

    public Character player;

    // Start is called before the first frame update
    void Start()
    {
        this.OnConnected += Web3Connect_OnConnected;
        this.OnChainChanged += Web3Connect_OnChainChanged;
        gameInfo.playerId = 1;

        root = GetComponent<UIDocument>().rootVisualElement;
        btnConnect = root.Q<Button>("btnConnect");
        btnApprove = root.Q<Button>("btnApprove");
        btnSave = root.Q<Button>("btnSave");
        lblAccount = root.Q<Label>("lblAccount");
        lblTotal = root.Q<Label>("lblTotal");
        lstItems = root.Q<VisualElement>("lstItems");
        playerPosition = root.Q<VisualElement>("playerPosition");

        if (player != null)
        {
            var json = System.IO.File.ReadAllText("Assets/UI/Leon.json");
            player.FromJson(json);
        }


        inventoryDto.PropertyChanged += InventoryDto_PropertyChanged;

        btnConnect.clicked += () => MetamaskConnect();
    }

My ui :

[median crane]

wait, is that new UI system?

[humble monolith]

Yes it's why it so difficult

ui toolkit is not the chan of new ui system

[median crane]

wait so this channel is only for new system?

iam a bit lost

but in documentation there is for sure some way of getting screen position of red dot

just didnt work with new system

[humble monolith]

I found an exemple to do the contrary, give a world position to ui element but not to get the worldposition of an ui element

is more easy with classic ui

[median crane]

but, why cant you get screen position of ui element

and feed that into screentoworld position

have you seen new ui toolkit example project? there probably is solution there

[humble monolith]

I don't open all project but the title doesn't seem to match with my problem https://github.com/Unity-Technologies/ui-toolkit-manual-code-examples

Maybe I need to create my own method to convert the position to world position

•    transform    "VisualElement playerPosition (x:215.89, y:320.64, width:8.94, height:10.22) world rect: (x:315.53, y:470.10, width:8.94, height:10.22)"    UnityEngine.UIElements.ITransform
  

what I got for poision

[median crane]

i meant this

https://assetstore.unity.com/packages/essentials/tutorial-projects/ui-toolkit-sample-dragon-crashers-231178

I wish i could help more, I really wanted to try new UI toolkit but focusing on my project since its far in development

I will try Toolkit for my new project for sure

[humble monolith]

Strange with -y seems better

            var positionObject = Camera.main.ScreenToWorldPoint(pos);
            print(positionObject);
            player.transform.position = new Vector3(positionObject.x, -positionObject.y);```

[humble monolith]

I think I got my answer from forum "UI toolkit is using ui coordinate that start from the top left corner, as most ui framework do."

[distant cedar]

Is there a way to add a style class to the root element?

[humble monolith]

I think you can add class or use :root in your uss file

[distant cedar]

what do you mean with "add class"?

from c#?

[humble monolith]

No just use class property in your uixml file

https://docs.unity3d.com/Manual/UIE-USS-Selectors-Simple.html

[distant cedar]

yeah but it seems impossible to add a class to the root, in the same uxml.

[humble monolith]

Have you try it ?

[ember surge]

What is the best tweening library? Leantween? DOTween? Something else?

[distant cedar]

Selecting the root in UI builder and looking in the inspector shows this:

I dont see a way of adding a class here.

[fiery mountain]

You can't add it to the root of the document, you'd have to select one of the children. I kind of wish you could apply some to the root

I don't know how many times the ui designer creates a version and creates a "container" at the root so it can look like it should

[young spade]

Hi, trying to build my first UI in the UI builder

How do I center a visual element

I've got the position set to 50%

But it doesn't seem to correctly center itself

The pivot for the visual element is also in the center of itself

[young spade]

Nvm fixed that

Why are some of these properties

Just not working

https://gyazo.com/2b86573712a36e7b084a1416636a7658

[weak fog]

How can I get the currently bound object from a visual element?

[fiery mountain]

@young spade so the centering is done through the flex and align

many things can be a little deceptive, like the text is always there even if there is no text on the element

highly suggest you look at some tutorials

[humble monolith]

Oh ok I try it from uxml file directly and I can but I didn’t check if the style apply

[distant cedar]

Wait, that actually worked! Adding it in the .uxml. Thank you!

unfortunately it seems to apply the style to the parent uxml's root as well, even if that root does not have the style class. Very weird.

[humble monolith]

It’s better to put Visual elements and class on it than root maybe

[stray estuary]

if you query the root, and there are multiple possible responses, will it return a list? or just the first applicable one?

[fervent bay]

it returns this https://docs.unity3d.com/ScriptReference/UIElements.UQueryBuilder_1.html the property children is your list

[light estuary]

The default text field seems to be adding a space inbetween the carat and the end of the entered text. Any ideas on how to fix? The actual value is correct but this will be confusing for the end user.

[light estuary]

I'm also having an issue where in game the carat is invisible.

[median crane]

caret*

[grand ingot]

Hello there! I'm just getting into Unity, and I'm trying to make a simple command console that I can toggle on/off

The only problem I have left is that my TextField isn't focusing properly when I toggle it, and it's driving me crazy.
I've tried every solution on this post, nothing seems to work.
https://forum.unity.com/threads/focus-doesnt-seem-to-work.901130/

I can provide screenshots and info about how I organized everything

[grand ingot]

Okay after doing some tests, I found out it only works if I call .Focus() in the onEnable() of my UIDocument GameObject.

Doing this doesn't work, maybe I'm just missing something. In any case, problem fixed for now ✅

[small pine]

Please help 😭 unity doesn’t work for me at all. I have deleted it and reinstalled it. I get this error and then it says “no internet connection” but I have internet connection. Not sure what to do

[latent inlet]

Hi, I am experiencing a strange problem: basically whatever scene that contains a UIDocument, if I make a build with that scene, it crash

I created a basic scene with EventSystem, Camera and a game object with UIDocument script attached. The scene run without any errors, but the build crash immediately at start. Neither the "Made with Unity" splash screen is shown

I am using Unity 2121.3.13f1, but I realized the problem was still there on previous versions

I have no idea in what version the problem appeared

[fiery mountain]

are you missing the panel settings?

I am trying to set some choices in a dropdown from code. When i do that, i loose the nesting. Anyone know why that might be happening?

[latent inlet]

@fiery mountain I have the panel settings

[fiery mountain]

so does the nesting inside of the dropdownfields only work in editor and not runtime?

[runic gale]

Seem to be having some kinda bug with UI Builder
After saving a UI Document, when I subsequently try to double-click-open any UI Document the console complains with an index out of range error
Then, instead of opening it in UI Builder, it opens the code editor to display the UXML as text
Upon closing and reopening the UI Builder window this appears to sort itself out, yet it has without fail occurred at some point in time after every re-open of UI Builder
Not sure quite what the exact conditions are but I will try to note what I do next time it occurs

(full error upon save)

[vestal yew]

Is anyone familiar with GraphView? I've made a window that uses it UI Builder, and everything works, but trying to set the style sheet to get the grid on background isn't working. I'm getting 'USS parsing error: An unexpected error occurred.'

My CSS file is black with just this:
GridBackground
{
--grid-background-color: rgb (40, 40, 40);
--line-color: rgba (193, 196, 192, 0.1);
--think-line-color: rgba (193, 196, 192, 0.1);
--spacing: 15;
}

[static canyon]

You could try specifying your alphas as integer 255 values - I don’t think mixing them like that is supported

[vestal yew]

@static canyon Thanks. I'll try that

No, didn't work... I removed the alpha all together just to test and used just rgb, but getting the exact same error.

Specifically, it's saying '(line 5): error: USS parsing error: An unexpected error occurred' on lines 3, 4 and 5 which are the lines for grid-background-color, line-color and thick-line-color...

[static canyon]

Hmm I have no idea if those styles are supported at all - assumed you’ve taken that from somewhere though? Could also try removing the initial hyphens?

[vestal yew]

Wait... It's because I have a space between rgb and the brackets... I think

Yep, it was the space. Well I feel like a muppet...

[static canyon]

ah good catch

[stray estuary]

im adding buttons (as a child) to a visual element with code, which works perfectly, they display, and can run code when clicked.

the problem is when I try to remove the buttons they keep displaying, even though they aren't a child of the visual element? is there anyway to fix this?

[pliant umbra]

which elements work for ListView makeItem

e.g.Label works, but TextElement or Button doesn't

oh hold on, my bad

I didn't change bindItem accordingly

[tribal void]

Can I somehow set the data of a VisualElement from a ScriptableObject?

preferably passing it in as a UxmlAttribute

I found this post from 2 years ago saying its not yet supported, does anyone know if there is anything planned like this? https://forum.unity.com/threads/reference-asset-in-uxml.805836/

[fiery mountain]

I don't see why you couldn't try

The reference to the VisualTreeAsset in the SO and you can clone/instantiate the tree

that said, I don't know how it would work runtime but i assume it would

[thorn harness]

Hi im having some issues installing UI toolkit, it installs but gives me several errors and the UI toolkit menu wont show up to place elements in the hiarchy

[fiery mountain]

what unity are you using? it is normally included by default and shouldn't require installing anymore

[fiery mountain]

anyone know of a way to check what the currently selected visual element is, if one exists

[young spade]

The text allign doesn't seem to be working

https://gyazo.com/d59ddec72bcc23fafe4b48c01c2849e1

But the size, font style, etc work

[young spade]

I also have this label, I only want it to resize towards the right

But it resizes from the center & clips into the red thing on the left

https://gyazo.com/70ef02686fc86b1abb4f088526c9a3a5

[fiery mountain]

@young spade is that an input field?

Is that element an actual label or is the label a child to it?

what does the hierarchy look like?

[young spade]

@fiery mountain

The red bit is "logo"

[fiery mountain]

the container what is the alignment?

[young spade]

The container has those properties for allignment

But tbh I don't want the children to all be alligned in a specific way

They'll all have fairly unique positions

I set the containers allign items to Auto

Seems to resolve my issue

[fiery mountain]

I did have one issue like that in the past, i think the text was rendering the font size correctly but the text overflow was truncating and justification wouldn't work, when i set it to wrap the text disappeared. Had to adjust the sizes to make it work

might not be the case here

wish i could help more. Nice that the auto fixed it, hopefully it doesn't break anything

[young spade]

See now this is weird

Cuz now I want the stuff I'm going to add into the middle

To be alligned centrally

But I can't do that because the logo & header can't be alligned like that

[fiery mountain]

could you throw an element into the middle as the parent so it can have it's own alignment internally?

[young spade]

nevermind actually

Yea

That's what I did

[young spade]

So I need to make a UI

Essentially a directional clock

Essentially, a sound will play

& the player should be able to click the direction it came from

How can I evenly place more circles

For the remaining clock directions

[severe wren]

is there a way to have text not as ui but as an object in teh scene that doesnt move with the camera

with text mesh pro preferabbly

[tender scarab]

what are good softwares to make UI with?

[fiery mountain]

@young spade try setting the position of the ui elements (make sure it is absolute position) from the world position using world to screen point. My suggestion for adding more points in a nice way you might have to do the math to place the elements in their correct positions around the center

From this https://gamedev-resources.com/create-a-health-bar-that-hovers-over-the-player-with-ui-toolkit/ there is a snippet below

{
    Vector2 newPosition = RuntimePanelUtils.CameraTransformWorldToPanel(
        m_Bar.panel, TransformToFollow.position, m_MainCamera);
    m_Bar.transform.position = newPosition.WithNewX(newPosition.x - 
        m_Bar.layout.width / 2);
}

[unborn bluff]

(I got redirected here from #💻┃unity-talk )
https://docs.unity3d.com/Manual/UI-system-compare.html

                             | UI Toolkit | Unity UI
----------------------------------------------------
  World-space (3D) rendering | No         | Yes

And Unity keeps reiterating how they're committed to making UI Toolkit the singular solution to UI while UI Toolkit cannot yet implement something as obvious as a HP bar!!
OK I guess I'm almost ready to give up, though Googling did reveal some solutions to this problem, https://gamedev-resources.com/create-a-health-bar-that-hovers-over-the-player-with-ui-toolkit/

[teal belfry]

There a way to make UI builder go from like camera to worldspace? I want to use to for health bars above enemys heads
If not is there something else I should be using that can "format" the shapes and text and things really well also?

[teal belfry]

well dang, nvm...according to the above post thats just not a thing 😦

[woeful pendant]

Can anyone help me with a scene transition animation I'm trying to achieve with ui toolkit... Basically I coded it correctly but the animation doesn't show when I hit play, scene just jumps to another scene

[worldly fossil]

have you noticed any important changes in 2023 alpha?

because I have not yet

I wonder if they fixed the issue of scroll-view being 30 fps

[worldly fossil]

GUYS

scroll works at 60 fps

just upgrade to alpha 2023 and have scroll elasticity and deceleration set to 0

it is not going to "afterslide" after you release your finger but it will work at constant 60 fps

so smooth

[gray topaz]

is it possible to have world space canvas of ui-toolkit for XR development?

[rough scarab]

World space is not supported

You would have to render to a render texture

[gray topaz]

okay, so it is possible to put the UI on rectangle through render texture. right?

I can pull it off in XR development

[rough scarab]

Yes

[unborn bluff]

Actually you can have world space with ui toolkit, although it does involve a little bit of DIY

Instructions here: https://gamedev-resources.com/create-a-health-bar-that-hovers-over-the-player-with-ui-toolkit/

Rendering through render texture is not necessary

tl;dr version:

visualElement.transform.position =
    RuntimePanelUtils.CameraTransformWorldToPanel(
        visualElement.panel,
        yourDesiredWorldPosition,
        camera
    ) + panelSpaceOffset;

Where panelSpaceOffset might be 0 or you might set it to something like new Vector2(x: -visualElement.layout.width/2, y: 0) to center the element horizontally

yes, it's clunky

[rough scarab]

I would not consider that world space, would it even work in stereo?

[unborn bluff]

...right... it's a very half way solution, clearly

And also a warning, I lost many hours on this: visualElement.layout.width might be NaN immediately after instantiating the element and in certain cases this may last even for a few frames. Inadvertently assigning NaN to visualElement.transform.position is a recipe for problems. Testing for NaN might be necessary, this is something gamedev-resources.com failed to take into account

[worldly fossil]

2023 alpha. Properties do not repaint

[ornate cliff]

Use forums for feedback and bug report.

[worldly fossil]

is grid on the roadmap?

I wish it was

I can tell you me and devs most likely have it in common to be thinking how cool it would be to use grids

unity devs are never wordy when it comes to reveal their plans or explain more about their current roadmap

[runic gale]

+1 on the grids front

Also wondering when / whether there is consideration to make a runtime-suitable version of the editor-only controls
For example, stuff like the toolbar, input fields and drop-downs would be immeasurably useful (to me at least) to have in runtime UI

I'm also confused as to why there is a runtime text input field that I can't change the styling of?
As in, the text field object has a sub-object, with all its options greyed out, meaning I'm stuck with it having a border that I cannot manipulate

I was under the impression that UI Builder was meant to provide scalability / reusability via the UI documents
However now as I'm trying to create runtime UI, I keep hitting brick walls with the most useful and ideal features being locked away to editor-only

[oblique sage]

Hi All! I'm wondering if there's a way to instantiate a new UI Document with a Script attached and add that document to the view at runtime?

My use case is that I have a Main Menu, now I want to show the settings menu for which I already have the respective UXML, USS files and it's own script. I also have a UIManager class which is basically a router, and now I want to tell this router to go to the settings menu from the main menu.

Now, I have considered several options but I don't know which one would be better suited

1. Create a Prefab for every UIDocument, Instantiate it, attach it to a game object and set the ui document to visible
2. Create the UIDocument object from code and follow the previous step
3. Have all UIDocuments in the scene from the beginning and just toggle visibility as needed (like the UI toolkit example does)

One of my main concern is reliability and performance, since having all documents at all times could mix up state or have an invalid state at some point. I would actually like to create the document, start with a fresh state and show it in the UI

[pseudo dock]

don't create a new UIDocument. If you really want to reinitialize, just remove the old visual element from the hierarchy and clone the VisualAssetTree again

[fiery mountain]

I think 3 is what you want.

but i suppose it would also depend on what assets are part of the UI

[fiery mountain]

I was testing rich text font weights but I don't know if my setup is correct. Is it a supported feature for UIE?

[worldly fossil]

how can you get pointer down on a button?

not working BRUH

var buttonUp = CurrentPanel.Q<Button>("button-up");
        buttonUp.RegisterCallback<PointerDownEvent>((down) => {
            Debug.Log("up");
            OnControlClicked?.Invoke(Vector2Int.up);
        });

this code is no use

pointer down cannot participate in buttons life

is there a tricky workaround?

[worldly fossil]

okay! If I want pointer down to work I am going to replace a button with a visual element. Is it making sense? No for sure, but it will work anyway 🤡

[bronze iron]

I'm having trouble getting a PointerDownEvent to work for UI Toolkit's slider. Anyone have any experience with registering that callback?

[fiery mountain]

Strange it should work

Do you have some element in front of it or picker mode not set to position?

[fiery mountain]

Another thing could be that the game object with the ui document was disabled at some point?

If you disable and enable it would clear all old visual elements and make new ones that aren’t registered

[abstract sandal]

How do I make a UI toolkit toggle not reset after I enter then exit play mode?

[fiery mountain]

yeah you can, just need a template text file and create the asset.

[abstract sandal]

How do you make it so you have several buttons horizontally instead of vertically withoutdiving into seperate UXML files and such?(trying to keep it to 1 file)

[abstract sandal]

whats the simplest way to make a toggle reveal more options?

[abstract sandal]

I figured out I can do something similar with foldout, but how do I have it have a checkmark instead of an arrow?

[abstract sandal]

if I have this editorwindow
and I want the last number there, the Current Sample Count to update every frame with a value from a binding, how do I make it not create like 20ms of lag every 10 frames?(if I remove the binding suddenly those spikes go away)

[abstract sandal]

hrmm
for some reason
when I close the editorwindow now, I get a stable 106 fps
if I have it open, it jumps between 117 and 130 fps, averaging around 120... why?

[abstract sandal]

is there any way to change these foldouts from arrows to checkmarks

[abstract sandal]

Or I guess a way to make it so that dissabled elements cause the rest of the UI to shrink

[junior tundra]

~~can anyone help me figure out something?

I am working on a 2d game and tried to implement a simple floating enemy healthbar system using UIToolkit.

I currently have one panel settings, and I have one UIDocument on the game scene for my HUD (player health, level info, etc...), as well as a UIDocument on each enemy prefab.

The game generates stages and enemies dynamically.

On initial scene load, I have 3 enemies spawn and they render their health bars correctly.

I kill them, go to the next stage, and 3 more enemies spawn....however this time, the health bars don't render right away or correctly.

Looking at the debugger for the UI, it seems like the "dead" enemies have left their healthbars behind as visual elements, and when the new enemies spawn, they re-use these elements incorrectly (which I think is my problem)

How do I ensure that the panel like...cleans itself up when an enemy dies? Conversely, when I instantiate new enemy prefabs, why don't they create new visual elements for their health bars?

I can include any code if needed etc.~~

[proud sky]

@junior tundra It's hard to say, but all MonoBehaviours have a private void OnDestroy() event you can implement similarly to what you do with Start and Update.
OnDestroy is typically where you do 'clean yourself up when you die' logic.

[junior tundra]

~~So after looking into it more, the naming thing was just poor choices on my part - the objects are being destroyed, and the UI hierarchy is getting updated correctly.

The issue remains, though -

When I instantiate more enemies....they correctly create their health bar, set the styles, are in the correct panel settings....but they don't show up until I hit the enemy, and when they do show up, they are missing their background.

code below:~~

[junior tundra]

I figured it out:

The positioning code needed to be inside of LateUpdate() instead of Update()

https://docs.unity3d.com/ScriptReference/MonoBehaviour.LateUpdate.html

this pretty much explains it....and was exactly my situation iirc.

[limber latch]

Im trying to animate the ui using transitions. it is wroking but the duration is being ignored. instead of reducing the height slowly, it instantly become 0. I have done similar transition with bg alpha value befor but that worked properly. any idea why this happens and how to fix it?

these are the styles I'm trying to animate. the box-open is already applied and box-close is adder later to using code.

[spice hearth]

Hi guys, can anyone tell me from a regular web development perspective how UIToolkit matches up?

I used to work basically all the time with Unity, but switched to web + backend dev a while ago

One of the things that always felt off with unity was how bad the UI tools were, and going to web dev felt like this is how things should be

Does UIToolkit make UI design in engine closer to standard web dev or is it still done in a "unity way"?

[bleak gust]

Hi guys, I guess this is the right place to ask some questions about text.

I wonder how is the common way to do animation, transition for text? Like the text "READY" in every stage in Megaman X4. The text animation I want to do will have more effect and other gameObject than just a text. Is there any tool for this? Or I just have to code everything for it?

Thanks a lot guys!

[junior tundra]

Im a web dev, and recently started using UI toolkit.

I appreciate the concepts - they use things like flexbox, which I understand.

You also can, at any time, view the generated UMXL (like html) and USS (like CSS) for stuff.

You can create several USS classes to attach to elements.

They have some built in control-types which is nice (drop downs, etc)

They include a UI editor tool in the app which is a nice sort of layout builder which generates the UXML for you, but it can be a bit buggy at present.

Overall, I've been using it every chance I can over using canvas. Ain't got time to learn that shit or the other GUI stuff.

[young spade]

Why does my UI look amazing

In the UI Toolkit

But look pixelated as hell in-game

[rough scarab]

are you zoomed in in the game view?

[candid fable]

I'm trying to figure out the logic behind how UnityEngine.UIElements.ScrollView gets it's mouse scroll wheel behaviour and replace it with a custom zoom behaviour. I'm wondering where it inherits this? VisualElement.HandleEvent is obsolete, so is this achieved through manipulators? If so, how can I reference the behaviour to remove it? Alternatively, how can I override this behaviour in a custom class when none of the classes seem to inherit from the event system?

Here is a link to the docs for the class that I'm trying to disable the mouse scroll behaviour on:
https://docs.unity3d.com/2022.1/Documentation/ScriptReference/UIElements.ScrollView.html

I am eyeing this extension class but can't determine if this is relevant or how to reference a "built-in" manipulator if there is one:
https://docs.unity3d.com/2022.1/Documentation/ScriptReference/UIElements.VisualElementExtensions.html

Thanks so much if anyone has knowledge of this.

[young spade]

Nah, but the game is 800 x 600

Could that be why?

[rough scarab]

Presumably

[pearl lion]

anyone has idea how to get this effect in uitoolkit? transform rotation in uitoolkit seems only support z-axis...https://codepen.io/birjolaxew/pen/ALJpdx

[spice hearth]

Sounds way better than the standard ui! I might need to give it a go then, cheers 😁

[candid fable]

Does anyone know how to totally stop a ScrollView from reacting to WheelEvent? I'm not having luck with StopPropagation() and there seems to be no way to unregister built-in callbacks.

        {
            evt.StopImmediatePropagation();
            PerformDeltaZoom(evt.delta.y);
        });```
I last tried this, hoping to race the internally-registered callbacks, but it's to no avail.

[candid fable]

SOLVED: In order to race the built-in event handler, you have to register a callback on a child of the ScrollView and call evt.StopPropagation() then. The UnityEditor propagates events from the deepest child in the hierarchy to the shallowest. From my testing, evt.PreventDefault() does nothing for ScrollViews.

[oak portal]

I apologize if I am asking this in the wrong area, please direct me if so.

I am having an issue where if I child text onto an object the text disappears (TMP), and if I drag the child off of the object it does not reappear. I cannot find any setting that has changed inside of the text itself or the canvas the text is attached to.

It only stays missing if the text is rendered in world space. If it is rendered in Screen Space it will reappear once removed from the object.
It does not show on either the game view or sccene view

[celest wren]

Excuse my simple question, but how does one use UQuery to query for something by class name? There is no documentation about it. I was thinking something like root.Q<VisualElement>('.my-class-name') but that doesn't seem to work

NM, found it, it's root.Q<VisualElement>(null, 'my-class-name'). How fun

[candid fable]

OOF. I almost exclusively put #ids in that parameter, which are also without the #.

[pliant surge]

whenever I am editing anything in unity I get a bunch of lines that aren't in the right place

any idea why this happens?

[candid fable]

Did you recently change render pipelines?

[pliant surge]

no this has been the case all year

[candid fable]

@pliant surge Under the Edit menu, do you have any options to convert shaders?

[latent inlet]

Hi, I would like to make my UI menu navigable with gamepad. Usually how is this case handled in ui-toolkit?

[tranquil sigil]

Anyone know the UI Toolkit equivalent on how to make toolbars?

I need example scripts but I haven't found one

I want to port most of these to UI Toolkit version.

Right now its written on IMGUI

[weary jewel]

The layout of the elements is just done using flexbox in the Toolkit editor. To enable your window in unity, I followed this guide. The coding part is around 15:30.
https://www.youtube.com/watch?v=Xy_jvBg1vS0&ab_channel=PitiIT

[pliant surge]

I don't think I see it. Do you know how that would help?

[candid fable]

Sometimes, if you have shaders that don't match the current render pipeline selected for your project, an option might appear there to have them target differently and recompile.

[pliant surge]

Those lines are related to the RectTranform component on my widgets tho. They are just very misplaced

It's related to shaders?

[candid fable]

I'm not sure I understood what I was looking at. I thought I was seeing RectTransforms that should be accompanied by graphics that weren't rendering.

[pliant surge]

no, it's not that they aren't rendering

It's that they are in the completely wrong place

I'll moving the actual rendering widgets and those lines will show up in the wrong place

[tranquil sigil]

Floating toolbar works, but how do I create toggle buttons dynamically in inspector with UI Toolkit? (Through scripts, No UXML)

[weary jewel]

Once you have the root VisualElement of your UI you can create and add new elements with root.Add();

So something like this would create and add a new RadioButtonGroup:

List<String> buttons = new List<string> {"Btn1", "Btn2", "Btn3"};
RadioButtonGroup newGroup = new RadioButtonGroup("New group", buttons);
root.Add(newGroup);

[tranquil sigil]

Thanks, how do I style this like a horizontal button?

[weary jewel]

I looked into this, and while it is possible to restyle the radio-button by removing .unity-radio-button class and then adding in a .unity-button class to each element, it might be better to use a GroupBox element and then add buttons to that instead.

Apparently, the GroupBox allows a single selection of items added to that container.

So to create a new GroupBox and add Buttons you might use:

  GroupBox newGroup = new GroupBox();

  for (int i = 0; i < 5; i++)
  {
     Button btn = new Button();
     btn.text = "Btn " + i;
            
      newGroup.Add(btn);
   }
   root.Add(newGroup);
     
   newGroup.AddToClassList("button-group");

The last line adds a style class to the group that will make the buttons line up horizontally instead of the default vertical arrangement. The USS is quite simple so add this to your stylesheet:

.button-group{
    flex-direction: row;
}

[tranquil sigil]

        public override VisualElement CreateInspectorGUI()
        {
            var root = new VisualElement();

            List<string> buttonStrings = new List<string> { "Btn 1", "Btn 2", "Btn 3" };

            GroupBox newGroup = new GroupBox();

            foreach (string buttonString in buttonStrings)
            {
                Button btn = new Button();
                btn.text = buttonString;

                newGroup.Add(btn);
            }

            newGroup.style.flexDirection = FlexDirection.Row;

            root.Add(newGroup);

            return root;
        }

This is what I tried, but I feel like its still missing a lot from GUILayout.Toolbar
Such as selection isn't shown in the button like its clicked. And I have to create an event callback for each button.
I also have to manually add default selected index from int.

I just hope they can add something like the old GUILayout.Toolbar equivalent

It also isn't equivalent to the IMGUI counterpart visually :c

Tried ToolbarButton

Doesn't behave as it should either

[tranquil sigil]

UI Builder have something called Button Strip

I wonder if we can access it?

[marsh abyss]

how do I make visual elements appear and disappear with a transition happening

[weary jewel]

The class and constructor name is usually the same as the element name, so try it out.

[weary jewel]

For the BoxGroup and Toolbar you'll need to add in USS to style the elements. There are unity classes that you can use though, you just to figure out what they are from looking at example uxml.

[young spade]

so I have this button using a USS selector "focus". So it turns "Yellow" to indicate that it has been selected but when I click the "play audio" button it takes the focus off, how can I prevent certain buttons from removing focus? (the play audio button has its focusable property set to false by default too)
https://gyazo.com/5d41ecb48cb29ce278c5de4920f7e4df

[tranquil sigil]

Sadly not exposed, and I can't find it on the mirror either https://github.com/needle-mirror/com.unity.ui

[weary jewel]

Yeah I was playing around at lunchtime to find it, but couldn't. There some editor specific widgets you can add to the Toolkit editor, but it didn't include the ones you're looking for.

[tranquil sigil]

            var root = new VisualElement();

            List<string> buttonStrings = new List<string> { "Btn 1", "Btn 2", "Btn 3" };

            RadioButtonGroup radioButtonGroup = new RadioButtonGroup("New group", buttonStrings);

            var container = radioButtonGroup.Q<VisualElement>("unity-radio-button-group__container");

            container.style.flexDirection = FlexDirection.Row;

            root.Add(radioButtonGroup);

            return root;

Do you know how to apply specific style to just this container's content?
I want to just try restyling "unity-radio-button-group__container"'s radio buttons as buttons.

There is only get, but not set style sheets

Nvm this is more troublesome than I thought, because radio button themselves is hard to style as buttons with diff hierarchy

I should just try make my own custom control

[tranquil sigil]

Nvm can't even create my own toggle button group, the UnityEngine.UIElements assembly is hidden, can't access their internal properties and methods.

[rough scarab]

What are y'all trying to do?

ButtonStrip is in the ui.builder package, which is in Unity core now

depending on the version

(https://github.com/Unity-Technologies/UnityCsReference/blob/2022.2/External/MirroredPackageSources/com.unity.ui.builder/Editor/Utilities/ButtonStrip/ButtonStrip.cs)

[weary jewel]

Thanks. I must have been using the wrong namespace. I'll try again tonight .

[tranquil sigil]

Thanks, getting somewhere!

So how exactly do you change pseudo state on custom control? (Such as Checked)

button.AddToClassList("unity-button:checked"); This does not work

Maybe I'll try creating custom toggle button

[warm crest]

can you suggest me a tutorial for ui toolkit?

[weary jewel]

I've been doing this one on Udemy which is pretty comprehensive. It should be on sale at the moment for about $10.

https://www.udemy.com/course/modern-unity-ui-with-ui-toolkit/

[marsh abyss]

how do you disable the hover style from being activated

it still happens on disabled buttons

[warm crest]

Thanks. I have a stupid question if you don't mind. Is ui toolkit all coding? I'm making a game with a friend and he wants help with ui. (im doing the 3d stuff) I know little to none coding. I saw something about ui builder thats easier I think?

[weary jewel]

It's a weird one. There's probably more coding involved with Toolkit UI, but so far I find it actually easier than using Unity UI.

Building the layout and styling elements is similar to building webpages, which is my background, so it makes sense to me. You do have to manually hook all your elements up with event callbacks using C#. This isn't too difficult once you've done a few though.

Toolkit UI just feels more natural then Unity UI, and with stylesheets it makes styling a UI a joy, rather than a pain.

[fiery mountain]

you could setup things that make it easier for your friend to help but interfaces could be created without any code. Granted if you want specialized behaviors some code will have to be written.

Anyone know if a way that i could get the document panel settings or the root document component from a visual element?

worst case, i might have to set some values from a monobehavior

[autumn dagger]

is there a easy method for animating color just in the style, or would i need to do that in code

more or less when something has the .running class on it, i want it to pulse orange

[muted geyser]

Hello. Does UI Toolkit have :first-child like selectors?

[weary jewel]

It doesn't seem like it. As far as I can tell you would need to track the first-child with C# like below:

VisualElement text = _parentElement.ElementAt(0);
text.AddToClassList("first");

[muted geyser]

Looks sad. Right now just adding uss class selector .flex-gap .flex-gap__first behaviour and manually apllying to each first and last elements. I hope they will add it properly

[fiery mountain]

using the transitions with classes. If you want to do it in code it is the experimental.animation and there is a lot of options there. For color you need to use one of the Start

[tribal void]

When trying to assign a font in UITK, I have to assign it via FontAsset as far as I know. But when I do that It throws this error which seems like some internal error? Does anyone know how to solve this

IndexOutOfRangeException: Index was outside the bounds of the array.
(wrapper stelemref) System.Object.virt_stelemref_class_small_idepth(intptr,object)
Unity.UI.Builder.StyleValueHandleExtensions.SetValue (UnityEngine.UIElements.StyleSheet styleSheet, UnityEngine.UIElements.StyleValueHandle valueHandle, UnityEngine.Object value) (at <14da45c23df54e8495bad0bff3335ea2>:0)
Unity.UI.Builder.BuilderInspectorStyleFields.OnFieldValueChangeFont (UnityEngine.UIElements.ChangeEvent`1[T] e, System.String styleName) (at <14da45c23df54e8495bad0bff3335ea2>:0)
Unity.UI.Builder.BuilderInspectorStyleFields+<>c__DisplayClass54_0.<BindStyleField>b__12 (UnityEngine.UIElements.ChangeEvent`1[T] e) (at <14da45c23df54e8495bad0bff3335ea2>:0)

[muted geyser]

How to change position of a visualelement via code in runtime?
For example:
Spawn modal window and position at spawn time

[tribal void]

same as any other element. Manipulate the visualement's transform. You do also need to set it to absolute positioning in the USS for it tho

yourVisualElement.transform.position exists

[muted geyser]

Thanks

[muted geyser]

This is good if you want to use Vector3.
In my case i wanted to know how to move it in Percentage values (without calculating on my own), so I made this method to toggle visibility and position new modal window (of course this code is only for practice and it should has better architecture )

[tribal void]

not sure you wanna set both top and bottom to the same length value. seems that would cause issues above 50%

also, a modal window could be extending VisualElement which should be nice. then you dont need to manage as many instances

[muted geyser]

You right

[tribal void]

ah, you are extending it, I assumed you were doing it via monobehaviour "backend"

easiest would be to make an integer property on the visualelement, bind that to the UXML

[muted geyser]

I'm gonna make a feature, where you Instantiate empty modal window, populate with the content and make it dynamic as possible
Modal itslef will have just preconfigured values such as:
margin;padding;border etc. visual elements
All content will be instantiated separately
For example:
"Are u sure" modal when exiting the game - should be in center of the screen no matter what
Tooltip modal - should be above cursor and follow some period of time

[tribal void]

I asked about the possibility of custom attributes for UXML binding on the forum btw.
They are working on it but its taking some more time and no estimate on that was provided

[muted geyser]

Yea i saw roadmap

[tribal void]

that way you can have preset logic on a scriptable object and populate it into the DOM

which would be really interesting and flexible 🤔

[muted geyser]

I have a question on a forum which i asked: "Why Button element inherited from TextElement?"
Like, wtf?
Why other controls don't do that?
Why don't we make Button : VisualElement and put Label
What if I don't want text element on my button? Why it should use my memory?

[tribal void]

like adding multiple USS classes at once being a feature I would implement instantly

hmm

wait the fk

it actually does inherit from textelement

[muted geyser]

🙂

I can assume that they developed button early on and now they doing more composition-like approach with new controls
If it is, it's great

https://forum.unity.com/threads/why-button-inherited-from-text-element-in-ui-toolkit.1360648/ just in case i put a question on the forum, but i got weird response which does not solve my problem

[tribal void]

technically a button is just a textelement with a clickevent and soem styling so it kinda makes sense

[muted geyser]

this makes sense for me XD.
Don't need text? Remove it.

[tribal void]

yeah, but its an additional component in the scene

[muted geyser]

but why its essential in ui toolkit? XD
Anyways i will make my own button with composed text and not inherited

[tribal void]

that does still work if you provide an empty string tho doesnt it?

my assumption is that they want everything to be as selfcontained as possible

[muted geyser]

like monobehaviour? The reason they want dots?

[tribal void]

I meant UI wise, DOTS is separated because its required for the way it functions

[muted geyser]

I don't know. For me feels like thats is not a good approach. I will check how button inherited from text element and button without text affects on memory later.

[tribal void]

yeah uhm so now I wanna see if I can get DOTS to work with UITK XD

[tribal void]

nothing is stopping you from making a CustomButton: VisualElement class 🙂

[muted geyser]

yea, i know.
Just a wall of logic that i should learn before making it XD

[tribal void]

not rly

[muted geyser]

Not that big, but still a time consumer. When with Component Button I need couple interfaces and graphic to get raycast and i have my own Button component

[tribal void]

you dont even need that really, you can just register events on a visualelement

RegisterEventCallback<PointerDownEvent>

        Document.rootVisualElement.Q<VisualElement>("TEST").RegisterCallback<PointerDownEvent>(x => Debug.Log("I've been clicked!"));

[muted geyser]

Yea, need to research more on how they implemented this, maybe in the and Action Clicked will be better XD

[tribal void]

callbacks are delegates iirc

making them into actions seems redundant

[muted geyser]

But Action is a wrapper for void delegate

[tribal void]

oh

I mean in that case it really doesnt matter

[muted geyser]

Ecs gives us to work with multiple elements at the tick.
For example (using LeoEcsLite):
I want to spawn Image and put some sprite

To make this i would make class ImageView -> Image _image
Created component ViewRef<ImageView> public ImageView View;
Somehow spawned GameObject
Somehow get refence and created entity with component
Somehow made id-based logic around components to identify which ImageViews should has this sprite
And of course i would have tag components and tag cleaner systems to have better control
After that your system controllers will change sprite on the specific images

[muted geyser]

Do ui toolkit have auto size text? Is it 100% size solution?
I guess I need to implement my own solution...

[fiery mountain]

is there some bug where animation of the translation at runtime doesn't work?

Like I set a translation and in the UI Builder window it works correctly. In game it is something else

or is there a way that I can access the tween calculations?

[young spade]

hi

So I have a UI which disables itself & enables another UI

The UI which gets enabled is only on the screen momentarily

& then the UI which was initially disabled, needs to get reenabled

But when renabling it, it's like the UI just gets reset

None of the connected button events work, etc

[fiery mountain]

@young spade are you disabling the UIDocment?

or the object with the doc

if so that is why everything is reset. Usually you'd have to do the style display = none. This will hide it but not clear it's state

[coarse aurora]

How to add scrollbar on custom inspector?

I have this InspectorView that needs a scrollbar

[coarse aurora]

I got to see the scrobar with min height value

but I haven't a fixed height

[fiery mountain]

anyone ever generate a complex mesh using generateVisualContent?

just curious because i am trying to load a flattened version of a mesh but it doesn't render anything.

[rough scarab]

https://help.vertx.xyz/ui/ui-toolkit/generatevisualcontent

[abstract sandal]

hey so im trying to have an integer readout in my custom editor window of a variable in another script
I am using ui toolkit binding for this, but the issue is is that its incredibly laggy, what should I do instead?
just having this is enough to drop my framerate from 140 to about 7(AO is a script attatched to a gameobject with a LOT of data in it):

IntegerField RemainingObjectsField = new IntegerField() {bindingPath = "RunningTasks"};
RemainingObjectsField.Bind(AO);

[final patrol]

Is it possible to generate an entire USS theme on the fly at runtime based on player-created data?

[tribal ivy]

Guys, how do I make a button as wide as its text?

I cannot figure it out at all

[tribal ivy]

Figured it out

It needs to be placed in a container first

[thick panther]

im not sure where to ask this and im probably being stupid but i cannot figure out how to zoom out of this, when i zoom normally it just zooms in length ways but not height, thanksss.

[fiery mountain]

I was reading the unity documentation.

Reference image assets for High DPI/Retina screens
To support screens with different screen densities (DPI), do the following:

Make sure that the high DPI versions of your textures have a @2x suffix in their file names. For example the high DPI version of myimage.png should be [e-mail]
Place the regular and high DPI versions of the texture assets in the same project folder.
When Unity loads the asset, it automatically chooses the correct version for the current screen DPI.

For example, if you use resource("myimage") in USS, Unity loads either Resources/myimage.png or Resources/[e-mail].

Strings
Use quotes to specify a string value. For example: --my-property: "foo".

So is there a way to test this out? I was trying to replicate it but it only ever uses the standard not the @2x do i have to define some variable someplace?

[worn summit]

hey all! quick question. how do you create UI animations? Like which tool do you use?

I don't want to have to pay for After Effects 😄

[final patrol]

For future reference, does anyone know where there's documentation on what tags are supported when using Rich Text in the UI Builder?

I'll need to port my game's Terminal widget to UI Toolkit eventually and that makes heavy use of TextMeshPro markup

[fiery mountain]

most of the TMP ones work.

I wanted to test something with weights but that didn't work. would have to check them out

[final patrol]

Does <mark> work?

And does it behave the same? I really dislike how TMP renders the mark on top of the text, makes it hard to do background colors like you'd find in a standard ANSI-compliant terminal

...because you need to create two TMP elements and position them such that they overlap each other and appear as one, and one gets all of the background colors and one gets the actual text

I really hope that 1) I can still have those <mark> elements but that 2) I don't have to use that workaround

Oh. It does have <mark> but I WILL need to do the funky stuff

that should say "Regular text with red highlight"

[fiery mountain]

https://docs.unity3d.com/Manual/UIE-rich-text-tags.html

https://docs.unity3d.com/Manual/UIE-supported-tags.html

[final patrol]

wait a sec, it supports <a>!?

I hope I can handle the link navigation myself, my game has an in-game web browser, being able to link to pages in it would be really neat

[fiery mountain]

looks like links do work. as for linking internal pages who knows

probably some event you can use

[final patrol]

I can't even get the link to parse

source text

public static void Main()
{
    I::live->in("great", pain);
}

<a href="https://acidiclight.dev/">hi</a>

yes I accidentally just promoted my actual website

also, is it possible to load fonts in USS that are outside of the Resources folder?

[fiery mountain]

strange, I copy pasted the example from the docs and it works 🤔 but it also is kind of buggy

[final patrol]

It's weird - it's like it sees the end tag but not the opening one

[fiery mountain]

I don't think we are able to load them outside. Kind of been a question of mine since a long time. Also if it is best practice to leave "static" interface assets in resources

[final patrol]

I've never understood the Resources folder

I would think that the entire game's Assets directory is

...a resources folder

[fiery mountain]

so you can use the url or resource

As per https://docs.unity3d.com/Manual/UIE-font-asset.html

Label {
-unity-font-definition: url(“/Assets/UI Toolkit/Resources/Fonts & Materials/LiberationSans SDF.asset”);
}

[final patrol]

Agh, this doesn't seem to work

:root {
    --sans-serif: url("/Assets/Resources/Fonts/Abel/Abel-Regular.ttf");
}

VisualElement {
    -unity-font: var(--sans-serif);
}

No errors in the console

I wanna use variables for this so, if I decide to change the sans-serif font for my theme, I can do it in one spot only

[fiery mountain]

you need to create the asset from the TTF

[final patrol]

I can't just use the TTF directly?

[fiery mountain]

no you have to generate an asset and setup what you need from it, they have fallbacks and OS fonts etc.

I think their old "font" component worked that way but since they are using text mesh pro version it requires the assets.

just right click the font, Create/Text/Font Asset

[final patrol]

Okay now it just straight-up won't display ANY text

:root {
    --sans-serif: url("/Assets/Resources/Fonts/Abel/Abel-Regular SDF.asset");
}

VisualElement {
    -unity-font-definition: var(--sans-serif);
}

still nothing in the console

[fiery mountain]

try resource("Fonts/Abel/Abel-Regular SDF.asset");

[final patrol]

Same thing

[fiery mountain]

so, i think i know what it is, You might have to set the -unity-font:

mine are set from the uibuilder and their values are using a single ' not the double "

i just set the values from the builder into a style, then just copied it into the other :root

[final patrol]

This still isn't working

I even changed to Hack instead of Abel, since it's a monospace font and I'll KNOW if it works

using -unity-font-definition results in the screenshot above

using -unity-font just falls back to the default style

[fiery mountain]

a few snippets, when you generate the asset you have to define the characters used. I just did ascii

[final patrol]

Wouldn't hitting Ctrl+Shift+F12 or whatever it is automatically do that for you?

[fiery mountain]

/shrug not sure on the hotkeys

if you view the SDF file in the font asset creator it should show some characters

[final patrol]

These are existing fonts that I've been using in my game for months

they absolutely do have character data

The only reason I was originally referencing the ttf assets was because every available online example I can find tells me to

WAIT

--sans-serif: url('/Assets/Resources/Fonts/Hack/Hack-Regular.ttf'); THAT WORKS

I win! :)

[final patrol]

How would I accomplish a row of window title buttons with USS?

The title buttons are in a flex container that's arranged horizontally, and I want to position the flex container at the far right of the window title bar

Using absolute positioning

But I don't know how wide each title button will be

I just know the buttons will be in the order Minimize, Maximize, Close from left to right

[livid sand]

Justify content flex end

[final patrol]

Thoroughly confused rn

Creating a desktop style layout and it looks fine in the editor

I'm previewing with the right theme too

In-game it's broken

I want the #Workspace element to fill the remainder of the vertical height of the flexbox and I don't want the content inside the Workspace to be arranged via flexbox

If I set the background color of Workspace to red in the USS, I can see it taking up the entire space inside UI Builder. But in-game it just....doesn't.

It's like the parent panel of the entire desktop just isn't filling the whole screen

In fact I even rearranged it such that the Status Panel SHOULD appear at the bottom of the screen (and, in fact, does in the UI Builder preview).

But not in-game.

Anyone know how to get the UIDocument to actually take up the entire height of the screen?

[final patrol]

I'm really stumped on this

[final patrol]

I worked around it

I set my PanelSettings scale mode to constant pixel size, then in Update() on my UI controller I just set the root element's width and height to match the screen

There's gotta be a better way to do this

[wind gorge]

are you sure your containing element has width/height at 100%?

use the ui debugger to figure out which element has 0 w/h

and just keep setting w/h to 100 on everything until it works

[final patrol]

I tried that for literally two hours

The actual local bounding box of UIDocument.rootVisualElement was reporting a height of 22

[wind gorge]

Could you show me the root template element in ui debugger?

You have to set the height on that too

[wind gorge]

You do not have height 100% set on that element or the parent element

Try setting it in the debugger and see if that does it

[final patrol]

I don't see a way to set the height

[wind gorge]

search height in the debugger styles

click show all first

[final patrol]

You'll have to forgive me, I'm blind and can barely read, even while zoomed in. I cannot find a show all button

[final patrol]

That definitely worked, only problem now is that I wouldn't know how to set this in the theme

Or in UI Builder itself since I can't modify the template container

[wind gorge]

in your global styles USS file

You can't do that in ui builder iirc

The styles file is the one you're using in the panel settings

[final patrol]

Yeah, and I don't know how I'd set the height of that template container in there

without affecting ALL elements of type TemplateContainer

[wind gorge]

Your template container has a unique name already

[final patrol]

...I just noticed that

#ShellRoot-container

Kinda seems weird that the root container wouldn't automatically have height: 100% though

[wind gorge]

Nah that would only make sense if you need your panel to be fullscreen

Also that's how it is in browsers

[final patrol]

Alrighty! Well either way, it's fixed now

Now I have to figure out how to make draggable windows with this thing and uh

Kill me

Could I even subscribe to mouse down/mouse move/mouse up events on a VisualElement?

[final patrol]

I have a style rule in my USS for a minimized window that should set its display to none (so it's hidden both visually and to the layout system).

.window .minimized {
    display: none;
}

I'm applying the .minimized class on the window from C# if the window should be minimized. I can see the class being applied in the debugger, but for some reason the display is still set to flex. Anyone know why? I've verified that there are no inline styles that would be overriding this, and I've also tried !important.

[novel wasp]

Is there an easier way to make a generic, reorderable list in the inspector that won't break when reordering differently typed elements? Like, having a list of class Item, which has a generic sub-class Item<T>, which then has its own explicitly typed sub-classes like IntItem, StringItem, GameObjectItem, etc.

I've been having a ton of trouble with what I thought was a built-in feature but it breaks constantly.

[final patrol]

Ohhhhkay... that's not a valid ID lol

idk how I'ma be able to select #Login Screen(Clone)-container with USS lol

[wind gorge]

It should be. window.minimized

The one you have will only affect children with the minimized class

[wind gorge]

Just rename your uxml file to not have spaces lol

[final patrol]

It was because the uidpcument was being instantiated as a prefab. It was using the name of the game object and not the uxml file.

[wind gorge]

huh, weird

well, you can try doing #PanelSettings > *

this will select only the direct children of panelsettings and nothing else

[blazing bronze]

Is it possible to create custom element with exposed Sprite/Image as a parameter?
My initial plan was to use UxmlTypeAttributeDescription<Sprite> but I have issues converting that to UnityEngine.Sprite and in UI Builder it looks wrong (no picker for Sprite) 😦

[daring mortar]

How to assign a UXML file for the scriptableObject ?

[fiery mountain]

Anyone know if there is a way to batch a bunch of changes to a bunch of children of one specific element. So it isn’t rebuilding every modification except after the last?

Or does it automatically just mark it dirty and rebuild later?

[final patrol]

Is this not valid UXML? D:

<ui:Label>
    Welcome to Socially Distant OS.
    
    It appears this is the first time you have started up your computer. This setup wizard will guide you through creating your administrator account
    and configuring basic system settings.
</ui:Label>

I was hoping that I could do text just like you would in HTML

[daring mortar]

Does UI toolkit have alternative to Sprite Preview?

[final patrol]

I can't seem to actually select and type inside a TextField in-game

I can see the text field taking up space in the UI, although I haven't styled it, but I cannot actually click on it to type a value

The field is in between "Username" and "Field is required"

<ui:VisualElement class="form-field">
    <ui:Label class="form-field-label" text="Username" />
    <ui:TextField focusable="true" name="UsernameField" class="form-control" />
    <ui:Label class="form-field-error" name="UsernameError" />
</ui:VisualElement>

[fallow anchor]

How can I get the current mouse position inside a graph view?

this.ChangeCoordinatesTo(contentViewContainer, Event.current.mousePosition) worked for me for anyone wondering

[final patrol]

Still stumped on text fields

I can't click on them

I don't even see a text caret

[final patrol]

After some testing, I can edit the text of the text field through the debugger and I can see it

I can even edit it

That is, I can cursor around and delete characters

...Can't type anything new though, and it looks like both my text fields have focus

Fixed the focus part, conflicting tabindex. Still can't type though

[final patrol]

This is driving me absolutely mad... I just wanna be able to type text in a text box D:

[unborn bluff]

Hi there, isnt it that with unity 2022.2b the default inspector is drawn with UIToolkit? because i installed the Beta and tried it and it seems that the default inspector is still drawn with IMGUI

[fiery mountain]

Is there an element in front of it? Or picking mode set to ignore?

[vale charm]

Anyone know how to removed the selected color change on a TextField? I have a custom color set on the text, but when I click on the text field the text changes color.

Like i see it has to do with this

but how do i override it

[unborn bluff]

Strange, i use the same unity version, but the default inspector is still IMGUI. Do i need to activate it somewhere? Or Could some packages cause this issue?

[wise dawn]

Hey boys

I am making a Editor Tool that has a tab system. I am making a clean up on the code, and I want to know why having a class TabMenuElement : VisualElement i cant do on the editor class this

TabMenuElement _tabMenuElement;

private void CreateBaseUI()
{
_tabMenuElement?.RemoveFromHierarchy();
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/UI/EditorTool.uxml");
_tabMenuElement= visualTree.Instantiate();
}

"Cannot convert source type 'UnityEngine.UIElements.TemplateContainer' to target type 'TabMenuElement'"

tried this aswell _tabMenuElement = Instantiate(visualTree) as TabMenuElement;

but

Cannot convert type 'UnityEngine.UIElements.VisualTreeAsset' to 'TabMenuElement' via a built-in conversion

[pseudo dock]

try visualTree.Instantiate().Q<TabMenuElement>()

[wise dawn]

God

It worked, thanks buddy

Any cool tutorial/documentation you advice?

For UIElements in general

[pseudo dock]

This is a nice collectoin https://gamedev-resources.com/tutorials-2/ui-toolkit-tutorials/

[wise dawn]

Thank you so much 🙂

[delicate talon]

Quick Question What is the difference between RegisterCallback and RegisterValueChangedCallback because it seems they do the same thing but one seems slower.

[rough scarab]

Could do. Some packages override the inspector for all objects so they allow things like attributes that can display buttons

@unborn bluff

[novel wasp]

Which one is slower? 🤔

[stray estuary]

Ive been getting a weird error,

"The type or namespace name UiDocument could not be found "

which is really weird because i havent changed anything since last time opening my project.
if anyone could help it would be great

[rough scarab]

There is no such thing as UiDocument

[celest grove]

is there any way to extend ui builder itself?

[novel wasp]

I think I've seen it done

[celest grove]

can you show me the link?

[novel wasp]

Don't know if this is what you mean, and it's a lil' old, but here you go.
https://github.com/t-macnaga/UIBuilderExtensions

[celest grove]

thank you 🙂

[unborn bluff]

Can anyone familiar with UIElements tell me if it is possible to add different elements to a ListView? It seems like elements need to be the same.

[rain pumice]

hello. is it possible to change the order in which stylesheets are applied to custom controls? I created a custom control and added a stylesheet by C# with a default style. now I want add a new stylesheet in UI builder where I change the styling of a class. but the stylesheet which I added in the custom control constructor always overwrites the external stylesheet rules.

[rare eagle]

https://issuetracker.unity3d.com/issues/ui-toolkit-dropdown-doesnt-fold-out-when-the-input-system-package-is-installed-and-an-eventsystem-is-present-in-the-scene

Recommend everyone avoids UI Toolkit at all costs since they like to introduce critical bugs in Official Stable releases and then refuse to fix them

It's okay I'll just design my entire game UI without dropdowns. Easy fix.

[wind gorge]

Doesn't that only occur in the beta versions?

[rare eagle]

Kind of?

I think this comment on the bug summarizes it best:

"I strongly urge Unity to reconsider fixing this in 2022.1. This is an obvious regression from just a few patch versions ago (patch versions aren't suppose to introduce new breaking bugs, remember), and 2022.1 is the current newest stable version and the version in which you just proclaimed that UI Toolkit was ready for use in runtime. How can you expect developers to trust your new systems, when you don't even take them serious yourself? This is like Scriptable Render Pipeline and DOTs all over again. Are we suppose to always go "Nah, let's give them a few more years to fix things" for every new system???"

I'll just wait a few years and it might be fixed.

[wind gorge]

Since when is 2022 stable? It is still in beta iirc

It would make sense to be mad at unity if it was in lts

Patch versions aren't supposed to introduce bugs in lts, not in beta

Also what is the problem with moving to 2022.2?

[rare eagle]

Pretty sure it's still not fixed there

[wind gorge]

Again it's a beta, you should only use beta versions if you are experienced in working around critical bugs

[rare eagle]

And unless that's spelled out somewhere. Alpha/Beta and Stable release are not the same thing

Who is a beta for?

Is it for people to find bugs and then ultimately fix them a year later?

Because dropdown elements being completely fucked for 5 months is unacceptable.

Idc if I'm on a beta build or not.

[wind gorge]

Ah, it's been 5 months

I thought the main concern was that they plan to fix it 2022.2

That makes more sense

That's classic unity for ya

[rare eagle]

It's unacceptable.

It's not rocket science why this engine is getting destroyed by the competition...

Loser CEO running the company + 0 dogfooded projects

[wind gorge]

Tbh you can work around this by copying the package to your project and fixing it yourself

If it's a critical issue

[rare eagle]

I'd rather rewrite my game on UE5 than deal with that horseshit tbh

And that's knowing I'm fully capable of fixing it

I seriously plan on trashing Unity in my game's startup

"Don't Use Unity" will be the first thing players see

lol

[wind gorge]

Go ahead then, ue5 has unrealclr and it's literally faster than unity domain reload

[rare eagle]

It also sucks working with this engine for 5 years and not really having ANYTHING change over those 5 years lol

Like if you look at UE4 vs UE5

What has Unity done in 5 years?...

Fucking nothing in the grand scheme of things.

Has there been any sort of major tech overhauls at all in 5 years?

New physics? Rendering like Nanite? Lighting?

The entire company is focused on DOTS which is a dogshit workflow

[wind gorge]

Unity's main focus is mobile

It will never ever catch up to unreal

[rare eagle]

I'm not looking for realism

I'm looking for a thought out game dev experience lol

One made by actual game devs

Gigaya was something that could fixed that

I mean, Unity released a terrain system that is abysmal under the hood

Like absolutely clear it was made by people without the appropriate game dev experience

[ornate cliff]

@rare eagle Let's stay away from speculations and keep on topic.

Also if you are moving the post delete the original don't cross-post next time

[rare eagle]

lol Unity's feeling are hurt.

[ornate cliff]

@rare eagle For the last time stop spamming the channel

[rare eagle]

On topic: Fix the UI Toolkit dropdowns in less than 5 months

[ornate cliff]

@rare eagle I'm pretty sure you were told this before. If you have suggestions use forums which have dedicated topics for this.

[bronze iron]

Is there a begin drag event for sliders? Or any alternatives to implement that?

[unborn bluff]

Can anyone point me to an example of overwriting a VisualElement class?

[delicate talon]

Sorry for the late reply
For me it seems RegistarVAlueChangedCallback seems to be slower. But it could be because of the way I was using it because I'm updating the name of a file with it and that could be the reason. But doing the same thing with RegistarCallback doesn't run as slow.

[lean barn]

Hello, I'm trying to work on a World Space UI Document but I have a blocking issue, I'm rendering a UIDocument into a RenderTexture using the panelSettings but I didn't find a way to disable the screen space interactivity, any idea?

[wind gorge]

Add a click listener on the root panel and stop propagation

Also set pickingmode to false on the root

[lean barn]

Doesn't work unfortunately

[wind gorge]

Try asking on the forums then

[lean barn]

Okay, thanks

[wind gorge]

In my case I solved it by setting the sort order behind my interactive ui but it obviously does not apply here

[lean barn]

If I have another UIDocument in screen space on top of that it should block the events?

[wind gorge]

You can try removing everything but the root element to see if picking mode actually helps

Because it only applies to the element you set it on and nothing else

[wind gorge]

Yeah

It's really ducking dumb that it behaves this way tho

[lean barn]

Yeah, rendering the UI on a render texture should disable the screen space events by default 😅

[rocky raptor]

Where is the documentation about tags on label with RichText?

[novel wasp]

Ok, so I'm having this problem with a list of a polymorphic class, which has its own custom UIElements property drawers.
When I reorder items in the list that are of different types, it causes the errors to show up like:

SerializedProperty items.Array.data[2].value has disappeared!
type is not a supported float value
UnityEditor.RetainedMode:UpdateSchedulers ()

This also happens in a more complicated custom editor I have when I delete an element and a differently typed one takes it's place, but that behavior doesn't seem to show up in this basic example.

Version of Unity is 2021.3.2f1
Code for reproducing: https://paste.ofcode.org/yFDGtMp4TYzTEcvN5J2jwi

Does anyone know how to deal with this? It's been aggravating me all week.

This seems like a really simple use case and I don't know why unity is bugging out from it.

[drowsy nimbus]

hi! anyone here know if the unity team has plans to add or if there's any way to use the :not pseudo selector in a USS class? i want my button to display the hover state only when it's not active

[final patrol]

When implementing a custom VisualElement control, is it possible to have a method run every frame? I'm writing a terminal emulator and I need to do certain checks every frame

Things like cursor blink logic and basic stuff like that

[static canyon]

You can use the schedule syntax on any visual element. Psuedocode:
myButton.schedule(()=> doStuff()).executeEvery(100ms)

[final patrol]

@static canyon I want to execute a method in real time though, as in every frame, not a fixed interval.

[static canyon]

In that case just use Update in a monobehaviour

[final patrol]

Won't work either. This is a custom control and must not rely on a MonoBehaviour.

[static canyon]

Ok good luck 👍

[drowsy nimbus]

you can try scheduling the event like @static canyon mentioned but instead of executeEvery just put it in a while loop with an escape condition and an await Task.Yield()

dont know how itll work since i think editor windows might have different intervals than a monobehaviour's update

you can also create a ghost singleton dont destroyonload monobehaviour that just sits in the scene sending events every update, and you can subscribe to said events from the UI

[drowsy nimbus]

this I think would be a bit better since you dont rely on scheduling stuff in the UI

[final patrol]

Well this is runtime UI, not an editor window

it's just that it's a custom control, and so it needs to be self-contained

Which is why a MonoBehaviour can't be used here

The other concerning thing is, since this is a terminal emulator, it needs to read from a Stream every frame so it can get the text it needs to display

[static canyon]

My suspicion is you’ll eventually need to reconcile that wanting to be executing in Unity’s Update loop requires a relationship with Unity’s Update loop. (Though I don’t really see a reason why eg a flashing cursor or line feeding would prefer to be frame rate dependent but that’s your call).
If you’re set on it then you’ll need some mechanism - usually people use a hidden spawned GameObject or something like the More Effective Coroutines asset (which also just spawns an invisible GO). In Unity it’s either Monobehaviours (GOs) or SystemBase (DOTS). You can subscribe to events like onRender but at that point it starts to be fighting against Unity architecture imo.

Fwiw I also wouldn’t expect logic for reading in data to be anywhere near UI code but that’s also pretty opinionated. I’d want my display refresh rate to be independent of my data update. Ie UI being just a view on the current data.

[drowsy nimbus]

then the monibehaviour sending events thing would still work, but there's no way around it, you need a monibehaviour to be in the scene sending you a bump every frame, you can spawn it from within the constructor or setup the singleton instance

monobehaviour **

also you could bind the control to whatever thing is inputting your data, idk

[final patrol]

I think I'll just use the scheduler and read at a fixed interval, something like 10 or 20 ms

[final patrol]

The terminal itself is the thing inputting the data

Terminal emulators emulate an actual piece of hardware. A screen with a keyboard and a serial bus... the terminal only cares about how to draw the text it reads from the serial bus, and about sending your keystrokes through the serial bus

In this case the "screen" is the UI, the keyboard is whatever events I get from UI Toolkit, and the serial bus is my Stream.

On every frame, I read bytes from the Stream and update the UI based on that. Then I send any keystrokes back down the stream for whatever's waiting for input from the user. That's all this terminal emulator needs to do.

Only reason I wanted it to be done on every frame instead of on a fixed interval is because that's what actual X11 terminal emulators on Linux do. They may render with vsync to prevent screen-tearing, but they read from the PTY device and process it immediately. That way, there isn't a delay between you typing something into your shell prompt and the text actually appearing on-screen.

(if there is one, it's extremely small and not noticeable)

[celest grove]

sometimes uibuilder changed like this.

Is there a solution for it? I just close the uibuilder, and reopen it.

[thorn harness]

What version of UI-Toolkit is currently supported by unity 2020.3.1f1?

[celest grove]

I am using Unity 2022.2.0b16.112.5806

[thorn harness]

. . . But what version of UI-Toolkit works with it

2020 specifically

[unborn bluff]

How can I change the height of a VisualElement from code?

[summer narwhal]

can anyone tell me the cheat of getting elements "beside" each other? In CSS I would do that using align or similar, but for Unity I did find no solution online that works for me for some reason

in the end, the blue one should be "Before" the two red/orange in the same line

[cursive otter]

Hey guys! Fast question - where can I suppress "Layout update is struggling to process current layout"? That damn error fires when I have 3 List View inside each other in my custom inspector and UI Toolkit can't handle that

[static canyon]

Geez if you work this out, please let me know. It's really arbitrary and unhelpful. It's better than it used to be (we're now on 2022.2) but yea.. annoying af. Hardcoded to 7 in the package from memory but when the depth is 7 within one layout pass seems really hard to intuit.

[lean horizon]

how can I make the buttons stretch when flex direction in row mode?

[unborn bluff]

doesnt the Grow option on the button do it

when you set it to 1

[lean horizon]

wow ty you have no idea how much you have helped me

[queen timber]

Make the blue's parent flex-direction: row?

[unborn bluff]

Glad I was able to help 😄

[cursive otter]

Can't find anything in docs but is there a way to handle or customize copy paste behaviours on visual elements? Or we should write ContextualMenuManipulator\ContextualMenuPopulateEvent from scratch?

[cursive otter]

I've decided to just drop this ugly ListView and write my own from scratch.

[cursive otter]

Meeeh what the point of providing manipulators which f... can't override default one, can't clear one (despite in the docs for 2021.3 there is evt.menu.ClearItems(); but in fact that just not exist and you probably should use evt.menu.MenuItems() which returns list which you can clear But still event just don't fire.... Foldout is focusable, picking mode - Position... no luck....

It just continue to show me default one

[cursive otter]

Damn dug through code and found Unity way

[lean horizon]

is it possible to call CreateInspectorGUI() more Than once? I have to click away for my UI to update

[teal belfry]

should my UIDocument stuff (UIBuilder) be on a canvas? not sure how else to make it invisible and not-interactable whenever I want

[lean horizon]

to make it invisible you change display from flex > none
and for interactable you change picking mode to ignore

[teal belfry]

thanks! I found the picking mode code...what am I trying to do from for the display?

don't see that as an option

[lean horizon]

type style 1st

root.style."then what you want"

to make it invisible you properly gonna use '''root.style.display = DisplayStyle.None;'''

[teal belfry]

sweet thanks!

[delicate talon]

Any examples on how to setup and use the toolbar controls in Ui Toolkit?

[final patrol]

Anyone know how to disable word-wrapping on a Label?

[summer narwhal]

any idea how I can change an UI-Elements position / scale in code? tried using transform.position on the gameobject but the position stays the same

[fiery mountain]

@summer narwhal use style then there is scale translation and rotation

[dense zodiac]

Is there an overview of the lifecycle of a VisualElement? Like this https://docs.unity3d.com/Manual/ExecutionOrder.html but for VisualElements instead of GameObjects

I'm trying to figure out when is the best time to subscribe to / unsubscribe from / invoke some events

[summer narwhal]

thanks, works out pretty great

[final patrol]

Can this be done in code?

[lean horizon]

UIelemnt.style.flexWrap = Wrap.NoWrap Like This

[final patrol]

I thought that was only for content within a flex container

Because nowrap is the default. Label text still wraps though.

[dense zodiac]

Yeah no it's not the same

I think this is the one you're looking for

Very confusing naming, but I extracted it by applying the property to an element in the editor, saving the .uxml file, and looking at the generated code

[dense zodiac]

Let me know if it works

[oblique kelp]

This label is correctly wrapping, however it still takes a height as if it was one line, is there another setting im forgetting to make the parent adapt?

the parent is an absolute positioned item with auto height so constraints arent an issue

[fiery mountain]

@oblique kelp what are the values you have set in the parent and on the label?

I created a small example i'll share the snippet here. Just throw this into your uxml file

            <ui:VisualElement style="background-color: rgb(0, 0, 0); width: 316px; margin-left: 12px; margin-right: 12px; margin-top: 12px; margin-bottom: 12px; padding-left: 12px; padding-right: 12px; padding-top: 12px; padding-bottom: 12px; align-items: flex-start; align-self: flex-start; position: absolute;">
                <ui:VisualElement style="background-color: rgba(118, 118, 118, 0.33); margin-bottom: 10px;">
                    <ui:Label text="Title here" />
                    <ui:Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " style="white-space: normal;" />
                </ui:VisualElement>
                <ui:VisualElement style="background-color: rgb(53, 53, 53); flex-direction: row; padding-left: 6px; padding-right: 6px; padding-top: 6px; padding-bottom: 6px;">
                    <ui:VisualElement style="background-color: rgb(30, 142, 127); width: 100px; height: 100px;" />
                    <ui:VisualElement style="background-color: rgba(250, 250, 250, 0.44); width: 100px; height: 100px; margin-left: 5px;" />
                </ui:VisualElement>
            </ui:VisualElement>

[hallow fjord]

i need help with listview.
I need to find the actual list item that is bound to the listviewItem i only know a property of. I dont know which index that listViewItem has.
I know it has a certain Port VisualElement as a child in one of its displayed listElements.
What i want to do is to change the actual Data List when a connection with that port inside of the listview is created.

        
       
        var connectedAxisPortIndex = -1;
        
        Debug.Log($"AxisListCount: {axisListView.childCount}");   //This is always 0
        
        for (int i = 0; i < axisListView.childCount; i++)
        {
            var currentAxisInput =(AxisInputVisualElement2) axisListView[i];
            if (axisInput.port == currentAxisInput.port)
            {
                connectedAxisPortIndex = i;
            }
        }
        var axisData = scriptableObjectData.axis[connectedAxisPortIndex];
        axisData.componentTypeRef = node.GetConsiderationRef();
        axisListView.RefreshItems();```

basically i want to do something like this but i cant find the correct way to do this

The problem i have is that i never really select the listItem to be able to use the Events. i drop a graphview connection onto one of those listitems ports and that needs to change the underlying data

[lean horizon]

can you show UI without UIDocument?LIke from script

[oblique kelp]

sorry it took a while to respond, i fell asleep, heres the whole thing in the parent uxml

<ui:VisualElement name="building-panel" class="panel" style="position: absolute; bottom: 80px; left: 0; padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px; max-width: 225px; -unity-text-align: upper-left; flex-grow: 1;">
    <ui:Label text="The Best Building" display-tooltip-when-elided="true" name="building-name" class="h2" style="white-space: normal;" />
    <ui:Label text="This is a long description. The detail in which I describe this building is MASSIVE. as is the building. Boy is it big. Use it for cool stuff" name="building-desc" style="white-space: normal; padding-left: 4px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; -unity-text-align: upper-left; flex-grow: 1; flex-shrink: 1; display: flex;" />
</ui:VisualElement>```

class="panel" doesnt add anything but a background image

your example works

but i dont see a difference, besides my using max-width

yeah the issue is max width, thank you for the help

[bronze burrow]

Circular smooth scroll

[stone fox]

is it good practice to have a full-screen VisualElement as the root of the UI?
for instance in order to receive click events anywhere on the game scene, and open a (context driven) popup menu
or is it better to handle this with input system, check where the click was, and if it's on something that has a context menu have the ui do a popup on this location

imagine that this is for a hidden object / classic adventure kind of 2d game

[atomic rock]

Has anyone else had issues with the ListView and binding it to a SerializedProperty? https://forum.unity.com/threads/using-listview-with-bindproperty-to-a-serializedproperty-breaks-listview-itemschosen-event.1369482/

[dense spoke]

Hey guys I've got a small prob with my UI text not showing up in camera mode/game (altough I can see it at #scene) and I can't find how to fix this problem anywhere, what should I do? Also why is my text blurry at #scene?

I'm using Legacy Text if it matters. Also I've been following this video to do everything: https://www.youtube.com/watch?v=XtQMytORBmM&list=WL&index=35 the part where I got stuck was at 29:50

[atomic rock]

@dense spoke you probably want #📲┃ui-ux but let me take a look at the time stamp

[dense spoke]

Aha ok, thanks! Idk the difference yet I'm new to all this.

[hallow fjord]

https://docs.unity3d.com/ScriptReference/UIElements.ListView-showBoundCollectionSize.html
this is probably whats causing your issue. set it to false and try again

[dense spoke]

I'll try it now. Thanks!

[atomic rock]

Yep that was it... Why would it default to true? Thank you so much man

[hallow fjord]

no idea why... i am struggling for hours now with listview :/

[atomic rock]

I had been setting the itemsSource directly before skipping the SerializedProperty stuff and it worked fine

So it's only a problem when you bind directly to the listview... Weird. Thank you so much man!

[hallow fjord]

maybe you can help me out in return. im struggling with binding to nested objects in a listview.
any idea how to do this?

public class ConsiderationAxis
{
    public ConsiderationRef componentTypeRef;
    public AxisTargetType axisTargetType; 
    public ResponseCurve responseCurve;
}

thats what is one listelement

and now i need to bind a curveField to the animationCurve in responsecurve for example

public struct ResponseCurve
{
    public AnimationCurve responseCurveGraph;
    public ResponseCurveParameters parameters;
}```

thats how it currently looks

[unborn bluff]

Hi, how does the text size % work? I'm trying to make a responsive text size but nothing I've tried so far worked

[rare eagle]

From what I’ve seen myself, it seems to be based on the parent

A text box set to Font Size 200% inside of a VisualElement set to Font Size 18px would equal 32px

This is how I’m assuming it works

[copper solar]

is there a way to check if button have already registered callback on it.
button.RegisterCallback<ClickEvent>(func);
and later I want to register new callback only if it doesnt have a callback already.

[gusty estuary]

there's probably event field inside on which callbacks are stored

Does UI Toolkit support custom themes?
For example Dark/Light?

[fiery mountain]

You can load custom themes

[gusty estuary]

but how do I create styles with them?

I noticed Set Variable option in UI Builder

but it's pretty unclear how can I create my own variables

and set those based on theme

[fiery mountain]

they have an example in the recent project.....one sec i'll link it

https://blog.unity.com/games/try-the-new-ui-toolkit-sample-now-available-on-the-asset-store?utm_source=twitter&utm_medium=social&utm_campaign=engine_global_blog_2022-09-12_retention22-21lts-uitoolkitsampleproject

[gusty estuary]

🤔

[fiery mountain]

they have a section in the settings to change a theme

[gusty estuary]

thanks, interesting stuff

[fiery mountain]

is it possible to override the built in uss variables?

[gusty estuary]

yeah, that's what I'm trying to understand

but sadly

[unborn bluff]

That seems to work, thx

[gusty estuary]

UI toolkit sample theme change is garbage

they literally just create all decorations

and then hide them

with display flex/none option

depending on theme chosen

jeez

[fiery mountain]

Don't they swap out the actual theme though?

or the actual theme change was just changing the display not even the background?

because I was looking here https://docs.unity3d.com/Manual/UIE-uss-built-in-variable-reference.html for the references

you can directly add the references into the theme file and it shows up in the colors but I think it might not be applying or is being overriden

[wind gorge]

That is completely fine. How else would you do it lol

[gusty estuary]

they do, but actual theme does literally nothing but this

lol

[gusty estuary]

Swap style's texture property?

for example

so that it's same 1 VisualElement

not 3, with 2 hidden

currently what I want

is to be able to swap USS style's values based on theme

but it's very unclear whether variables is smth that does it

and how do you even work with it

[wind gorge]

Most of these elements do not exist in the default theme so there's nothing to swap

[gusty estuary]

that's why I want custom theme, that implement those

[fiery mountain]

anyone know of a way to view the "raw data" of the default.tss? 😄

normally you just create a new TSS and then add the USS files into the Style sheets

[wind gorge]

You can use variables for that just fine, decalre a var in a css class and add that class to root

[gusty estuary]

@import url("unity-theme://default");
VisualElement {}

kek

[wind gorge]

Now you can use the variable anywhere

[gusty estuary]

Is it anywhere on manual or sample/example?

[wind gorge]

And if you want to swap it then just add a new class with the new variable

[wind gorge]

No idea, never used the manual

I come from webdev so I already know everything

[gusty estuary]

maybe your own example?

[fiery mountain]

that isn't the data inside though, if you select the default asset, it shows Rules, Selectors, Colors, etc etc

[gusty estuary]

I never touched webdev so, it's very unfamiliar to me 😅

[gusty estuary]

I know, just some irony, hehe

[wind gorge]

First result on google

https://docs.unity3d.com/Manual/UIE-USS-CustomProperties.html

[gusty estuary]

thanks

:root
What is this keyword?

does it mean anything?

:root {
  --color-1: blue;
  --color-2: yellow;
}

[fiery mountain]

yeah so that applies to the root elements, after that you can set values using var(--color-1);

[gusty estuary]

🤔

how do I declare variable without any specific logic then?

[fiery mountain]

what do you mean?

[gusty estuary]

Maybe I don't really get what :root means then?

Is that baseline how you declare variables?

[wind gorge]

Anything staring with -- is a USS variable

don't confuse that with - that's defines a custom style

:root selects the first element in the tree

[gusty estuary]

I'm still confused, why USS is relevant to visual elements

other than holder of class

ok, I think I should read manual first

[gusty estuary]

ooook

now it's clear

[gusty estuary]

so

one thing to clarify

if I apply USS stylesheet to root visual element

in whole UI hierarchy

does it mean that it will be applied to literally all UI hierarchy?

even to those UI that were instantiated from separate UXML that are just added as children?

[wind gorge]

it applies to the root element of the visualtreeasset iirc

[fiery mountain]

if you wanted to apply it to everything of a specific type, for example lets say you want that font you can do it under the VisualElement

So something like

VisualElement {
 -unity-font: ........
}

[gusty estuary]

yeah, I read about selectors in manual (it's actually really good)

but I wodner

whether there's a global way

to define those

for literally all VisualElements, disregarding what USS they had

[fiery mountain]

not sure if it is best practice though, if you want it to be Label not just VisualElement

so in the TSS file you would add the FontStyles.uss for example, then you can define it there. Since it is part of the TSS it will be applied as long as you have that active theme

[gusty estuary]

oooh

[fiery mountain]

you can always override it with either inline or other classes

[gusty estuary]

this is what it's like

I see

looks like there's no manual for TSS

which is sadge

[lean horizon]

can you make UI in world space?

[novel wasp]

Not with UI toolkit right now, as far as I know.

[gusty estuary]

you can position alongside world coordinates, but it's still going to be drawn on UI Toolkit canvas

which looks flat

[fiery mountain]

you can have it track world space objects by converting from world space to screen space

[stray estuary]

the tutorial i followed wrote the code like this, but there isnt anywhere to pass in arguments to Method()

testButton = root.Q<Button>("testButton");
testButton.clicked += Method;

[gusty estuary]

because clicked is event and you register Method so then this event can pass arguments itself

(if they even exist)

[upper dirge]

hi. Im creating my first editor script with uitoolkit. Liking it so far, but I dont see a control that would enable me to open a file selector. Is there no file selector implemented yet or what?

[rough scarab]

Is there one in IMGUI? Surely you're just looking for a button or a text field

Then just call EditorUtility.OpenFilePanel or whatever

[upper dirge]

yes, there is EditorUtility.OpenFilePanel() in IMGUI

[rough scarab]

that's not IMGUI

[upper dirge]

aah, true

in my mind I was grouping that OpenFilePanel with EditorGUILayout.TextField()...those I cannot use with UIToolkit, right?

[rough scarab]

UIToolkit has a TextField, you can register whatever callbacks you want to it

[upper dirge]

i know, but am I right to say that EditorGUILayout.TextField() etc are IMGUI stuff and I cannot utilize them with UITookit

[rough scarab]

Yes, that's IMGUI. You can embed IMGUI in an IMGUIContainer, but it's generally only done when there aren't alternatives

[upper dirge]

ok cool, thanks @rough scarab

[lean horizon]

selected elements has blue outline how can I remove that?

[lean horizon]

ok I found fix I just needed to change border color in focus mode

[fiery mountain]

You can also register a PointerDownEvent to the button. testButton.RegisterCallback<PointerDownEvent>( ...... )

the events provide some extra info, including getting what element triggered the event

[hallow fjord]

anyone knows how i can implement the same behaviour as in shadergraph where when i drop a new edge on the background a menu opens to create a new node?
I dont know how i would receive a callback for edges that are not getting connected in the experimental graphview.

[stray estuary]

Thank you 🙏 it’s rare that someone actually responds to my questions in this channel