🧰┃ui-toolkit

[rough scarab]

I'd create an extra element and transition it's visibility using USS :hover and a selector

Looks like it's traversing the hierarchy to update the styles.
You might see terrible performance if for example you used the universal selector * somewhere with lots of children

[shadow quartz]

Behold the glory. Unity has an usable Graph Foundation package now.

Took two minutes two start making a dialogue editor for in game conversations.

edit:
Example of how easy it is to create new nodes with custom port and options.

[Serializable]
class DialogueNode : Node
{
        protected override void OnDefineOptions(INodeOptionDefinition context)
        {
            context.AddNodeOption<string>("Text");
        }

        protected override void OnDefinePorts(IPortDefinitionContext context)
        {
            context.AddInputPort<string>("Input").Build();
            context.AddOutputPort<string>("Output").Build();
        }
}

[kindred mountain]

You mean in an USS file? not sure where I would have placed that *

[rough scarab]

Yes

[kindred mountain]

Let me check, but i'm not sure i've ever used it. In theory, if that is correct and I was to remove the uss file, i guess it should perform better right? I will try that too

[kindred mountain]

Have you previosuly used the Experimental GraphView?

[kindred mountain]

I've just verified, i don't have any *, neither disabling the USS makes the peformance improve

[indigo dawn]

Hi,

Does anyone know of any way to modify the rendering layers of world space UI? We are currently using an outline package that outlines stuff on specific rendering layers, and it seems like the world space UI currently occupies all rendering layers.

[shadow quartz]

Yeah, it was good for some things, but honestly the new Graph Foundation that replaces it is honestly just really nice and quick to set up.

[kindred mountain]

How do you see the transition between one to the other?

Ive built mine with GraphView and thinking about switching

[shadow quartz]

Please note for each person needs it might be different. For something like a Dialogue Editor or TextureMaker it is super easy.

Honestly it is not that hard. This entire node set up, custom graph, and custom command node to make a sprite blink is only 114 lines of code. I could get it smaller honestly now that I learned there is a way to right click and switch input output nodes.

Example you could have a start conversation, end conversation, and middle dialogue nodes in a single node class using the OnDefineOptions method.

protected override void OnDefineOptions(INodeOptionDefinition context)
          {
              context.AddNodeOption<Color>("Blink Color");
              context.AddNodeOption<float>("Blink Duration");
          }

Example of allowing a node to change it's input/output ports without recompiling or boilerplate code.

Edit: Found out about the built in ContextNode and BlockNode after doing this originally. They work a lot better for a clean Dialogue node system.

[Serializable]
public class NodeWithOptions : Node
{
    enum PortTypes
    {
        Vec2,
        Vec3
    }

    const string k_PortCountName = "PortCount";
    const string k_PortTypeName = "PortType";

    protected override void OnDefineOptions(INodeOptionDefinition context)
    {
        context.AddNodeOption<int>(k_PortCountName,"Port Count",
            defaultValue: 2, attributes: new [] { new DelayedAttribute() });
        context.AddNodeOption<PortTypes>(k_PortTypeName, "Port Type");
    }

    protected override void OnDefinePorts(IPortDefinitionContext context)
    {
        var portCountOption = GetNodeOptionByName(k_PortCountName);
        portCountOption.TryGetValue<int>(out var portCount);
        for (var i = 0; i < portCount; i++)
        {
            context.AddInputPort<Vector2>($"{i}").Build();
        }

        var portTypeOption = GetNodeOptionByName(k_PortTypeName);
        portTypeOption.TryGetValue<PortTypes>(out var portType);

        if (portType == PortTypes.Vec3)
        {
            context.AddOutputPort<Vector3>("result").Build();
        }
        else
        {
            context.AddOutputPort<Vector2>("result").Build();
        }
    }
}

[unborn bluff]

I just made a tab system for ui toolkit since the one there is pretty trash

[unborn bluff]

Anyone know how to change the tick in the ui toolkit toggle to a solid square?

[rough scarab]

just target the tick with a selector, change its background color to whatever you want, and its background image to none, when it's :checked
https://unity.huh.how/ui-toolkit/styling

[unborn bluff]

Thnks a lot

2 for 2

[warm bluff]

its there list of like selector types? in case of :hover :focus :hovering

[unborn bluff]

Yh

I think

Checked

But hover and focus fs

I’ve used them

[fast escarp]

https://docs.unity3d.com/6000.1/Documentation/Manual/UIE-USS-Selectors-Pseudo-Classes.html

[shadow quartz]

For those that haven't seen it we got custom filtering in the newest Unity 6.3 alpha for UI Toolkit allowing for the start of render effects in UI.

Filter effect in the UI Builder for those looking for it.

[rough scarab]

Is a custom filter a material?

Ah it looks to be documented
https://docs.unity3d.com/6000.3/Documentation/Manual/ui-systems/uss-filter.html

Material Property Blocks are back baby

[shadow quartz]

Sorry for not answering right away.
Had a work meeting, but yeah so far looks like we have the ability to apply post processing shaders using the new asset type

''FilterFunctionDefinition''

This takes in a shader than applies it to the UI Toolkit UI.

Link to example on how to create a custom UI Toolkit Shader.
https://docs.unity3d.com/6000.3/Documentation/Manual/ui-systems/create-custom-swirl-filter.html

[rough scarab]

It's very interesting to see they're using render textures for this to avoid batching issues

I wonder how many platforms are going to hate that tradeoff

[shadow quartz]

So I kind of get the reason why.
With the new unification of SRP pipelines and yes, HDRP and URP has had the Render Graph API unified into one common backend.

You can easily do Render Graph API calls for effects with RTHandles.

Edit:
Please note this is just the backend for the Render Graph API which is a huge step forward for future releases and graph feature updates.

[rough scarab]

It certainly simplifies the shader code you have to write as well; I've hacked around with custom materials and if you want to build on what's there there's a lot to work around

[shadow quartz]

I know that hacky shader feeling.
In 6.2 did a Metroid Prime style Scan Visor and X-Ray visor system using the World Space UI Toolkit feature. Was fun.

This with the announcement that there is going to be an update allowing UI Toolkit builder to run in scene mode for editing Visual Elements makes me very happy.

[rough scarab]

I'm not sure I'll be using UIBuilder for a while, it's still not quite there if you have people working directly in UXML in parallel

[shadow quartz]

Yeah, UXML is typically faster in most cases.
So we got three new major features for UI Toolkit.

1. Graph Foundation Toolkit is already out and really well done.
2. UI Toolkit custom shaders.
3. Updates to ATG that allows a Sprite and br tag for text.
   Edit: Forgot one.
   Painter2D has Paiter2D dash lines now.

[rough scarab]

Painter2D getting dashed lines is also great, it's a pain to do manually

currently are using an annoying 9-slice texture for it

[shadow quartz]

Oh yeah, forgot about that one.

[rough scarab]

and them adding the UXML converters for the types they missed, so now I can remove the ones I was forced to make

[shadow quartz]

I missed that one as well. Is that the Byte, sbyte, short, and ushort support.

[rough scarab]

and we got PostProcessTextVertices

[shadow quartz]

Oh I had to look that up. They fixed that bug.
You had to use reflection before to enable text animation wierdly.

[unborn bluff]

Unity really needs to fix ui toolkit

I just completely ported to it

Everything was good until I redid my console

I can’t even submit properly

Anyone got a method ?

@ me if yes

[unborn bluff]

Nvm guys

inputField.RegisterCallback<KeyDownEvent>(evt =>
{
    if (evt.keyCode == KeyCode.Enter && !evt.ctrlKey && !evt.altKey)
    {
        evt.StopImmediatePropagation(); // prevents internal handling
        HandleSubmit(inputField.text);
        inputField.value = string.Empty;
        inputField.Focus();
    }
}, TrickleDown.TrickleDown);

Incase anyone needs it

Handle Enter Key in UI Toolkit Input Field

[warm bluff]

idk what I broke but somehow items list is empty when binding items aah

seems like its different table idk how but lol

[wispy steppe]

hi im trying to use shader in ui toolkit but as it dont support it directly i use Custor Render Texture but when "Health" decrease it leave these smugs, is there any way to fix it? or is there better way to use shaders in UI Toolkit?

[wispy steppe]

okay changing blending from Blend SrcAlpha OneMinusSrcAlpha to Blend One Zero fixed it

[fringe loom]

can some help and tell me how do i make it so that the quit button turns a different color when i hover over it. I am very new to using the UI toolkit

[fast escarp]

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

.myclass {
background-color: white;
}
.myclass:hover {
background-color: red;
}

hover is a pseudo class, more here: https://docs.unity3d.com/6000.1/Documentation/Manual/UIE-USS-Selectors-Pseudo-Classes.html

[fringe loom]

do i have to manually edit the USS file

[fast escarp]

yes UI Builder doesnt cover most of the stuff, I dont use it except for basic layout of ui elements

[fringe loom]

is it better just to use canvas the old system

[fast escarp]

depends on your game's requirements and what you like as a developer

I think ugui sucks but thats just my view, my game doesnt need custom shaders on UI and needs something that scales well so I prefer ui toolkit

[fringe loom]

i heard they making more updates to the toolkit and making it better and stop giving old system updates

[fast escarp]

yea but old one will still be supported for a long time

so I wouldnt worry about that

[fringe loom]

k thx

[rough falcon]

it is not a 'one or the other' situation. you can use both simultaneously.

[last pollen]

After 7 years of waiting I finally got to do a deep dive on Unity's new GraphToolkit over the weekend but ultimately decided I don't like it. Gonna build my own node graph editor from the ground up instead. Wish me luck 😅

[lunar rain]

The package is expected to get a lot of customization etc. features in the near future but you do you, good luck in your journey

[gusty vapor]

did they finally deprecate GraphView? if so , that sucks -__-

i've a pretty huge unfinished project using graphview -__-

[rough scarab]

No, they've released GTK as an experimental package. GV is still experimental and ships with the engine in that state. I imagine they won't be removing it soon

But it's always been experimental, so they're likely to mark it and remove it once most people are happy with GTK

[gusty vapor]

I truly wish they dont just remove graphview once GTF is out of experimental, too many internal tools rely on it, at least at my workplace 😅

[rough scarab]

Again they likely won't be removing it soon

As even their own tools use it.

It's just time to consider how reasonable a transition is for tools you have, and to give feedback on Discussions and the roadmaps so they're aware of needs

[gusty vapor]

agreed 👍

[fringe loom]

how to i make it so the 2 buttons have little bit of space between them but but not as much as justfify around gives

[rough scarab]

Center them and add a margin or a fixed-height element to separate

[fringe loom]

i need flex to still work

[rough scarab]

Why wouldn't it?

Justify them to the center

[fringe loom]

i cant change the postion of the buttons indviusally right

[fringe loom]

after this if i change spacing it moves the enitre panel

[fringe loom]

like that

[rough scarab]

you add margins to the elements, not the container

preferably via a USS selector from the container to the elements

e.g.

.container > .button {
  margin-bottom: 6px;
}

[fringe loom]

oh thx it works now

[copper spire]

Hi, I'm interested in hearing about your workflows with UI-Toolkit.
Do you use UI builder?
Do you hand write the XAML?
Do you build your UI in real time in C#?

What workflows work best for you?

I've used UI Toolkit to build some runtime code before and I did it via UIBuilder with some C# to build dynamic UI collections at runtime i.e spawning elements based on some configuration.

I really can't bring myself to go back to using UGUI layout groups so I'm trying to find an optimal workflow.

[fast escarp]

depends on preference, mine is like this:

• create hierarchy via ui builder. Add class names for style, set element names for csharp. (HeroAvatar.uxml)
• add uss reference in ui builder, write uss by hand (HeroAvatar.uss)
• create a controller class (HeroAvatar.cs), usually has constructor that accepts a VisualElement(parent). Then finds named elements under this parent.

in addition create global uss class, add them to theme file so you can use them globally without local uss reference

sorry if this counts as self ad, sharing it as a guidance https://www.docs.cupkek.games/
I create components like I described above, then I use those components in views
you can use uxml files in other uxml files
so for example EquipmentView.uxml can use HeroAvatar.uxml with a name(lets say Hero1) and EquipmentViewController.cs can find the element via Hero1name, create a new instance of HeroAvatar class using this element

// HeroAvatar.cs
public class HeroAvatar {
  // Visual elements
  VisualElement avatar;
  Label name;
  ProgressBar healthBar;
  // references
  Hero hero;
  public HeroAvatar(VisualElement parent)
  {
    image = parent.Q<VisualElement>("Avatar");
    name = parent.Q<Label>("Name");
    healthBar = parent.Q<ProgressBar>("HealthBar")
  }
  
  public void Bind(Hero hero, HeroSO heroSO)
  {
    this.hero = hero;
    image.style.backgroundImage = new StyleBackground(heroSO.Icon);
    name .text = heroSO.name;
    healthBar.progress = hero.hp.current / hero.hp.max;
    hero.onHealthChange += OnHealthChange;
  }
  
  public void Unbind()
  {
    hero.onHealthChange -= OnHealthChange;
  }
  private void OnHealthChange()
  // ...
}

for more complex/generic stuff like ProgressBar, I prefer creating custom visual element. Because I dont want them to relay on uxml files at all, pure csharp. I still use uss tho. (https://docs.unity3d.com/6000.0/Documentation/Manual/UIE-create-custom-controls.html)

[rough scarab]

I don't use the UI Builder. I find it clunky, it takes too much care to avoid inlining styles, and it mangles UXML.
I start with UXML, and have a .uxml.cs script in the same folder (I've set my IDE to nest these).
I then have a source generator attribute [GenerateUxmlMembers] that creates a constructor that queries for every named element so I don't have to write that boilerplate. The base class loads the uxml via addressables so it can initialize these members as readonly.

Similar to Lix3nn, generic stuff uses straight C#, where I've sometimes been using a fluent API to construct elements.

The UI is controlled directly via ECS, I've not explored binding, and tend to avoid events.

[patent anvil]

Is there any reason to have more than one UI Document? From what I have read, performance is better if you have all of your UI under a single UI Document and just show/hide the elements using the display property. As opposed to putting UI on separate UI documents and enabling/disabling the UI Document components.

What would be a reason to have more than one UI Document component in a scene?

[patent anvil]

On another note, how'd you set your IDE to nest these? That's pretty cool

[cinder nebula]

i've been doing multiple documents for different "groups" of things. So like one for HUD elements, one for Notifications / popups, one for a dev console, one for Dialog System, one for Game menus (inventory, character, etc.). Reasons are that it's easier to globally manage sort order using the same profile. Also I can hide the entire HUD just display none the root of the document.

[pulsar solar]

I'm having an issue with the UI Builder Buttons, where once I go into playmode it seems the first button.clicked or <PointDownEvent> is being ignored.

Is this a known problem? Or am I doing something wrong?

nvm, the issue was somewhere else 😅 . Solved it

[rough scarab]

In Rider it's here

[patent anvil]

Yeah, I was thinking I would just display a visual element in front of all other visual elements for popups, similar to how the dropdown currently works. But your approach may be easier

[patent anvil]

Thanks! I'm using Visual Studio for my IDE. Maybe there is a similar option

[patent anvil]

Btw, for your game menus, do you just re-use the same UI document between scenes for menus? Or do you have different UIDocuments for different scenes for a main menu vs. a pause menu for example

[rough scarab]

I have one UIDocument for everything personally

[cinder nebula]

my main menu is in a scene, but I do end up using the same uxml for the document. which is just a blank one. All of the menus and other elements are VisualElements. I load all those into the document as code. Inside those however I'll use mostly uxml and uss.

[patent anvil]

If you are loading as code, I take it that you don’t really use UIBuilder?

[cinder nebula]

Yeah it seems nice and all but it just feels slower than code especially when copilot can spit out uxml

[opaque prairie]

I'm quite excited to see the possibility to add custom shaders in the latest alpha release. And I've been playing around a bit with it. I'm using URP and I've managed to get a shader up and running. Though, this shader manipulates the UV, so I need to recalculate the UV space, for the automatic atlas UIT creates.

In the manual, in the "Custom filter UV region " they write:
However, if your custom filter requires UV manipulations, you need to convert the UVs to the 0-1 range and then back to the atlas
UV rectangle. To do the conversion, first extract the filter UV rect index from the vertex data with the GetFilterRectIndex function.

And then they have an example where they include "UnityUIEFilter.cginc", which would be for BRP, I believe? Any idea what include that would provide the similar functions, like GetFilterRectIndex, for URP? I feel I am a bit in over my head here 😅 as I usually just use ShaderGraph for shaders. But it would make an enormous difference to simplify my current project's UI if I got a shader to work fully, so I deemed it worth looking into writing a shader.
https://docs.unity3d.com/6000.3/Documentation/Manual/ui-systems/uss-filter.html

[patent anvil]

Ah I didn’t know copilot can do uxml… that is pretty nice

[cinder nebula]

it's not too bad, though I have to constantly remind it that USS does not have the full same thing as CSS 🙂

[lean horizon]

how is my UIDocument still receive input without eventsystem or InputSystemUIInputModule ? are there is any way to disable it and use my own implementation ?

[rough scarab]

If you just create a system before it loads in play mode it won't use it's own

[lean horizon]

what you mean if you create a system ? you mean unity entities system? sry i just didn't understand

[rough scarab]

The event system and input module components

[lean horizon]

ahh you mean if i create an event system and modified it with my inputs before uidocument loads it will use my inputs?

i will give it try that sems easy

[rough scarab]

Yes

[lean horizon]

ty it did work as you said

[warm bluff]

hmm I have some problem in listview like I can add new elements thru clicking? how I can remove this

while having listview of "logs" while clicking between its adding new elements aa

[vital totem]

Show add remove footer

[warm bluff]

but it should be off? its unchecked

[south belfry]

Having trouble with the scaling of a UI Prefab and using it in a Grid Layout Group:

When using a different size (smaller) for another grid, the element will not scale and displays outside of the bounds of the actual element. It is not clickable or selectable in the inspector without pressing it in the hierarchy, normally the elements in it: text, background, etc... are smaller than the element's size. When inspecting the element in prefab mode, the parent has a width and height of 0. Canvas is scaled to screen size and is same for the prefab editor.

[warm bluff]

visual elements have background image "render texture" but how I can set it thru code?

no luck with _video.style.backgroundImage = _player.targetTexture;

nvm I found, Background.FromRenderTexture(...)

[ocean rover]

Should I be using UI toolkit for creating a fpv crosshair? and eventually a hud? Or am I going down the wrong path?

[rough scarab]

Sure, nothing wrong with it

[ocean rover]

alright cool. I'm still getting my head around its workflow and wanted to make sure I'm in the right place

[fast escarp]

I am changing Time.timeScale and I think IVisualElementScheduledItem doesnt scale with timeScale?
should I just manually multiply delays/intervals?

[gusty vapor]

Touching engine's timeScale has never been a good thing, not for pausing nor for the means to slowdown your game. engine's timescale connected to all internal stuff from rendering to physics, so leave them alone

Instead make your own custom in-game time scaling

[slim widget]

hi, this is my first time using ui toolkit, how do i make a health bar like ugui's filled image type? changing the width of the image seems to make it compress

[feral onyx]

You need to use masks

[slim widget]

i've tried it but it seems to only work for rectangular shapes. is there a way for it to be custom-shaped?

[feral onyx]

You need to use a mask texture or shape

[slim widget]

i'm sorry, i don't really get it, what do you mean by mask texture or shape?

[feral onyx]

Have you tried googling it. There are lots of videos and guides for how masks work in toolkit

[slim widget]

i've been stuck on this for last 2 days, but i'll try searching deeper

thank you for the help

[fast escarp]

you can use svgs but antialiasing doesnt work with them

@slim widget I made a tutorial about it https://www.docs.cupkek.games/uitkguide/masking
it uses svg as background with background-repeat, you can suit it to your case

[slim widget]

thank you for the suggestion, i've tried it this tutorial before but i don't think svgs work for me

i've also just found this tutorial and it works wonders for me
https://learn.unity.com/tutorial/make-health-bar-with-uitoolkit?version=6.0

[rough scarab]

Don't cross-post. This also has absolutely nothing to do with this channel.

[thorn hatch]

when i tried to use this font asset, it doesnt appear to be the same. and i have no idea why it would say '149%' sometimes when i click on it

please can i have some help fixing it

this also happens

[fossil slate]

it seems that something is wrong with font atlas, try to tweak import settings

[warm bluff]

anyone has any clue why clicking between elements its adding new items to list?

I want to just not allow it mostly

Allow add/remove is false + show add remove footer

[versed marten]

ay got a question, does anybody know or have a good video where it is explained how to move ui elements like TMP`s per code? i am thinking abt smt like tmp Name * Vector2.left * speed * Time.deltaTime or smt. thx

or maybe someone just give me a little code for that

[rough scarab]

This question is for #📲┃ui-ux not here. However, you can move it's transform like any other object, or get it's RectTransform and move that via it's API

[urban schooner]

I have made a uxml document for a certain element I want to reuse, but I want to be able to change the background image. I can instantiate them as template containers, but I can't figure out how to change the background image

Without assigning them in C# code, if possible I want to do this through the UI Editor

[urban schooner]

Also, I use data binding for showing runtime data, the background image only needs to be defined compiletime

(ie. The element is an item "slot" that displays the item equipped in that slot. The item itself is displayed through data binding, but I want to change the background of the "slot" based on the type of equipment it accepts)

[rough scarab]

If it's just a few types of items, create a USS class that you add based on the type, and use that class to set the background

[urban schooner]

Got it to work, thx 🙃

It's not my fav solution though. Will look at it more in depth when I have time

This feels more like a hack, tbh

[polar sorrel]

Hello, i used a youtube guide to make scrollbar but i've met some problems. Is it possible to set up starter position to component with content size fitter? Every time i launch game it's moving it to the middle. And 2nd problem basically same inability to set up starting position bc if there would be not enough panels then they would group in center instead of being on top of the list

[rough scarab]

This channel is not for UGUI questions, you're looking for #📲┃ui-ux

[polar sorrel]

My bad, thank you. Should i delete it or leave it here as a some sort of reminder for others?

[urban schooner]

How good is UI Toolkit at handling sprite sheets? I've had several instances where it would show the entire spritesheet instead of the selected sprite, and was wondering if this is a known issue or just wonky implementation on my part

[clever crest]

Hey, I'm considering moving my project to UITK, does it have built in tooltip support for runtime?

[graceful carbon]

App UI built on top of UITK does

[rough scarab]

It's also easy to implement, the ChangeCoordinatesTo method is fantastic

[fast escarp]

do you know how you would support tooltips and drag & drops on world space? basicly anything that requires mouse position
currently my implementations break on world space

[rough scarab]

RuntimePanelUtils has a number of screen/camera/world conversion methods to look through

[fast escarp]

oh didnt know that, thanks!

[woven hinge]

UI toolkit themes reference style sheets by asset path and not guid? I've noticed that UITK uses paths a lot instead of guids, breaking when you move assets, though it usually also stores a GUID.

What's the reason for not using guids like everything else in unity?

[fast escarp]

maybe because they are text based similar to web? like you can edit them with text editor
if a uxml and uss are in same folder, you can import uss with just this "filename.uss" no path required

[woven hinge]

it makes sense in that way, though inconvenient 🤔 thanks for the perspective

[spare trellis]

Is it possible to make the TabView component layout the tabs vertically downwards instead of horizontally? Setting flex direction to column won't do anything

[lofty finch]

Sure.

[steep spear]

This blue glow effect is something I did long ago in IMGUI. It's just an image whose opacity I am cycling through between two values with an ease function. Is there a way to do this in UI Toolkit without scripting? I looked at USS Transitions in the user manual and it doesn't seem to allow cycling through two values back and forth like with a ping-pong type of cycle.

[rough scarab]

No, you have to script it
https://docs.unity3d.com/6000.1/Documentation/Manual/UIE-transition-event-loop-example.html

[steep spear]

alright thanks

[past hemlock]

I'm starting to implement gamepad support for my main menu in UI Toolkit. I can't find any relevant info on what's already out of the box, and how to approach this problem. Can anyone point me in the right direction please? I'm not sure if I'm supposed to be writing everything manually.

[graceful carbon]

https://docs.unity3d.com/6000.1/Documentation/Manual/UIE-faq-event-and-input-system.html

[past hemlock]

excellent, thank you, somehow I did not stumble upon that when googling

[twilit socket]

Is there by any chance a tool that converts a ugui to toolkit?

[rough scarab]

No

[ember vector]

Hello, I know this was some time ago, but have you figured out how to make those attributes bindable? Dealing with same issue rn and can't really find any solution

[void acorn]

Heya! Yeah actually, i did get it done!

(I dm'd you to help)

[undone blaze]

Pre-req:
Attribute is a C# class with a customer property drawer. It contains a Stat C# class with a custom drawer. The 'Modifiers' field is a list of the Modifier C# class with a custom drawer

Problem/Psuedo-solution:
I had an issue where assigning the 'Mod' field (SO) on a Modifier instance from the list would also assign the same value to all list items that come after it. In the ModifierDrawer custom property drawer, the 'Mod' field is an ObjectField. After changing it to a PropertyField, it did not assign all list items

Continuing problem:
The Order field of the Modifier instance is never assigned manually; the value is set automatically when the 'Mod' field is assigned, but there is an issue. When the 'Mod' field of a Modifier instance is assigned, only the Order field of the last item in the list is set, instead of the Order field of the same Modifier instance. From the solution above, I've changed the Order field visual element from an IntegerField to a PropertyField, but the problem still exists

E.g., If I assign an SO to the first item in the list and that SO has an Order value of 100, it will assign 100 to the last item's Order field, not the same instance (first item)

Here is the code used for the callback that changes the value of Order . . .

TypePropertyField.RegisterValueChangeCallback(evt =>
{
    if (evt.changedProperty.objectReferenceValue is not ModType modType || modType == TypeProperty.objectReferenceValue) return;
    
    OrderProperty.intValue = modType.Order;
    TypePropertyField.tooltip = modType.Description;

    Property.serializedObject.ApplyModifiedProperties();
    OrderPropertyField.MarkDirtyRepaint();

    Debug.Log(
        $"Modifier Type changed to <color=yellow>{modType.name}</color>. Order set to <color=cyan>{modType.Order}</color>.");
});

[fringe loom]

is there a way i can add a trail effect to one of my ui toolkit elements

[tight dock]

I am using an AttributeConverter for an attribute in my custom control but it's in the UnityEditor namespace, so I can't build the game. How do I fix this?

public class TabInfoConverter : UnityEditor.UIElements.UxmlAttributeConverter<TabInfo>

[tight dock]

nvm, fixed it by wrapping the converter in an #if UNITY_ENGINE check

[steep terrace]

how do i make world space sprite always the same size on screen?

[steep terrace]

figured it out nvm

[trail coral]

Is there anyway to toggle visibility of a node in the UI Toolkit editor Hierarchy?

Mainly for templates you instance in without having to use a selector which is a pain to add and remove?

It seems a pain to design and multi "panel" UI in the Editor and visualize the end results, it feels like after all these years UI Toolkit editor is half-baked and lacking lots of features designers would really expect or needed.

[thin lodge]

In UI builder I see every letter. But in game preview I don't. Happened after I have began an experimenting with "scale with screen size".

[vapid siren]

Did you get it to work?

[granite widget]

I have a question, I am trying to faide a UI elemet from transparent to black, I have 2 seperate style classes, and I am setting them using:

        fadePanel.AddToClassList("fadeOut");
        fadePanel.RemoveFromClassList("fadeIn");

and vice verca but it does not seam to change the color or anything, not sure what I am doing worng help would be great!

[spare trellis]

yea, but not using the tabview component, I just stacked my own buttons

[granite widget]

Figured out the issue I was having, I was trying to fade the from one style to another I was setting the style classes correctly but on the base style I had set a color already with this in mind I just reset the base style and it fixed the issue.

[granite widget]

Well did not last long but now I have another issue that I may or maynot figure out in the next few seconds but anyways I am using the UI Builder and I draged the Progress Bar elemet into the Hierarchy I figured out how to modify most items but how do I change the text from my-progress to something usefull? Do I have to do this through code or is there a way to update this within the uI builder?

[warped moth]

Is there a UITK way of achieving a Radial 360 fill for a tex/sprite?
Edit: https://docs.unity3d.com/6000.1/Documentation/Manual/UIE-radial-progress-use-vector-api.html

[tranquil tangle]

Can someone explain to me, why on gods green earth, can a treeview viewcontroller give you access to TryRemoveItem but NOT AddItem? Why is TryRemoveItem public, but AddItem refrences some internal static helper function that you can only know about if you decompile

Why does every vew controller force you to refresh when performing operations. I dont want to refresh my UI 50 times when I need to add 50 new elements. I want to refresh it once after im done adding the elements.

Why is everything set to internal to the built in DLL? Everywhere else in Unity, you can just do what you want even if you blow your foot off and destroy your project. Why, in this particular area, is everything sealed up tighter than the airlock on a space station

[coarse condor]

Is it possible to have the same controller navigation with ui-toolkit as with the ugui? I mean that i can navigate the ui using the d-pad on the controller for example

[fast escarp]

yes

[coarse condor]

Ah cool, do I need the eventsystem component or is this obsolet with ui-toolkit?

[graceful carbon]

EventSystem will work with UI toolkit

[clever crest]

Hey, how are filters supposed to look like?
I tried applying blur but it only appears to be blurring the element itself, not the world behind it :/
I don't know if this is something to do with my multi camera setup or if this is the intended result.
Please @ me and thanks in advance!

[candid sparrow]

Based on the documentation it applies the filter to visual element subtree, so it doesn’t know anything about the world https://docs.unity3d.com/6000.3/Documentation/Manual/ui-systems/uss-filter.html

[clever crest]

I see, so it's basically useless :/

What makes this even better is that I learned about filters on forums in response to exactly what I am looking for, guess even the devs themselves don't know what they are working on nowadays :/
https://discussions.unity.com/t/is-it-possible-to-get-background-blur-effect-using-ui-toolkit/923255/9

[candid sparrow]

I think there are two different css filters, one is filter, second is backdrop-filter, you want the latter, unity has the first so far (blur of the element / hierarchy), not useless, just different thing 🤷‍♂️

[clever crest]

Yeah well great, not sure how we are meant to switch to using this "better" ui solution if it's missing half the important features as we speak.

[abstract tusk]

There's a reason it's a package and not built in to core, I guess 🤷

[clever crest]

Surprisingly enough, Unified Universal Blur does work but it looks horrible for some reason :/
First picture is UGUI the second is UITK.

[clever crest]

This was actually my blur settings, I played around with that and all seems to be working.
Hopefully this helps someone in the future running into this same issue.

[abstract tusk]

Can I render a UI Document to a camera? Or does it always just directly overlay onto a Display?

Never mind it loos like I can use a Render Texture instead

Means I have to make separate Panel Settings assets for every menu but oh well

[abstract tusk]

Right so this is without and with a RenderTexture. Is it just broken? Or am I doing something wrong?

Resolution issues aside, it looks like there are issues with the alpha somehow?

Ooh fun using a RenderTexture means mouse input doesn't work anymore. So I guess I'm back to my original question again. How do I render a UI Document to a camera instead of a display??

[urban schooner]

Quick UI Toolkit question:
I've set up an "Equipmentslot" visual element that extends my "ItemSlot" visual element, but uses an expanded data model. If I set an EquipmentModel as datasource for my EquipmentSlot, would the base ItemSlot still be able to get its data from the datasource as well?

I'd assume so, but right now I'm having trouble getting this to work

[urban schooner]

okay, got it to work. My bindings were just wonky 😐

[fast shuttle]

How can I make the size for my container with these buttons, match their height? Theres too much space above each button.

I'm new to the toolkit, so I'm unsure if it matters that the green container (ConfigContainer is what is green) has another element above Config

[abstract tusk]

Alright so turns out I need the RenderTexture to be of the color format R8G8B8A8_SRGB and the Depth Stencil Format must be D16_UNORM for it to render properly. Also to pass in mouse movement, I need to call uidoc.panelSettings.SetScreenToPanelSpaceFunction(ScreenCoordinatesToRenderTexture)
Where ScreenCoordinatesToRenderTexture is

    private Vector2 ScreenCoordinatesToRenderTexture(Vector2 coords)
    {
        return new Vector2(coords.x / Screen.width * uidoc.panelSettings.targetTexture.width, coords.y / Screen.height * uidoc.panelSettings.targetTexture.height);
    }

Since I'm just drawing the RenderTexture to a Raw Image object that spans the entire screen, it makes the math pretty easy. And then finally everything works as intended. Yippee.

[fast escarp]

they probably have flex grow 1 as default inline style

[fast shuttle]

Yeah, that was it!

[fast shuttle]

another question, I'm working on making some custom elements for the UI.
What I need is to create my CustomElement and use like typical C# base class, so all my elements have the same behavior
Then I can create the actual elements for the game that derive from CustomElement

I know inheritance like that is dead simple in C#, but as the toolkit has the other uxml/uss files, and in general the workflow is a little different, I dont want to assume that inheritance is exactly the same.

I've been looking at a few tutorials that explain how I'd create my CustomElement, but none of those then go on to explain how to use the CustomElement to create derived elements from that

[rough scarab]

there isn't anything special about inheritance in UITK

[fast shuttle]

ah, thats good to know

[rough scarab]

if it's to be used in UXML, write the base class as partial with the attributes and stuff, and do the same with the children and it'll work fine

[fast shuttle]

I think they will be .uxml, but having the option to or not is part of the confusion I have

to save a possible XY problem, I'm creating these EffectElements, each one has a unique interface to set the properties unique to that effect, that information is written to a json file

Its just a matter of what is best in UI Toolkit terms. They all behave the same way, and I know the things that each effect has values for. Overall theyre pretty basic objects

[fast shuttle]

Instantiating UXML incorrectly changes its size

[stable lance]

Hi, what's the proper way to disable navigation events and/or prevent them from going across multiple UI documents? I have been trying to register to NavigationMoveEvent and use evt.StopPropagation, but haven't had any success.

[rough scarab]

You will also need to use https://docs.unity3d.com/ScriptReference/UIElements.FocusController.IgnoreEvent.html

[stable lance]

Still having trouble with this. Focus changes seem to now get stopped at the next visual element, and still go across documents. I'd like the focus instead to cycle through the elements in the same document.

[kindred mountain]

Is there any way to detect if the underlying texture is black or white so I can write text (the max text) in a contrast appropiate color?

They are all visual elements, the texture being a image element

[grave valve]

has anyone tried out using two-way binding on the TextField element provided by the App UI package (not the UITK-included one)? I've managed to make it work with ToSource and ToTarget binding but with TwoWay, it looks like the inputfield value immediately gets overwritten by the data source's value

[arctic estuary]

I’ve worked with two-way bindings on App UI’s TextField before, and the behavior you’re describing usually happens when the data source is pushing updates back too quickly. I can help you debug and set it up so changes flow correctly both ways without overwriting user input. Could you share how you’re currently setting up the binding (e.g., your binding code or data source setup)? @grave valve

[grave valve]

this is how I setup the binding. The MultiColumnListView column can contain either a FloatField, DateField, or TextField

            _listView = this.Q<MultiColumnListView>();
            _listView.itemsSource = _data.Items;

            for (int i = 0, len = _data.Columns.Count; i < len; i++)
            {
                var column = _data.Columns[i];
                var propertyPath = PropertyPath.FromName("cells");
                var columnIndex = i;

                var uiColumn = new Column
                {
                    name = column.Label,
                    title = column.Label,
                    minWidth = 250,
                    makeCell = () => Activator.CreateInstance(GetFieldType(column.Id)) as VisualElement, 
                    bindCell = (element, index) =>
                    {
                        var cellPropertyPath = PropertyPath.AppendIndex(propertyPath, columnIndex);
                        cellPropertyPath = PropertyPath.AppendName(cellPropertyPath, "Value");

                        element.dataSource = _data.Items[index];
                        element.dataSourcePath = cellPropertyPath;
                        element.ClearBinding(_valueBindingId);
                        var binding = new DataBinding
                        {
                            bindingMode = BindingMode.ToSource
                        };

                        element.SetBinding(_valueBindingId, binding);
                        PropertyContainer.TrySetValue(element, _valueBindingId,
                                                      PropertyContainer.GetValue<AttributeData.Entry, object>(_data.Items[index], cellPropertyPath));
                    }
                };
                _listView.columns.Add(uiColumn);
            }

and this is the datasource:

        public abstract List<Column> Columns { get; }
        public List<Entry> Items = new();

        [Serializable]
        public class Entry
        {
            public List<CellBase> cells = new();
        }

        [Serializable]
        public abstract class CellBase
        {
            public abstract object ValueBoxed { get; set; }
        }

        [Serializable]
        public abstract class Cell<T> : CellBase
        {
            public T Value;
            public Cell(T value)
            {
                Value = value;
            }

            [CreateProperty]
            public override object ValueBoxed { get => Value; set => Value = (T)value; }
        }

[arctic estuary]

I see what’s happening. In your setup, you’re explicitly pushing the value into the element with PropertyContainer.TrySetValue right after setting the binding. That works fine for ToSource or ToTarget, but with TwoWay, it causes the field to be immediately overwritten by the datasource before the user can interact with it. The binding system expects to manage syncing both ways, so manually setting the value at bind time can break that flow.

One approach is to let the binding system initialize the field from the data instead of forcing it via TrySetValue. Another is to ensure your Cell<T>.ValueBoxed implementation fully supports change notifications, so the framework can propagate changes properly.

If you’d like, I can take a closer look at your binding logic and walk you through setting it up so TwoWay works as intended without wiping user input. Would you like me to help you adjust the binding code directly? @grave valve

[grave valve]

you're right, the code pasted above has a PropertyContainer.TrySetValue to make my use case work with BindingMode.ToSource. With TwoWay, I'm not setting the value directly but the problem still shows.

I might try the second approach -- does that mean I need to implement INotifyValueChanged on my datasource? @arctic estuary

[urban cobalt]

Hey guys, I bound a TextField's Value to a Scriptable object's field using To Source On Source Change but the ScriptableObject does not change values when I type in the TextField. I tried googling it but havent found anything so far

[fast shuttle]

How can I change the order of child objects? I've tried to do it with this method, to move up/down by one space, but I cant stop this from moving them two spaces at a time. I would imagine there'd be a method dedicated to doing that, in terms of UI changing the order of elements must be a very common thing to do

void OnEffectRequestMove(CustomElement sender, int moveValue) {

var currentIndex = -1;
VisualElement currentElement = null;

foreach (var child in _containerElement.Children()) {
  var element = child.Q<CustomElement>();
  if (element == sender) {
    currentIndex = _containerElement.IndexOf(child);
    currentElement = element;
  }
}

  if (currentIndex == -1) {
    return;
  }

  var newIndex = currentIndex + moveValue;

  if (currentIndex < 0 || newIndex < 0 || newIndex >= _containerElement.childCount) {
    return;
  }

  _containerElement.RemoveAt(currentIndex);
  _containerElement.Insert(newIndex, currentElement);
}

the buttom element is only meant to move up 1 space, yet it moves two spaces.
I suspected that its because Insert(newIndex isnt accounting for 0-based numbering, but I have tried to do Insert(newIndex-1 and Insert(newIndex+1 and neither fixed the problem

[warm bluff]

Its possible to directly add idk Visual element to UI document without having any uxml files? like just doing document.rootVisualElement.Add(new Label());

[grave valve]

Is it possible to have equally-sized buttons on the App UI ActionGroup? It looks like the button size is proportional to the title width

Rubber ducky moment 😆 I managed to fix it by disabling the Justified option on the ActionGroup, then setting flex-grow: 1 and flex-basis: 0 on each button

[fast escarp]

if you are writing css by hand you can use this shortcut: flex: 1;

[sterile trail]

Bindings in custom editors question - I think I'm having trouble understanding what is possible with bindings

If I have a PropertyField that has no datasource, only a bindingPath, how can I use that bindingPath to get a reference to the actual SerializedProperty or object it's bound to/updating?

Example:
I have a list of ScriptableObjects in a PropertyField .
I want to detect which specific ScriptableObject in the list is clicked on and get a reference to that specific object so I can alter it.

(code example below if that helps).

pf_SOs.RegisterCallback<ClickEvent>(OnClickedAnObject);
...

private void OnClickedAnObject(ClickEvent evt) {
      VisualElement elem = evt.target as VisualElement;
      PropertyField pf =elem.GetFirstOfType<PropertyField>();
      AND NOW WHAT? 
}

Now, how can I use the pf.bindingPath to get an actual reference to the clicked item?

[azure acorn]

Two questions…

1 is there a way to like… move the position of a button or anything besides with coordinates? Like can I just grab it with my mouse and move it?

Second question is are there any diagrams or instructions on what these library controls and numeric fields do? Like what their use is as a component?

[vital totem]

Just apply simple drag logic with events on element and move with pointer location

U can use onpointermove and use it for location

[deft parrot]

What would be the best way to space these elements?

[slow crest]

what is this bloody variable? i can't figure it out (for the plus icon)

tried background-image: var(--unity-icon-toolbar-plus); plus-more, etc everything i can think of and everything that's on the online reference. does it have some weird name i would never think of?

[fast escarp]

did you use debugger?

[slow crest]

On a stylesheet?

[fast escarp]

you can select the element with the ui toolkit debugger

[slow crest]

Oh neat didn’t know about that

Thanks!

[fast escarp]

you are welcome

[dark blade]

You can style unity built ui? How?

[glad drum]

So how would I go about getting the local position of something like a label in code in percentages (As in if the y coordinate is at 50% of the container it's in's height)? I've tried "print(apex.layout.y / apex.parent.layout.height);" on the following image and, while it's definitely close to 0.5 (0.5020244), it's slightly over. Am I using the wrong parameters or is there something else I need to account or correct for to get an accurate reading?

[hazy mountain]

Guys, my game is on Unity 6.2 and im currently trying to learn to use UI Toolkit. I've been searching on google for a while but i cant find the answer so i will ask here. Which one is better for a story game with levels, 1 UI Document for each scene, or 1 UI Document for each game feature? I've been thinking of doing 1 for each game feature, but i'm not sure cuz im afraid of the performance for having multiple UI Document component in a scene.

[glad drum]

Pretty sure 1 document for each feature is what you're supposed to do and you're supposed to toggle the ones you're not using off when you're not using them and on when you want to access them

[hazy mountain]

I see, thank you!

[fast escarp]

I am just doing new ui document component for each window for example main menu and settings are different gameobjects. Never had performance issues, I dont think it matters much. This is just easier to work with for me, individual prefabs for each ui window

[hazy mountain]

Gotcha! I did end up doing similar to what you're doing but with hud and pause menu.

[deft parrot]

Does anyone know how to add classes to root elements? Here I added .debug selector to Console root, but I can only do that from within another visual tree.

So if I were to add a console somewhere else, I'd need to remember to always add the .debug class again to the root element.

And the only reason I even had to do this is because I want input to pass through the console when it's disabled

[haughty inlet]

Im prototyping a game thats almost entirely UI toolkit based, Im struggling with how to best organize/implement proper UI scaling. Ive also not found any resources online around tips building scalable UI with UIToolkit..its all canvas based. Does anyone have any helpful resources?

[fast escarp]

this was helpful for me to understand flexbox, it is really powerful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[haughty inlet]

Generally speaking i understand flexbox, im struggling with sizing, if i fixed size elements they look great on a specific resolution but poor on larger ones, and if I do things percentage based they typically look too big on larger resolutions

[fast escarp]

well ui toolkit is behind in this because uss is missing media queries from css.
something like this:

/* small screens */
.content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.sidebar {
    display: none; /* hidden on small screens */
}

.main {
    background-color: #ccc;
    padding: 10px;
}

/* Medium screens (tablet) */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }

    .sidebar {
        display: block;
        width: 200px;
        background-color: #eee;
    }

    .main {
        flex-grow: 1;
    }
}

/* Large screens (desktop) */
@media (min-width: 1200px) {
    .header {
        height: 70px;
        font-size: 1.5rem;
    }

    .sidebar {
        width: 250px;
    }

    .main {
        padding: 20px;
    }
}

Also you can use fixed sizes for buttons that change according to screen size. And position them with flex so you dont need to change it.

/* small screens */
.btn {
  /* default btn styling */
  height: 16px;
}

/* Medium screens (tablet) */
@media (min-width: 768px) {
    .btn {
        height: 20px;
    }
}

/* Large screens (desktop) */
@media (min-width: 1200px) {
    .btn {
        height: 24px;
    }
}

To do something similar to media queries you can detect screen resolution with script and change theme file. Theme files are global uss so you can override classes or change uss variables this way.
Thats the best solution I can think of but I havent done it myself

[haughty inlet]

Ty for the insight!

[lofty sentinel]

hey!! id like to have a text field where the player can input their name.
I have two questions

1. i cant seem to figure out how to scale the actual text box independently of the text above it (in the builder)
2. i cant seem to figure out how to keep the field size consistent regardless of the character amount in the text box (ie like something youd see in stardew valley name input field)

is this something that i can do in the builder, or do i need to do XML stuff :)

[woven hinge]

rather than try to modify the control directly, did you try to target the individual elements in it with style sheets to change properties?

[woven hinge]

I'm trying to use EnumFlagsField to limit the # of choices for an enum flags field bound to a SerializedProperty, but it seems the binding overrides the masks I set? Is there a way to do this?

this does not work:

var element = new EnumFlagsField(property.displayName);
...
element.choices = choices; 
element.choicesMasks = choicesMasks;
element.bindingPath = property.propertyPath;
element.Bind(property.serializedObject);

[fast shuttle]

(first image) the root has a flex direction of column
(second image) the root has a flex direction of row

why is it that the slider that is highlighted in orange, no longer is centered the same way?

oh, it looks like I can correct it be giving the slider a style. But it would still be good to know why the slider went like that without me correcting it

:root {
    flex-direction: row;
    align-items: center;
}

#FloatSlider {
    justify-content: center;
}```

[fast escarp]

you need to add align-items: center
think of it as justify-content version for the cross-axis

[fast shuttle]

got it!

[urban schooner]

Is there a way to bind this to a label in UI Toolkit?

.... I'm an idiot

uno momento

okay no, still failing. Any tips on how I should go about this?

ait, got it to work (albeit ugly-ly)

so if anyone can give a suggestion that isn't this, I'd appreciate it (trying to become proficient with databinding in general)

With this as the Quantity Text definition.

(SerializeField is necessary if I want to bind the backing field of the QuantityText Property)

afaik at least. Please correct me if I'm wrong

[woven hinge]

I have some data like this:

[Serializable]
struct Data
{
    public FSomeFlags Flags; 
}

And I want to bind only a few of the flags in here to toggle buttons in a special (editor-only) UI.

How could this be set up? I know how to do the bindings UI -> data, but I don't know how I can set it up so that the UI also reacts to external changes on the data (for example through undo/redo, data on disk changing through version control, or other).

[patent anvil]

Is there a way to specify a custom BindingId for a bindable property I created?

I want the binding Id to be different, but it is automatically matching the property name (including casing)

[patent anvil]

Also, is there any way to detect a hierarchy change?

[dark blade]

how to change icon image color in ui toolkit button icon only?, i tried --unity-background-image-tint-color and --unity-image-tint-color seems didnt working

[granite widget]

Quick question, I am learning how to use UITK. Using UITK UI Builder I am using an image inside of a background image and I would like to fill it just like you would with unity’s UGUI, you are able to set an image fill type. How could I do this?

[fringe loom]

can you add a custom shader to a Visual element yet in toolkit

[vital totem]

Try
[field: serializefield , don'tcreateprperty]
[Ceate property]

[rough scarab]

In 6.3

[fringe loom]

when will that be out

[fringe loom]

and can i use alerady made shaders in a previous version

[fast shuttle]

I've designed several of these components in figma, I'm going to recreate them with the UI Builder. Thing is I want to make the uxml elements in a smart way as the layout and style needs to be consistent.

The problem is I'm having trouble working out what "the right way" is, should I be setting the name for all the elements? Should the style sheet have a style for each element, or should I be storing the colors in it like that you see there? Overall it feels like I'm overlooking something important with the way I've tried to design this template element

[dark blade]

how to styling dropdown field popup item?, i can't inspect from ui builder, that so mysterious

[fast escarp]

I prefer tailwind way, like if you wanna style a button you just add classes to it like class="btn blue ghost" https://tailwindcss.com/

[fast shuttle]

ill be honest, I dont know anything about html besides what youd learn in 8th grade
im reading the documentation, and thinking "I cant tell what about this isnt regular html"

😆

[fast shuttle]

is it possible to use that in unity?

surely as long as everything gets send to my EditorWindow or as Unity needs, it doesnt actually matter what set that, an aim in the future is that my tool will be engine agnostic, I see no reason why the GUI layout code should need to be tied to UnityEngine. plus its MIT so I'd be allowed to use it in mine

[fast shuttle]

and if I am going to be writing the uxml/uss anyway, maybe i could save some time and use something like tailwind right away

[charred echo]

Hey everyone, I’m working on a game and I’ve just started by building the main menu.
I’m using TextMeshPro for the buttons and text, with a custom texture for the buttons.

The texture size is correct (no blank spaces, dimensions are exactly width x height in pixels).

I added a TMP text as a child of the button to create an outline.

Then I resized and positioned everything the way I wanted.

Problem: whenever I click, it always triggers the Load Game button, even though both the button itself and the TMP child text are set to the correct size for the clickable area I want.

Here’s a video showing the issue (the mouse cursor hadn't been captured, dunno why). Any idea why this happens? Thanks! 🙏

[fast escarp]

you can't use it directly as far as I know since it's for web, you have to implement it yourself
I made something similar, sending dm if you are interested

[fast escarp]

this channel is for ui toolkit, you should ask in #📲┃ui-ux

[charred echo]

oh ok, tysm

btw i solved

thx anyway

[shadow quartz]

It just dawned on me Unity 6.3 has an option to enable UI Toolkit elements in the scene Hierarchy.

[sour pine]

Does the tabview element only work horizontally or can it be configured for vertical tabs? I would like to make a horizontal tabview and then for each tab if required a vertical tabview.

I have tried setting it up but can't really find any settings for it

I made an image to show what i have currently. so i just need the lower tabview to order tabs vertically instead of horizontally

[worldly orchid]

I can tell 🥰 I can't design UI to save my life

[frosty dawn]

Lol

[worldly orchid]

not my fault i got upset at Unity for pushing us away from HLSL for Shader design >.>

[sleek schooner]

Does anyone know how to do gradients in the toolkit?

[worldly orchid]

Not used the toolkit per say, but in code you could lerp between two values, rgba are just values you can lerp too

[graceful carbon]

Looks like there is not support in USS for gradients just yet and you'll have to create one manually
https://discussions.unity.com/t/uss-gradients-linear-gradient-and-image-gradients/934218/11

[lethal gyro]

i'm having a trouble getting hover states to work. i've got a UIDocument in the scene, with an attached uxml that's set up with some buttons, and a .uss file attached to that uxml with selectors for the hover states on those buttons. yet when I go into play mode (or even preview) nothing happens when I hover the mouse over them. am I missing a step here? I feel like I am

i'm figuring things out as I go along

[lethal gyro]

aand now i have an EventSystem with an input component attached, and it still doesnt work

[lethal gyro]

ok fixed it - i completely missed that anything set directly on the element through the editor counts as an "inline" style and thus overrides anything in the .uss file. un-setting everything and then re-setting it through the selector instead fixed the problem

[lean horizon]

do stylesheet loading work inside custom package?

        private static void ShowWindow()
        {
            var window = GetWindow<TestWindow>();
            window.titleContent = new GUIContent("TITLE");
            window.Show();
        }
       private void CreateGUI()
       {
             var root = rootVisualElement;
             var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>(StyleSheetPath);
             root.styleSheets.Add(styleSheet);
             
              var element = new VisualElement()
              element.AddToClassList(".black-border");
              root.Add(element);

        }```

not sure why my code load uss file but dont apply .black-border to my element

[dark blade]

you dont need the dot(.), so if you inspect from ui debugger your class will "..black-border"

[lean horizon]

no way i stayed all night for that

ty man

[north forum]

I'm trying to create a layout similar to pokemon tcg pocket or yugioh duel links (basically a bottom navigation bar) using ui toolkit.
Is there a premade uxml object or do I need to create a custom ui control?

[vapid gust]

Does anyone know how to get cursor position coordinates after a VisualElement is scaled in a script?

[graceful carbon]

App UI has a bottom nav bar
https://docs.unity3d.com/Packages/com.unity.dt.app-ui@2.2/manual/navigation.html#bottomnavbar-component

[graceful carbon]

Have you tried RuntimePanelUtils.CameraTransformWorldToPanel? Not sure if local scale still applies to it though
https://docs.unity3d.com/6000.2/Documentation/ScriptReference/UIElements.RuntimePanelUtils.CameraTransformWorldToPanel.html

[north forum]

that was it ty

[vapid gust]

I haven't but that Util seems to assume a 3D location? Unsure how to use that for just the mouse position for a full screen UIDocument

I've used the WorldToLocal extension for a VisualElement but for some reason it doesn't update the coordinates when the style.scale is changed (ex. Scaling a full screen 1920 x 1080 element 2x with cursor at (500,500) still returns (500,500) after scaling)

[graceful carbon]

This one might be closer to what you want
https://docs.unity3d.com/6000.2/Documentation/ScriptReference/UIElements.RuntimePanelUtils.ScreenToPanel.html

[vapid gust]

Kind of sucks cause any calculations I do have a margin of error that snowballs with increasing scale

[vapid gust]

Same thing, doesn't actually get the scale of the VisualElement, it just gets the coordinates of the panel it is attached to

The panel is still 1920 x 1080 but the VisualElement size is bigger if it's scaled up, but nothing I've found actually gets the coordinates relative to the VisualElement and not the panel

[vapid gust]

Anyone else know what I can do? I'm about to give up 😭

Been at this for like 2 days

[worldly orchid]

Base coordinates or new coordinates based on the scale?

[vapid gust]

New Coordinates

[worldly orchid]

Just get the old coordinates and multiply them by the same scale factor

[vapid gust]

I can't, I'm making a continuous zoom in/out function

The cursor location at the original coordinates do not line up with the cursor location at the new zoomed in location

I'm basically limited to a one time zoom, or else everything goes out of wack

I also found out that it doesn't matter what the initial scale is at the start of runtime, take every function that I try to use to get mouse coordinates already assumes a scale of 1x, and any initial translation makes all cursor coordinates arbitrary

[worldly orchid]

There's a local coordinate system and a global, each item, UI or not has a local coordinate, where(0,0) is bottom left (if I'm not mistaken)

[lethal gyro]

i think its top-left for everything

er wait no nvm scratch that

it probably is bottom left. non-unity gamedev stuff puts the origin at top left

[late granite]

After upgrading my project from Unity 2022.3.39f1 to Unity 6000.2.4f1 (no code changes), the draw/order of UI Toolkit elements is wrong at runtime. The visual order used to match the intended sort order in 2022.3, but in the new version some elements that should be on top are rendering behind others. This happens only at runtime (Editor view looks okay) and I didn’t intentionally change anything in code or styles.

https://discussions.unity.com/t/ui-toolkit-sort-order-broken-after-upgrade-2022-3-39f1-6000-2-4f1-unity-6-2/1684032

Does anyone know why this might be happening ?

[slim finch]

Forgive me if this question is weird or basic. How would I go about doing something like this in UI Toolkit? I'm working on an RPG prototype and want 3 of these next to each other at the bottom left of the screen

It feels like no matter what I do I can't shrink the portrait and fit it closer to the bars

This is what's in my hierarchy

[fast escarp]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ might take a while to figure it out but you can do any layout with flex

[slim finch]

Thank you

I've used CSS before but it's been like 4 years and the last time I did a Unity project was 3 years ago so I'm having to relearn a lot

[fast escarp]

your layout is already good for using flexbox

so you basicly want flex with direction row in top frame element, dir col in bars element

then set flex grow of each item

use flex: 1 for shortcut while setting flex size

[slim finch]

This is basically the entire UI I want to make I just can't remember anything about doing UI other than how to make a main menu

[wheat helm]

is ui toolkit production ready? it feels jank to me, specifically the c# interface for it

like, nothing seems to work how it should and the documentation is lacking

im just trying to create a visual element, apply a style to it, and parent it to a container

but the root visual element of the document shows everything as 0 and the instantiated element has NaN size and 0 position

[slim finch]

Thank you I finally got it

[wheat helm]

it shows this

it could be because the ui display style is set to none, but there must be some other way to get the canvas size when its not displaying right?

yeah ive got no idea anymore because i hardcoded the size and the created elements are still nan

this seems like a pretty simple use case

visualElement = new VisualElement();
visualElement.AddToClassList(".Class");
document.rootVisualElement.Q<VisualElement>("Container").Add(visualElement);

my visual tree is literally just one visual element called container

i must be fundamentally misunderstanding how this system works

[graceful carbon]

UI toolkit doesn't use a canvas

[wheat helm]

by canvas i meant the root element in the editor

this stuff

[graceful carbon]

You'll want to add a panel or something inside the root element

[wheat helm]

yeah i have one

its called container

i think my misunderstanding is that i thought the scaling was local to the ui

so if i set the canvas size to 256 then setting the left anchor to 128 would put an element in the middle

but it seems like thats not the case

it is stretching the square document to the viewport firstly

[graceful carbon]

It doesn't use anchors either. You might be wanting to set the absolute position of your panel

UI toolkit uses flexbox

[wheat helm]

im setting left and top

im just trying to get a simple arcade game sorta thing set up

essentially pacman with enemies that move around the ui and loop around on the edge

and i was hoping if i set it to a 256x256 canvas, then in panel settings make it scale with screen size using 256x256 as a reference, i could get a nice pixelized square ui that scales up with the screen but doesnt stretch or anything, and no silly math to be done for setting the positions of things to account for the screen size

but the main problem im still having is in that the enemies being added are sized as NaN

and im not aware of any way to debug the runtime visual tree to see what exactly is happening

also, setting the visibility to hidden does not hide it

[graceful carbon]

Hang on, are you using UI toolkit for your in game sprites? That is gonna be super awkward. I mean it's doable now with world space panels but I wouldn't use it for this

[wheat helm]

no its just a little minigame that should pop up when you interact with something

like uh

the tasks in among us

that sort of thing

and the minigame will be nested in other ui so it has to be ui

but at this point with how much of a struggle this is im about to just use a render texture for it

on the surface ui toolkit seemed great for this

[graceful carbon]

visualElement.style.display = DisplayStyle.None

To hide

[wheat helm]

thats what i was doing initially but i feel that it was the reason behind the NaNs

[graceful carbon]

DisplayStyle.Flex to show

[wheat helm]

except that i can see now that it wasnt as its still happening

ui toolkit just feels so lacking for a ui system

theres no constraints? i cant lock an aspect ratio?

[graceful carbon]

Flex will fill the screen by default.

[wheat helm]

well yeah but theres no way to lock the aspect ratio

the default is the only option in this case

i feel like having a square is a pretty common use case for any sort of ui

[graceful carbon]

I feel like USS is probably what you are looking for. Set the element size in pixels or as a percent of it's container
https://docs.unity3d.com/6000.2/Documentation/Manual/UIE-USS.html

But it will be a challenge to make an interactive puzzle purely in UI toolkit

[wheat helm]

it wont be super interactive, itll be interfaced with the regular controls

i just need to be able to move the ui elements and instantiate them which i did not think would be such a headache

[graceful carbon]

Templates are good for that
https://docs.unity3d.com/6000.2/Documentation/Manual/UIB-structuring-ui-templates.html

[wheat helm]

yeah i know but they wont appear

like i said, things added to the visual tree are NaN size

okay, i figured out the problem

turns out AddToClassList() doesnt need the .

i was doing AddToClassList(".Class")

but i just had to do AddToClassList("Class")

[graceful carbon]

Ah wait. When you add to class list, the string does not need the "." At the beginning

[sleek schooner]

Hey! So I'm using the UI Toolkit, and I need to instantiate a spreadsheet of spells that sort of looks like this one I made in Excel.
I'm very new to the UI Toolkit, and I much much much prefer to use the visual editor than having to write my UI through code.
I can make the rest of the UI through the visual editor, I guess, but is there any way to "save" a container or something so that my code just looks something like

       listContainer.add(MySpellStructThatISavedPriorInTheVisualEditor);```

[graceful carbon]

That would be the Templates that I linked above. I would make the list container a scroll view and then add your spell row templates to it. You could also use data binding of your spell DB is saved to a scriptable object

[sleek schooner]

Oh templates!!! Awesome

[lean horizon]

im trying to load style sheet that is inside custom package to UXML file , does this only work from c#<Style src="Packages/com.company.example/Editor/UI/StyleSheet.uss" />

i change it to this project://database/Packages/com.company.example/Editor/UI/StyleSheet.uss and now it works

[mystic tartan]

i just started with the switch from IMGUI to ui toolkit but what i don't understand is why does style not apply to the elements
i have ```C#
ToolbarButton vrm_view_button = new ToolbarButton(() =>
{
window_active_view_and_tab["active_view"] = 0;
})
{
text = "VRM",
style =
{
flexGrow = 1,
unityTextAlign = TextAnchor.MiddleCenter,
paddingLeft = 0,
paddingRight = 0,
paddingTop = 0,
paddingBottom = 0,
marginLeft = 0,
marginRight = 0,
marginTop = 0,
marginBottom = 0,
borderTopLeftRadius = STYLE.BORDER_RADIUS,
borderBottomLeftRadius = STYLE.BORDER_RADIUS,
},
};

yet nothing i add to style except text anchor and flex actually applies

[cinder rivet]

Hi guys 🙂 I'm quite confused about UI Toolkit way of handling templates when it gets instantiated. Indeed the defined layout gets wrapped in a div on instantiation, which, unfortunately doesn't inherit from USS properties of your layout parent div (i.e. width 100% to make it expand). The workaround I've found is to dedicate a USS file to the template and apply these properties at :root. Is that the way you go, too? Thanks!

[sleek schooner]

How can I change the appearance of this ugly grey rectangle in my Enum? Everything seems to be locked

[lean horizon]

with stylesheet

for example if you click on enum field label you will find uss class named .unity-enum-field__label
make uss class in your style sheet name it .unity-enum-field__label exact copy of the class name then change background color or whatever thing you want to change and it will change the enum label ,
you can do the same with other elements

[ocean girder]

Is there a way to arrange things arbitrarily? It seems kind of restricting to always have to think in terms of "row-only" or "col-only" containers

[ocean girder]

Also, is there a way to achieve this style of textboxes in Unity? Specifically the up and down arrows.

[dark blade]

you need to create custom Element for it, or a simple UXML file can also work

[ocean girder]

Is there something I can read up on this to see how I can do this? Not this, specifically, just designing and implementing my own UI element.

[graceful carbon]

The main docs are pretty comprehensive
https://docs.unity3d.com/6000.2/Documentation/Manual/UIE-slide-toggle.html

[ocean girder]

thanks

[slow crest]

am i missing something here? i still can't seem to figure out how to get the data source bindings to work consistently. it should be this intuitive i thought... every doc and tutorial makes it look like it should work.

this is in editor authoring btw... but here goes

screen 1 shows the binding that isn't working. it works in preview mode when i toggle the SO bool value true/false, but not in the editor window.

screen 2 is the editor window. in the treeview, when i select an item it updates the boolean based on whether one of the children in that tree level are selected.

editor code

huh... idk why but it just doesn't like the scriptable object approach :shruge:

making it a normal class seems to fix it

[mystic tartan]

i cannot properly get a listview to work and show the items
the list has items the listview is in the ui and showing list is empty

ObjectField materials_target_prefab_field = new ObjectField(label: "Prefab:")
{
    objectType = typeof(GameObject),
    allowSceneObjects = true,
};
Foldout material_list_foldout = new Foldout() { text = "Materials:" };
ScrollView material_list_root = new ScrollView(ScrollViewMode.Vertical);
ListView material_list_view = new ListView(
    itemsSource: MATERIALS_TargetPrefab_material_entries,
    itemHeight: 10,
    makeItem: Material_ListView_makeItem,
    bindItem: Material_ListView_bindItem
)
{
    selectionType = SelectionType.Single,
};

materials_target_prefab_field.RegisterValueChangedCallback(
    (change_event) =>
    {
        MATERIALS_TargetPrefab = (GameObject)change_event.newValue;
        MATERIALS_TargetPrefab_material_entries = GET_Prefab_Materials(
            MATERIALS_TargetPrefab
        );
        material_list_view.Rebuild();

        Debug.Log(MATERIALS_TargetPrefab_material_entries);
    }
);

the update on ValueChangeCallBack is functioning
all of this is in CreateGUI i'm unsure what could be going on

[rugged light]

https://developers.meta.com/blog/introducing-meta-wearables-device-access-toolkit/

[lean horizon]

are you making editor window ? you can use serialized property

[mystic tartan]

that doesn't work as the list is auto generated
it's grabbing all of the materials on a prefab and lists them
Serilizing it would expose it to the user

and the actual list variable has materials, it's just ListView that doesn't

[cinder rivet]

bumping on this

[fast escarp]

can you explain the problem again? you wanna style the extra div that works as container for uxml when you instantiate?

[cinder rivet]

Actually I'd prefer not as it adds redundancy with the parent div in my template that is already styled...

but it seems like the only solution as Unity wraps it into an empty parent div

[fast escarp]

yea there is no workaround as far as I know

you initialize it from code right? I just add styles there before I add it to my document like

VisualElement init = init;
// add styles
originalVisualElement.add(init)

if you have default styles you can place a uss class in theme file so its global

but still need to apply it via code

[cinder rivet]

The workaround I've found is creating a USS file per template with :root scope to style the instantiated parent wrapper

[fast escarp]

hmm adding uss to each template sounds bad dev experience though

[cinder rivet]

I'm not that sure, I have a 1:1:1 relation for each template (layout, styling and controller through C#)

I mean, everyone should choose the workflow that best suits to him

[fast escarp]

sure 😄

but you are adding same styling to each uxml? why not make it global?

[cinder rivet]

It depends, some templates require that 100% width attribute, some don't

It's not something I want to default so I specialize it in each template USS at their :root scope

My workflow is the following, each of my templates derive from VisualElement, I have a utility function that queries the UXML file through Addressables. Once loaded, I assign behaviours to buttons, data to display, etc. Not using data-binding capabilities yet, but will definitely do for localization, dynamic updates, etc.

[UxmlElement]
public partial class BuildSubTabElement : VisualElement
{
    private string assetPath = "Assets/UI/Templates/BuildSubTab.uxml";
    private Button button => this.Q<Button>("button");

    public BuildSubTabElement(BuildSubTab tab)
    {
        UIUtils.LoadAsset(assetPath, this, (asset) =>
        {
            button.text = tab.name;
        });
    }

    public BuildSubTabElement() { }
}

[fast escarp]

oh you have a custom VE that initialize uxml, thats interesting

[cinder rivet]

Yup, this is my utility function if you wanna use it as well 😉 that way you can just instantiate your UI like pure C# doing var subTab = new BuildSubTabElement()

public static void LoadAsset(string assetPath, VisualElement toClone, Action<VisualTreeAsset> action)
{
    Addressables.LoadAssetAsync<VisualTreeAsset>(assetPath).Completed += (handle) =>
    {
        if (handle.Status != AsyncOperationStatus.Succeeded)
        {
            Debug.LogError($"Failed loading {assetPath}");
            return;
        }

        var asset = handle.Result;
        asset.CloneTree(toClone);

        action(asset);
    };
}

[mystic tartan]

i got to the center of the issue
ListView does not work with any custom classes/structs, i really don't understand why

even a class/struct as simple as ```C#
public struct ALX_MaterialData
{
// public bool open;
public string name;
// public string shader_name;
}

as soon as i switch the bound itemsSource from the List<custom_type> to a standard type like string it works

list view defined as this

ListView material_list_view = new ListView()
{
    makeItem = () =>
        new Foldout() { value = false, style = { justifyContent = Justify.Center } },
    bindItem = (element, i) =>
        (element as Foldout).text = MATERIALS_TargetPrefab_material_entries[i].name,
    itemsSource = MATERIALS_TargetPrefab_material_entries,
    selectionType = SelectionType.Multiple,
    style = { maxHeight = new Length(270, LengthUnit.Pixel) },
    fixedItemHeight = 270 / 10,
};

[mystic tartan]

finally found the solution if anyone has ever stumbled onto this

MATERIALS_TargetPrefab_material_entries.clear()
MATERIALS_TargetPrefab_material_entries.AddRange(
  GET_Prefab_Materials(MATERIALS_TargetPrefab)
);
material_list_view.Rebuild();

MATERIALS_TargetPrefab_material_entries = GET_Prefab_Materials(MATERIALS_TargetPrefab)

is the correct way
as the second is replacing the actual itemsource instead and rebuild is never called

[ocean girder]

Is it still possible with UI Toolkit to code shaders for some UI elements like fancy progressbar's etc. or how does UI Toolkit approach that desired behaviour?

[fast escarp]

custom shaders just came with 6.3. I havent dived into them yet so idk but should be possible

[ocean girder]

6.3 doesnt seem to be out yet. What was the approach pre-6.3?

[fast escarp]

beta is out if you wanna try it, you can install on the hub.
Don't know if there is any custom solutions but it wasnt possible before 6.3
Can you show any examples?

[ocean girder]

this was an example i saw, pay attention to how the scroll fills up depending on a supposedly value between 0 and 1

and since this is UI the way i'd approach it in a new project would be UITK but if you say pre-6.3 it wasnt a thing then i would probably would have needed to mix uGUI and UI Toolkit there

[fast escarp]

this looks possible without shaders, can't say for sure without seeing it in action

[ocean girder]

well, it was just an example, shaders is a completely new topic for me, so it was just a thought and there were some neat examples

i think the hollow knight soul meter is a typical example for UI purposes

i can grab an example

[fast escarp]

if you are not in a rush and wont release before 6.3 gets out, I would give it a chance

[ocean girder]

because this should be more shader-related

[ocean girder]

https://youtu.be/Vxt8uud5o_4?t=701

timestamped

since it's just not a linear crop it should be much more required to use a shader there

[fast escarp]

this should be possible with 6.3

[ocean girder]

aight

[fast escarp]

are you worried because it is so new?

[ocean girder]

no

i was just confused how itd be done since i dont recall my UI elements having materials or shaders

but i guess a new UI system requires time to catch up

[fast escarp]

https://docs.unity3d.com/6000.3/Documentation/Manual/ui-systems/uss-filter.html

https://docs.unity3d.com/6000.3/Documentation/Manual/ui-systems/create-custom-swirl-filter.html

I guess there is more info here: https://discussions.unity.com/t/feedback-request-custom-shaders-and-post-processing-filters/1680973

[velvet robin]

Does databinding work on editor UIs? I'm having problems binding my view model to my custom inspector.

[fathom lance]

Hi I'm trying to make a custom editor for a scriptable object that has a list of data components so when you click the + button on the list a dropdown with all available components appears for you to select (and an instance of the chosen component is added)

Does anyone knows how can I do this?

[whole zinc]

@.clausan muted

Reason: Multiple channels spam.
Duration: 29 minutes and 56 seconds

Errors

DM not sent: User disabled DMs.

[sleek schooner]

I'm getting confused regarding size/flex/anything.
I'm worried about text size: I want this label's text size to A) Resize based on available space in the container, and B) consistently resize every text that uses this same style by the same amount.
This template will be instantiated in a bunch of different sizes and stuff depending on which menu you are, which makes it imperative that it works regardless of width and stays consistent

Basically, how to make sure my text is never bigger than its container if the container is resized

[fast escarp]

there is no auto size for text as far as I know, this might help though https://discussions.unity.com/t/truncate-wrap-option-for-visual-element/883149

[sleek schooner]

ohhh hold on its now available as of 6.2

I havent updated yet :P

[sleek schooner]

If anyone comes across this in the future and wants to auto-resize text: it's possible in 6.2, but you have to activate Advanced Text Generation in your project settings

[narrow vortex]

Hi is there any sites I can use for free UI / Inventory like the images of background slots etc I can code and style it myself or any ui assets like once human / dune awakening??

That I can buy

Not feeling the edge for now to completely hire a UI designer for a prototype want to make the prototype first and then get a UI guy to get the overhaul

[lusty inlet]

I wish I understood the logic of having some elements exposed in the UI Builder Inspector, but others not. LikeText Field and Progress Bar for example. You have to create a script to modify the basic aesthetics unless I'm missing something? What wouldn't all the properties be exposed in the Inspector?

[hasty parcel]

Been a while since I gave up on ui toolkit, has it been getting attention? Is there better animation support or simple things like gradients and z index yet?

[rough scarab]

You use USS selectors to target elements that are generated children.
Generated children aren't declared in UXML so they have no way to attach styles inline (which you shouldn't be doing anyway).

[rough scarab]

Yes, but none of those features. It now has filters and shaders, and text support is improving too, world space UI... Lots

Also vector graphics are now rendered by default using the painter2D stuff, which means they are properly scalable and antialiased

[fast escarp]

painter2d wasnt antialiased before right? I think it is looking much smoother if I remember right(using 6.3)

var painter = context.painter2D```

[rough scarab]

It was, but SVGs didn't use it, and just imported as fixed-decimated meshes

Which weren't antialiased

[graceful carbon]

There actually is a Scheduler that you can use to animate visual elements

[quaint silo]

Might be a dumb question, but by default, you're unable to edit these component styles unless you override them with uss. is there any way to make them editable in the ui builder

[lusty inlet]

Is there drag-and-drop support for the UI Toolkit Builder heirarchy when working with the AI Assistant? I notice that you can with the regular Project and Hierarchy in the Editor, but the UI Builder so far the only way I think I can reference an element is by typing or pasting it's name.

[rough scarab]

No, they don't exist in UXML so they cannot have inline styles.
You have to style them via USS selectors

[tough spear]

Hey folks. I am fiddling around with an UI done with UIToolkit and I habe a dropdown. And I noticed a bug where when I open the Drodown and it shows me the choices and while it is open I hit my cancel input in order to close the panel/UI the dropdown is still open. Calling .Blur() on the dropdownfield upon closing doesnt do anything.
Any specific thing I need to call or event to listen to?

[tough spear]

Mhm, after some further researching and UI Debugging Unity apparently creates the dropdown field right as a child of the top root element, without a name, but apparently checking the class name and removing it seems to work:

VisualElement dropDownPopup = panelRoot.panel.visualTree.Q(null, "unity-base-dropdown");
if (dropDownPopup != null)
{
dropDownPopup.RemoveFromHierarchy();
}
If anyone else has better suggestions I am all ears 🙂

[main garnet]

Hello, is there a way to import an .uss file into other .uss files?

Usecase:
I want to have a globals.uss stylesheet that defines project wide variables, those variables are to be used in separate, component specific .uss stylesheets

globals.uss
:root {
 --text-base: white;
 --background-color: #222;
 --border-radius: 8px;
 --padding: 8px;
}



StatsPanel.uss
#panel {
 color: var(--text-base)
}

I've got it working by referencing both the component specific .uss and the globals.uss stylesheets in UXML, but I'm wondering if there another way of doing this

[fast escarp]

uss added to theme files are global

[main garnet]

Is there a way to vertically align middle an element with an absolute position?

#inventory-container {
    right: var(--screen-padding);
    top: 0;
    bottom: 0;
}

this makes the element take the whole height of the screen, i would rather have it retain it's height

[main garnet]

Thanks!

[vital turtle]

Is there a way to create a custom control with bindable property?
What I'm trying to do is something like this:

<mvvm:CommandButton text="Load prefabs">
    <Bindings>
        <ui:DataBinding property="command" data-source-path="LoadCommand" binding-mode="ToTarget" />
    </Bindings>
</mvvm:CommandButton>

I've been struggling with implementation for days.

[fast escarp]

I dont use binding that much but whats your goal here? I made a custom tabview that you can bind titles to something like localization, then I redirect them to custom labels I create

built-in tabview does the same

[candid sparrow]

The basic trick is left: 50% and translate: -50% 0 (or 0 -50%, I don’t remember)

[vital turtle]

First of all, I'm exploring, secondly, MVVM.

[vital turtle]

Ok, figured it... Apparently, [CreateProperty] needs to be BOTH on UI element AND ViewModel.

[buoyant remnant]

Hey, is there any good way to block Input.GetKey() from detecting the key when we are writing in UI Toolkit text field?

there is a bunch of different uidocuments and text fields and scripts that I have and I don't want to write custom detection for each document and field

The old ui system has EventSystem.current.currentSelectedGameObjec and its amazing but uitoolkit doesnt seem to have such thing that would work globally for all documents

[fast escarp]

I can't figure out how to find position from mouse events in world space.

target.RegisterCallback<MouseEnterEvent>(MouseEnterEvent);


protected virtual void MouseEnterEvent(MouseEnterEvent e)
{
  Vector2 pos = e.mousePosition;

  // Works great in normal UI, doesnt work in world space. How do I convert this position to world space?
  tooltipElement.style.left = pos.x;
  tooltipElement.style.top = pos.y;
}

I tried functions in https://docs.unity3d.com/6000.3/Documentation/ScriptReference/UIElements.RuntimePanelUtils.html
ScreenToPanel function should work? But I couldnt make it work

[hidden forum]

does anyone know if it's possible to blur a UIDocument made with the ui builder?

I will like to apply a blur effect to the image background

[fast escarp]

https://docs.unity3d.com/6000.3/Documentation/Manual/ui-systems/uss-filter.html

[fast escarp]

Having problem with custom filter functions in 6.3
If I set the material directly it works fine

But filter function doesnt work, am I doing something wrong?

[sleek schooner]

Hey, how can I have a UI overlaid on top of my UI?

Basically I need some text that will flash on the screen lilke this, but big and centered in front of my UI elements

I need a way somehow for my Label on my visualtree to be... unattached to the visual tree? Just "floating"?

Or do I need two visual trees? If so how do I set it up?

[empty obsidian]

Anyone else having issues after updating to the latest beta?
Our project is currently on version 6000.3.0b1, after updating to b5 ui breaks and the following exceptions are displayed in the console

Trying to read value of type Color while reading a value of type Float
Trying to read value of type Enum while reading a value of type Color
Trying to read value of type Color while reading a value of type Dimension
UnityEngine.UIElements.VisualTreeStyleUpdaterTraversal:TraverseRecursive (UnityEngine.UIElements.VisualElement,int)
Unity.UI.Builder.BuilderVisualTreeStyleUpdaterTraversal:TraverseRecursive (UnityEngine.UIElements.VisualElement,int)
UnityEngine.UIElements.VisualTreeStyleUpdaterTraversal:TraverseRecursive (UnityEngine.UIElements.VisualElement,int)

[empty obsidian]

You just need to change the position to absolute and adjust the position with the top,bottom,left,right properties.
https://docs.unity3d.com/6000.2/Documentation/Manual/UIE-relative-absolute-positioning-example.html

[fast escarp]

I prefer different UI Documents for this, then just set sort order higher

[lusty inlet]

Has anyone tried using a uss file to estrablish a color token library and then import that to other uss files and use those variables? I can see the variables in UI Builder under the root of the ColorToken.uss file, but when applied to a VIsual Element background color in the Main Menu, it just comes out straight white. No error... but its not working either. I have not found anything out there as an example yet, but the LLMs seem to think it should work.. 😅

[fast escarp]

I use it all the time, how does your uss look?

[maiden elk]

Overlays go this standard right click menu on the top bar and it is possible to create a right click menu on the rest of the content.
And idea how to hook into the standard right click menu ?

[maiden elk]

okay, how the f do i scroll in ScrollViews in the Ui Builder?

[iron harness]

Does anyone know if it is possible to add a binding to custom UxmlAttribute property?

[candid sparrow]

This was here earlier, I think you need a [CreateProperty] on the attribute as well. #🧰┃ui-toolkit message

[iron harness]

that was it thanks! I did find the suggestion in a 1 hour long video about UI toolkit 🙂

[obtuse jay]

Using the UI Builder, how can I see the content of differents tabs under a tabview?

[coral rampart]

greetings! I updated an existing project to Unity 6.2.6f2 and now I'm getting a ton of UIToolkit errors. I have never used UItoolkit and so to my knowledge, I do not have any such elements in my project. Is anyone able to help guide me to a fix?

[graceful carbon]

You probably need to update the package. But if you aren't using it then just remove it

[coral rampart]

Thanks. It took me an hour and half to find it, but it's a known bug and you have to change the editor font. Just did this and it seems to be working.

[lusty inlet]

I have a SxA_ColorTokens.uss file:

:root {
  /* Default team colors */
  --color-team-light: rgb(214, 214, 214);
  --color-team-dark: rgb(31, 31, 31);
}

and then i have a SxA_MainStyles.uss with:

@import url("SxA_ColorTokens.uss");

:root {
}

.splashbutton {
    -unity-font-definition: url("project://database/Assets/SxA/Fonts/Geist/Geist-Medium.ttf?fileID=12800000&guid=09f80c3ddd1eb924f930c0151da7ed29&type=3#Geist-Medium");
    width: 500px;
    height: 50px;
    align-self: center;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 111, 0);
    font-size: 28px;
}

and the single Visual Element I'm using to test it (background-color) doesn't appear to work:

.MatchReadyTeamIndicator {
    flex-grow: 1;
    border-left-color: rgb(183, 0, 0);
    border-right-color: rgb(183, 0, 0);
    border-top-color: rgb(183, 0, 0);
    border-bottom-color: rgb(183, 0, 0);
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    background-color: var(--color-team-light);
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 12px;
    margin-right: 12px;
}

[fast escarp]

the screenshot shows the color is set inline though?

[lusty inlet]

the screenshot shows the color is set

[obtuse jay]

How can I bind a property instead of a field?

[candid sparrow]

Same way you'd bind a field afaik, you just need to have getter and setter

[obtuse jay]

Forget to clarify I found out: it doesn't work with .Bind(), instead I must use .SetBinding and .dataSource

Another question: how can I execute a code each time the count of elements in a ListView changes? I can't just used the added and removed events because they don't take into account if the collection's count was modified externally.

At the moment I'm just using an .schedule.Execute(...).Every(...) but that is kind of lame...

[candid sparrow]

how do you change your count of elements? you still have some backing field (list etc...) so track it there and ignore the UI completely since it will eventually be in the backing field?

[obtuse jay]

The count of elements can be changed in two ways:

• By using the ListView in the window.
• By modifying the scriptable object from the inspector.
  Basically, I want to handle the case in which an user opened the window but decided to modify the scriptable object from the inspector (or text editor I guess).

[candid sparrow]

I see, it's a editor ui... hm... what do you want to do when the elements are added?

[vital turtle]

I'm trying to make a custom BindableListView control in Unity for UI Toolkit, and I can't find how to define the default style? Or, ideally, even default uxml file. By "default" I mean that in my uxml user code I could just add xmlns for the namespace of my custom control and use the custom control by it's name <BindableListView /> and it will automatically load and apply predefined style file (and also ideally - uxml file for layout, so I don't have to create ScrollView in code in my custom control). Is there a way to do that?

Currently, I see that if I apply styling to the scroll view in constructor, it's overridden (?) by default values. Question mark because scroll view does not host elements directly in itself, it hosts them three levels deep, in #unity-content-container, but in the constructor, when I create scroll view, it doesn't have any children, so I can't directly modify that.

[vital turtle]

Ok, I managed to style it in code through AttachToPanelEvent.

[vital turtle]

Custom style property of type Length - how? ICustomStyle.TryGetValue doesn't have Length, or StyleLength overload, both are structs, so not derived from Object, so I can't read it by generic overload as well. And I don't see a way to parse a string to length, except inventing my own bicycle.

why everything has to be so difficult with UI toolkit?..

[tranquil tangle]

Aside from the e-books and sample projects, is there any write up on advanced best practices for the UI-Toolkit? I'm managing a former React web dev, and I want some concrete things to point to when I have to explain that the UI Toolkit is not webdev. The guy makes amazing designs and uss files, but insists on some really weird coding conventions and naming schemes.

[graceful carbon]

Maybe https://www.foundations.unity.com/

[zenith cove]

how do i fix?

[sleek schooner]

I don't think I "get" how to use ListView. How do I add stuff to it, from the visual toolkit? It's greyed out it doesnt let me add stuff

[rough scarab]

You don't. Use a scroll view if you're manually adding stuff. The list view has a template and the data comes from code/bindings

[sleek schooner]

Sorry, I think I need to understand it in a more basic level. What's the difference between a scroll and list view?

I can see they are two separate things in the library, but I'm struggling to understand what's what

[rough scarab]

A scroll view is a scrolling container. A list view is a scrolling container of one kind of data that uses a template to spawn/despawn (virtualize) the list entries efficiently.

[vital totem]

U need to write code for list to work

[sleek schooner]

Any tips on displaying icons in the middle of a text like this?

[quaint stream]

Nintendo is writing a cease and desist for you right now 😆

Here is a thread on the forum that explains how to do it:
https://discussions.unity.com/t/how-to-integrate-images-into-text-in-ui-toolkit/921961/8

[sleek schooner]

NOOOOOOOOOOOOO I can't afford a lawyer 😭

[iron nacelle]

public attorney 😔

[whole zinc]

@isthatyou323 muted

Reason: Multiple channels spam.
Duration: 29 minutes and 53 seconds

[zealous thorn]

can somebody tell whats causing this offset?
its present in the game but when i click arount in the ui builder (not changing anything, just selecting and deselecting stuff) it can be there or not be there
its a tiny offset that is invisible with a larger font but at size 13 it becomes noticeable

[trim merlin]

Is it a textmesh pro text ? I guess you've checked that it's aligned in the center, and not on the left ?
The "clicking around changes behavior" thing coult point to a material / shader behavior, or a script that affects the text or the canvas size

[zealous thorn]

this is ui toolkit, so i assume its TextCore
it has no custom scripts or materials, this element is about as basic as it gets
alignent is correct and it behaves corerectly on all font sizes above 14 or so

or rather this gap just gets less noticeable till you cant see it

[trim merlin]

is it a custom font ? I wonder if it's not beause the characters themselves have different margins inside the very font

[quaint stream]

could be some sub-pixel alignment issue? UITK still uses integer pixels as unit, when zooming in it applies transform scale, but my guess is the original value is still an int and can't move less than 1 pixel

[zealous thorn]

that sounds on point

[dark blade]

what happens?, why the input field are expanding way beyond its container?

.f-input-field__main-container {
    background-color: transparent;
    height: var(--fc-standard__height-30);
    flex-direction: row;
    align-items: center;
    padding: 0 2px;
}
```styling for the container, its consist of 1 image as icon on left, 1 textfield as input field, and 1 button for clear the field text, 
```css
.f-input-field__field {
    padding: 0 1px;
    flex-grow: 1;
}```` and this styling for the textfield

isnt the idea of flex grow is that the element will try to expand to fill the remaining space of the container?, but this is clearly way beyond the space available

on the different project its respect the button,

[brittle furnace]

Hi all, I have a university assignment to work with my group to create an experience based on a problem statement. We chose to make an immersive experience in Unity. We are hoping to implement some form of experience using UI Toolkit in addition to other forms of experiences in Unity.

Is it possible to use UI Toolkit to create advanced 'websites' in the engine? We are thinking of immersive scrolling and I want to know if its possible to get it working considering that UI Toolkit is similar to HTML/CSS

[shadow rune]

it's probably possible but why not just use a web framework at that point?

or do you need it to be within a unity game

[rough scarab]

make sure it can also flex-shrink

[brittle furnace]

4/5 group members had experience with Unity and only 2/5 have web dev experience. They wanted something more familiar so we ended up using Unity.

Do you know any resources for helping with the immersive scrolling implementation? Searching the term with Unity UI Toolkit on Google yields nothing useful for me

[shadow rune]

you can look at the official ui toolkit documentation https://docs.unity3d.com/6000.2/Documentation/Manual/ui-systems/introduction-ui-toolkit.html

i haven't tried to do anything with immersive scrolling though

[astral hamlet]

i have this as my label right now

i wanna change it to smth like this

[shadow rune]

well you can just give it a parent VisualElement with a border and some padding

(and, well, set its border radius)

[astral hamlet]

would it be possible to use this somehow?

cus i did use it for high scores

[shadow rune]

yes, that is what I'm telling you to use, but it'd probably make more sense to do it on a parent visual element instead of the label itself

[astral hamlet]

is there a specific reason as to why?

[shadow rune]

more control and better organization

like it'll allow you to put multiple elements into one border box like this

[astral hamlet]

oh!! so you can layer the diff borders on top of one another?

that's sick

[shadow rune]

yes you can also do that for sure!

[whole zinc]

Posting code

📃 Large Code Blocks

Use links to services like:
https://paste.mod.gg/, https://hastebin.skyra.pw/, https://paste.ofcode.org/, https://paste.myst.rs/

📃 Inline Code

Surround code with three backquotes. Not quotation marks.
To format as C#, add cs to the first line:
```cs
// Your code here
```
Add a comment with a line number if there is an error message.

[quaint stream]

experience with unity is not much valid with UIToolkit. I just have been learning myself last couple weeks, but you need both web and unity experience to understand UI toolkit fast... The web exp for "what they aimed for" and the unity exp for "what they thought while doing it" because it is nor web nor classic unity lol.

It would be probably easier for your group to just stay on the older Canvas UI if they have experience with it, or go full web, because UI Toolkit is still very lacking against pure web functionality

[quaint stream]

flex grow is just the container WILL fill always the space. Flex shrink allows it to go smaller than auto.
What you are looking for is the wrap and overflow settings. It defaults to overflow visible, so you need to set it to hidden so it cuts the overflowing content.
flex-wrap defines what will happen with the overflowing content, no-wrap gets it cut, wrap makes it flow to the next line if there is space. These are for containers.
text-wrap (whitespace property on uss) and text-overflow defines the same settings for text.

[brittle furnace]

I understand the points and have tried out the technologies before. However, there are other aspects of the project that will make use of the other members’ experience with Unity so it’s quite alright. Myself and the other teammate with web dev experience intend to work on the UI Toolkit part of the project.

[willow dove]

Does setting pickmode - ignore on a parent also disabled children or just the parent ?

[rough scarab]

Just the parent

[willow dove]

THen i am doing somehting wrong i guess i'll isolate the test

[whole zinc]

@rxko_is_copper_59554 muted

Reason: Sending too many attachments.
Duration: 29 minutes and 53 seconds

[magic spoke]

I dont know if this is the channel I should be in, but how do I create an square with a vertical gradient?

[vernal wadi]

I have to ask this.

For some reason with UITK whether I do the following:

private void OnEnable() => _button.clicked += OnClick;
private void OnDisable() => _button.clicked -= OnClick;
private void OnClick() {}

private void Awake() => _button.clicked += OnClick;
private void OnDestroy() => _button.clicked -= OnClick;
private void OnClick() {}

Or use:

private void OnEnable() => _button.RegisterCallback<ClickEvent(_ => OnClick());
private void OnDisable() => _button.UnregisterCallback<ClickEvent(_ => OnClick());
private void OnClick() {}

When I set my Main Menu's Game Object to not active and then back, I lose the Click Event. So I have 2 questions.

#1: Is there a performance hit if I just toggle visibility? While I am doing this to show and hide an options menu from the Main Menu (I don't care about performance here), eventually this will have to carry over to a Pause Menu where I will care.

#2: If there is a hit to performance is there a way to register this OnClick event as a Unity Event, so it can get set in the Inspector and in theory "never lose" memory of the subscription?

The event debugger doesn't ever show a callback registered, but IDK how to use the event debugger too well...

It never shows a callback registered.

[vernal wadi]

Solved.

For whatever reason I get a reference to the button on Awake.

When I disable that GameObject the UIDocument silently forgets(?) about that reference and then remains silent (?) about the fact it won't regsiter an event handler again.

The solution is to OnEnable grab the references from the UIDocument again to "refresh" them if that makes any sense.

private Button _button;
private UIDocument _document; 

private void Awake()
{
  _document = GetComponent<UIDocument>();

private void OnEnable()
{
  _button = _document.rootVisualElement.Q<Button>("myButton");
  _button.clicked += OnClicked;
}
private void OnDisable()
{
  _button.clicked -= OnClicked;
}
private void OnClicked() {}

This is the solution...

I have no clue why its the solution, but it is. I don't know why _button's reference in the UIDocument becomes stale.

[rough scarab]

Because disabling the game object completely releases the UI. It's rebuilt when enabled

[vernal wadi]

Super good to know!

[candid sparrow]

Only if it’s done via asset, if you create it dynamically it’s cleared, but you have do create it manually. If you keep the reference though, it’s not destroyed, just cleared from the panel 🙂

[modest moss]

Is there a way for my texture of my progress bar actually keeping its shape when value changes? Because without this I'll probably just go back to the old UI Canvas Slider method

[candid sparrow]

On what element do you have the texture? It’s probably on the fill container?

[dark blade]

https://jumpshare.com/s/W4RD4HyT8TFyavGFQbfA what wrong with my UITK Debugger?, see when i set the color from UI Debugger window, its only applied one time, and whatever color i set next is not applied

[tranquil tangle]

Does anyone know if the performance issues of the world space UI Toolkit renders has been fixed yet? Last time I tested it, I was getting thousands of unbachted drawcalls for the elements I was creating

[tranquil tangle]

Looks like thats probably a nope:

Any thoughts on how I can handle this?

[dark blade]

anyone?

[wheat notch]

I'm trying to move my first steps with UI Toolkit by following this short tutorial: https://docs.unity3d.com/6000.0/Documentation/Manual/UIE-radial-progress-use-vector-api.html

The result is fine, however the "progress" property doesn't seem to be Bindable. How can I do that? The docs I'm finding online are a bit confusing on this topic.

[quaint stream]

IIRC all properties are bindable as-is if they are shown in the builder, at least in unity 6.2. But the value you are binding to has to be also a property and have the [CreateProperty] attribute

[willow dove]

Man the documentaiton for https://docs.unity3d.com/ScriptReference/UIElements.MultiColumnTreeView.html

is so very bad....

especially for sorting ..

So we use columnSortingChanged to detect change, then what ?
https://docs.unity3d.com/ScriptReference/UIElements.MultiColumnTreeView-columnSortingChanged.html

use VisualElement.Sort
public void Sort(Comparison<VisualElement> comp);
https://docs.unity3d.com/ScriptReference/UIElements.VisualElement.Sort.html

the sort function gets visualElement - am i suppose to take the text value from VE and compare with that ?

am i not suppose to do a sort on the DataSource ?

[wheat notch]

Well, the progress property from that tutorial is marked as UxmlAttribute and doesn't have the "Add binding" context action inthe UI builder

[mystic tartan]

i was working on a custom ui for my app but i noticed vscode doesn't seem to have support/intellise for .uss files even those the unity extension pack is installed
am i missing something?

[willow dove]

in MultiColumnTreeView how can i track the order of the columns ... if user changes order and generally where is it saved..

i can easily track width with tv.columns.$.width, same with visibility - but cant find how to find it or set it

[stiff venture]

How can I display Unicode symbols (like the fullwidth slash ／) correctly?

[mystic tartan]

i really don't understand what is going on with the textfield as this is with 0 padding and 0 margin

there is a strange inherit padding to it that's completely blocks the text

[dark blade]

inspect from ui debugger, what is that thing

[mystic tartan]

A style-less window for prototyping the backend logic of the file browser

That yet somehow still has style even tho it's USS is empty

[shadow rune]

theres a default style

[graceful carbon]

It's probably the theme that it's using

[mystic tartan]

Wasn't the unity default runtime theme bug fixed in 2022.3?

I will check if the theme is still a thing

[graceful carbon]

I'm not sure about any bug. But the default theme is still applied in the panel settings

[west flame]

Hey, does anyone know of good up-to-date learning materials for the UI Toolkit? I tried the tutorial on learn.unity but it seems very out of sync with the resources in the asset pack, so I spend more time fighting asset/naming inconsistencies than actually learning the UI Toolkit.

[graceful carbon]

The main docs are pretty good

[mystic tartan]

I stumbled on a bug a while ago for 2021 that was fixed in 2022, as I did remove the theme but unless you swap it out with another the default one still applies, removing it isn't enough and seems it's still so in 2022

Was that tho got fixed now

[wheat notch]

Bumping this up: why isn't the "Add binding" menu entry showing in the UI Builder for the progress property on that custom component? The property is marked as UxmlAttribute and works, however it cannot be bound to anything. Generally speaking I can't find a way to make custom components bindable even when they extend BindableElement.

My goal is to create a custom radial progress bar where I can bind both an image and the progress value.

[elfin sentinel]

Over the weekend I was trying to use UI Toolkit and I was having a very bad time.

I was just trying to dynamically rescale my GUI and it was not easy. It's still not 100% working but I think it's getting close.

I took classes on Web development and CSS in college, 11 years ago. So I am not new to the web development concept, but I thought the blend and setup of C#, XML, and CSS was very unintuitive.

I am hoping that once I get it set up it will be easier to scale with new components. Well see.

Maybe I should have used one of the tutorial demos before jumping in... idk. I'll keep trying and report back.

Also my usecase for context.

I am creating a digital dashboard for a car that has custom geometry.

[prime raft]

How do I hide those arrows in tab view? they seem to be created automatically during runtime, can't track them in UI Builder.

[grand vapor]

Ok so unity 6.2f cant even display a serialized field? Anyone else having this

problem solved, disable the UITK non sense:

[elfin sentinel]

I wish padding in USS/UXML worked the same as CSS/HTML.

I can't crop my images with padding.

[vale venture]

New version unity and new inspector setup

[wind kelp]

@ornate cliff could you take a look at the video for me I really appreciate this

Let me make a description

Unity 6.0.2.10f1 freezes and spikes RAM to 100% whenever I click or move the mouse in the Scene view, showing “Mouse.Move Waiting for Unity to Execute,” even with Gizmos disabled

Just started doing it the moment I added more TMP Elements for the UI

I've updated my project to the latest release, I've restarted my PC, I've checked my scripts, nothing there I see that can cause the problem

[ornate cliff]

You wrote "UI Element" I assumed you were talking about #🧰┃ui-toolkit ...
It looks like there's a memory leak. The solution is still the same as I've mentioned. Deconstruct everything and figure out what exactly causes it.
Does it happen with default components?
If you turn off everything and start turning things on on hierarchy at what point what part of UI manifests the problem.

Find what causes the problem then reset/rebuild that component.

[wind kelp]

I appreciate the help, yeah I just ended up starting from scratch again

Everything was the cause

[wind kelp]

Yeah and it did it again COMPLETELY FRESH SCENE man

There went my monitor

Good way to piss me off

I'm just at a complete loss can't seem to figure it out TMP just isn't it I guess

I mean what else can I do other than creating a new fresh unity scene and rebuilding the entire UI several times over?

Keeps running into the same problem over and over again no scripts attached and I'm just running just plain old TMP

[wild hedge]

what does the profiler say?

[wind kelp]

Doesn't matter

This is a in Editor bug

[wild hedge]

does it only happen in editor? or it also happens in a build?

if it doesnt happen in build then its a editor bug

[elfin sentinel]

Looks like 6.3 is going to fix my concerns! Yay.

[winter viper]

Hi, I’m looking for the Channel for the Unity creator tool kit for Spatial.io

[feral onyx]

its right there on the website of that thing, not here

[winter viper]

I realise that "That thing" has a channel for it.
Not many 'specialists' in the community, though.

[tranquil tangle]

Is there any point where the UI Toolkit 'locks in' changes to the UI for the frame before rendering? Im doing some calculations on world space elements positioned as part of a DOTS Job, and the visuals keep being a frame behind the objects true location

[prime raft]

Ok,

.unity-repeat-button {
display: none;
}

hides them.

[elfin sentinel]

Yall got any pro tips on UI filters? I tried shader graph mats but they aren't cropping.

[astral fjord]

Anybody had issue where button having transition time of 300ms on hover would change transition time in some higher up Visualelement transition time sometimes to be 300ms as well?

[bronze iron]

Who here is working with Unity AppUI? Is it a compelling package if I want to use it as a starting point to take and change its theming?

[graceful carbon]

I've used it a bit for the elements that aren't in the base UI toolkit like the color picker and grid view.

[bronze iron]

Inestering, so not compelling enough to use it as a starting base for all UI elements?

[graceful carbon]

App UI is already built on top of UI toolkit. They are all visual elements

[bronze iron]

I meant in terms of theming, such as using copying the entire app UI theming for things like buttons, and then going through the effort and modifying all of its USS variables to style that button to your liking

[graceful carbon]

Oh sure. You would like end up overhauling the themes in either case.

[runic gale]

Hi all, just wondering if I have missed a change since updating my project to Unity 6.2
I'm trying to use TwoPaneSplitView in a custom control, which appears in UI Builder, and lets me change the initial fixed pane dimension without trouble.

However, when enabling preview mode, I am unable to use the resizing feature, even though there are two children of the split view, and the resize cursor appears, suggesting that I should be able to resize.

Is there a new setting I am missing that enables the resizing?
Cheers

[brittle furnace]

Is there a place to set render priority for world space documents? I want a document to render above every gameobject other than other UI documents

[magic spoke]

how do i make the min width of the label smaller?

[graceful carbon]

You can add the selector .unity-base-field__label to your stylesheet and adjust the size there

[magic spoke]

ive only started ui toolkit an hour and a bit ago

could you explain what that is?

[graceful carbon]

Selectors are how you can change the properties of visual elements with USS stylesheets

[magic spoke]

im still very confused?
what would I write to set the minimum width to the variable LabelSize?

oh wait i think im getting it?

guess not

[graceful carbon]

.unity-base-field__label { width: auto; align-self: auto; min-width: 0; }

[brittle furnace]

Is there a way to allow world space and screen space documents to be synchronised when navigating through them? Lets say I am in the screen space one, and I clicked tab 2. How do I make it so that the action is syncronised with the version in world space?

Or is the only solution to make an event system to handle making actions on both document instances?

[solid notch]

How do you guys write uss and uxml files with vs 2022 ? Is there a plugin I can use? Cant seem to find one

[graceful carbon]

I mainly use the UI Builder. I haven't found much need to edit the files directly. But they will open in VS

[solid notch]

I just can’t work with visual editors like that.

[cobalt nimbus]

I don't know where to go and ask. I use UiToolkit with android project. I register PointerMoveEvent to use screen slide as player look rotation. The problem is on different devices I have different sensitivity. My original idea is to use Screen.dpi to normalize touch delta. As I understand the more density of points you have on your device the higher dpi should be and the higher delta will be (if not scaled) so I divide by dpi. Still different devices have significant difference in sensitivity, like twice or triple difference. I've read that some devices report incorrect DPI numbers or even 0 value, but I've never met situation where there would be devide by 0 exception or infiinite delta, so it's not the case.

PLEASE HELP

namespace Source.Common.UiToolkit
{
    public class VirtualTouchPad
    {
        private readonly Subject<Vector2> _dragged = new();

        public VisualElement Root { get; }
        public Observable<Vector2> Dragged => _dragged;
    
        public VirtualTouchPad(VisualElement root)
        {
            Root = root;

            Root.RegisterCallback<PointerDownEvent>(HandlePress);
            Root.RegisterCallback<PointerMoveEvent>(HandleDrag);
            Root.RegisterCallback<PointerUpEvent>(HandleRelease);
        }
    
        private void HandlePress(PointerDownEvent evt) => 
            Root.CapturePointer(evt.pointerId);

        private void HandleRelease(PointerUpEvent evt)
        {
            Root.ReleasePointer(evt.pointerId);
            _dragged.OnNext(Vector2.zero);
        }

        private void HandleDrag(PointerMoveEvent evt)
        {
            if (!Root.HasPointerCapture(evt.pointerId)) return;
            _dragged.OnNext(evt.deltaPosition / Screen.dpi);
        }
    }
}

[gentle raft]

Hello guys, there is a way to bind a value on a Listview but use a BindItem over the native bindItem?

because i want to use the default binding from back-end but above that, use a aditional callback on some fields on each item on listview
but when i set bindItem i want to set all manually including onValueChange callbacks

[fiery horizon]

Stupidly simple question I'm just having a hard time finding the documentation for the UI Toolkit and style-sheets: how would I go about making my button-hover scale ONLY on the x axis? Like when I hover the mouse over it the button gets wider?

:root {
}

.button {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    background-color: #9C9C9C;
    color: white;
    border-left-color: #929292;
    border-right-color: #929292;
    border-top-color: #929292;
    border-bottom-color: #929292;
}

.button:hover {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    background-color: #feae34;
    color: white;
    border-left-color: #f7941d;
    border-right-color: #f7941d;
    border-top-color: #f7941d;
    border-bottom-color: #f7941d;
    transition-duration: 0.2s;
    scale: 1.1;
}

I'm using scale: 1.1; but that's scaling the entire button

[rough scarab]

Then just scale on the X axis
scale: 1.1 1;

[final shadow]

Is it normal if suddenty you cannot navigate in UI Toolkit Editor? Like I'm trying to drag the viewport it won't move

It was moved but then it never can be dragged anymore

I can only zoom in and zoom out the viewport, then I try restart Unity Engine, it snapped on top left of viewport and I still cannot navigate

It happens specifically, I try edit other UXML and the viewport navigation runs normally

[bronze iron]

Anyone with App UI experience know if this part about custom theming is still up-to-date? This .tss file doesn't exist, only a .uss file goes by that name.

For the life of me, I don't know how to get started with override the default theme

[graceful carbon]

The defaults themes are located in the Packages/com.unity.dt.app-ui/PackageResources/Styles/Themes.
Create a new theme and inherit from one of them.

[bronze iron]

Sanity check - and if I wanted to start overwriting variables, I would create a new uss, find variables in the package's uss files I want to modify, and simply rewrite them with new valeus in that new uss?

[graceful carbon]

That would be the easiest way if you are using a lot of the default elements.

[fiery horizon]

When it comes to the UI toolkit, is it possible to make particle-systems appear above it? I want to have click-particles that appear when the player clicks a button, and that's all coded, but I can't figure out how to make those particles go above the UI :[

[graceful carbon]

If the UI is in screen space, you might have to render the UI or the particle system to a separate camera and adjust the cameras render order

[worn vector]

Hi,
I want to use UI Toolkit for creating a custom level design editor. I've never used that and I want to know if it is in a good state to use UI Toolkit instead of IMGUI ?

[graceful carbon]

Sure there is no reason why not.

[worn vector]

Thanks, I didn't want to be blocked by weird stuff.

[graceful carbon]

UI Toolkit has been used for Editors for years now. The Runtime part of UI Toolkit is newer and has a few limitations

[lean horizon]

any one knows why drop down field do not show selected option ? do i have to set it up from script?

[worn vector]

Hi,
Anyone knows what is the issue with PointerEnterEvent which is called twice ?
I have a grid of Visual Elements and Flex Direction is left to write and Flex Wrap is reverse. When I move the mouse in X axis, there is no issue but when I move the mouse in Y axis, the function which is registered to PointerEnterEvent is called twice.

private void CreateGrid(VisualElement root)
{
    _gridVisualElement.style.width = _levelDataSO.gridSize.x * _levelDataSO.cellSize;
    for (int y = 0; y < _levelDataSO.gridSize.y; y++)
    {
        for (int x = 0; x < _levelDataSO.gridSize.x; x++)
        {
            VisualElement cell = new VisualElement();
            cell.AddToClassList("cell");
            //Make sure size is same as cellSize
            cell.style.width = _levelDataSO.cellSize;
            cell.style.height = _levelDataSO.cellSize;
            cell.userData = new CellInfo(new Vector2Int(x, y));
            cell.RegisterCallback<PointerDownEvent>(evt =>
            {
                _isPainting = true;
                PaintCell(cell);
            });
            //ERROR: Moving in Y axis call this twice
            cell.RegisterCallback<PointerEnterEvent>(evt =>
            {
                if (_isPainting)
                {
                    PaintCell(cell);
                }
            });
            cell.RegisterCallback<PointerUpEvent>(evt =>
            {
                _isPainting = false;
            });

            _gridVisualElement.Add(cell);
        }
    }
}

[fickle perch]

what's the proper callback/place to validate values that are input into a uitk field?
like if I want an int field but I want it to snap to increments of 16, or clamp it within a specific range

I tried doing it in PropertyField.RegisterValueChangeCallback(...) but that messes with the state of the value change when dragging the label of the int field and makes it not work reliably

this snaps based on the immediate value delta instead of snapping the overall delta since you started dragging the label, which, has the behavior of not letting you increase (unless you change it by 16 in one editor frame), or decreasing it very rapidly in increments of 16

recSizeField.RegisterValueChangeCallback( c => {
    recSize = ( ( (int2)c.changedProperty.boxedValue / 16 ) * 16 );
});```

[rough scarab]

I haven't touched this in a long while but as you probably know, the built-in dragger sucks and I have no idea why it's implemented that way
What I hacked together is a jank mess that I'd probably do differently today but I once made a dragger implementation that hackily replaced the built-in one https://github.com/vertxxyz/Vertx.UIToolkit/blob/main/Runtime/BetterFieldMouseDragger.cs

https://discussions.unity.com/t/fieldmousedragger-improvement/868476 2022 struggle town

[fickle perch]

ah gosh okay ;-; thanks!

[vital steeple]

Hey hope someone can help.

Im using the UI Toolkit for the first time and after completion ive noticed I have these white lined columns around the buttons . Does anyone know why/ how to remove them?

ty in advance

[prime raft]

Show the hierarchy, on the left which you have cropped.

Those could be borders, try checking for borders in the inspector and set them to 0.

[prime raft]

It's not normal, but it could be an update in newer versions to what things were.

And yeah, I feel you, it surely is not a positive one.

[prime raft]

Yes.

[vital steeple]

thanks for the reply, I assumed border too but the field is unchanged , Im editing the USS directly any all the buttons in the scene have that USS header applied (.button)

[vital steeple]

fixed

Turns out those are Unity Toolkits built in focus and selection outlines.

If anyone has a similar issue , I just edited my USS file and added.

border-width: 0;
   border-color: transparent;
   -unity-focus-border-color: transparent;
   -unity-highlight-border-color: transparent;

worked a treat

[final shadow]

Ahhh Ok, so it's engine's bug?

[prime raft]

Yeah let's hope it is as I'm uncertain as well.

Or if they want to keep it as it is, they should probably introduce drag/interact modes.

[worn vector]

Hi,
How can I make a undo/redo system like Unity ?
It means, for example I have a IntField and I record it by Undo.RecordObject when its value is changed (RegisterValueChangedCallback) but the issue is it is recorded when twice when I change the value from 10 to 15 for instance, one for 1 and one for 15. But Unity itself records that on 15.

[graceful carbon]

Check out the App UI Sample
https://docs.unity3d.com/Packages/com.unity.dt.app-ui@2.2/manual/undo-redo-sample.html

[worn vector]

Is it same for handling undo/redo in editor ?

[graceful carbon]

Yes, it can work in the editor
https://docs.unity3d.com/Packages/com.unity.dt.app-ui@2.2/manual/faq.html#does-app-ui-support-editorwindow-edit-mode

[vital steeple]

HI I hope you guys can help me with an issue I am having with the UI Toolkit.

I'm working in Unity UI Toolkit and I'm having trouble getting a sliced border image to fit properly around a panel that contains a grid of buttons.

The buttons themselves are arranged correctly in a 4×3 grid, but the grid isn’t centered inside the parchment area, and it also doesn’t fully stretch to fill the parchment interior up to the borders. So the inner layout looks “offset” and doesn’t feel proportional.

On top of that, the outer decorative border (using a 9-sliced image) doesn’t cleanly wrap around the content area — I can’t get the border to fit tightly around the grid panel without stretching incorrectly or leaving gaps. The sliced values seem right, and the parchment interior appears correctly, but the parent VisualElement doesn’t resize in a way that matches the grid’s bounds.

I’ve attached a screenshot to show the issue: the 4×3 buttons are laid out correctly, but the grid isn’t centered or filling the parchment area, and the border doesn’t correctly frame the inner content.

I also added a screenshot of my Border sprite in the Sprite editor in case that helps.

Im really going round in circles with it so I think ive missed a key step or something fundamental :\ any and all help is much appreciated !

[lusty inlet]

Any ideas on why the spacing on the "G ATE" would have the extra spacing when in World Space? 6.2

[pallid kindle]

Hi I have some UI from UI toolkit done and I just realized that im having issues with blending it into the gameworld
is there a way to have the UI be affected by the worldspace effects?

Cause I assume theres something through the panel settings but I havent found a c lue to render mode

[warm bluff]

its there pseudo class when someone clicks button?

or I need to just use click event

[prime raft]

Yes, you can use the USS

https://docs.unity3d.com/6000.2/Documentation/Manual/UIE-USS-Selectors-Pseudo-Classes.html

[prime raft]

Can you try these:

1. In #BorderUnitCommandPanel, go to Margin & Padding and set the padding values respective to the slice values

2. In #GridContainer, Set Grow -> 1
   And also try to set the Align section's Justify Content to Center and Align Items to Center for testing.

[prime raft]

Could be PPU Mismatch or Font Asset issue?
Not enough info.

[iron nacelle]

for custom contorls how do people like to actually embed it?

Currently i'm seeing 3 ways.

1. construct everything in code
2. initialising a template in constructor and go from there
3. embed it as an empty root in a visual asset tree and hope things don't crash

i've tried all three ways and think 2 is the most convenient?

but it has a level of obfuscation for previewing

3 and 1 have an issue with accessing the gameobject / ui document that it's attached to

making it difficult for things like closing itself and worldspace animation

3 with some callback methods would probably do well?

[vital steeple]

Thank you, I ended up using the legacy method, creating the UI from objects in the game scene in the end as I just wanted to get it done , I imagine there would of been many advantages to having made it in UI Toolkit but for my sanities sake I opted out. In the end I achieved the same result but I will go back and try your suggesions as I think the Toolkit is the way forward right?

[prime raft]

Yes, you're right that UI Toolkit is the way forward.

[past hemlock]

We have a big issue with setting up 9-slice correctly in UITk. Same sprite slices without any issues with a sprite renderer, but somehow in UITk we're not able to set it up. The slicing "technically" works but makes the sprite too stretched in the first place

[past hemlock]

are we doing something wrong or is this feature bugged? Please help, thanks!

[worn vector]

I probably missed something here, but isn't it because the top and bottom borders aren't set?

[past hemlock]

I don't think so, I only care about the right-left slicing in this case, and the height of the image is native. I will double check just to make sure.

[past hemlock]

thats... actually right and it fixed my issue. I have no idea why it works, in SpriteRenderer you only need to set up those directions that you actually need, but apparently in UITk you need all 4.

thank you so much!

[worn vector]

I think if you don't set them in Unity UI either, it feels stretchy on those parts.

[hazy vortex]

does anyone know if there was a timeline for native support for glow and drop shadow

[rough scarab]

It's in development, there is no timeline

[plush sequoia]

Hey! Does UI toolkit world space support events? Trying to add an eventlistener like this Head.RegisterCallback<ClickEvent>(ev => HandlePlayerClick());
But it doesnt seem to register clicks.
Works in my other UIdocument which isnt world space

[uneven oyster]

Have you checked https://docs.unity3d.com/6000.2/Documentation/Manual/ui-systems/world-space-panel-input-configuration.html

[plush sequoia]

yup

[solid notch]

Why am I seeing bad aliasing on a visual element with a border radius ?

like real bad

[worn vector]

Hi, I hope someone can help me here.
Is it possible to open ColorPicker without using Color visual element ?
Is it possible by reflection to UnityEditor.ColorPicker.Show ? I want to click on a Visual Element and open color picker to choose color from there. Or there is another way to access that ?

[graceful carbon]

Take a look at App UI and its ColorPicker

[worn vector]

Is it not Color Visual Element ?

I'm looking for this panel

[graceful carbon]

I'll have to double check later but I'm pretty sure ColorPicker is that panel exactly

[worn vector]

Okay, thanks. I willl check App UI

[edgy prawn]

Im going to ask in here. Is there a way to bind data from lets say BuidlingId component to a label field. The thing is entities are spawned at runtime by the player. And it has to bind to a clicked on entity

[rough scarab]

Could be that you are hiding the overflow and that's the stencil cutout of that

[solid notch]

Overflow is hidden but I need it that way because otherwise the borde does not hide the inner elements. Problem is the aliasing is only present in the game view and in the build. In the UI builder it is smooth. I am at a loss of where I can look to fix this

[rough scarab]

I'm not sure why the builder would work, but overflow: hidden uses the stencil buffer and that is not anti-aliased

I have in the past tried to match the border radius of the inner content to match

[solid notch]

But when I remove overflow hidden the rounding just stops showing

I can share the files in dm if you are willing to take a look @rough scarab since I'm really lost on this one

[rough scarab]

Yeah, because the inner content with that background lacks the border radius and is overflowing the other round border.
I'd put a border radius on both elements if you can

And sorry, I don't have the time to look at a project, and there's no real fix beyond what I've said, which is truly awful manual border radiuses on all elements with backgrounds

[solid notch]

    <Style src="project://database/Assets/_PROJECT/005_Lobby/UI/GamesSection.uss?fileID=7433441132597879392&amp;guid=139c5ffedc8b08e459bf724c8a16a55a&amp;type=3#GamesSection" />
    <ui:VisualElement name="game-entry-card" class="game-card">
        <ui:VisualElement name="game-content" class="game-card__content">
            <ui:VisualElement name="game-thumbnail" class="game-card__thumbnail" />
            <ui:Button name="game-favorite-btn" class="game-card__favorite" style="position: absolute; right: 10px; bottom: 35px; width: 25px; height: 25px;" />
            <ui:Label name="game-jackpot-label" text="$0" class="game-card__jackpot" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>
``` this is the overall structure right now I have the border on the class game-card

[rough scarab]

You can keep the overflow hidden if you get the border radiuses right

[solid notch]

hmmm doing the radius on the "inner most element" ie jackpot label in px not % seems to have done the trick.

the question is why

[feral plaza]

hello I have a problem
I have a canvas set to screen space overlay and 2 cameras
1 rendering the world and 1 rendering some UI indicators on top , suing a compositor

the canvas does not render ... at all no matter what display i set it to
what am i missing here ?

[graceful carbon]

try over in #📲┃ui-ux since its not UI Toolkit

[feral plaza]

ahh
thanks

[edgy prawn]

UIToolkit turn listview to a grid possible?

[graceful carbon]

There isn't a gridview in UI Toolkit but there is one in App UI

[edgy prawn]

So its a custom element that i have to make? something like this progress bar "[UxmlElement]
public partial class ProgressBar : BindableElement
{
private VisualElement _fill;

[UxmlAttribute,CreateProperty]
public float CurrentAmount...."

[graceful carbon]

No, when you install the App UI package you'll get access to a bunch more Visual Elements that you can use at runtime. You can also then create a gridview similar to creating a listview

[edgy prawn]

theres a ton of suff. Is this stuff they are working on? that isnt 100% ready. Or they dont find them that inportant to implement into UIToolkit package?

[graceful carbon]

The official status is that its experimental and you won't get any official support if you run into bugs. But you can see in the changelog that the package is constantly getting updates.

I'm not entirely sure why App UI never got rolled into UI Toolkit proper

[edgy prawn]

am i doing something wrong? The prefab im making for the item is a fixed size of 128x128px but they keep appearing under each other

[graceful carbon]

Oh make sure you switch the Theme for one of the App UI themes

[edgy prawn]

in the panel settings?

[graceful carbon]

Yes

[edgy prawn]

Nope still not doing it

Could it be something in my code?

[graceful carbon]

Possibly. Did you make sure to add the selector class to the grid view element if it's not already

[edgy prawn]

This?

[graceful carbon]

Yea. The root might have to be a Panel too

[edgy prawn]

it doesnt want to wrap it just turns into a scroll area

[edgy prawn]

"mgridView.columnCount = numberofItemsPerRow" was the issue. when i set it in a script it works. For some reason its not calculated automaticly\

They sould expose it as a atribute in the UIBuilder

[graceful carbon]

I never actually used grid view before. I figured that would have been

[edgy prawn]

is there a place to leave feedback fo AppUI?

[graceful carbon]

The idea might have to set that automatically through wrapping

[graceful carbon]

There is not.

[graceful carbon]

There is the Roadmap page to suggest features
https://unity.com/roadmap/detail#unity-platform-ui

As well as this forum thread the devs sometimes post in
https://discussions.unity.com/t/app-ui-unitys-ui-toolkit-framework/939452/53

[tall flicker]

Hey, I have the problem described here: https://discussions.unity.com/t/ui-toolkit-scrollview-jumping-after-touch-on-android-device/1699267
Would aprreciate any help. I can provide more info if needed

[fringe loom]

Why is my material looking different for ui toolkit then a gui sprite with the same material

[solid notch]

How do I apply a gradient to a text label ?

Oh I need to do rich text tags

This is stupid

Cant I apply the gradient preset from the ui builder?

[solid notch]

Srsly it can not be this stupid

[bronze iron]

Is it possible to use Sprite Atlas (2D -> Sprite Atlas) instead of a Sprite Asset to put sprites in text? I don't have a premade sprite sheet
https://docs.unity3d.com/6000.3/Documentation/Manual/UIE-sprite.html

[rough scarab]

Not that I know of, it's very annoying

I personally forked the VFX image sequencer to generate my own atlas from vector images

(which was a pain in the ass)

[tall flicker]

Hey guys, I have this problem, thanks in advadce for any kind of help.
https://discussions.unity.com/t/ui-toolkit-scrollview-jumps-to-previous-position-on-first-interaction-after-returning-to-uxml/1700170

Description:

When using UI Toolkit ScrollView in the main menu UXML and swap under the same root VisualElement to different UXML . Then ater returning to the main menu UXML, the ScrollView visually appears reset, but on the first pointer interaction it immediately jumps to the previous position. This happens even when scroll position is explicitly reset via code.

Steps to Reproduce:

1. Create a UI Toolkit setup with:
   • One persistent UIDocument root
   • Root.Add(uxml_template)/Root.Remove(uxml_template) to swap between UXMLs
2. Main Menu UXML contains:
   • A ScrollView
   • Several selectable options (e.g., Buttons)
3. Scroll the ScrollView to:
   • the middle or bottom
4. Click one of the options
5. Swap the Main Menu UXML out and load another UXML (same root)
6. Return to the Main Menu UXML
7. Tap / click once anywhere inside the ScrollView

Expected Result:

• ScrollView starts at the top
• First pointer interaction does not move the content
• Scrolling behaves normally from the reset position

Actual Result:

• On the first pointer interaction:
  • ScrollView content instantly jumps
  • It snaps back to the previously interacted element
• Jump happens only once, immediately after return

[fast escarp]

are you instantiating the template from scratch when you add it? or just once at start?

[tall flicker]

No, I instantiated all roots for all templates in Start() and then I was just adding and removing then from the main Root

Now it works, thanks for the help

[stiff talon]

Is it inherently wrong to use VisualElement with absolute position as a cursor instead of Cursor.SetCursor method? I'm trying to unify the approach across the mouse and a gamepad.

[twilit socket]

how do i style the tabview heads

[shadow quartz]

Wanted to share for those who haven't seen it. We got more updates for visual element inspectors coming. In 6.5 the inspector now shows the style of visual elements in scene. Thank you to the Unity UI Toolkit team. This is going to help debugging a lot.

And even gives some information of what theme sheet is giving the final value and what css class or selector is setting the style properties.

[keen burrow]

i cant get rid of that extra red space at the end of each .card-menu-card. basis is exactly 20%, all the margins and paddings are 0, the sizes of everything but the .card-menu-card are auto so i dont see where this could possibly be coming from.

.card-menu-card-container {
    width: auto;
    background-color: rgb(207, 110, 110);
    height: auto;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    flex-basis: 20%;
}
.card-menu-card {
    width: 106px;
    height: 131px;
    padding: 0;
    background-color: rgb(255, 255, 255);
    margin: 0;
    flex-shrink: 0;
}

        <ui:ScrollView name="CardMenu" style="translate: -50% -50%; width: auto; height: 295px; position: absolute; top: 50%; left: 50%; background-color: rgb(255, 203, 203); flex-shrink: 0;">
            <ui:VisualElement name="" class="card-menu-card-container">
                <ui:VisualElement class="card-menu-card"/>
            </ui:VisualElement>
            <!-- etc -->
        </ui:ScrollView>

[keen burrow]

when i add more elements the extra parts increase in size

[deep kraken]

I had a problem kind of like this, it was occuring because of the flex-grow property, which was turned on by default.

[keen burrow]

i turned off flex-grow on every single thing. its ok though i quit using ui toolkit. thank you for the help

[twilit socket]

how do i blur background?

[keen burrow]

i think you use this section

[twilit socket]

thanks but i should be more specific, i wanna blur the scene behind the ui not the graphic itself

[keen burrow]

oh i dont think thats a ui toolkit thing, youd use separate postprocessing for that

[twilit socket]

something like custom pass volume?

[keen burrow]

https://www.youtube.com/watch?v=rmlJUaWfmzQ

[twilit socket]

nice trick but its for the whole screen i want to blur certain parts

[neon sky]

Hey guys, I am currently trying to get familiar with UI toolkit (quite new to it). Currently I am creating a local multiplayer game using Input System and I am stuck at the player config screen. It should allow up to 4 players to join/configurate/get ready in that screen (See attached screenshot of my draft mockup).

Now it is so far basically no problem to get it done but I struggle to find the best solution to make each player related container controllable by a specific controller (player input component). Unfortunately the youtube tutorials around always address to the old UGUI.
The only way I see right now is to override the internal navigation mechanism (navigating between settings and button events) that UI toolkit already brings and create scripts that do basically the same but with a custom script. Is there any recommended way to do that (e.g. some kind of binding of a visual element to a specific player input)? Or can you recommend any tutorial showing how to approach that?

[umbral hill]

Hey chan. Completely new to UI creation in Unity. Is this "ui-toolkit" something that comes in addition to the unity editor? At the moment, I am trying to make HUDs using vertical and horizontal layout-groups and all that, and it's a pain in the arse. Combine that with my complete lack of experience and skill, and it makes for a pretty rough ui 😛

[neon sky]

Yeah this is a newer version of the previous socalled UGUI system. The older version is the one where you place gameobjects with components like TextMeshPro or Canvas elements. The new one is using UXML and USS which is comparable to HTML and CSS like in webdesign

Although the editor somehow has some problems I really like it, because animations are much easier

[glossy pier]

Maybe should've asked here. But I'm interested for reasons outside only UI
#🖼️┃2d-tools message

[spring holly]

Unity UI Toolkit doesn't have native circular progress ????

How can I make radial progress bar in world space using UI Toolkit ?

[rough scarab]

https://docs.unity3d.com/6000.0/Documentation/Manual/UIE-radial-progress-use-vector-api.html

[spring holly]

why text looks Chinese like ? how can i fix it ?

[spring holly]

close view

[sonic bronze]

Has anyone ever had issues with the new UI Toolkit material introduced in 6.3 where the property of the material is updated in runtime but the UI doesn't change?

Here's my code:

    [Button("Test Transition")]
    public void StartTransition()
    {
        Tween
            .Custom(0f, 1f, TransitionSettings, (f => _transitionMaterial.SetFloat("_VignetteAmount", f)))
            .OnComplete(() => Debug.Log($"Transition Complete, value is now {_transitionMaterial.GetFloat("_VignetteAmount")}"));
    }
}

This is supposed to increase the vignette as shown in the images to create a scene transition, however the value is set to 1 but the UI doesn't update in the game. No errors occurr in the code.

[rough scarab]

Call MarkDirtyRepaint

I imagine it's just not updated properly without that

[jolly hound]

I wanted to make a progress bar in ui toolkit

can someone please tell me how i can remove that middle pointer thing from slider

I saw that you can do it in older UI system

[rough scarab]

Style it by targeting it with a USS selector

There's a guide to styling elements pinned to this channel

[sonic bronze]

I already tried that, just forgot to mention it. Not working

[rough scarab]

I've not worked with custom material properties yet, but I'd make sure you don't have property overrides on the UI as you would in these screenshots. Surely they would be setting that value locally

[sonic bronze]

I thought those were meant to expose the properties externally, not override them

I haven't found any docs on it though

[rough scarab]

Expose them to what? Materials already define what's exposed, that's surely an override in UXML

[jolly hound]

Thanks

[bronze iron]

Does UI shaders allow for sampling the framebuffer?

[spring holly]

which font you are using ?

[dark blade]

.foldout__main-container {
    display: none;
    scale: 1 0 1;
    padding: 2px;
    background-color: #0F0F0F;
    transform-origin: top;
    transition: scale 0.125s ease;
}

.foldout:active .foldout__main-container{
    display: flex;
    scale: 1 1 1;
    transition: scale 0.125s ease;
}
```the scale animation when from inactive to active are working, but why no other way around too?

[umbral hill]

Complete newbiew to ui-toolkit, so please forgive me if I am thinking about this all wrong. The screenshot is an attempt at making a GUI where I plan in showing character statistics. I have added a VisualElement where I have set a 9-slice sprite as the background. I have the added a VisualElement child, with a header text, and a MultiColumnListView child, where I plan on adding each skill. My current UI, which is built using the legacy method, has draggable and resizable windows. If I resize this window in preview, the multicolumn-list quickly doesn't align with the frame anymore. Is there any simple way of making this work?

[warped lintel]

Hm, anyone encountered an issue where UIToolkit ScrollView doesn't work in Game mode?

I'm baffled: works in Build, works in Simulator, doesn't work in game :-0. None of the buttons or mouse scroll wheel do anything.
In Build/Sim everything works, scrollwheel, buttons, touch-drag.

I'm really scratching my head here...

[umbral hill]

Damnit, I don't know what I pressed, but now I can't see the left side of my panel either. Im on mac. Is it possible to pan the window where I am creating the frame ?

[warped lintel]

Er, I can see you can zoom out a bit, maybe that helps? (the 34% just under viewport is zoom I suppose? And the Fit viewport button right next to it? ^_^ No idea, just learning myself).

[umbral hill]

Can't zoom out more than 25%, and it doesn't help 🙁 If I click Fit viewport, it takes me to this size and I still can't see everything

Oh, fixed it !

(After deleting everything I had done :P)

[umbral hill]

Bit of progress. How the hell do I style those ugly gray list headers to transparent background? 😛

[warped lintel]

If they're active elements you can just change the Background property, or set their color to 0 alpha.
If they're greyed out you can still use their selectors to do the same.

[umbral hill]

Couldn't make it work for some weird reason. But I think I'm going to change from treelist to just a listview. Get a bit more control. Seems an easier root for the other elements I am going to add

[warped lintel]

Do your treelists / listviews work in Game mode? (assuming they are big enough to have scrolls)

Just curious, trying to figure something out on my end.

[umbral hill]

I will see soon I guess. Not got enough skills to verify the scroll yet 🤣

[umbral hill]

@warped lintel When I create my panel in the ui builder, it looks pretty good.. but when I use it in the game, my frame borders (from a 9-slice) become very thick and I don't understand why. You any good with that stuff? 😄

[proper laurel]

Hi

[umbral hill]

Hey Ravexor 🙂

[warped lintel]

Not really, still just learning myself

[bronze iron]

What are best practices for using SVG vs raster images? I want to use as many vector images as possible for smaller build sizes, but I'm unsure what the runtime costs are

[orchid oasis]

I am using Unity 6.4, and a simple UI Toolkit shader works correctly in the editor but renders pink in the Android build, even though it is included in the Graphics settings.
Is anyone else facing this issue, or does anyone know a solution?

[whole zinc]

@yado1baks muted

Reason: Sending too many attachments.
Duration: 29 minutes and 40 seconds

[hazy vortex]

hey, wanted to check something and unfortunately most conversations online are from a while back

I’m having bad antialiasing issues using background image to display icons (say maybe 64px by 64px) I acknowledge that this could be partially due to using 512x512 textures but I do need them at larger scales as well so I would avoid using multiple sizes of that same texture if possible

I tried the following

• enabling mipmaps (no work)
• change to point instead of bilinear (no work)
• rendering to a rendertexture first (works, but the AA is still a bit wonky) and I prefer to have the UI adapt to screen size if possible

is there any way out aside from using multiple sizes for the same texture? i want to avoid this because i load the textures from asset bundle

[small wigeon]

how did enabling mipmaps and changing to point change the look of the issue?

rendering 512x512 as 64x64 without mips is going to look terrible, and changing filtering isn't really going to help because you're skipping over more than one texel in between

rendering with mips should fix the issue, if it doesn't I would be making sure mips are being set up and used correctly

(also, for the record you're having aliasing issues, antialiasing is what we do to fix issues like this)

[hazy vortex]

right, I guess I meant I'm having trouble getting the antialiasing to work.

enabling mips / changing to point did nothing lol, lemme dig around the mipmaps more to make sure they're being used. seemed like the mips were generating but uitoolkit wasnt making use of them

[hazy vortex]

hmm I've got no idea why but adjusting the background image to use ScaleToFit for position, repeat, and size seems to have made the mipmaps work properly

[hazy vortex]

edit: nope nvm that didn't actually fix it

[hazy vortex]

okay, I think it ended up being unrelated. turns out that some of my textures are packed into a sprite atlas (someone did this a long time ago and I forgot), and mipmaps aren't enabled.

but now i have a separate problem, where mipmaps on texture atlas is causing hairline artifacts

so now I'm looking to solve that

[small wigeon]

are you using the maximum padding? I think it's 8, which might not be enough, also make sure tight packing isn't enabled. It might be a good idea to move these assets to a specific atlas ft not all sprites us the same settings

If I set a multiline TextField to read only, I can't select the text in it to copy, is there any way around this? this was my fault, I was always setting the selection

[edgy prawn]

having a strange issue with buttons. I dynamicly create elements of a prefab button. And bind data to it. The issue is that after any domain reload first time entering playmode the buttons are broken (no click or hover indications) but are made on screen. Evey time i neter playmode after that point they work fine..

[final shadow]

Is UI Toolkit able to adaptive between Portrait and Landscape resolution?

[cold tapir]

Hi everyone does anyone have that issue before ? :

Why I have that delay ??? :
I tired multipay way to fixed but nothing work
I stied style.top or style.left and then used translate intead but same also I used Coroutine then use lateupdate but non-ofthem solve that issue :

[cold tapir]

Also same code with my laptop is fine the delay is apper when i test it by mobile

[rough scarab]

Could be the difference between a hardware cursor and the framerate, it's unclear how you're rendering the circle

[cold tapir]

Hi thanks for your comment , I’m rendering it as a UI Toolkit Button (Ghost button) moving it with translate here is the code and uxml

[rough scarab]

So you're comparing the position of one visual element you've positioned, to another?

are you talking about the circular cursor?

[cold tapir]

Yeah, basically. I’m moving a UI Toolkit element and comparing how fast it follows versus the cursor/finger, and the UI element always feels a bit behind

[cold tapir]

Yes

[rough scarab]

I'm asking about the circular cursor/finger, you're saying that's positioned via the DragSpellController script?

[cold tapir]

Yep. The circle is just a UI Toolkit “ghost” button, and I’m moving it from my DragSpellController (PointerDown to start, then update its position while dragging).

[rough scarab]

So two elements that are both positioned via similar logic in code, one is delayed?

Then surely it has a transition on it or something, because there's no logical difference between two different visual elements

[cold tapir]

It’s only one UI Toolkit element (the ghost) and I’m just moving it while dragging. It looks fine on my laptop, but on my phone it feels delayed

the ghost button will only appear while I am dragging

Just to clarify: when I drag something like the Repair button, I’m not actually moving the original button. I hide it and show a separate “ghost” UI Toolkit button in its place, then I move that ghost while dragging. The delay is happening on the ghost element

did you get it ?

[rough scarab]

and this isn't a UI Toolkit element?

[cold tapir]

Oh is that element