🧰┃ui-toolkit

[gusty estuary]

you will likely not finish by 2023

[analog elk]

ZIndex would be nice

but probably they would have to rewrite their whole input event system or a part of it that traverses the tree

[gusty estuary]

this is backend, so they are free to rewrite it 😅

[analog elk]

Yes, but it takes time to come up with a solution

thats also fast

thats why they left it out

you have to have the hierarchy in a list and then move the elements with Zindex to different places in the list

thats the simplest but probably slow

[thorn summit]

would someone know how to change the display style of an element in the inspector?,i am trying ot make it only show when the canRun field is true

private void InitMoveVariables(VisualElement root)
        {
            var tree = root.Q<Foldout>("MoveTree");
            var canRun = tree.Q<Toggle>("CanRun");
            var runSpeed = tree.Q<FloatField>("RunSpeed");
            canRun.BindProperty(serializedObject.FindProperty("canRun"));
            tree.Q<FloatField>("WalkSpeed").BindProperty(serializedObject.FindProperty("walkSpeed"));
            runSpeed.BindProperty(serializedObject.FindProperty("runSpeed"));
            runSpeed.style.display = canRun.value ? DisplayStyle.Flex : DisplayStyle.None;
        }

incase nobody understood,i am trying to maek the runSpeed floatfield only appear when the player can run,otherwise it should be hidden

[vast maple]

hi, how do I display a sprite in a text element using rich tags? I have done everything according to https://docs.unity3d.com/Manual/UIE-sprite.html, but it still doesn't seem to work. Any help appreciated, thanks.

Oh yeah, I should probably add, it all works fine with canvas + textmeshpro

[ocean finch]

Still trying to find solutions for this. Does anyone have a clue where I could start looking for solutions? Is it because I am using cinemachine?

[gusty estuary]

What is inactive about it?

[ocean finch]

It's unclickable. Greyed out - even though I have no code attached to it, doesn't even change colour when I hover on it and click

[gusty estuary]

Do you have any fullscreen elements over it?

Or maybe not fullscreen, just over it?

[ocean finch]

Nope, the button is the only element I have

[gusty estuary]

make a screenshot of it

[ocean finch]

Unlucky, had to leave on a work trip suddenly

I'll post it when I am back

[thorn summit]

Any help anyone?

[gusty estuary]

I don't think you can

everything is constructed either from uxml or from C#

there is 0 inspector integration

[thorn summit]

so i can't change the display property of a style of a field based on a toggle?

[gusty estuary]

you can, but you'll have to cod eit yourself

[thorn summit]

yeah,but how?,i don't think i can bind multiple propertys or bind them to inspector values

[gusty estuary]

is it editor?

[thorn summit]

yes

wait

[gusty estuary]

then just save a reference to your VisualElement root

and manipulate directly through code

[thorn summit]

            canRun.RegisterValueChangedCallback(callback => runSpeed.style.display = callback.newValue ? DisplayStyle.Flex : DisplayStyle.None);

something like this?

[gusty estuary]

I guess

I'm not familiar with editor serialization binding at all

[thorn summit]

works,thanks

[alpine vault]

Hi there 👋 Is there a way to bind a UXML attribute (as defined using UXML traits) to a child element without any code, or do I need to use query methods and set up the update flow myself?

[gusty estuary]

no

attributes are specific to elements

[alpine vault]

Understood, so it means there's no automated databinding facility that allows an element to forward it's attributes to child elements. (Not speaking about serialized object binding)

[gusty estuary]

no

[alpine vault]

Understood 🙂 short and to the point. Thanks 🎩

Other question: Is there a way to define UI Builder / editor data for custom visual elements? I'm thinking of fake data that I don't have to set in the UI, but that is rather picked up by the element itself.

Or, is there an API for a custom VisualElement to detect that it is being displayed inside the UI Builder (that could be used for that purpose)?

[gusty estuary]

unclear what exactly you want

any example?

[alpine vault]

In my editor code, i would operate on game assets that feed data unto the UI. During UI editing though, the UI doesn't receive that kind of data, so inside the element constructors I would like to detect design time, and would instead set fake data, e.g.

class MyElement : VisualElement {
  public MyElement() {
    if (Utils.IsUiBuilder()) {
      BindData(new FakeData());
    }
  }
  
  // Called by my application code.
  public void BindData(ViewData data) { ... }
}

Since updating the element might contain logic, I can't simply set placeholder values to elements, since that would not populate dynamic collections like lists.

[gusty estuary]

ah, I'd like to know whether there's a way to do it as well

technically

if you subscribe to attachToPanel event

and check whether this panel is UIBuilder's

you can run any code

[alpine vault]

That's a good idea. That might work

[errant cipher]

hey guys, is there any tutorial on how to make a carousel with ui toolkit?

[alpine vault]

Smort idea! Works well:

public class MyElement : VisualElement {
    // ...

    private void AttachToPanel(AttachToPanelEvent evt) {
        if (this.IsAttachedToUiBuilder()) BoundData = new Data("My Fake ViewData... ABCDEF");
    }
}

public static class UiToolkitUtils {
    public static bool IsAttachedToUiBuilder(this VisualElement element) 
        => element.panel.IsUiBuilderPanel();

    public static bool IsUiBuilderPanel(this IPanel panel)
        => panel.GetType().FullName == "UnityEditor.UIElements.EditorPanel";
}

Thanks for the input 🙏

[light axle]

Hello, I have a single line of text that is so long it overflows off the page.
I want to have this text scroll horizontally, then wrap back around on the other side.
I'm using a label. This is my code so far

    private void Update()
    {
        Vector3 position = _labelProductName.transform.position;
        position.x -= _scrollSpeed * Time.deltaTime;
        if (position.x < -_labelProductName.resolvedStyle.width)
        {
            position.x = position.x + _labelProductName.resolvedStyle.width;
        }
        _labelProductName.transform.position = position;
    }

This almost works, the problem is that _label.resolvedStyle.width is the width of the screen. It doesn't account for the text that has overflowed off the screen.

How do I get the width including the overflowed text?
Is there a better way to do this?

[rough scarab]

why not just enable word wrap on the label?

[light axle]

For stylistic reasons I want it to stay on a single line

[rough scarab]

I imagine it would make more sense to not limit the width of the label, it should be allowed to grow so you can get the width and position it correctly

the parent can clip the overflow, and the child can just be scrolling within it

[dusky sierra]

Hi, im pretty new so I apologise if its a redundant question but, how do I style sliders? I tried looking online and couldn't really find anything

[rough scarab]

Use the UI Elements Debugger to see what classes the part of the UI you want to style has, and then target that setup with your USS

[light axle]

I am not limiting the width of the label, it is set to "auto" in the editor, and I have "flex" "grow" enabled
The parent is already set to not grow and not wrap.

Here is the relevant UXML (I've removed the extra groups seen in the screenshot above)
Did I not set it up correctly?

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement style="width: auto; height: auto; flex-wrap: nowrap; flex-grow: 1;">
        <ui:VisualElement style="background-color: rgb(101, 109, 120); flex-grow: 0; flex-direction: column; flex-wrap: nowrap;">
            <ui:Label text="This text is really long and going off the page like this and keeps going" display-tooltip-when-elided="true" name="LabelProductName" enable-rich-text="false" style="background-color: rgba(101, 109, 120, 0); padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; flex-direction: row; flex-shrink: 1; flex-grow: 1; color: rgb(255, 255, 255); white-space: nowrap; font-size: 12px; width: auto; scale: 1 1; -unity-font: none; -unity-text-align: upper-left; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; -unity-text-outline-width: 0; flex-wrap: nowrap; align-items: stretch; -unity-font-style: bold; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; opacity: 1; left: auto;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

[rough scarab]

Hrm, I think I might be mistaken and you can't get a label to actually be the size of it's text if the text is wider than the parent div. (see below for a technique) You may have to set the width manually through code using MeasureTextSize https://docs.unity3d.com/ScriptReference/UIElements.TextElement.MeasureTextSize.html

[light axle]

I'll try that, thanks

[rough scarab]

Here's an implementation that works to correctly have an expanded child within a root element:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:VisualElement name="Root" style="width: auto; height: auto; flex-wrap: nowrap; width: 100px; flex-direction: row; overflow: hidden; background-color: rgb(101, 109, 120);">
        <ui:VisualElement name="Content" style="overflow: scroll; flex-direction: row; flex-shrink: 0;">
            <ui:Label text="This text is really long and going off the page like this and keeps going" name="Text" enable-rich-text="false" style="-unity-font: none; -unity-font-style: bold; color: rgb(255, 255, 255);" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

(I forced the width to 100px to test)

[dark blade]

sorry for long thread,
so what i want is, #unity-text-input will take all remaining space available, after whatever width Label takes, so use .unity-text-field > #unity-text-input when i hover to it, in UI builder its target exactly what i want, and no matter what i do, like flexgrow=1, or width 80%, or use pixels, its wont work, even i try UI Toolkit live debugger to set from there, still not work,

still looks like this, where did i do wrong?

[rough scarab]

make sure you override the min-width of the Label, which is 150px by default

[alpine vault]

Is there a recommended way to position UI documents relative to scene objects?

for example, I want to have a tooltip/chat bubble next to a character inside my game.

I assume I could attach a script that changes the absolute position of my visual element inside its panel to position relative to the target game object.

I wonder, though: Is this the way to go, or are there other solutions that I should look into? (I'm just getting started, so I wonder what other people have ended up using)

[gusty estuary]

yes. Don't 😅

this is task for world space UI

and for this use uGUI

[alpine vault]

Ugh 😢

[gusty estuary]

if you really want: first come up with a solution to transform aabb of your character on screen space

then you can just assign transform of visual element to it

btw

[alpine vault]

Any reason for this? I have the feeling both solutions work similar (layout on canvas) but that UI toolkit is ultimately more powerful.

[gusty estuary]

tooltips are not implemented in runtime

[gusty estuary]

because UITK is fully panel based

[alpine vault]

I think this one https://docs.unity3d.com/Packages/com.unity.ui@1.0/api/UnityEngine.UIElements.RuntimePanelUtils.html

[gusty estuary]

it only exists on panel space

conversion between world space and panel space will be somewhat complex

considering it relies on camera

I'v tried it. I did it. Never again. 🤣

[alpine vault]

(the link I posted is probably outdated, need to check if this still exists in latest versions)

Yeah, they do https://docs.unity3d.com/2022.2/Documentation/ScriptReference/UIElements.RuntimePanelUtils.html

My feeling would be that this serves all my transformation needs.

This would also have been the approach I'd take, naively as I am, but that's why I wondered whether there's something "smarter" already 😂

[gusty estuary]

maybe it will

[alpine vault]

I know how painful transformations can be, especially when different coordinate systems don't run in sync. But I assume that the game update loop and UI toolkit both run on the same main thread.

(at least I hope they do 😂)

[gusty estuary]

they do

in fact

UITK can only be changed from main thread

[alpine vault]

Yeah, so that's making things simpler for that task

Alright, thanks! I'll take your warnings seriously, and will now try it nonetheless 😂

Come and pick me up from the looney bin in a few days

[static canyon]

Actually thankfully UITK updates independently of the normal Update loop - but both run on the main thread - don't think it will cause you particular issues but just an fyi.

[alpine vault]

Right, UITK has some smarter update pass system, I remember something like that.

[gusty estuary]

but they do run in same player loop

[static canyon]

Simply put, e.g. Time.timeScale = 0 won't affect UI update rate

[alpine vault]

Ah alright 👍 That makes sense.

[gusty estuary]

I haven't tested but I expect it to

I mean transition animations

[static canyon]

There are two ways to do (effectively) world space UI - either output to rendertexture and place mesh in scene (you wouldn't want to do this for more than like 1 thing I wouldn't have thought). The second is to calculate the world -> ui screen space and eg use position absolute. This one is very doable it's just a bit tricky - can't talk right now but you need like a panel utils class to take into account eg ui scale

[alpine vault]

Hmm, but those are different systems nonetheless. One is the interpolation of animation values, the other one the general measurement and layout system.

[static canyon]

Yea give it a go - they're independent which is actually really handy for most people - pause menus for example

[alpine vault]

I'll try approach 2.

Thank you both for the input 🙏 I appreciate the pointers, as usually.

[gusty estuary]

that would a pity

hopefully there's a way to push delta to panel

[static canyon]

If you can share I'd be curious as to when this is useful

[static canyon]

sorry I didn't finish saying but the disadvantage of approach 2 is that it's only really useful if you always want the UI on top. So if you wanted eg a characters name to appear above their head but go behind a column as they walk, that wouldn't work well with approach 2.

[alpine vault]

Oh, that's a very good point I wasn't thinking about 🤔 I'll have to think about the requirements here.

[static canyon]

Yea - this particular use case is something that there isn't a very good answer for atm (it's the main reason the docs say world ui isn't supported). That said, you can do lots of clever things if you can be bothered - like your own custom compositing step that does masking eg based on depth mask - but it's all quite fiddly and likely requires custom render passes. Unlike the old canvas UI stuff which just renders with everything else - you may want to use a mix for convenience.

[alpine vault]

Oh, so the utils I posted seem to nicely take care of transforming points. This very simple example works already quite nicely, and is a good starting point for more flexible positioning (including offsets and UI anchors, too):

var uiPosition = RuntimePanelUtils.CameraTransformWorldToPanel(uiDocument.rootVisualElement.panel, anchor.position, Camera.main);
root.style.left = uiPosition.x;
root.style.top = uiPosition.y;

anchor is a Transform in the scene, and root is my root visual element from the document.

[static canyon]

really doesn't matter much (and I might be not up to date) but fyi setting .transform.position is generally more efficient than e.g. style.top if the positions are absolute

[dark blade]

thanks....i wasted so much time on this -_-

[lunar pasture]

hi guys, i'm using starter assets third person controller with ui toolkit but when player gets spawned my buttons stop registering the onclick event. Any idea why? I already have a event system with ui input module set in scene

is it player input component that screws everything?

[thorn summit]

would someone know what the 2 pre-made tabbutton and tabview controls do?

[light estuary]

Is this a bug with ui toolkit? I have been trying to restyle the scrollbar and found the background color of the tracker was being overridden at runtime. looking at the debugger the class I set with # should be taking priority and the debugger is showing the correct color. Changing the color in the debugger is correctly reflected in the game. What is going on here?

this is what it looks like in editor.

[gusty estuary]

yes

[rocky raptor]

Can i make elements with 0 opacity not clickable?

I have this problem

My sign up button is still clickable on the "login mode"

it has 0 opacity

[wind gorge]

either you use display: none or add picking-mode="Ignore" on the uxml

third option is translate: -9999px -9999px

[dawn condor]

Does anyone know why the public function (left) can not be accessed on the right?

[rocky raptor]

can i add display: none on transition?

like at the end of transition

[wind gorge]

you'd have to wait for it to end but yes

[rocky raptor]

display No Discrete Defines how an element is displayed in the layout.

Discrete Supports transition between values in a single step from the start value to the end value.

what does it means?

it sets the value at the end?

[wind gorge]

I have no idea where you copied that from

idk what discrete means

did you translate from another language or something?

[rocky raptor]

https://docs.unity3d.com/Manual/UIE-Transitions.html

from here

    transition-property: opacity, display;
    transition-duration: 0.5s, 0s;
    display: flex;
}

.Fade-Transition.Hidden {
    transition-property: opacity, display;
    transition-duration: 0.5s, 0.5s;
    display: none;
}```

maybe somethind like this

[wind gorge]

it won't work like that

the display property is not animatable

[rocky raptor]

it say it is

on unity documentation

are u sure?

[wind gorge]

you need to add a class that sets the opacity to 0 then wait until the transition is done

[wind gorge]

discrete means your element will disappear instantly

[rocky raptor]

or after

transition-delay

right?

[wind gorge]

ok, can you tell me again what you'd like to achieve?

if you want to smoothly fade an element to transparency then the display property won't help you

private static readonly List<StylePropertyName> OpacityPropertyList = new() {"opacity"};

public static void FadeIn(this VisualElement ve, int durationMs)
        {
            ve.style.position = Position.Absolute;
            
            ve.style.transitionProperty = OpacityPropertyList;
            var durationPropertyList = ListPool<TimeValue>.Get();
            durationPropertyList.Add(new TimeValue(durationMs, TimeUnit.Millisecond));
            ve.style.transitionDuration = durationPropertyList;

            ve.style.opacity = 0;
            
            // instantly complete fadein as the transition callbacks will not fire if the element is not yet laid out
            if (float.IsNaN(ve.layout.width))
            {
                CleanupFadeInTransition(ve);
            }
            else
            {
                ve.RegisterCallback<TransitionEndEvent>(FadeInTransitionDone);
                ve.RegisterCallback<TransitionCancelEvent>(FadeInTransitionDone);
            }
        }
        
        private static void FadeInTransitionDone<T>(TransitionEventBase<T> evt) where T : TransitionEventBase<T>, new()
        {
            var element = ((VisualElement)evt.currentTarget);

            CleanupFadeInTransition(element);
        }
        
        private static void CleanupFadeInTransition(VisualElement element)
        {
            element.UnregisterCallback<TransitionEndEvent>(FadeInTransitionDone);
            element.UnregisterCallback<TransitionCancelEvent>(FadeInTransitionDone);

            element.style.transitionProperty = new StyleList<StylePropertyName>(StyleKeyword.Initial);
            element.style.transitionDuration = new StyleList<TimeValue>(StyleKeyword.Initial);

            element.style.position = new StyleEnum<Position>(StyleKeyword.Initial);

            element.style.display = DisplayStyle.None;
        }

this is what I do instead of adding classes

[rocky raptor]

Look here. I have two screen

i like to transition between them

it already works but the element is still clickable after alpha is 0

[wind gorge]

then add display = DisplayStyle.None after the opacity transition is done

like what I posted above

[rocky raptor]

I want to it with pure css

i will check if it is possible

[wind gorge]

no way

[light estuary]

Good to know. Thank you.

[wind gorge]

ok, well, technically, it is possible by abusing transition-delay

[rocky raptor]

Why is it abusing

Not a good way to do it?

By abusing do u mean it is bad or can cause performance problems?

[wind gorge]

it shouldn't cause perf issues

what I think you need to do is this

.Fade-Transition {
    transition-property: opacity, display;
    transition-duration: 0.5s, 0;
    transition-delay: 0, 0.5s;

    opacity: 1;
    display: flex;
}

.Fade-Transition.Hidden {
    display: none;
    opacity: 0;
}

It will animate opacity for 0.5s and set your display to none

at least it should do that

the animation system is buggy af so it might not work

[rocky raptor]

I will try it

i think display is not working

if used with transition

last class

display still flex

[wind gorge]

is opacity 1 on that element?

maybe the display is getting overriden by an inline style?

[rocky raptor]

opacity is 0

this is true, yeah ty

[wind gorge]

check your uxml, did you put style="display: flex" on it?

[rocky raptor]

i don`t use UXML

but i have a custom framework and it sets display to flex

based on IsActive property

It is like UXML but much more powerful

    <Button Class="Item-Slot Droppable {Class}" IsDraggable="$ HasItem" OnDrop="$ OnDrop" OnPointerDown="$ OnPointerDown">
        <View Class="Item-Slot-Borders No-Pointer-Events"/>
        
        <Image Class="Item-Slot-Icon No-Pointer-Events" IsActive="$ HasIcon" Texture="$ Icon"/>

        <If Condition="$ HasItem">
            <If.Then>
                <Tooltip Key="Item-Tooltip" Scope="$ Item">
                    <ItemTooltip Item="$ Scope"/>
                </Tooltip>
            </If.Then>

            <If.Else>
                <If Condition="$ HasPlaceHolder">
                    <Tooltip>
                        <View Class="Tooltip No-Pointer-Events">
                            <RichLabel Text="$ PlaceHolder"/>
                        </View>
                    </Tooltip>
                </If>
            </If.Else>
        </If>

        <Label Class="Item-Slot-Stack No-Pointer-Events" IsActive="$ HasStack" Text="$ Stack"/>
        
        <View Class="Item-Slot-Hover-Overlay No-Pointer-Events"/>

        <If Condition="$ HasCooldown">
            <View Class="Cooldown-Overlay No-Pointer-Events" Ref="$ CooldownOverlayRef"/>

            <Label Class="Cooldown-Value No-Pointer-Events" Ref="$ CooldownValueRef"/>
        </If>

        <Slot/>
    </Button>
</ItemSlot>```

i can have If, lists binding, etc

It is based on Vue.JS 3 / react

i need the css only because i was doing this component: https://vuejs.org/guide/built-ins/transition-group.html

[wind gorge]

I'm not familiar with that framework so I can't help you there

but it seems like something is overriding your display: none with an inline style

[rocky raptor]

Yeah, this was the problem

i fixed and now the css only is working

ty

[agile basin]

I think something is wrong with UI Toolkit, my selector (which only modify background-color for object with ID of E) works with other elements, but not for VisualElement

the huge area in the middle should be in red color too

But the funny part is the selector does work for VisualElement which added to root hierarchy via code

Is this the intended design?

not only name selector, but other selector (psuedo-class, class name, etc...) doesn't work too

I'm using Unity 2022.2.1f1, if this information is needed

well, the selector does work
I just tried to change some different property like border color and border size, changes are applied but not background-color

[past ermine]

what happened to the ui toolkit debugger? it's totally broken for me in 2022.2

[rocky raptor]

Does anyone knows if UI Toolkit will ever allow custom shaders?

[rough scarab]

The roadmap for UIToolkit is pinned to this channel and contains that in Under Consideration

[rocky raptor]

How is it under consideration if it one of most needed features for a game UI?

[rough scarab]

Presumably because they consider the planned features more important, and also perhaps haven't updated the roadmap in a while

[rocky raptor]

I have a custom data binding system for UI Toolkit

Can i propose it?

It is based on Web Dev frameworks (react, vue) and i think it is superior to the current one

My game is already working with it

[rough scarab]

They are actively developing their own data binding, probably one of the things they're focusing the hardest on

[rocky raptor]

Is it reactive or polling? do u know?

Unreal has data binding but it is polled every frame

Push vs Pull data changes

[rough scarab]

No idea, it's just in their plans for this year https://forum.unity.com/threads/ui-toolkit-update-q3-2022.1329159/

[candid eagle]

Just started exploring the UI Toolkit. I created a custom inspector and got it to render my first customized Visual Tree Asset. In the inspector Editor derived script, on OnEnable, I would like to know how to access the root visual element so that I can tap into it's control hierarchy.

[rough scarab]

You would probably have to RegisterCallback<AttachToPanelEvent>( and then do whatever you want with the panel that comes with the event

[rocky raptor]

we need uss support for sounds.

Button:active {
   sound: resource('sounds/x');
}

or even better. Custom uss properties

pointerEvents is another property that can be useful for uss

[candid eagle]

Where would I call that?

[rough scarab]

on the element you returned, so you get a callback when it's added to the UI

[candid eagle]

Ah so during the CreateInspectorGUI

Oh I see, that's pretty neat.

[rough scarab]

stateful is a blessing and a curse 😛

[gusty estuary]

As of now you can just define class to yout buttons and thtn query hierarchy, registering sounds on click events

[rocky raptor]

It works even if the element creation is dynamic?

at runtime

[gusty estuary]

You are the one responsible for registration

[rocky raptor]

I see

[dawn condor]

Is this in the right thread or should i ask somewhere else better? Im still confused as to why the function doesnt show up

[gusty estuary]

#📲┃ui-ux

[dawn condor]

Thank you so much ❤️ 🙂

[cobalt cradle]

Stupid question for UI Builder - I want to use the default Input Field element in a game-facing menu. But I want to change the default white background on it. However, the element is grayed out and won't let me change it. How does one change something like that? Am I doing something wrong?

[rough scarab]

Do it via USS, you need to target the classes or structure it uses with your style properties

[cobalt cradle]

I'm terribly new at USS.

[cobalt cradle]

Does this look right?

.custom-class {
  font-size: 20px;
  color: red;
}

/* Use the custom class in a Unity element */
.custom-element {
  uss-custom-class: true;
}```

[rough scarab]

looks like a vague example, sure. You should use the UI Elements debugger to look at the element you want to change the background color for, find what class it uses, and target that class with your own USS that overrides background-color

[cobalt cradle]

alrighty I think I'll do just that first thing tomorrow, when I have a live doc open in front of me

[candid eagle]

Alright, my first attempt at my own custom element.

public class MessageBox : VisualElement
{
    public new class UxmlFactory : UxmlFactory<MessageBox> {}
    public MessageBox() {}
}

Exhibit A - Shows I added that template to another uxml container.
Exhibit B - Shows custom instance name for that template
Exhibit C - Shows the raw xml

public override VisualElement CreateInspectorGUI()
{
    ...
    _rootElement = new VisualElement();
    inspectorXml.CloneTree(_rootElement);
    _ledgerMessageBox = _rootElement.Q<MessageBox>();
    ...
}

_ledgerMessageBox comes back null
I have also tried _rootEleemnt.Q<MessageBox>("ledger-message-box") and _rootElement.Q("ledger-message-box") as MessageBox
Both give me same result.

Hold on, _rootElement.Q("ledger-message-box") does return the VisualElement template container. But how would I convert that to MessageBox because casting it returns null

[cobalt cradle]

Hmm. Weird. I pressed save and my whole UI builders window went to shit. Reopened the project and now it's fine again.

[cobalt cradle]

After tinkering with UI Builder a bit. I don't think it's ready for prime time. 80% of the reason is lack of documentation. The unity docs are a great start, but just don't do enough

And by primetime, I mean as a replacement for the current Canvas system. Not in regards to Unity Editor extensions

[rocky raptor]

Is there any high performance way to check if pointer is over any element?

[cobalt cradle]

I'm assuming you mean the UI debugger menu kind of slows the game down?

[rocky raptor]

No

I want to disable in-game controls while pointer is over UI (PC game)

Clicks are both attacking and interacting with UI

[cobalt cradle]

If it's a UI document there are pointer events

You can detect when those happen

[rocky raptor]

I tried it but it is not reliable

i found a reliable way

        {
            return UIDocument.rootVisualElement.panel.Pick(RuntimePanelUtils.ScreenToPanel(UIDocument.rootVisualElement.panel, pointerPosition)) != null
}```

[cobalt cradle]

@rough scarab if you're around, I still can't change my Text field background colors. I tried using the element debugger but I can't make heads or tails of it. I tried making a custom selector match a unity forum post but have no idea how to replicate what others have done

And i can't find a tutorial that tells me how

Uh... And finally when I beg for help I find it. Damn it unity! I want to like UI BUILDER! Why do you make simple things so hard!?

[candid eagle]

I have followed the example here: https://docs.unity3d.com/2022.2/Documentation/Manual/UIB-structuring-ui-custom-elements.html
in order to expose attributes. But they don't show in inspector.
Here is what I wrote:

public class MessageBox : VisualElement
{
    public new class UxmlFactory : UxmlFactory<MessageBox, UxmlTraits> {}

    public new class UxmlTraits : VisualElement.UxmlTraits
    {
        private UxmlStringAttributeDescription _messageAttribute = new ()
        {
            name = "message-content", defaultValue = "Message not set"
        };
        private UxmlEnumAttributeDescription<HelpBoxMessageType> _typeAttribute = new()
        {
            name = "message-type", defaultValue = HelpBoxMessageType.Error
        };

        public override IEnumerable<UxmlChildElementDescription> uxmlChildElementsDescription
        {
            get
            {
                yield break;
            }
        }

        public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
        {
            base.Init(ve, bag, cc);
            var messageBox = ve as MessageBox;
            messageBox.MessageContent = _messageAttribute.GetValueFromBag(bag, cc);
            messageBox.MessageType = _typeAttribute.GetValueFromBag(bag, cc);
        }
    }

    public string MessageContent { get; set; }
    public HelpBoxMessageType MessageType { get; set; }
}

What am I missing here?

[faint sky]

Hi, there is some strange behaviour in the scrollview, when I hold any button with picking mode inside of it and drag mouse to the side, the slider goes to negative values. Anyone knows why?

it's fixed now
scroller.valueChanged += f => scroller.slider.value = Math.Clamp(f, 0, 156);

[candid eagle]

I finally figured it out. And yeah, I couldn't find this in the docs. Basically when setting up a template, you have to drag your custom control to be the root, and then setup all the visuals as it's children. Then your control will have access to all of it's visuals. Ai yai yai.

[gusty estuary]

Why did you override this?

        public override IEnumerable<UxmlChildElementDescription> uxmlChildElementsDescription
        {
            get
            {
                yield break;
            }
        }

[cobalt cradle]

To modify the textfield input field coloe, I have to add a selector. 'TextField > TextInput'

But I found this through a forum. How do I locate the rest of the child classes of amy given control?

[gusty estuary]

in UI BUilder/ Debugger

[cobalt cradle]

Pretend I'm an utter newb and I don't know what I'm looking for....

[gusty estuary]

then I suggest to go over manual first

it's hundred times better than any yt video or forum post

[cobalt cradle]

Manual is not making it clear

[gusty estuary]

then you are skipping parts of manual

[cobalt cradle]

I see a million VisualElements and a million scrollers. None of them telle what childclass of Foldout I need to target to vamge the color of the checkmark

[gusty estuary]

it has explanation on everything: starting from UI builder interface, ending with inheritnace table on specific styles

[cobalt cradle]

Okay I'll read again. But nothing is telling me how to even read the bullshit in the Debugger window

Just reread all nine sentences in Toolkit debugger

I followed the instructions

I'm staring at Debugger window and I see Foldout. Toggle. VisualElement. And Label. I go and I add Foldout > Toggle to my selectors. It does not target the part I need. And I don't quite understand what I'm missing from here on out

[gusty estuary]

you pick an element you want and then simply look at inspector

[cobalt cradle]

Okay I THINK I see it....

It would be... Foldout>Toggle>VisualElement>VisualElement.unity-toggle_checkmark. I think???

Nope.

[gusty estuary]

.unity-toggle_checkmark

it's probably just this

[cobalt cradle]

Nope it was .unity-foldout_checkmark

And then background tint property

So I had to add a new USS Selector of type:
Foldout>Toggle>VisualElement>VisualElement.unity-foldout__checkmark

And I've been over the manual. I would LOVE to know WHERE it specifies how to do this... Other than a few vague sentences of "oh btw, to change the elements go do this thing and then that thing"

[gusty estuary]

style section explains everything about style selectors

[light estuary]

Anyone know how to run a tween on a visual element? I am attempting to animate a progress bar but it only seems to work the second time a change is input. vitaeSequence?.Kill(); vitaeSequence = DOTween.Sequence(); vitaeSequence.Append(DOTween.To(() => vitaeDamageBar.worldBound.width, v => vitaeDamageBar.style.width = v, vitaeBar.worldBound.width, .2f));

[gusty estuary]

VisualElement itself has a scheduler

in which you can create loops that are tied to VisualElement lifetime

[cobalt cradle]

Are you talking about the StyleUI section specifically?

[gusty estuary]

yeah

[cobalt cradle]

So I did go through that.
It explains it for those who want to update the code directly not for the UI Builder interface.

[gusty estuary]

🤔

[cobalt cradle]

I'm LITERALLY looking at the manual now. And. It's not giving the info I just had to go bang my head against rue keyboard to find out

[gusty estuary]

Are you sure you read exactly Style UI?

USS have nothing to do with code

[cobalt cradle]

Literally in the Unity Documentation. UI Toolkit. Style UI

And then go to USS Selectors and drill doen

And it gives me a bunch of syntax. Now a how to on hoe to work it from UI Bulder

[gusty estuary]

oh, you mean uxml

as code

hehe

[cobalt cradle]

And pardon typo my phone keyboard is not able to keep up with me

[gusty estuary]

UI Builder is just generator of uxml

[cobalt cradle]

Fine. But. I've got visual people on this team who do not want to code and the UI builder needs to be their one stop shop

I think I've got a good stylesheet for them to start from now but that was utter horseshit having to identify all that

[light estuary]

This is a once in a while things and I'd rather not write linear logic. The core issue isn't the tween really, it is that the width of an element is not being resolved on the same frame it is changed and I don't know how to deal with that. In this case, A trailing red bar to my green life bar. When I change my green bar then try to match the red one to it there is no change because the green one has not changed even though I set it.

[gusty estuary]

well, UI Builder has it's own manual section 😅

but honestly

If the person you want to work on UI design has no idea about html/xml, I'd be worried

overall UI builder is fine to be used as sole tool

except for some niche cases

where it just sucks

[cobalt cradle]

I do both. I program in C# and I do graphic design,and while it's been a minute since I've done webdev, I understand most of the principles

On over the decade plus, Unity has just gotten damn lazy in writing shit up.
Hard. Stop.

And if their intent is that only CSS and HTML coders should make the UI, and do it without WYSIWYG support. Then don't do a UI Builder.

[gusty estuary]

their intent is more towards XML/CSS

[cobalt cradle]

Either way thats programming. Ie. Not WYSIWYG

[gusty estuary]

I feel like UI builder is a mistake as well, but we have what we have

[cobalt cradle]

Preach

Anyway I got what I needed I think.... And we'll do our first trial of UXML for our UI

May the odds be ever in the designers favor.... Because now they've got to see if the old UI will translate smoothly

[gusty estuary]

I have made a framework for UITK which makes implementation of UI even easier
https://github.com/bustedbunny/com.bustedbunny.mvvmtoolkit

it also adds support to localization which is currently not supported by UITK

[cobalt cradle]

That's a fun name

[light estuary]

I've been using Length.Percent() to set values for elements but I need to do an animation using them and that is not a supported data type for any tweeners I can find. Is there a workaround or a way to get a float of the what a width would be in percent?

[candid eagle]

public override void OnLoad(VisualElement element)
{
    element.Q<Label>("version-label").text = "My Game " + Application.version;
    
    element.Q<Button>("start-btn").RegisterCallback<ClickEvent>(_ =>
    {
        Game.Load();
        Game.Start();
    });
    
    element.Q<Button>("quit-btn").RegisterCallback<ClickEvent>(_ => App.Quit());
}

Does anyone know if the Q only searches immediate children? The element is a direct parent to #version-label, which the query finds and updates no problem. But the buttons are nested in #actions child. I verifying that both button names match my query, but it throws NullException when queries the #start-btn.

[rough scarab]

it would probably be easier if you screenshotted your hierarchy so we can see that tree ourselves

[rough scarab]

It should work fine. I can only imagine that either those elements are dynamic and you've mixed up when they're added, or you're looking at a different hierarchy or exception

[candid eagle]

Well none of those items are added dynamically. They are like that in the Builder UI and are referenced via VisualTreeAsset into a MonoBehaviour. The OnLoad method is triggered here:

private void Load(ViewBehaviour view)
{
    _documentRoot.Clear();
    view.VisualTree.CloneTree(_documentRoot);
    view.OnLoad(_documentRoot[0]);
}

[rough scarab]

You've definitely saved the document?

[candid eagle]

A ViewBehaviour is the MB where the VisualTreeAsset is referenced via inspector.

Yes. Like 10 times.

Opened and closed the Builder to triple-double check I had the names correct and everything

[rough scarab]

If you figure it out lmk so I can add it to my troubleshooting

[candid eagle]

I even added a frame delay between CloneTree and OnLoad. still same result.

[candid eagle]

I figured it out. No troubleshooting necessary.
view.OnLoad(_documentRoot[0]); grabbed the first child of the view itself. I assumed that when you CloneTree that the root of the view.VisualTree is a container itself. But it wasn't, so instead _documentRoot[0] returned version-label, which the Q found.
So no troubleshooting necessary, it was a n00b error on my part.

[gusty estuary]

Query goes over all hierarchy of element until first matching element

[ocean finch]

Finally back, screenshot incoming. Third image is the GameObject inspector

The button is unclickable

[gusty estuary]

do you have event system?

[ocean finch]

Yeah

[gusty estuary]

open debugger

and inspect actual hierarchy

[candid eagle]

I have a UIDocument that uses UIBase source asset. The UIBase source asset for now just has a VisualElement named ui-base-content. The gameobject with the UIDocument has UI Controller component that fires this on Start()

private void Start()
{
    _rootBgColor = _rootElement.style.backgroundColor.value;
    Debug.Log($"Start frame - Color: {_rootElement.style.backgroundColor.value}");
    App.OnStateChange += OnAppStateChange;
    
    if (!ReferenceEquals(titleView, null))
        Load(titleView);
}

The _rootBgColor is supposed to retrieve the current value the visual element its loaded with and then later I use it to revert because I change the color based on app context.
However, on start, it is Color(0, 0, 0, 0). In fact all the values of _rootElement.style are not initialized.
I ran this on Update()

private void Update()
{
    Debug.Log($"Frame #{Time.frameCount} - Color: {_rootElement.style.backgroundColor.value}");
}

And it's always Color(0,0,0,0).
How do I get it's actual color value on Start?

[candid eagle]

Also is there an "OnEnable" equivalent inside a CustomVisualElement : VisualElement? I subscribe to AttachToPanelEvent but that fires even when not in playmode, so I wrapped that in if (Application.isPlaying) and even though it fires only when playing, it still fires three times in a row when it initializes.

[gusty vapor]

Unregister when in Edit mode and re-register when about to enter playmode?Currenly, GeometryChanged and it's closer siblings tend to cause unwanted behavior even in latest uitk

[gusty estuary]

do you create your own root ve or rely on ui doc?

[rocky raptor]

Is there any pattern to create a scalable chat with UI toolkit?

Is creating a lot of labels the right way?

is there any virtual scroll?

[gusty estuary]

ScrollView

[rocky raptor]

What about when i have 5000 messages?

it keep increasing while game runs

[gusty estuary]

hmm

Maybe ListVIew will do

ListView does virtualization for sure

[rocky raptor]

Can it have items with different heights?

"itemHeight
The height of a single item in the list, in pixels.

Declaration
public int itemHeight { get; set; }"

Looks like it can`t.I will try to write one

[gusty estuary]

dynamic height

[candid eagle]

I want to create a custom control like they provide in the Standard section. Just a simple label field that will let you control 2 labels via attributes. See template-setup.png. I add that template to another field (see template-implementation.png), but the control is then disabled. How does unity's controls allow you to bring a hierarchy of elements while allowing it to be enabled? Or am I setting up my template wrong? I put the control script and child two labels to it.
When I drag the control script by itself to anywhere, it allows me to change the attributes, but no labels come with it...

Oh I figured it out, I had to assign a name in the template. Then the other elements implementing it allow me to change attributes. My next question would be is there a way for me to change the actual label value when the attributes changes in builder? So it's not runtime only?

Like the unity Standard Button control. You change the label and the button's label changes in realtime during edit mode. How can I do that with my custom control?

I managed to get it to change like this:

public string Label
{
    get => _label;
    set
    {
        if (!ReferenceEquals(LabelLabel, null))
            LabelLabel.text = value;
        _label = value;
    }
}

but when I save or open the template, the values reset, they don't persist. The attributes persist, but the label's they control don't.

[gusty vapor]

ListView pooling is broken as shit, at least in 2023 they fixed it

[candid eagle]

Has anyone been able to create a custom control with attributes, and have the child elements react to attribute changes in builder ui during edit mode? Like if I create a string attribute and when I change it, it will change a specific child Label.text and mark it as dirty automatically?

I found this in doc: https://docs.unity3d.com/2022.2/Documentation/Manual/UIE-ViewData.html
Note: Currently, the API necessary to add support for view data persistence is internal, which means you can’t enable view data persistence for your custom controls.

Does this mean what I want isn't yet supported? If not, please let me know how.

[candid eagle]

I managed to get this to work by creating the template in the custom control constructor via C#. It works as expected. But I can't then edit any of those properties in the UI Builder at all then. Looks like I'll need to create a VisualTreeAsset template for that control, and then in the control constructor, load and clone that asset in. That way I can edit the template via builder and have the behavior I initially wanted. It seems like a lot of work, if anyone has a shorter, more efficient approach, I'm all ears 🙂

[ocean finch]

I am going insane.. Why are my UI elements non-interactable

[regal quarry]

Are there any common naming conventions for ui toolkit elements?
I'm looking at the "Dragon crashers" sample project and I can't figure out the naming convention.
They sometimes use - and sometimes _. Sometimes -- and __, but I can't figure out the pattern. Is there any guide to recommended naming conventions?

Sometimes they have something like this: home-play__decoration-xmas-right
Other times they have something like ReferenceHomeScreen

[rocky raptor]

UIDocument.rootVisualElement.panel.Pick(RuntimePanelUtils.ScreenToPanel(UIDocument.rootVisualElement.panel, pointerPosition)) != null

is this code broken? it is not working the right way. It sometimes uses "displaced" position

Outside of elements itself

[gusty estuary]

gotta make sure pointer position is correct

because NewInputSystem pointer position for example has inverted Y relative to panel

[rocky raptor]

I see

bool isPointerOver = Document.IsPointerOverElement(inputs.GamePlay.MousePosition.ReadValue<Vector2>());

i`m using this

maybe inverting can fix it. i will try

[gusty estuary]

you will need screen height

[rocky raptor]

screen or canvas?

[gusty estuary]

screen

new input system gives relative to screen

[rocky raptor]

It works, thank you

[rocky raptor]

Has anyone written a chat component for ui toolkit?

[rocky raptor]

Is there any event on TextField for submit? do i need to check for Enter key?

what about mobile?

[gusty estuary]

wouldn't you want separate button for that?

if not you can just rely on value changed event

[rocky raptor]

I found a way but yeah, i need a button too. I will use both methods.

this is the way i`ve found: value.Element.RegisterCallback<NavigationSubmitEvent>(OnSubmit);

[gusty estuary]

this works too

[rough scarab]

https://getbem.com/naming/
https://www.google.com/amp/s/www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/amp/

[gusty estuary]

wow

I wish Unity included that link

instead of another

in their best practices page

or maybe just both 😅

really nice explanation

I hope there will be CSS libraries at some point for UITK

I feel like this will be an interesting thing to post on asset store

[regal quarry]

Thanks!

[candid eagle]

Does UI Toolkit allow merging attributes? Say I have a custom control A with attributes A, B, C. And I have custom control B with attributes D, E, F. I want to create a custom control C that will display it's own attributes along with attributes A, B, C, D, E, F inherited from custom control A and B. That way if any attributes get added/removed from custom control A or B, they will be automatically reflected respectively in custom control C?

[candid eagle]

I am writing my own dropdown custom control. I got the panel to appear on top and outside the bounds of the property, but it's being tucked under the component headers. How do I set it all the way on top?

[rough scarab]

https://docs.unity3d.com/Manual/UIE-create-a-popup-window.html

[candid eagle]

Once again, much obliged. 🙂

[gusty estuary]

nah, it's just basic inheritance

[gusty vapor]

you can make your own https://docs.unity3d.com/ScriptReference/UIElements.BaseVerticalCollectionView.html

note, in 2022 and below, the virtual methods sorta broken.. better to use it in 2023.x, they're planning to backport it to 2022.x which version I still don't know, most probably the LTS one when it comes out

[dense tulip]

Hi there! I already messaged on #↕️┃editor-extensions but I found this channel which is much more appropriate to ask in. Apologies for using two channels.
I'm trying to set a listview to 100% height. It's inside a RootContainer, which is just a VisualElement. It's also set at 100% height. In the UI Builder, everything shows up as expected, the list is 100% height because the root is 100% height also.
However in the window itself it doesn't show up like I expect it to. The list view is only 1 item large (the 1 item that I have in the list view), whereas I wanted it to occupy 100% of the height.

[gusty estuary]

item height does not depend on listview height

[dense tulip]

Right, so instead of a list view I'm using a generic VisualElement

It has 100% size, the parent has 100% size, and yet in the window they aren't showing up with 100% size

The one highlighted in green is the VisualElement that has 100% size, yet doesn't actually fill the entire height

[gusty estuary]

check which element is not taking up whole height in debugger

[dense tulip]

The highest one in the hierarchy which isn't taking up the whole height is the Template container, but I don't think I have access to that element?

The #RootContainer is the one I added, with a ListView and Visual Element elements below it

Okay, adding TemplateContainer {height: 100%;} to my uss file fixed the problem by making the top one 100% size also.
Could you explain what the purpose of this template container is? Am I shooting myself in the foot by forcing it this way?

[gusty estuary]

you have, it's what you instantiate (if you do)

[dense tulip]

Right, but in the UI Builder it shows up like this:

[rocky raptor]

Is -unity-text-outline-width: + rich text planned to be released?

[dark blade]

isn't position absolute should make that element be top of everything else?

and unnafected by align and justify conten?

[rocky raptor]

No

to be on top you need z-index but ui toolkit don`t have it

[dark blade]

ok thanks

[tranquil sigil]

How do you add image in UXML?

I tried querying VisualElement as Image Root.Q<Image>("someclassname"); and it doesn't work.

Returns null

[cold bough]

is there an option that get text meshes in UI toolkit just like the way in TMP?

[gusty estuary]

background of any visual element works

[tranquil sigil]

Yeah but that's just weird

[gusty estuary]

how so

[tranquil sigil]

Its a background, not an image. There is that guilty conscience.

I ended up just creating new Image from script anyways.

Taking the visual element as container

[gusty estuary]

Image is rudimental

having it as background gives you much more options

like built in cropping if you define border/radius

oh and ofc ability to set image through UI Builder

or uxml

[candid eagle]

I don't understand how to get INotifyValueChanged<T> interface to work. When I set the value in my custom control, it doesn't fire change event. Is there another step I need to take?

[gusty estuary]

do you call base.value = value?

[candid eagle]

ah, I see. thanks

[gusty estuary]

this is if you use base field though

[candid eagle]

oof, which I do not 😦

[gusty estuary]

then take a look at their implementation

[candid eagle]

Yeah I see that now. Thank you. Ill have to redo my custom controls.

[candid eagle]

Ok, I'm recreating the basic stuff so I can get really comfortable with the UI toolkit.
I created a Vector3Field but instead of Vector3 it uses math.float3. My Vector3Field inherits from BaseField<float3> and overrides value and SetValueWithoutNotify like so:

public override float3 value
{
    get => new (X, Y, Z);
    set
    {
        SetValue(value);
        Debug.Log($"Setting value to: {value}");
        base.value = value;
    }
}

public override void SetValueWithoutNotify(float3 newValue)
{
    SetValue(newValue);
}

private void SetValue(float3 value)
{
    _xField.SetValueWithoutNotify(value.x);
    _yField.SetValueWithoutNotify(value.y);
    _zField.SetValueWithoutNotify(value.z);
}

And the _xField and such are also my own custom control: FloatField which also inherits from BaseField<float> and overrides the INotifyValueChange interface like so:

public override float value
{
    get => _field?.value ?? 0;
    set
    {
        if (ReferenceEquals(_field, null)) return;
        _field.value = value;
    }
}

public override void SetValueWithoutNotify(float newValue)
{
    _field?.SetValueWithoutNotify(value);
}

Where _field is UnityEngine.UIElements.FloatField.

So, with that said, here is what I am doing...

positionField.RegisterCallback<ChangeEvent<float3>>(e =>
{
    Debug.Log($"Position changed: {e.newValue}");
});

And here is what the console is spitting out:

vector X change event: 3
Setting value to: float3(3f, 0f, 0f)
Position changed: float3(0f, 0f, 0f)

vector X change is fired via:

_xField.RegisterCallback<ChangeEvent<float>>(e =>
{
    Debug.Log($"vector X change event: {e.newValue}");
    var v = value;
    v.x = e.newValue;
    value = v;
});

from within the Vector3Field custom control.

So, the vector 3 field picks up the change from the FloatField, and updates it value. However when updating its value, although it is setting it correctly, the result comes out to value that hasn't changed.

I have no idea where this slip up is occuring.

I don't know if this will narrow it down, but I extended the debug log to this:

positionField.RegisterCallback<ChangeEvent<float3>>(e =>
{
    Debug.Log($"Position changed: {e.newValue} | {positionField.value}");
});

And it gave me this:
Position changed: float3(0f, 0f, 0f) | float3(3f, 0f, 0f)

So it's actually updating the value, but the event handler is responding with zero? What am I doing wrong here?

[snow frost]

Hey folks, is there a preferred way to deal with multiple copies of the same UI for something like split screen? It looks like I cannot have separate UI documents, and I would rather avoid having a central UI system since I can have n number of players... Thanks!

[stable lance]

Hi all, is there any example or best practices out there regarding building draggable/resizable UI elements for runtime? Thank you!

[candid eagle]

I figured my issue out. Calling unityUiFloatField.SetValueWithoutNotify(newValue) will not actually update the TextElement visual to represent the new value. I had to add that in manually. But other than that, everything works as expected.

[gusty vapor]

Another option is to NOT use INotify and just implement EventCallback<ChangeEvent<T>> ..

see here for reference https://github.com/Unity-Technologies/UnityCsReference/blob/dcf29f6d96a9708d7a7350f92772bb75ca3befbf/ModuleOverrides/com.unity.ui/Core/Collections/Virtualization/ReusableTreeViewItem.cs

or just use c# delegates and get the same result .. (depends on what you're doing)

[gusty estuary]

Why not?

This is common interface

[gusty vapor]

bcos why not? 😄 ... for example, when you want RegisterValueChange callback not pointing to the default INotify

[gusty estuary]

Because you go against conventions?

Implementing this outside of interface will be a bad practice

[gusty vapor]

you're implementing your own custom visualElement, so it's your own convention

[gusty estuary]

it's not?

It's just another class

[gusty vapor]

tbh I'm not the right person to answer about rules and whatnot due to the fact that I used unsafe context like 99.9% of the time in my project 😂

[gusty estuary]

Unsafe is fine

I talk about general code conventions you break when you use change event without interface

Makes codw incompatible with other for no reason

[gusty vapor]

that was an option for sure, you don't need to follow Unity's convention unless you're trying to publish it as library/package that people would have access to it

[gusty estuary]

Well, if you don't use unity elements at all then sute

go nuts making your own

[dark blade]

when i looks for example i see Register Callback<>, and seems like there alot if it, is there any doc i can read for all the possible callback

[gusty estuary]

Event reference in manual

[ocean finch]

@gusty estuary Sorry for the little ping but I think I have found my issue. I wasn't using the StandaloneInputModule. The problem is that I am the input system package in my project. What can I do here to still work with UI toolkit stuff despite that?

InvalidOperationException: You are trying to read Input using the UnityEngine.Input class, but you have switched active Input handling to Input System package in Player Settings.
UnityEngine.Input.get_mousePosition () (at <6f110e0513ea412292373f50e2069aee>:0)

It literally says what I need to do in Unity

I am ashamed

I will leave this here for everyone to laugh at me because I deserve it.

[teal belfry]

Any idea how to use IAP with UI toolkit?

Only way I see to do it is with IAP button...which doesnt work with UI toolkit

[hasty parcel]

In creating a custom VisualElement is there no way to reliably Register events on children?
Can't do it during constructor because they don't exist.
There's no OnChildAdded or anything. Do I really need to set up an separate monobehaviour to update it at a later point?

[gusty vapor]

there are lotta ways

Can't do it during constructor because they don't exist ?? wdym?

you can make a custom VisualElement and assign it OnAttachPanel

[dark blade]

how we get serializedProperty.arraysize value from Property Field Element ?

[cold bough]

in ui builder, how do you set a row of items that fill the whole line and keep % ratio? for example, name | score | killcount, width 20% 40% 40%

[gusty estuary]

set width 100% and flex growth in your ratio

[fiery mountain]

anyone know of a way to setup a grid list view?

I thought of taking a list view and having the rows be filled up with the elements. Thoughts on that or any suggestions?

[gusty estuary]

I did a very poor implementation with scroll view

just added a container to it

with row elements

direction

and then added as they went

but element height had to be fixed

which is why it's poor

[fiery mountain]

ok so I was on the right track, thank you

I saw something from unity basically saying create a list view and setup some virtualization but I have no clue how to set that up

[gusty estuary]

another option I had

to create rows as elements

and fill them instead

[cold bough]

isn't flex system support grid view somehow?

[gusty estuary]

flex fills everything

so unless grid is full, it will be invalid

[cold bough]

oh i forgot it's not css equivlent, there is no display: grid

[fiery mountain]

I did consider using the flex in a scroll view and fill it. I expect approximately 100 elements in there maximum but that seems like it would be horrible.

[gusty vapor]

use scrollview instead, and set the flex-wrap to wrap and flex-row

we can't do this beautifully in uitk currently

OR you can make a parent with flex-grow set to 1, set it to flex-column and fill it with visualElements act as rows and do your logic to show how many items should be contained in those row containers

this way you can do row X column

[static canyon]

We made our own grid view by making a custom element that mimics the ListView api and is backed by a ListView. We calculate the number of columns based on our own calculations then for every call to make item we invoke it n times (where n is number of columns) and add it to a row visual element. Then in OnBindItem we iterate the children of the row and invoke the bindItem callback with the index (row*columns + column). About 250 lines in all, works reasonably and is virtualised.

[gusty vapor]

@fiery mountain Coinciddentally I'm working on my own custom grid not too long ago... here is basically what I said above.. a ScrollView with ObservableCollection.

Basically it's a lightweight version of ListView with the same behavior. Why ScrollView instead of ListView simply for a fact that pooling in ListView is sorta broken so it's risky to use it in production

[gusty vapor]

Better off with ScrollView instead of ListView, listview is broken in 2022 and below.. it's fixed in 2023 tho

[static canyon]

You mean the nested ListView scrolling issues?

[gusty vapor]

no.. the pooling

[static canyon]

oh?

[cold bough]

is this expected behaviour? why 100% makes it break out of parent when you set margin 10px

[gusty estuary]

yes, it is

you might want to use flex growth instead of fixed size

[cold bough]

but how do i animate this progress bar

without changing its width

[dark blade]

how we can get SerializeProperty properties if using PropertyField???, like i want to know its arraysize, or propertypath, or property type?

[static canyon]

What's broken about the pooling @gusty vapor ?

[gusty estuary]

potentially you can make 2 elements and chage their flex

0; 1f
0.5f ; 0.5f

and etc

[static canyon]

I'd recommend not using .style and instead using e.g. .transform.scale in c# after setting the pivot point. It's much more performant.

[cold bough]

emm

so i dont need to change its width but x scale?

sounds good

[gusty vapor]

the virtualmethod ones.. if you're not using it, you should be good I think

jump up to uitoolkit forum, there's a thread discussing this I forgot which one

[gusty estuary]

it's not

it's literally just graphical scale

which takes no part in layout

[gusty vapor]

https://issuetracker.unity3d.com/issues/item-selection-is-offset-below-when-uitoolkit-listview-is-set-to-dynamic-height-mode

note that it also affects fixed height

[cold bough]

this is what happened if i make 2 visual element

seems like no other way if i want to animated it from 0 to 1

this is too weird, i dont remeber css behaves in this way

[gusty vapor]

doing it this way will ignore the overall layout

better off with transitions instead

and transitions can be done in c# too

[static canyon]

... you're recommending to use transitions but not use ListView? 😟 - for whoever's reading this just know that there are differing opinions and please don't take things said here whole-sale.

[gusty vapor]

I don't get the correlation between transitions and listview here 😅

[static canyon]

Transitions are highly experimental and buggy imo. I wouldn't recommend anyone use them certainly in 2022.2. ListViews on the other hand have been generally pretty good for us. They have their own bugs (like scroll speed) but they're not really any less buggy than ScrollViews.
Also, the whole point with the technique above using .transform.scale is that you calculate the original layout (eg flexgrow:1) then set the scale to be a fraction of that.

[dark blade]

so im using PropertyField from UI Toolkit, and do

levelDatasProperty.BindProperty(so.findProperty("levelDatas")
``` to bind the property, but i have pagination view, that only need array size to initialize its, and thats why i need what the SerializedProperty Bind To LevelDatasProperty(PropertyField UI Toolkit) then get array size from there, then my pagination view also has callback to ADD and REMOVE element, so having ability to know what property bind to that Property Field so neccesary for me....i hope my question clear enough thanks

anyway seconds question relative to this, im attempting to add new element to the SerializedProperty with using

        private void OnClickB()
        {
            Debug.Log(levelDatas.arraySize);
            levelDatas.InsertArrayElementAtIndex(levelDatas.arraySize);
            var a = levelDatas.GetArrayElementAtIndex(levelDatas.arraySize - 1);
            a.managedReferenceValue = Activator.CreateInstance(typeof(PuzzleCreator.LevelData));
            Debug.Log(levelDatas.arraySize);
        }
``` but this give me error like this
```InvalidOperationException: Attempting to set the managed reference value on a SerializedProperty that is set to a 'LevelData'``` any explanation how should i dot it?

[dark blade]

anyone?

[vast maple]

Hi, quick question. I have 2 tiles of which I want their background images to be swapped. How can I achieve this? I have tried getting a reference to their StyleBackground components, and using selectors classes, but to no avail.

[gusty estuary]

Both style background

and selector classes will do

if didn't work for you - you did smth wrong

[vast maple]

StyleBackground prevBackground = SelectedElement.Element.style.backgroundImage;
StyleBackground currBackground = tile.Element.style.backgroundImage;

tile.Element.style.backgroundImage = prevBackground;
SelectedElement.Element.style.backgroundImage = currBackground;```

that's the code in question

[gusty estuary]

that should work

[vast maple]

not sure then, its not working with either approach

will selector classes override values set directly to elements?

[gusty estuary]

no

they are resolved by layout

oh

if you mean

whether you can access values - yes

allthough

maybe values should be in

resolvedStyle

[vast maple]

alright I got it working by assigning selector classes at the beginning and unsetting values from the ui toolkit

weird that it wouldn't let me unset them through code

[gusty estuary]

you should read style section in manual

it explains all details on selectors

[vast maple]

will do, thanks

[gusty vapor]

@gusty estuary can we use hex value for colors to visualelement?

[gusty estuary]

I believe color settings are defined in player

linear/gamma

at least when I change it

colors of UI change as well

[gusty vapor]

no no, I mean hexadecimal as in css hexs

[fiery mountain]

anyone know of a good way to check if a visual element is a template or not? (editor only)

[gusty estuary]

I think in uss you do define it like that

at least from what I remember

[gusty vapor]

so no way to do this inline?

[gusty estuary]

for RBG you need converter

[gusty estuary]

assuming you want this for your code based solution

just use converter

[fiery mountain]

no inline, if you go into the uss directly you can use a lot of other things including var

[gusty estuary]

or maybe Color already has one

Color.FromHex or smth like that

[gusty vapor]

I made a converter already, was asking if there's a built in one for this 😃

[gusty estuary]

weirdchamp

[gusty vapor]

I'm ready to throw this to a garbage-can if somehow we can do it inline

        public static UnityEngine.Color HexColor(UnityEngine.Color defaultColor, string hexColor)
        {
            if(String.IsNullOrEmpty(hexColor) || hexColor[0] != '#')
                return defaultColor;

            UnityEngine.Color nuColor;

            var t = ColorUtility.TryParseHtmlString(hexColor, out nuColor);
            
            if(t == false)
                nuColor = defaultColor;

            return nuColor;
        } 

it doesn't make any sense if we can't do it inline while uss/uxml supports it

[gusty estuary]

uxml/uss parsers are not exposed

so internally they are likely using their own converter

https://docs.unity3d.com/ScriptReference/ColorUtility.TryParseHtmlString.html

maybe this?

[gusty vapor]

that's bascially what I'm using as shown in the snippet above 😅

[gusty estuary]

ah

[gusty vapor]

can you point out where to look at in the reference script repo, if you know? if I can find them I can just reflection my way I guess 😂

[gusty estuary]

I don't

my knowledge of UITK is limited to what is exposed

as in public API, that's about it

[gusty vapor]

aight, thanks

[gusty vapor]

@gusty estuary where can I see supported richtags for uitk?

[gusty estuary]

manual?

[gusty vapor]

I tried looking for it but couldn't find it

oh, right when I said it 😅 https://docs.unity.cn/Manual/UIE-supported-tags.html

for some reason google keeps pointing to old ugui

[muted flicker]

Hi all, is it usual for the UI Builder to be quite slow when applying stylesheet changes? I'm recording 500ms of lag inbetween actions (like setting flex direction)

[rocky raptor]

is text justify broken?

It is adding spaces between text

[gusty estuary]

sounds like what it does though

[rocky raptor]

This does not looks right

[gusty estuary]

then you might want to change text

or font size

or don't use justify

[fiery mountain]

I am trying to setup something where I need to know how many elements are in a row. Anyone know a nice way to do it? Basically i am adding X amount of elements into a dynamic sized element. I keep trying to get the width from the style but since it is happening so early all the sizes are NaN. I don't want to hard code sizes because a designer might come in and resize things.

[gusty vapor]

you should schedule it and get the resolvedStyle... resolvedStyle means it's already computed

myBusyVisualElement.schedule.Execute(); //default is 1 tick, you can override it

either way, in complex hierarchy you'd still get NaN.. so you should put another layer of check via float.isNan

then reschedule

this part of uitk is a tremendous pain at the moment

[white night]

I've been kind of hitting my head into a wall for the past like 6 hours.

Can anyone help with some basic UI scroll rect questions?

[halcyon wraith]

Should I consider using a UI toolkit if i'm going to use a slider that represents a HP bar? Or is the basic ui one better?

[gusty estuary]

I don't think choosing UI framework depends on whether you use sliders or not

[halcyon wraith]

Isn't the ui toolkit one harder to change values?

Thats my main concern

[gusty estuary]

Never heard that changing values is hard

[halcyon wraith]

Oh

Would it possible to explain it to me?

[gusty vapor]

you mean binding? https://docs.unity3d.com/Manual/UIE-Binding.html

or just registercallback and call it a day

[halcyon wraith]

probably I don't know a lot about this

I'm trying to update the value of the slider as the game goes on

but I don't know if I can access that value through script

[gusty vapor]

for sliders you just do mySlider.value = myFloat;

to get it var myValue = mySlider.value;

[halcyon wraith]

Oh so I just need to create a variable SliderInt?

The uit one

I think I got what I needed, but my only issue would be that the whole tracker is one color, and I don't know how to make is to that the "size" changes as the value goes down.

[white night]

I'm got a UI built with a Canvas, a View, and a Content box. It's working perfectly.

I want to be able to tap on one of the images inside of it, and it makes it full screen like a photo viewer. Any ideas on how to do that?

[gusty vapor]

did you read the docs I linked and the post right after that? those are your options

[dark blade]

can someone explain why TextField, IntegerField, FloatField, etc has value property, to get and set whatever value that field has, but why property field dont have that?

[civic fiber]

So is the status of on screen joysticks still "no"?

Ooh I see someone has done this https://github.com/uurha/BetterJoystick

[rough scarab]

I don't think it's ever been a no

[lunar yarrow]

When i goto set the background color on a new visual element, it won't change color hmm.. I am watching a video tutorial and on the video he does not have any image texture inputted to change the 'Background' color of the visual element under the Background section, it just changes, but on mine nothing happens

[gusty estuary]

maybe you want image tint?

[lunar yarrow]

Thought so too but no luck, Unity documentation suggests just changing the background color just as i did as well but it isn't working, wonder if there is something im missing

[gusty estuary]

you have image here

meaning background color is behind

and you won't see it unless image has opacity

image tint at the same time multiplies image color

[lunar yarrow]

thats the thing that confused me is, even when i dont set a background image on the background layer and just try to set a color as documentation/video suggests, it doesnt set the color instead of background image

ill try again with a new scene and everything fresh just incase, but i did that before and no luck 😛

i'll just add a single visual element and see if it lets me set the BG color with no image

[gusty estuary]

check if alpha of color is not 0

common mistake

[lunar yarrow]

Thank you man thank you, fiddled with everything but that 1 bit. First time doing UI in unity

tried everything but that 🤣

I know what screwed me too, i checked the alpha of the image tint earlier so while that was right the regular bg color was at 0

[fiery mountain]

anyone know of a way to detect a pointer up even when the mouse goes outside of a parent element?

Issue I have is: I have elements in a scroll view. Scroll view has a manipulator on it to allow mouse drag events. If I drag the mouse off the edge of the element/screen it doesn't register.

[gusty estuary]

you could use input system to detect everything

I honestly hate the built in callback system

doesn't work with new input system really

[fiery mountain]

Yeah i know what you mean. I do like some parts to it. I am not running this stuff on a monobehavior so checking the input (using legacy) won't be that clean/easy.

[static canyon]

You probably want to use the CapturePointer functionality. The idea is that eg on pointer down you capture the pointer - all mouse moves and mouse ups will then be captured by the visual element no matter where the pointer is until you call ReleasePointer (usually done on pointer up)

[fiery mountain]

i'll test it out, thanks

[gusty vapor]

it works... you need to set this up in the ctor.. yeah its a workaround

            this.focusable = true;
            this.RegisterCallback<AttachToPanelEvent>(evt => this.Focus());

it's a bug yeah, they're working on it

[gusty estuary]

?

what's it for?

[gusty vapor]

oh proly you're talking about something else haha

I though you said events doesn't work in new ioputsystem

lol

[gusty estuary]

they don't

[gusty vapor]

it works

[gusty estuary]

but I talk about new input system events

not about built in utk events

[gusty vapor]

yes I'm using it now as a matter of fact

[gusty estuary]

any example to showcase?

[gusty vapor]

its just it loses the focusable state, when using it with new input system

you need to force it to be re-focus during instantiation

as shown above

[gusty estuary]

??

why

for what reason

[gusty vapor]

see this https://forum.unity.com/threads/feedback-wanted-new-input-system-support.963111/

[gusty estuary]

I don't have problem working with built in UITK functionality

I have problem of tying game logic of New Input System and UITK

[gusty vapor]

proly I'm living in another realm now.. I'm using uitk events with the new inputsystem with no problem 😄

[gusty estuary]

because there is no problem using uitk events?

the problem is using new input system events with uitk

I'm talking about shortcuts

keybinds

and etc

maybe that should be the next focus on my lib

[gusty vapor]

you mean for example when using NavigationMoveEvent?

[gusty estuary]

no

I mean when using literally new input system events

like

"jump"

or "shoot"

😅

[gusty vapor]

oh haha

make your own wrapper on top of InputSystem.onEvent? you can do anything you want with it basically

it is sorta unmanaged territory tho

and the api is quite finicky in 2021

[gusty estuary]

tbh

I have another idea

just use message bus

for example

both UI button and shortcut send same message

which is processed by external class

and then sends another message

which both UI and shortcut controller recieve

and react

each in their own way

[gusty vapor]

there's also unmanaged api to capture raw inputs, but I forget what it was.. proly try to look up the docs

[gusty estuary]

wdym by unmanaged?

low-level or not managed by GC?

[gusty vapor]

https://learn.microsoft.com/en-us/dotnet/framework/interop/

[gusty estuary]

native it is

[gusty vapor]

there are tons of these under .LowLevel namespace in the new inputSystem

they're undocumented

[gusty estuary]

I get that, but I'd rather not touch it

[gusty vapor]

just capture all via InputSystem.onEvent 😄 it's quite trivial to do

[gusty estuary]

why?

to recreate my own way to identifying action?

I am fine with built in way

[alpine vault]

Hi there 👋 Is there a VisualElement callback or override I can use to hook into binding? I have a custom VisualElement that uses view binding to a serialized object. Depending on specific enum values inside the binding, I want to enable/disable certain child elements. This works with regular view element change callbacks already. But I'm missing a hook for the initial view binding. Any idea?

I'm not programmatically binding data to the view, but also hierarchical binding (it is part of another parent view and has a binding path), so there's no SetValue() or Bind() method available for me. Does UI toolkit binding expose any callbacks?

There seems to be https://docs.unity3d.com/2022.2/Documentation/ScriptReference/UIElements.BindingExtensions.TrackSerializedObjectValue.html, but I'm not having a SerializedObject at hand where I'd need it, so I'm not sure if this could be (somehow) an option

[gusty estuary]

binding is for editor only

you most probably have serialized object in editor

[alpine vault]

I'm working inside the editor 👍 I'm using a ScriptableObject that I'm binding using visualElement.Bind(new SerializedObject(myScriptableAsset)).

However, the bound object is a complex object made out of multiple nested objects. The visual element I'm binding to is too.

The binding paths are hierarchically happed to different views inside the hierarchy.

On of the child views, will be bound to a specific sub-path inside the original serialized object. However, for that child view, binding happens behind the scene. Meaning that it doesn't have a way to react to the binding.

Hence, I'm looking for some kind of callback, so it can update its visual state after being bound.

[alpine vault]

Alright, from reading the forums, the docs, and the rest of the internet, I am under the impression that the current binding system doesn't offer the flexibility I need. Back to manual binding for this view 🤷‍♂️

[still lantern]

What is it you are trying to get a callback for exactly?

[alpine vault]

Binding of a serialized object to a visual element, so that the visual element can add behavior based on the bound data

[still lantern]

You mean, get a callback when the bound value is set or change?

[alpine vault]

Yeah. When I call element.Bind(serializedObject) and one of the elements in the hierarchy gets bound from this, I'd like that the view gets notified after the binding, so it can update it's behavior based on the bound data (e.g. show and hide child elements)

[still lantern]

RegisterValueChangedCallback is called when the field is bound (along with any other time the bound value changes)

[alpine vault]

I think I didn't receive that callback for the first bounding, at least what I observed

[copper gulch]

Hello! I've been looking through the UI-Toolkit documentation and I'm a bit at a loss so I think I may be overlooking something.

Question: Is there a way to get a reference to the focused object during runtime? I have found event references but I need a gameobject reference I believe [I need transform information]

I can provide context for the end goal if you think it'll help. This is just one small piece that's got me a bit stuck.

[gusty estuary]

it's likely that you can, but I advice against it

much better to keep View stuff internal to View

[copper gulch]

It is 3am and I am half asleep, please clarify what you mean by this use of the term View.

[gusty estuary]

UI specific classes

[copper gulch]

ah, yes. I'm going to provide additional context:

I'm trying to create a Resident Evil 4 style inventory system that is controlled by a gamepad and I've been having a lot of trouble finding resources for that specific combo [menu-based, size based inventory + gamepad] so I've been piecing together ideas and things I've learned slowly over time when I have time. However, I keep running into this problem of just not knowing how to move the active, selected object by grid squares [which I was hoping I may be able to navigate via tracking the focused object, or something similar] rather than the drag and drop [with a mouse] option every resource I have found offers

I know it works somehow because the game Save Room exists which was also built in Unity. I believe I am just lacking either a piece of information or a shift in perspective.

[copper gulch]

So I am trying to move UI items around a UI grid, nothing outside of the UI system will be interacting with this set up.

[gusty estuary]

Sounds like all you need is just callback on navigation event submit (when user presses OK with element focused)

[copper gulch]

I believe I did try looking through the documentation for that a month ago [I had to take an extended break from this problem for life reasons] but I couldn't find how to grab the gameObject information in the unity Documentation for UI toolkit. I found things that seemed promising but I recall it always came up null when I tried it. Can you help guide me to that info in the docs perchance so I know I'm looking where you are suggesting?

Also, the second issue [which I think is the one more so blocking me in this situation] in that is being able to move the selected object floating over the grid [snap motions, by grid tiles] and in that case, I would not be clicking submit and worry I fall back into the need of tracking the focused object?

[gusty estuary]

just RegisterCallback<NavigationSubmitEvent> (or smth similiar)

on all specific UI elements

that you are interested in selecting

those events trigger when you click

[copper gulch]

https://docs.unity.cn/Manual/UIE-Events.html
https://docs.unity3d.com/Manual/UIE-Focus-Events.html
https://docs.unity3d.com/560/Documentation/ScriptReference/EventSystems.EventSystem.html

a quick pull on my history shows I was searching around these parts of the docs

https://www.youtube.com/watch?v=UJKGRHdKMyU
sample video of goal interaction [focusing only on the movement around the interface]

[gusty estuary]

RootVisualElement.RegisterCallback<NavigationSubmitEvent>(MyCallback);

I didn't find it in docs

seems like it's undocumented

https://docs.unity3d.com/2022.2/Documentation/ScriptReference/UIElements.NavigationSubmitEvent.html

[copper gulch]

yes I recognize this page. It's largely possible that I was trying to use the wrong property to achieve my goal when I was here. [for instance, I do know I did explore the path of trying to full the current target from the IEventHandler to no avail]

https://docs.unity3d.com/2022.2/Documentation/ScriptReference/UIElements.EventBase-originalMousePosition.html
This might be a promising path to explore?

"The original mouse position of the IMGUI event,__ before it is transformed to the current target local coordinates.__" though this bit does make it sound like it only takes the initial event and does not propagate along with focus changes... then again, that is already a useful thing to have to snap the object back in the case of a cancellation... https://docs.unity3d.com/2022.2/Documentation/ScriptReference/UIElements.NavigationMoveEvent.html
https://docs.unity3d.com/2022.2/Documentation/ScriptReference/UIElements.NavigationMoveEvent-move.html
This concern has guided me here so I'll look here too.

if nothing else, always more to learn from messing around and finding out

I'll go take a look in the morning, thank you for your help sir. Any other suggestions and guidance is welcome. This problem has been haunting me for a long while now but I've definitely learned a lot in the process so I definitely feel a lot better [other than the fact that it is another 4am night for me]

[gusty vapor]

you can register FocusEvent and pool it somewhere or whatever

vis.RegisterCallback<FocusEvent>(x => {Debug.Log(x.target);});

https://docs.unity3d.com/ScriptReference/UIElements.FocusEvent.html

make sure you set the visualElement's focusable to true

[bronze wave]

Hey, I'm using the GraphView toolkit and I'm trying to get the size of a visual element (node) within the graph view.

I can get the position but none of the rect, style or resolvedStyle methods are working in 2021.3.6f1 - returning NaN only.

I can't upgrade my game engine due to university restrictions either.

[gusty vapor]

GraphView api kinda funky, you'd need to schedule things with it if you're expecting resolve values

myBusyVisualElement.schedule.Execute(//Do things with your bussy VisualElement here)

on complex hierarchy scheduling 1 tick sometimes would resulted in NaN too. You can override it or do checks with float.IsNan and re-schedule

[fiery mountain]

anyone know of a way to use the odin inspector attributes with the UIE? Kind of wish they would work together

[gilded orbit]

Legit no idea where i should ask this. But are bottom sheets possible with UI toolkit?
The screen is from google material 3 and they can be expanded to take like 3/4 of the screen.

[cobalt nimbus]

Hi all! I want to inspect custom class without manually specify fields one by one. Can I achieve this with unity? My class isn't unity object and not a part of any unity object such as for example ScriptableObject so I don't want to just incapsulate it inside and add [System.Serializable]. What I want is to create instance of my class, then open custom EditorWindow and inspect / edit values of it's instance.

[gilded orbit]

Anyone?

[rough scarab]

We don't need you pinging 3 channels at once. Cross-posting is against our rules, pick one channel and only use another onceplenty of time has passed

[gilded orbit]

Okay so which channel? Isnt this actually a topic for all three? Its not like theres one general "UI" channel

[rough scarab]

#📲┃ui-ux is fine

[gilded orbit]

Is there a way to round corners in ui toolkit?

[gusty estuary]

border

[gilded orbit]

Thanks, worked ! ^^

[gilded orbit]

How would you create such a expand feature ( see the bottom sheet above ). In android it can be pulled up. From 1/4 of the screen to like 3/4

Whats the most common way to implement such a functionality?

Is that even possible?

[gusty estuary]

no idea about the meaning of feature

got any video?

[gilded orbit]

https://youtu.be/3vMtHKniOqI?t=304

Its an expandable UI element. It lays at the bottom and can be expanded by pulling it up... the video should start exactly where that dude is demonstrating it. Its actually a pretty common UI element in android & Ios. Couldnt find a better video in that time

And i wonder whats the "best" way of implementing such a behaviour when using UI toolkit ^^

[gusty estuary]

Looks like drag-and-drop

with restrictions

[gilded orbit]

Alright thanks ^^ So i should just put a drag/drop listener on that object... and when its being pulled into the fitting direction, i modify the elements height and snap it to the desired position?

[gusty estuary]

drag and drop is editor only feature

you'll need to implement it yourself

[gilded orbit]

Oh boy... Is that hard? Actually first time using ui toolkit.
Besides that, can we load/display webviews in elements?

Or html content (in general)

[gusty estuary]

no

unless you render it to texture somehow

in which case you can render it

[gilded orbit]

So should we rather pick ugui for displaying webviews n stuff?

[gusty estuary]

uGUI can display html?

never knew about that

[gilded orbit]

Not directly. I think it works the same, displaying textures and redirecting input. But there plugins for that ( mostly paid )

[gusty estuary]

but generally UITK is closest to web/ui frameworks there is

at least syntax wise they literally copied Microsoft's XAML

[gilded orbit]

Alright thanks, ill just try my best with UITK. All i want is basically to copy androids UI to give it a more natural app feeling... so lets see where this goes

[gusty estuary]

are you familiar with MVVM?

[gilded orbit]

Yep, why? ^^

[gusty estuary]

https://github.com/bustedbunny/com.bustedbunny.mvvmtoolkit

I implemented tons of cool features of MVVM for uitk

[gilded orbit]

Thats great, thanks ! 😄 Just out of curiosity... there no libs for UITK and native designs yet? Like one that provides material 3 designs or ios designs? That would be incredible... in that case i wouldnt need to copy all that xD

[gusty estuary]

well, it's rather simple to copy styles as publish to world

but so far I haven't seen anyone do it

you will probably be fine to just make your own style for UI

it's really simple

[gilded orbit]

Damn thats a pitty... would save me a lot of works atleast xD
In that case its more like a business AR app... so no fancy custom game ui or similar stuff. It should look professional and clean. Thats why i prefer native designs for this

[gusty estuary]

and even more - it's really easy to make multiple themes for styling

dark/day theme

or styled for some holiday

and etc

[gilded orbit]

yep thats right ^^

Are there some panel settings to consider when building for mobile devices? The default created looks like that:

[gusty estuary]

all up to you

there aren't many settings

you'll need your own theme

you might want your own text settings

and you probably want dynamic scale mode

[gilded orbit]

Alright thanks ^^ Whats a dynamic scale mode? There only 3 options and dynamic is none of them

[gusty estuary]

any non constant

it's self explanatory

you should just take a look yourself

what fits best your design

[gilded orbit]

Ah i see xD

[gusty estuary]

it's for multiple resolutions

[gilded orbit]

In android theres the concept of dp... Is there a same concept for UITK?
E.g. i set my border radius to 16px... but pixel depends on the pixel density. So it looks weird on my panel rn, mostly non existant 😄

[gusty estuary]

I'm not really sure on this

text font is scalable for sure

as for other pixel sized settings...

gotta figure it out yourself I guess

but not all of them scale

so whenever you can - rely on %

[gilded orbit]

Thanks ^^

[gilded orbit]

One more question... how the heck do i change the sizes of visual elements (via code).
I modify its layout.height however, it does not get updated during runtime.

Ah theres .style that does the trick. Weird

[gusty estuary]

style

height/width

[cobalt nimbus]

Hi again. I've searched that we can use InspectorElement to simply generate and auto bind to unity-serializable instance. But it just shows nothing when instance of generic class.

// this won't be serialized
private class InEditorSerialization<T> : ScriptableObject
{
  [SerializeField] public T Value;
}

// but this will be
private class CustomDataSerializer : InEditorSerialization<CustomData> { }

So can it be bypassed or should I create inherited classes for every case?

[gilded orbit]

Hmm one issue i currently struggle with:

When i click with my mouse on my object and move too fast, the mouse leaves the object and triggers an PointerLeaveEvent which stops the drag process. However, the drag should actually continue till the user "releases" the drag operation.

Any idea how i could solve this in a smart way?

[gusty estuary]

don't rely on PointerLeaveEvent once you started dragging

drag'n'drop will require some funky logic to implement

with probably tons of conditions

[gilded orbit]

The problem here is that pointerleave event is ONLY called for the certain element. The leave mostly happens outside the element... so i have no clue how to intercept that. Registring that callback on the root doesnt help either

Why the heck is their drag and drop event editor only? Fucking hell

[gusty estuary]

why is it even a problem?

you are the one who defines callbacks

just make bool isDragging and early return if it's true

[gilded orbit]

Yes... however i need a "PointerUp" event or something similar that is not tied to the bottomsheet. Some sort of general event.

Otherwhise its being dragged forever

Since the PointerUp mostly never happens inside the bottomsheet... such a drag/swipe mostly is faster than the expanding element and ends outside

[gusty estuary]

ah

that's what you want

you can rely on input system

for that

old/new

either will do the job

[gilded orbit]

Ah true... im gonna look at that. That should do the trick. Still a bit sad... e.g. i registered that pointerup event on the root... and it still only gets called for the bottomsheet. Weird

[gusty estuary]

event callbacks are not propagated to all hierarchy

only until target is met

[gilded orbit]

Yeah but the root is the top? So it should still receive all of them. Or am i wrong?

[gusty estuary]

no

children are on top of parents

you can inspect how it's laid out with debugger

[fiery mountain]

Anyone know of a way to use the odin inspector attributes with the ui toolkit?

Basically I am trying to extend an inspector for a specific type. I had some odin attributes but they don't work.

[gilded orbit]

Why is .style always unitialized at the start? I need to set manual values to it for some reason... e.g. to modify an elements position

[gusty estuary]

style is mean for writing values

for reading use resolvedStyle

but it's also resolved async

usually 1 frame delay

[gilded orbit]

Ahhh, thanks ! 😄

Is it normal that style.top is equal to style.bottom?

[gusty estuary]

you are the one responsible for style values

I think you better read on styling manual to better understand how styles work in uitk

[gilded orbit]

On ma way. In this case its resolvedStyle.Top and bottom. Those have the exact same values, always... and i dont get why.

[gusty estuary]

might not be resolved yet

ooor actually

I'm not sure on this

but it could be just pivot

there's specific property for rect

[gilded orbit]

I played around with the pivot... but the bottom always equals the top value. Which is incredible weird...
I can also set the bottom value to 0 and it stays the same.

E.g.

[gusty estuary]

from what I noticed - position values declare distance to closest point of element rect

[gilded orbit]

In game ( i print the resolvedStyle top and bottom... the red little arrays in the console. Both have the same value).

[gusty estuary]

(if it's possible to resolve)

[gilded orbit]

Ah i see...

In my case (still the damn bottom sheet thing)... i thought i could hide the whole sheet outside the window to pull it up.
However, i need to restrict that "movement". It should stop the pull once it reached the elements size/extend.

I thought i could use the bottom position for this... once the bottom is zero, its fully extended and it should stop. However... looks like i cant use that anymore since it behaves weird.

Any tipps?

I hate ui design

[gusty estuary]

just do negative position

[gilded orbit]

Could you explain ? ^^

[gusty estuary]

bottom -50%

[gilded orbit]

I do that to "hide" it partially (at start). But once i pull it upwards, i need a way to know once its completely visible. To stop from pulling it further ^^
So i dont really know if that could help here.

[gusty estuary]

check rect

[gilded orbit]

The contentrect?

[gusty estuary]

just check all rect properties

in visual element

[rough scarab]

2023.2.0a9 brings the example on this page https://docs.unity3d.com/Manual/UIB-structuring-ui-custom-elements.html to:

using UnityEngine;
using UnityEngine.UIElements;

[UxmlElement]
partial class MyElement : VisualElement
{
    [UxmlAttribute]
    public string myString { get; set; } = "default_value";
    [UxmlAttribute]
    public int myInt { get; set; } = 2;
}```

[gusty estuary]

whoah

codegen

[gilded orbit]

Is there the concept of elevation for UI elements?

[gusty estuary]

nah

[gilded orbit]

:c

[old stag]

ok I am utterly confused with UI toolkit. Even something as simple as alligning an element to the right I have no clue how to do. I have watched some tutorials but they all just place some button inside visual elements and call it a day and never really allign visual elements themselves.

What I am trying to do is basically have 3 elements. One element that covers the left 10 percent of the screen from top to bottom. Then a center visual element that covers 80 percent of the screen from top to bottom and then another one that covers the rightmost 10 perecent of the screen top to bottom

[gusty estuary]

right to 0

[rough scarab]

Like this?

[old stag]

yes like this

[rough scarab]

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement style="flex-direction: row; flex-grow: 1;">
        <ui:VisualElement style="background-color: rgb(0, 255, 0); width: 10%;" />
        <ui:VisualElement style="background-color: rgb(255, 0, 0); flex-grow: 1;" />
        <ui:VisualElement style="background-color: rgb(0, 0, 255); width: 10%;" />
    </ui:VisualElement>
</ui:UXML>

There are many ways to do it, this is just one

[old stag]

To what does this translate in terms of setting it via the UI? I would prefer to be able to design it there directly if possible.

[rough scarab]

just open it in the UIBuilder yourself and look at the overrides

[old stag]

yeah I for the life of me do not see it. I went over it several times.

[static canyon]

At a guess you may be expecting the alignment to be on the element itself? This isn’t how flexbox works - you often use the parent to dictate the alignment. It makes more sense the more you get used to it.

[old stag]

Yes I was exactly expecting it to be on the box itself because that is what I am aligning

[winged oak]

Hi guys, i am having the issue that in ui builder, a hover only fires once- well the event keeps firing correctly, but the backgroundimage (which should change at each hover over), only gets set the first time, then it does not work anymore. Here is a gif demonstrating the problem.

The problematic button is the "x" button in the top right corner of the window, all other hovers work fine:
https://gyazo.com/5f67beb13bc4c35770d2df0ac76360ef

The hover is applied by simple uss style.

(the second hover which not works, occurs shortly before the video ends)
In the uss style for hover, i simply switch the background:

This always worked, until now. I also tried setting the image to sprite, to texture, tried other color profiles, reduced the "max size", etc.

[winged oak]

Found the problem:
the visual element has a default background "btnClose". When hovering, the background is set to "btnClose**_h**" through uss style. When hover ends , the background is set back to "btnClose". (unitl here, no problem)

Then i have a second script:
The second script handles button pressing. For correct display, i also handle "PointerLeaveEvent", to reset the button if a user leaves the button before PointerUpEvent has fired. The PointerLeaveEvent also sets the background to "btnClose", just like hover would when it ends. Once PointerLeaveEvent happens in second script, the background from there on becomes static does not change anymore, even not at hover event.

This seems to be a bug,
as actually there should be no problem, since both events set the same background (the default one, which was there from the beginning).

[winged oak]

...
"button.style.backgroundImage = Resources.Load<Texture2D>(iconsPath+icon);"

👆 this breaks the hover, where as the hover event is still firing, but the texture became static and does not change anymore.
...

To close this, my final workaround is to handle the hover also in the second script, with PointerOverEvent and set the background manually, making the uss style useless at this point (for this specific scenario).

[halcyon wraith]

Hello! I'm trying to change a progress bar's progress background (basic one is blue), but I can't seem to change the value even after creating a .unity-progress-bar_progress, and changing the backgroung color. Could someone help me?

[gusty estuary]

implement your own progress bar

built in is far too hardcoded into bad styles

it's literally just going from 0% to 100% on width

[halcyon wraith]

Alright thank you!

[rough scarab]

Is there a reason you're not just using pseudo classes? :hover, :active, etc

[winged oak]

From what i think, these classes cant handle the following situation: a user presses a button an holds the button pressed, and then moves away from the button (while keeping the button pressed). This would lead to the button being shown in pressed (:active) state (imo, currently at writing, i am not sure if i tested this to a full extend). So i used the second script to handle these, while leaving :hover as pseudo class.
...
EDIT: have to try this again

Tested, the problem was i cant get a "pressed" state with pseudo classes (unless i am doing something wrong):

(button should change it's background image to a flattened version when a user clicks on it, but cant do this with pseudo classes).

[ruby ore]

hi, i have a question

I am trying to create a hud using ui toolkit

I created a text label, but I am not sure how to access it in my script

[dark blade]

property.isExpanded is used to open and close serialized property foldout, but lets say i create Foldout for whatever reason, and i want to "bind" it to the property.isExpanded value, what are the option i have?? im thinking to use RegisterValueChangedCallback of Foldout and do

        private void OnFoldoutValueChanged(ChangeEvent<bool> evt, SerializedProperty property)
        {
            Debug.Log(evt.newValue);
        }
``` is this possible??, if so, how i can use it in ```            a.RegisterValueChangedCallback()
``` ? thanks

[dark blade]

i guess there is no "Pressed" state, you have hover, or focus on button, and i believe active are act like focus, so maybe use schedule to change classlist after some delyay

[gusty estuary]

value changed callback is only for IValueChanged implenetation

usually it's field

kind of control

toggle/intfield/floatfield

and etc

[dark blade]

how about

private void OnFoldoutValueChanged(ChangeEvent<bool> evt, SerializedProperty property)
        {
            Debug.Log(evt.newValue);
        }
``` is this possible?, or my only option is

private void OnFoldoutValueChanged(ChangeEvent<bool> evt)
{
property.isExpanded = evt.newValue;
}

[gusty estuary]

just check element

and see for which value it implements that callback

value property

callback is only callback when value changed

that's it

[dark blade]

i guess ill just tell my goal, so i create property drawer, to modify view of each element on my list, then look at the doc https://docs.unity3d.com/Packages/com.unity.ui@1.0/api/UnityEditor.UIElements.PropertyField.html, there s no uss classlist i can override for the foldout, and since iwant new display for my property drawer, BUT i still want a foldout, im thinking of using FOLDOUT class, but how i can connect the value from that foldout, to set state of my seriaplzied property either its expanded or not

or you no what, maybe i'll try IMGUI Container then, somehow its more easier i guess

for foldout