🧰┃ui-toolkit

[gusty estuary]

transitions

same as pseudo states, but with any combination of styles

[gusty vapor]

transitions are pain to use tbh...

especially when you want multiple transitions at the same time

[gusty estuary]

what's so painful about it?

let's say you have your menu disabled via class and enabled via class

you simply declare all styles that rely on those classes

[gusty vapor]

syntax wise, they're too mouthful

[gusty estuary]

and voila

[gusty vapor]

I know

[gusty estuary]

well yeah, syntax is a bit of pain

but I just use UI builder for that

what I lack is a way to test transitions via UI builder too

hopefully I'll be able to write some piece of code for that

[gusty vapor]

I will never touch UIBuilder.. ever 😄

the clunkiest editor tool ever made in Unity

[gusty estuary]

it has a nice UI for style editting

[gusty vapor]

@gusty estuary you need an idea for custom editors?

[gusty estuary]

no

I want to work on games

[gusty vapor]

just to add to your portfolio

[gusty estuary]

and ECS stuff

[gusty vapor]

ah ok

[gusty estuary]

not on UI tooling

[runic shuttle]

How I can read alpha value of background for VisualElement in C#? It always returns 0 when accessing it with 'style.backgroundColor.value.a'
this.background = this.root.Q<VisualElement>("Background"); Debug.Log($"The value is: {this.background.style.backgroundColor.value.a}");

Okay, accessing it through resolvedStyle instead of style seems to work.

[gusty vapor]

or just the opacity

tbh idk why they did it separately.. like color alpha and opacity..

[rough scarab]

Because there's more than one colour in an element

[runic shuttle]

But isn't that different property? Background alpha vs element's opacity

[runic shuttle]

Can you elaborate?

[rough scarab]

Background colour, border colour, text colour. You got it with the element's opacity being a different concept entirely

[gusty vapor]

ah yes, that is correct and makes sense 👍

[gusty vapor]

@gusty estuary resolvedStyle.width returns pixel value right?

[gusty estuary]

I think so

[gusty vapor]

aight, thanks

[gusty vapor]

just adding that opacity will affect children as well while color alpha isn't(obviously, duh 🥹 )

[mellow silo]

Is there a way to preserve an object's children in a USS class? I need to be able to duplicate a VisualElement with several children on-demand for the project I'm working on, and while I could just make a separate USS class for each child, it feels a bit redundant to have 4 separate label classes where the only difference is how the text is aligned.

[gusty estuary]

yeah, uss styles support both children and descendants

[mellow silo]

How do I set it to do that, then? I previously tried making a class out an item with children, but when I spawned in an item with that USS style, the children weren't spawned in with it.

[gusty estuary]

There is a guide in manual on all selector types

[mellow silo]

How do I actually use the selectors? The documentation is pretty helpful on what each one is and what it does, but I can't find where it says how to use them.

[lucid oyster]

How do i detect click outside with ui toolkit?

[serene harbor]

Hi everyone, I've been using Unity 2021.3.21 f1 for developing a small UI based app. And specifically been using the UI builder to do so. I've noticed that the UI builder seems to be extremely buggy, throwing errors when I save, randomly deselecting the visual element I am working on and then blocking all interactions to visual elements until I then click on the containing screen resizing window, and now most recently I have had an issue where I had duplicated one of the visual elements with control + d, to then have it copy a completely different unselected element and place it again in a random place in the hierarchy. For me to then delete the newly added element and have it again delete a completely different thing, making me loose at minimum an hours worth of work. To say I'm annoyed is an understatement, but I do just want to move passed this and redo everything.

That said, I would rather just get these issues sorted at there cause rather then put up with how buggy the builder is. As I said, I'm using 2021.3.21 f1 right now, the patch notes for the 2021.2 -> 5 don't seem to mention anything major to do with UI Toolkit, so I was wondering does 2022 fix any of these issues, or does 2021.5 fix them but not list them.

I'd like to update to a working version that won't break constantly so since a lot of people seem to be using it without issues, I assume it must just be a version issue (since I have literality nothing else in the project that would somehow interfere with the UI Builder) What version is everyone using? And if people have encountered the sort of errors I've mentioned did anyone manage to solve them?

[serene harbor]

I've just updated to 2022.2.19 and at the very least so far I've noticed that work has been done in regards to the UI Builder, since new fields have been added under the Numeric Fields tab. Hoping this will mean that the other issues that 2021.3.21 f1 had are resolved too.

[candid eagle]

Are the UIBuilder > Custom Controls based on the Namespace of the declared control?
The label field that I have is nested inside Common folder, both template and script. But the UIBuilder sorts it without that folder.

[candid eagle]

I have a custom LabelField : BaseField<string>. Because of that, the unity provided label-field with class: .unity-label changes colors on hover. As you can see it's glitchy by default. I have my own global USS on this interface, I was wondering is there a psuedo selector available for me to do something like .unity-label::hover { color: unset }? If so, please tell me how. I couldn't find docs on this.

[candid eagle]

I found the pseudo-selector hover in docs. Tried it, and it works on actual hover, but the glitch remains. It flickers the colors the same way, and that occurs only on mouse move. Anyone else experienced this glitch before?

[gusty estuary]

it changes colors because it has built in styles for hover

just override them with your own

[lusty ember]

is this the place to report my feedback on toolkit docs?😄

[teal belfry]

bonusLabel.style.color = new Color(0.6f, 0.6f, 0.6f);

feels weird that its called color and not TextColor here

[gusty vapor]

also stupid how they tried to mimic css but not allowing us to use hex colors

[gusty vapor]

not really that stupid tbh. It's a valid naming convention imho... Imagine if all types would require their own naming scheme, we would have lots of them 😅

[gusty estuary]

is it same way in css?

[teal belfry]

fr

[gusty estuary]

color equals text color?

[gusty vapor]

yes same thing color: #000080 .. but as you can see.. it can do hex colors.. which is much elegant

and simple

but in css they're scoped so you'd do it like for example

body {
  color: blue;
}

h1 {
  color: green;
}

so anything in that scope will have same colors and what not

[gusty estuary]

man

I really wish they allow uxml to contain styles

hooking uss and uxml is so painful

[gusty vapor]

Well.. it's Unity 😅 .. we just have to accept that

[teal belfry]

me just doing everything in code

"smiles and nods"

[small wigeon]

I'm interested in using Visual Scripting with UI Toolkit, is that something that is done much?

[teal belfry]

Whats Visual Scripting?

[small wigeon]

previously known as Bolt

https://unity.com/features/unity-visual-scripting

[gusty estuary]

doubt

[teal belfry]

didn't even know that was a thing thanks lol

[gusty vapor]

it has built in support for it I think, I saw folks on the forum use unity's vscripting

seems like so https://forum.unity.com/threads/using-visual-scripting-with-ui-toolkit.1319196/

tbh, that's pretty neat

[small wigeon]

it exposes the UI functions, but I can't see any way to hook into events eg a button click

[candid eagle]

Not sure if there is a more explicit way to override them. But I did `.unity-label:hover { color: white }. And although it does work, the mouse will highlight that label white when it goes over it, but the flickering occurs anyway, and as you can see from the screen shot, they flicker even when the mouse is not directly over them!

So that's why I ruled out that it was because of a Psuedo state. Its like something is fighting for that color via script.

[gusty estuary]

you need to override everything

hover, active, focus

built in styles have it's own colors and etc

[candid eagle]

Ah, thanks, I will try that now.

.unity-label:hover:active:focus {
    color: red;
}

Ok, so it's not working. The screen is from the UI Debugger window to verify that indeed my style sheet is loaded, but selector isn't matching. Is there something else I need to specify to global override this?

According to the live debugger, the color flickers in the style, and the psuedo state never goes to anything other than None, unless I actually move pointer over it. And the flickering happens only when I move my mouse around.

[teal belfry]

If I want these corner to be straight and not rounded...is there any way to do that?

aka, cut off the corners

[gusty estuary]

set border radius to 0

[teal belfry]

I want to cut off the corner like this

If I set background to...say a shape

then I can't get the border width how I want (it wont put borders around shapes)

example, turning a square into say, an octogon...aka cut off each corner with a straight line

while still allowing unity to give me a border the size that I want

[gusty estuary]

oh

the easiest solution would be to use texture

as background image

which covers this element

[teal belfry]

if I use a texture as a background imagine

then I can't put a border on the image

[gusty estuary]

you create another element

set it to absolute position

width/height 100%

[gusty vapor]

you can do masking in UIToolkit with SVG

[gusty estuary]

this element must be child

[gusty vapor]

https://forum.unity.com/threads/any-way-to-mask-with-ui-toolkit.1271096/

OR use the vector api to create your fill mask with Odd mode

[teal belfry]

so basically

do really complex stuff

or just use squares

[gusty estuary]

what I suggested is 1 minute job

no extra tools or assets required (except texture)

[teal belfry]

top element is the hexagon

bottom has the border

border isn't on the hexagon

[gusty estuary]

?

I don't get, what do you want with it

[teal belfry]

a border

around the shape

[gusty estuary]

oh

not possible

😅

[teal belfry]

ideally I want to be able to just change my square to be like a hexagon so I don't have to do a bunch of other random crap lol

you would think they would give you more than 1 shape as an option lmao

[gusty estuary]

unless @gusty vapor knows a trick

do you?

[gusty vapor]

man, I'd go with vector api for this, you can do hexagons like very easy

[gusty estuary]

but c'mon

[gusty vapor]

and mask it whatever you want

[gusty estuary]

that needs coding

🤣

and learning

[teal belfry]

I know 0 about apis also lol

[gusty estuary]

besides

it's not about masking

it's about applying border to shape

but I guess, that's not a thing

[gusty vapor]

samething.. you can do what vector graphics do in vector api

[gusty estuary]

are any of your visual tools for it are public? 😅

I can't bother writing shape via code

[gusty vapor]

they're just poc basically... the code is super ugly

I'd publish it once ready

[gusty estuary]

I'd love to make some shapes like

Pause/arrows

with border

should make look so much better vs textures

[gusty vapor]

like literally less than 5 seconds

lmao

one of the thing that worth wasting your time to make your own so it can save your ass in the future

@gusty estuary make your own, vector api is dead easy

[gusty estuary]

I couldn't bother

[teal belfry]

ended up just doing math instead

[gusty estuary]

spending hours of hours on learning how to make vector api

[teal belfry]

paste 2 of the same shape

1st one is all black

2nd is whatever color you actually want

size is 1st-(2xbordersize)

[gusty estuary]

ugly

but if it works it works

[teal belfry]

not sure whatcha mean by ugly 😄

turned out fine to me

[gusty estuary]

implementation

[teal belfry]

ah

yeah that part is stupid

[small wigeon]

alternatively have a mask texture and a border texture that you place on top

[teal belfry]

why when I rename the file

does it still have the old name

[tacit forum]

I'm working on making a UI for my game using the UIToolkit targeting only mobile platforms. I want to move from screen to screen sometimes with information needed for the next to be updated for presentation. Should I have a single UIDocument that I completly add and remove from the root node? Or should I have all the screens loaded but set hidden for unneeded screens? Or should I have multiple UIDocument nodes that I manage?

[hushed notch]

hi ,
I wanna ask about something that is probably related to UI.
if i'm building an FPS game and I wanted to add a healthbar on the screen (I think its called GUI but, not sure.), what is the right approach to it?
do we make a gameobject stuck to the camera all the time and make child transparent images for health bar and other details ?
or is there is a better approach that Im not aware of ?

[trail oasis]

is there no radial fill in ui toolkit

[gusty estuary]

There is with vector api

Tutorial has an examplw

[trail oasis]

which tutorial

[gusty estuary]

in vector api section

[trail oasis]

all im finding is vector3/vector2 api which is obviously not it

oh its experimental

god damn

[gusty estuary]

it's released in 2022.2

[trail oasis]

im on 2022.2 but the docs only show experimental

[gusty estuary]

That's not it

I talk about ui toolkit

[trail oasis]

do you have a link to it then

[gusty estuary]

Link is pinned

[weary jewel]

I haven't done this on UI-Toolkit, but the standard UGUI I would use a Slider component. You can remove the slider handle (so the player can't adjust it) and then set the slider value in code to give a percentage of your total health. There are quite a few guides on how to do this online.

[trail oasis]

oh its all code based

🤢

[trail oasis]

i created this for a custom element:

        UxmlFloatAttributeDescription _degrees = new() { name = "degrees", defaultValue = 0 };
``` curious how do i limit the value of degrees between 0 and 180 ?

[gusty vapor]

do it with vector api will ya 😄

vector api is super simple

[hushed notch]

thank you but that is not what i meant , I mean how do you display the ammo the player has and his hp ? do we use canvas and make it a child to the main camera and display anything we want on it or is there is something else ?

[weary jewel]

A canvas is automatically referenced by the camera so it doesn't need to be a child of it. With Toolkit-UI you add elements to a UIDocument. Using UGUI you can just add UI gameobject/components to the Canvas.

So depending on what UI system you want to use, you either add elements or gameobjects to display things like text, images, etc.

[rancid jolt]

• How do i assign visual elements as children via code? The .parent property is get only

[rough scarab]

Add https://docs.unity3d.com/ScriptReference/UIElements.VisualElement.Add.html

[rancid jolt]

• After i add my elements to a scroll view, they get stretched. This is not the case after i add them to a regular visual element. How can i prevent them from stretching?

[young spade]

Hello

I have a visual element

And when setting its position, it sets it from the top left

I want to set some sort of "anchor" point so it positions it from the middle

on the X axis

Right now it's at that red circle

I want it to be here instead

[static canyon]

you're probably looking for .style.transformOrigin - in this case you would set it to something like new Vector2(0.5, 0)

[young spade]

Thanks

I'm using UI Toolkit

I just set the transform to -50%

and it fixed it

I assumed that the "Pivot" origin was what I was meant to change at first

[teal belfry]

TopSpace.style.height = new StyleLength()
            {
                value = new Length(20, LengthUnit.Percent)
            };```

for how to do percent in code

couldn't find an answer here when I searched lol

[gusty vapor]

you can do a shorthand version of it, vis.style.height = new Length(100, LengthUnit.Percent)

[fossil hare]

Is it possible to have glowing fonts in UI Toolkit?

[gusty estuary]

No

[rancid jolt]

• I have a weird behavior of ui toolkit elements. Using it for runtime ui, and half of input seem to be lost. Whether i type, click, select etc., it always lags. For example here's the result after typing "monkey ate an apple" in an input field

[rancid jolt]

• How do i know that a toggle element has been toggled?

[gusty vapor]

you need the callback or just want to know the state whenever you want?

[trail oasis]

thats not relevant to what i was asking though

i was asking how to put limits on the attributes for a custom control in ui builder

[solid crag]

getting conflicting information about UITK and not sure what the consensus is. Most people (from what I've read) are saying it's not even close to ready while others are saying it's fine, are people using UITK for serious, long-term projects? or is this a novelty that's not fully fleshed out yet so long term projects should hesitate to use it?

I imagine integrating UITK has much more value for projects with multiple people, but what about solo dev?

[small wigeon]

https://docs.unity3d.com/Manual/UI-system-compare.html

It depends on your use case, but anything new should probably use UITK

You can also see https://assetstore.unity.com/packages/essentials/tutorial-projects/ui-toolkit-sample-dragon-crashers-231178 for a comprehensive example project

[solid crag]

oh man thanks dude

[trail oasis]

it has some minor issues like no shadergraph and its confusing how to stop input events in general code when clicking on elements

because they so disconnected from each other now

[rough scarab]

No mask clipping, custom materials/shaders, or easy world-space UI would make it a choice I wouldn't make uninformed. Although I'm very willing to use it myself because I detest UGUI, not having shader support means there's a lot of custom stuff you just cannot do. If you don't plan on that stuff, it's probably fine. If you do, you've just gotta hope your release date is far enough away that it's added, or you've got to do some unreasonable workaround

There's also a bunch of text effects and common properties that are missing

[trail oasis]

yeh getting rid of all those game objects is a major plus for me

[small wigeon]

you can just use UGUI for 3d if you need it

[trail oasis]

they plan to support world space anyway

soon tm

[small wigeon]

can you embed UGUI in UITK at runtime?

[trail oasis]

wdym by embed

[rough scarab]

No

[gusty estuary]

doubt

[trail oasis]

its on the roadmap

[gusty estuary]

Under consideration?

[trail oasis]

they have said that want it feature equal to the old system eventually

[gusty estuary]

But it's under consideration, no?

[trail oasis]

so is vector graphics and shader graph support

but we know those are happening for certain

i wouldn't weight too heavily on the wording of under consideration

[gusty estuary]

I would 😅

there's too much tricky parts about worldspace that would require heavy rewriting of uitk

[trail oasis]

seems to be a transform matrix from screen space to world space

which shader could do fine

i dont see a reason to doubt when they have stated this in the docs

if they not going to do it it would be a problem

[gusty estuary]

They might just introduce something else

[trail oasis]

true

we shall find out in 2025

thankfully i dont need world space ui

i just need ui to follow a player but be in screen space which is easy enough to do now

[gusty estuary]

🤔

I just come up with interesting way they can add world space lol

generating a one huge mesh of layout according to transforms

[dark blade]

so im making extension scripts for unity UI tookit, the idea is, any field are derrive from TextInputBaseField<T> such as IntegerField, FloatField, LongField etc, are affected like this

        public static T SetDelayed<T>(this T target, bool value) where T : TextInputBaseField<T>
        {
            target.isDelayed = value;
            return target;
        }

and use like this

IntegerField sampleInt = new IntegerField().SetDelayed(true);
```, but got this error

Assets\Puzzle Creator\Editor\PuzzleCreatorWindow.cs(57,57): error CS0311: The type 'UnityEngine.UIElements.IntegerField' cannot be used as type parameter 'T' in the generic type or method 'UIElementExtension.SetDelayed<T>(T, bool)'. There is no implicit reference conversion from 'UnityEngine.UIElements.IntegerField' to 'UnityEngine.UIElements.TextInputBaseField<UnityEngine.UIElements.IntegerField>'.

or what can is the correct way, thanks in advanced

[rough scarab]

You have defined T as TextInputBaseField<T>, it's recursive

I don't know if you can make it work without having to write the generic parameters
Ie. public static T SetDelayed<T, TValue>(this T target, bool value) where T : TextInputBaseField<TValue>

Not sure why people are so hell bent on fluent APIs when you can just use the property initialiser:

IntegerField sampleInt = new IntegerField
{
    isDelayed = true
};```

[trail oasis]

suddenly getting an error of no registered factory method

for my custom element script but it was working a mere hour ago

[rough scarab]

what version of Unity are you using?

[trail oasis]

2022.2

all i think i changed was added a namespace to the script

i dont think that would break it though

[rough scarab]

That could break all sorts of things. You may have to restart Unity, if that doesn't work then you could be missing something in UXML

It's a pity, 2023.2.0a11 makes custom elements 100x easier

[trail oasis]

yeh they added attributes i hear

cant wait to start using them

[gusty vapor]

they're definitely working on this
You can see in the VectorImage class, the z-order is working partially there

[rough scarab]

(sorry I forgot to ping you for my answer #🧰┃ui-toolkit message )

[gusty estuary]

but they definetely worked on dots audio either 😅

[rough scarab]

They are two very very different things in two very different states of development

[gusty vapor]

^

[gusty estuary]

I just wanted to mention that when they work on something, doesn't necessarily means they'll finish. Especially considering they didn't publicly announced they will

remember experimental graphs for example

besides, z-order is relevant not only for world space

[gusty vapor]

VR is a thing nowadays, I'm sure it's one of their priority

[trail oasis]

i cant imagine world space is that hard would it not just be a bunch of transformation matrices

surely they have the api for that already from transforms

blit the ui to a RT and place on a quad in world i presume

[rough scarab]

That's the current workaround, but I doubt that's the ultimate solution

[gusty vapor]

also, Unity's roadmaps lots of times are on crack..

[trail oasis]

how so ?

[rough scarab]

They rarely update some roadmaps, some have completed things in them still. They've not been consistent with it in the past

[gusty vapor]

what's under Under Considertion can magically disappear or show up as released

URP's TAA is one good example, I think

[gusty estuary]

wouldn't it make far more sense to have something specific for world space though?

as of now UITK does not need to know anything about camera or game objects

[trail oasis]

depends - if that takes twice as long with little benefit then no

[gusty estuary]

and if you do world space - oh well

[trail oasis]

right now for world space just use ugui

i cant imagine many people use it

[gusty estuary]

I'd rather have a framework that uses same textcore under the hood, but uses mesh/material based approach

[trail oasis]

sure but then you would have to expect a long dev time for it

[gusty estuary]

most people use it

[trail oasis]

by then maybe your game is done

[gusty estuary]

uitk is one of the least popular uis

[trail oasis]

well yeah because its not feature complete

and its quite intimidating to learn

once you delve into writing your own custom stuff

[gusty estuary]

it's implementation is kinda bad too 😅

[trail oasis]

i still can figure out how to get elements to grow vertically based on its child contents

its a pain

[gusty estuary]

auto

[trail oasis]

i tried that but only works if grow =1 but then it grows to full height of parent

[gusty estuary]

grow must be 0 on all siblings

or else it'll take over

grow means fill

and value is what part of it spread among siblings

so if you have 2 elements with 1 grow

they will be equal size

[trail oasis]

yeh i see - i find grow should mean grow based on contents and fill should mean expand based on parent

the naming is annoying

[gusty estuary]

if it's: 1 2 1 - then 25%, 50%, 25%

[gusty estuary]

just needs description tooltips imo

[trail oasis]

that too would be nice

i dont know what shrink does tbh

1 or 0 i see no change

[gusty estuary]

tbh, no idea either 😅

@gusty vapor do you?

[gusty vapor]

no clue either tbh

[lean barn]

https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/

I guess it's based on the CSS like every other properties 😅

[lucid oyster]

Do ui toolkit has box shadow?

[gusty vapor]

@gusty estuary is there any callback for when vis added to parent? (without geometrychanged)

[gusty estuary]

panel attached

[gusty vapor]

haha forgot about that 😅

GeometryChanged can be pain sometimes, it would execute multiple times often

lets see if panel attached won't do that

[gusty vapor]

fantabulous! 👍

will execute once, guaranteed!..

[dark blade]

yeah, thanks for the answer, at the moment i am doing your solution, though i believe we cant make extensions that work for float, int, long field etc, anyway someone did reply from other discord and gave this

 public static TField SetDelayed<TField, T>(this TField target, bool value) where TField : TextInputBaseField<T>
        {
            target.isDelayed = value;
            return target;
        }
``` and still isnt working, because now its give this error: 
```Assets\Puzzle Creator\Editor\PuzzleCreatorWindow.cs(57,57): error CS0411: The type arguments for method 'UIElementExtension.SetDelayed<TField, T>(TField, bool)' cannot be inferred from the usage. Try specifying the type arguments explicitly.

[rough scarab]

That's the same as my answer #🧰┃ui-toolkit message

I don't know if you can make it work without having to write the generic parameters

You have to specify all the types when you call it, .SetDelayed<IntegerField, int>(...

[dark blade]

yeah, i guess my habit make me want create extensions for everything hahaha, i dont know, its just looks easier to read when using chaining

but thanks again

[teal belfry]

@lean barn seems like my VS has a little input lag since using your file(not sure if its related) its just all going a little slower

is the file constantly running in the background 24/7?

[lean barn]

It's a post processor so it should run only when a file update

[teal belfry]

gotcha thanks

bummer though, can't figure out why my VS is running poorly

[lean barn]

Are you sure it's because of my script or it's just a guess?

[teal belfry]

was just a guess

commenting it out didn't help at all sadly

so don't think its an issue with your script 🙂

[worthy beacon]

ig you can add a shadow to a visual-element and a box is that only here, right?

[gusty vapor]

is there a way to turn off pooling in listview?

man if only pooling in listview isn't suck

kinda regret it now

[gusty estuary]

Harmony 🙂

[gusty vapor]

I turned it off 🥹

the power of reflection 👍

...
another little quirk..
Rebuild -> 12-15 ms
RefreshItem (in a loop) -> 1-2ms

[gusty estuary]

I made an algo to refresh only specific item

based off ObservableCollection event params

[gusty vapor]

I'm staying awayt from listview for my future projects until they fix the goddamn broken pooling!

[gusty estuary]

2023 isn't it?

[gusty vapor]

think so yeah

[gusty vapor]

is there any richtag to block text bcgcolor?

only part of the text that's wrapped with tag

[gusty estuary]

🤷‍♂️

[gusty vapor]

I can't seem to find one

[gusty estuary]

is there background color tag?

so you can use transparent

[gusty vapor]

ah I think there is

but it's shitty based on the desc there

why they did it like that tho

why one would want overlay over text?

bigger face

[trail oasis]

what is this white background ? my visual element seems to be larger than it

its a blank uxml with a default visual element

kinda confusing

[serene harbor]

Hi everyone, I was wondering if there was a way to modify the behaviour of the radio buttons to allow them to be toggled off as well as on. I'm hoping to just use them as a kind of on - off toggle for whether a user has permissions for something. But I've noticed that once I turn it on, I can no longer turn it back off. Is there a way to change its behaviour to allow this?

Ah sorry, ignore me. I didn't realise we had a literal toggle element.

[gusty vapor]

make your own custom RadioButton derives from Toggle class (the behavior you're looking for is Toggle, not radioButton)

as to why, you peek at the source yourself https://github.com/needle-mirror/com.unity.ui/blob/510d7618e549150d73c2e053f25400386fe81c8a/Core/Controls/RadioButton.cs#L6

[gusty estuary]

You have sinlings

They might have their own background

[trail oasis]

sinlings?

[gusty estuary]

Siblings

[trail oasis]

wdym by siblings

its only a vertical hierarchy

and i only have one element

[gusty estuary]

Elements on a same level

[trail oasis]

theres only one element though

[gusty estuary]

bruh, sorry

I looked at wrong spot

🤣

[gusty estuary]

I have a feeling element is just bigger than screen

that's why it's culled partially

[trail oasis]

but size is set to auto

¯_(ツ)_/¯

so confusing

[gusty estuary]

doesn't mean that it's enough

if you set your parent to 1/1 px size

auto will not help either

but you should check

if it's that first

[trail oasis]

do you use scale with screen or do you opt for fixed pixel size

[gusty vapor]

this is somewhat.. basic

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

I wonder if it supports iterfaces or individual components as well

like for example for just the Scroller element

ah it does, nice

[gusty estuary]

gotta use % values

sadly they don't work as expected for all styles

ones you can 100% rely on are width, height

text size is defined in px, but it scaled if you specify scaling options in panel settings

[gusty vapor]

yeah, many edge cases wher % would f'd you up

aspect ratio lock it via code is the best way imho

[gusty estuary]

my code with square element broke at some point

and layout was recalculated every frame

😅

(or maybe even recursively?)

GeometryChangedEvent is awful

[gusty vapor]

really tho, use min/max method for locking aspect ratio and schedule it for 1-2 ms is the best way to go

[gusty estuary]

not to worry about

when I got rid of all padding

and set it to 0

[gusty vapor]

here quick googling and someone did it already
https://forum.unity.com/threads/how-to-have-a-visualelement-locked-to-aspect-ratio.1138663/

[gusty estuary]

it all started to behave as expected

🤣

[gusty vapor]

the min/max math there is bloated btw, but if it works then it works

[gusty estuary]

I swear, I want to use some global style that will disable padding for literally everything

[gusty vapor]

ditch out the padding method in that post, use the min/max one

[gusty estuary]

I never used padding

jeez

relax

my code just set width/height

you specify what is main: width or height

and then on geometry change is sets other value to same

so you can specify 100% height and width will be equal to height in pixels

via resolvedstyle

[gusty vapor]

many ways yeah, maths for aspect ratios are quite simple

but use the min/max method if you can, it's much cheaper than anything else in the case of uitk that is

[gusty vapor]

it's often get executed multiple times, which is why it's not preferable if you're counting on it for re-layouting

or just schedule it with schedule.Execute().ExecuteLater()

it will cancel the previous ones if any

[trail oasis]

is this a bug ? suddenly the builder wont show my ui but it shows fine in game window

[gusty estuary]

is console flooded with errors?

[trail oasis]

nope no errors

oh i see why

i set it to display none so the game wont see it until it loads it

thats kinda annoying since i have to remember every time to set it to none before i save

[gusty estuary]

don't set it to none in editor

set it to none in code

when you load your ui

[trail oasis]

in awake ?

[gusty estuary]

If you rely on UIDocument

in OnEnable

if you instantiate yourself

then whenever you do that

[trail oasis]

hm should i derive from ui document to setup all my ui code or use a seperate component 🤔 you got me thinking now

would reduce the number of components on the game object

oh its sealed

of course unity sealed it

[gusty vapor]

it's just a plain container and nothing much in uidoc class 😄 , why you want to do that tho

[trail oasis]

because all my animations do GetComponent<UiDocument> then get the root then query from root. etc if i just derived from ui document i wouldn't have to do that

im not even sure my animation setup is the right way to do it ive been winging it

it works but its a lot of components

this is how im doing it

i got way more things i need to animate too

[rough scarab]

Any reason you're not using transitions?

[gusty vapor]

proly bcos it's .. a.. pain

transitions kinda ughh...

[trail oasis]

well my animation system was generic so i could easily tap into visual elements and i can control delta time and use animation curves in inspector and change the target values super easily in code related to my game code

tbf ive not learnt the transitions stuff

that seems more handy for simple animations with mouse over events but less so about changing game values in real time

[gusty vapor]

yes, but until you need to do multiple transitions at the same where it can be a bit... a .... pain

[trail oasis]

well thats why i have my system i can add callbacks to string animations one after the other or do them all at same time etc

only down side is all the damn monobehaviours for each element i need to animate

[rough scarab]

Makes sense. I have something similar but it's just on one component

(I also never use GetComponent unless it's a dynamic setup)

[trail oasis]

why not ?

[rough scarab]

Because it's unnecessary, wasteful, and sometimes restrictive

[trail oasis]

for me i want it to be restrictive i dont want to accidently link to the wrong ui document component and get logic errors

where as get component expects it in a place or i get a null error

[rough scarab]

That's probably a really difficult mistake to miss if you just used one component

but if you had many, sure

[trail oasis]

i guess i could use assert to check if they have the same gameobject

[gusty vapor]

wrapped your animation and panels in a custom class? as in data pair I mean, then do your stuffs via custom inspector

[trail oasis]

currently my animations are structs which i pass to a manager

so i can update all their delta times in job system

[rough scarab]

Also, remember that visualElement.experimental.animation exists

[trail oasis]

im scared of that word when it comes to unity

experimental

ill read up on it though to see if its less work than my current setup

i want those attributes for custom visual elements asap though so tired of writing so many trait classes

[gusty estuary]

jeez no

Don't think it's possible to override native components anyway

also I suggest to use transitions vs C# animations. Once you get a hang of it - it will be much better to maintain asset based animations vs code refactoring

no need to recompile also

[trail oasis]

i cant control it as much with transitions

i tried using the scheduler thing

[gusty estuary]

what is it you can't control?

I can only think of loops

[trail oasis]

well for one it would mean i have to write it in a visual element script

because thats the only place i have access to schedule

from what i can tell

the other issue is i want to be able to ease a T value

so for example my animation system has this:

_anim.OnFrameUpdate = OnUpdate

which provides an action with a parameter T:

private void OnUpdate(float t) => _errorBx.style.opacity = Mathf.Lerp(_from, _to, t);

unity's doesn't provide that

it just provides a delta time

where as my t value is what is calculated from a custom easing curve

[gusty estuary]

transitions are managed by UITK

you don't need C#

except switching styles

[trail oasis]

yes i do i need callbacks

[gusty estuary]

no?

[trail oasis]

i do need callbacks

[gusty estuary]

I simply do it via adding/removing styles to roots of hierachies

[trail oasis]

i need my game scripts to know when animations are done

why would you change styles

[gusty estuary]

for example:
previousScreen.RemoveStyle("screen-enabled");
currentScreen.AddStyle("screen-enabled");

[gusty estuary]

why?

[trail oasis]

but how do you know what the animation is complete

[gusty estuary]

to trigger animations

[gusty estuary]

I don't really need to

why?

[trail oasis]

because my ui is sync over a network

the ui is shared between players

they need to know when its open or closed

[gusty estuary]

so?

[trail oasis]

so the animations need to be sync'd

[gusty estuary]

why animations are even relevant?

don't you just need to know states?

[trail oasis]

because two players see the animations on the network

theres also sound triggers i need aswell

[gusty estuary]

That still doesn't explain why you need to know when animation ends

if one player changes shared inventory

you simple update data

and UI animates itself

according to new data

[trail oasis]

because for example i need to know when the ui close animation ends so that another player can now open

since close isn't the instant some one stops using it - there is a close animation first

[gusty estuary]

why not allow to just open as soon as animation starts (you triggered it to close)

[trail oasis]

ok suppose you want to fade in and out a panel

now suppose you fade to 60% opacity now the player changes their mind and so closes - to fade back out to 0 - you need to recalculate the fade time from 60% to 0% instead of the usual 100% to 0%

that does not seem easy for unity's setup

that said if you know a good tutorial on writing unity's animation for ui toolkit im all eyes because when i was playing around with it i could not figure out how to do it elegantly

[gusty estuary]

honestly I'd rather do it cyberpunk style (need to press for long enough to close). But if you want ability to stop mid animation, then you do might need to sync duration value between style and C#

[gusty estuary]

basically you need well thought architecture of styles

[trail oasis]

if you want to transition just opacity, then another time both opacity + a colour lerp. do you need to do multiple styles or can you just add two styles ?

[gusty estuary]

so every root of your screen has specific style

all relevant elements have specific styles you can rely on

[trail oasis]

where is a good tutorial to show how to correctly set it up

[gusty estuary]

honestly no idea on tutorial how to set it up, but how it's done I'v seen some

there are very few tutorials on good architecture

[trail oasis]

do you have a script to show how you set it up so i dissect the architecture

[gusty estuary]

so that's not something to ask for

yeah, let me show

[trail oasis]

thanks

[gusty estuary]

So whenever screen (view) gets closed/open it gets specific class attached to root

        public const string EnabledClassName = "mvvmtk-enabled";
        public const string DisabledClassName = "mvvmtk-disabled";

        protected virtual void OnEnable()
        {
            RootVisualElement.AddToClassList(EnabledClassName);
            RootVisualElement.RemoveFromClassList(DisabledClassName);
        }

        protected virtual void OnDisable()
        {
            RootVisualElement.AddToClassList(DisabledClassName);
            RootVisualElement.RemoveFromClassList(EnabledClassName);
        }

I don't edit any style values manually via C#

what it does

is that it changes layout

lemme find styles

.mvvmtk-root, .mvvmtk-root-view-embedded {
    flex-grow: 1;
}

.mvvmtk-root-view-base {
    height: 100%;
    width: 100%;
    position: absolute;
}

.mvvmtk-enabled {
    display: flex;
}

.mvvmtk-disabled {
    display: none;
}

there

so all those styles are applied to root

[trail oasis]

but what if you want a progress bar to animate from 0 to player's health in % which is in game code?

this image does not let me set a "target" value to animate to or a start value to animate from

[gusty estuary]

to add animation of fade in or fade out

I'd do this (couple mins)

[gusty estuary]

progress bar cannot be animated via transitions

it's data binding

same as text field

that shows % as string

you don't animate such thing

[trail oasis]

but i already have it doing that in my current setup

all my animations relate to game data this is what i was saying earlier

so i need to bind it

[gusty estuary]

.mvvmtk-enabled {
    transition-duration: 1s;
}

.mvvmtk-disabled {
    transition-duration: 1s;
}

.mvvmtk-enabled {
    opacity: 1;
}

.mvvmtk-disabled {
    opacity: 0;
}

so fade in and fade in will just require adding those styles

[trail oasis]

ok for fade thats fine

but what about things representing game data

[gusty estuary]

this is out of animations scope

it's more of architecture you use with UI in general

[trail oasis]

right so my approach is the only way then

because my ui represents game data

[gusty estuary]

definetely not only way

I was talking about animations specifically

it's much easier to manage asset animations vs code tweens

as for data binding - it's much more broad topic

I made a whole framework for that if you're interested

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

[trail oasis]

this seems overly complicated and more work

this is my current setup when i provide power the animations kick in

i need a clear way to deal with the change in size when i close the error box

but it works nicely

[gusty estuary]

idk about overly complicated.
But binding 3 values to labels only required this

            <ui:Label text="${Modifier}" class="label-score"/>
            <ui:Label text="${CurrentScore}" class="label-score"/>
            <ui:Label text="${MaxScore}" class="label-score" style="color: rgb(236, 204, 0);"/>

[trail oasis]

its complicated in that its a lot to learn and understand

im not seeing how that markup explains how it animates between two values in game code

[gusty estuary]

you provide data yourself

        [ObservableProperty] private int _currentScore;
        [ObservableProperty] private int _maxScore;
        [ObservableProperty] private string _modifier;

[trail oasis]

sure but thats not animating to and from values

seems to be just setting a value

[gusty estuary]

because it is data binding

not fake animation

[trail oasis]

what does that even mean

nothing in that suggests there is animation going on so what use is that to me

[gusty estuary]

I don't fake loading something, I just set actual value of loading status

[trail oasis]

i dont even know what you mean by fake

if you dont need animations based on game code then i would use the transitions stuff

[gusty estuary]

Here's fake I used (because subscene loading in ECS does not provide % status)

            // Fake loading visuals
            while (loadingVm.LoadingValue < 100f)
            {
                if (loadingVm.LoadingValue + 1f <= 100f)
                {
                    loadingVm.LoadingValue += 1f;
                }
                else
                {
                    loadingVm.LoadingValue = 100f;
                }

                await UniTask.Yield(PlayerLoopTiming.FixedUpdate, _instance.destroyCancellationToken);          }

so once everything loaded I just filled value quickly

to make it look like it actually loaded the last bit

(to avoid instant switching to main menu from loading screen from 50% loading status)

[trail oasis]

you know you can use value = math.min(value+1,100); to avoid all that branching

[gusty estuary]

true

maybe I will, kek

[trail oasis]

sure but thats a fake animation im not faking it mine is linked to actual game data

[gusty estuary]

then you are just setting value to properties

[gusty estuary]

like here

[trail oasis]

no my system for example has operationStatus which ranges from 0 to 100

and that is what makes my radial progress bar move

it matches real time game data as it changes

[gusty estuary]

Then it doesn't need any custom animation

you just set progress value as it goes

[trail oasis]

I do because I want it to move smoothly, as I increase value by 1 if it just sets the bar it jumps in discrete amounts and doesn't look good so I ease to it

[gusty estuary]

If you want to smooth it, then yeah, it's something done via code. But what exactly responsible for that code also matters to keep project structure clean.

[gusty vapor]

apparently, even when we just setting the text of a Label, INotify would search the pool too

SetValueWithoutNotify is god-tier for most cases in uitk tbh

the more I use uitk, the more I found so many weird stuffs in it

[gusty estuary]

TextField is INotifyValueChange<string>

[gusty vapor]

this is just Label tho (TextElement)

[gusty estuary]

😅

[gusty vapor]

my point is, they should not treat is the same as TextField

[gusty estuary]

they treat it as INotifyValueChanged

[gusty vapor]

most use case for it is for static display only

[gusty estuary]

what's your trouble?

[gusty vapor]

yeah, thus I'm making my own label

[gusty estuary]

🤔

Will you make a library of custom elements?

BetterUIElements 🤣

[gusty vapor]

it's a one time thingy that can save my ass big-time in the future for both my prof work or personal projects

[gusty vapor]

Not better, I'm looking for cheap-ness

for big data display

proly you've never worked with inventory system with thousands of elements in it 😄

I'm doing that almost daily at my workplace for custom editors

[gusty estuary]

nah

no such luck yet

[gusty vapor]

do freelance,.. freelancing in gamedev ain't that hard to get, and less competition

[gusty estuary]

I'm looking for job desperately, but since there's no much luck I only get to make small projects to fill my portfolio

[gusty vapor]

as said on another server.. do it smartly
Make editor tooling, it's a shortcut to fill up your portfolios

[gusty estuary]

I actually do so, but with ECS 😅

I make tooling for my own projects and publish it

[gusty vapor]

making games take time... making editor tools, not so much

it's a shortcut

post it on github, get lotta stars, and highlight that in your resume ✨

[gusty estuary]

56 stars on my mvvm toolkit

[gusty vapor]

promote it on Unity /r...post on both Unity3d and Unity2d reddit pages

you'll got lots of traffics from there

[gusty estuary]

🤔

[gusty vapor]

try it

[gusty estuary]

Gotta update docs then

[gusty vapor]

I wish you the best of luck 👍

[gusty estuary]

thanks, but I'll probably ask some more advice in near future 😅

[gusty vapor]

ask it in c# server (as usual), lots of real devs there , well you should know it already at this point 😅

here's hard to talk irl stuff

[gusty vapor]

btw you're using UniTask as part of your mvvm?

[gusty estuary]

heavily

it's a requirment

[gusty vapor]

you're not trying to make it dependency-less ?

UniTask is full of bloats

and making your own is quite trivial

[gusty estuary]

when 2023 is out

I'll just migrate to Awaitable

[gusty vapor]

ah yes.. Awaitable api is the way to go 👍

[gusty vapor]

you can get zero alloc with custom AsyncMethodBuilder .. which is basically what UniTask does

[gusty estuary]

I mean I can, but why?

UniTask is really part of package

[gusty vapor]

so you can include it anywhere in your future projects and be dependency freeeeeeeee...

just an idea

I've mine made since years ago

[gusty estuary]

and rewrite tons of code for no reason 🙂

[gusty vapor]

I made mine way before UniTask existed

[gusty vapor]

if you're planning to publish it on assets store, there's a requirement that you can't tuck in a external package that's already available in assets store as part of bigger package

but if you're not.. then it's ok

jsut hope that UniTask won't be in assets store if you're actually decided to publish it there

[gusty estuary]

I don't include it

you gotta install yourself (openupm/git)

[trail oasis]

i thought style sheets allows animations

yet i cant access my attributes for custom element to make one 🤔

[mellow silo]

Is there a way to force a VisualElement to match the aspect ratio of its image? I have several square UI images for the project I'm working on, but no matter what I try to do (outside of setting the VE's pixel size, which I don't really want to do, since that breaks scaling), I can't manage to get the VE to stick to the 1:1 aspect ratio.

[gusty estuary]

Custom attributes?

Style and control attributes are not same

[trail oasis]

i had an attribute for my custom progress bar

but transitions doesn't list it

so my only other option is to use width

but that wont really work for my radial progress bar

there is no style that works for radial stuff its all custom - but my atributes has a radius and percentage along the circle

im lost, i have this in my code:

    void Load()
    {
        _progressBar.RemoveFromClassList(unload);
        _progressBar.AddToClassList(load);
    }

    void Unload()
    {
        _progressBar.RemoveFromClassList(load);
        _progressBar.AddToClassList(unload);
    }
``` but nothing happens

i have them set on the element 🤔

one is set to 100% width the other 0% width and i have setup transitions

@gusty estuarycan you take a look at my ui document to see if i have it setup correctly?

[gusty estuary]

You don't use transitions for data binding, sir

Progress bar is float field with unique visuals, that's about it

[trail oasis]

no im just testing full width and zero width

it doesnt connect to game data in this case

[gusty estuary]

Show styles then

[trail oasis]

shall i send you the file?

[gusty estuary]

just inline here

[trail oasis]

.operating {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    width: 100%;
}

.notOperating {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    width: 0;
}

[gusty estuary]

Should be good

[trail oasis]

the code:

    string load = "operating";
    string unload = "notOperating";
    void Load()
    {
        _progressBar.RemoveFromClassList(unload);
        _progressBar.AddToClassList(load);
    }

    void Unload()
    {
        _progressBar.RemoveFromClassList(load);
        _progressBar.AddToClassList(unload);
    }

[gusty estuary]

You sure your uxml has that stylesheet?

[gusty estuary]

Also you definetely should look into BEM pattern for naming in css/uss

[trail oasis]

ill worry about that once it works

[gusty estuary]

Yeah

Does it work in uxml?

Ui builder

I mean

If you change classes, does it match what you look for?

[trail oasis]

should it just animate when i drag one on to the element

i dragged a class onto the element and nothing happened

[gusty estuary]

It will animate if you enable preview

[trail oasis]

oh let me check preview

[gusty estuary]

But I just want to know that styles work at all

Is width as expected?

[trail oasis]

nothing happens in preview

no change in width

i must be missing something

[gusty estuary]

flex-grow? 😅

[trail oasis]

thats off

[gusty estuary]

Class order in stylesheet matters btw

Bottom ones have higher priority

[trail oasis]

im setting it in code though

default none are set

i dont get how to set it up correctly its confusing to follow the docs

[gusty estuary]

set disabled as default

Put enabled lower in sheet

Add and remove enabltd

Should work

You also can split animation data

Assign it to shared by both states class

And in enabled disabled only have width

Just ensure both classes work at all

[trail oasis]

still nothing ¯_(ツ)_/¯

[gusty estuary]

Do your classes work? One by one

Is final state of element is what you expect?

[trail oasis]

nothing happens at all

nothing animates in preview

i can send you the document if you want to take a look

[gusty estuary]

I'm on mobile

I need answers

#🧰┃ui-toolkit message

[trail oasis]

define "work"

[gusty estuary]

Is width 0 and 100?

[trail oasis]

like i said no anmiation occurs no matter what class i attach

[gusty estuary]

When you switch between classes

[trail oasis]

yes

[gusty estuary]

Try to use ui builder to create animation class

[gusty estuary]

Just define all properties

[trail oasis]

i am using the ui builder

i dont write the style code thats annoying

[gusty estuary]

I was talking about element

[trail oasis]

not sure i understand what you mean by that

[gusty estuary]

When you add class to element

Does preview of it match?

[trail oasis]

when i drag a class on to my element the width remains 0 when the class is 100%

no the preview does nothing

[gusty estuary]

fix that first

[trail oasis]

i dont even know whats the issue to be able to fix it lol

[gusty estuary]

send uxml

Of element

only element, no need for whole doc

[trail oasis]

with out the class on it or with them on it?

[gusty estuary]

Doesn't matter

I just want to peek into uxml

And see inlined styles

[trail oasis]

<ui:VisualElement name="progress-bar" style="flex-grow: 0; background-color: rgb(52, 140, 64); width: 0; height: 20px; transition-property: width; transition-duration: 1s; transition-timing-function: ease-in-out;" />

[gusty estuary]

You inlined width

Inlined styles override class styles

[trail oasis]

yeah i do everything in the ui builder

[gusty estuary]

that's not what I meant

[trail oasis]

are you saying i need to add progress bar to the style sheet for it to work ?

[gusty estuary]

when you define inlined styles they always take higher priority over classes

[trail oasis]

ok i unset the width from inlined

no change though

[gusty estuary]

Now your styles with width should wotk

[trail oasis]

lol nope

[gusty estuary]

Unset flex too

[trail oasis]

oh its working now

interesting i dont need to have two classes

just removing the class sets it back

[gusty estuary]

That too

But usually

It's better to have default class

Which will define initial state

In case layout has different opinion on what it should be

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

[trail oasis]

so for a custom element using an attribute i can't use transitions then

[gusty estuary]

Only styles can be animated

not attributes

[trail oasis]

ok

hope they can find a way to bind to attributes in future

would make life easier

[gusty estuary]

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

[gusty estuary]

Not sure on that one atm, but I remember seeing something about custom styles

Nvm, can't find anything on it

[gusty vapor]

Stooopid pooling.. your beloved ListView @gusty estuary

do you notice the issue @gusty estuary ?

or do you not

[gusty estuary]

nah

[gusty vapor]

it can't remember the states of each virtual elements

focus on the blue color on the number

will turn off the pooling again... technically it's a scrollview after that 😂

[gusty estuary]

why should it?

or is it part of bindElement delegate?

[gusty vapor]

well it should, I mean, imagine if you have inventory system with custom uiux and you handle all the states yourself, meanwhile the listview you're using will recycle and reset all the states

that would be disaster

[gusty estuary]

why?

you are meant to do all that in bind/unbind callbacks

everything else is better be left as default

(as declared in createItem)

if you modify something outside of those callbacks

then you are using it wrong

[gusty vapor]

it is confirmed as a bug tho,. somebody already reported it

it should work with/without binding properties

[gusty vapor]

and I'm doing just that in the the example

[gusty estuary]

what is?

[gusty vapor]

bind/unbind

[gusty estuary]

where do you change color

[gusty vapor]

it's a mousedown callback

on bind ofcourse

I'm not resetting the color whatsoever in unbind

[gusty estuary]

all right then

You just sounded like you were changing color outside of bind callback

[gusty vapor]

nope.. here lemme turn of the virtualization and see how it work wonders

give me a minute

[gusty vapor]

stripped off pooling.. works flawlessly

if only listview has previousSelected, that would be nice addition

@gusty estuary what unity version you're using?

[gusty estuary]

2022.2

[gusty vapor]

I've never seen this bug previously

can you be more precise... what 2022.2.x ?

[gusty estuary]

always latest

ECS beta tester 😅

[gusty vapor]

oh dayum.. I'm on early build

[gusty vapor]

[gusty estuary]

I don't do much UI

and haven't use list views in a while

[gusty vapor]

man, UITK is the future of Unity.. lots of job posts for it in the near future.. just saying

[gusty estuary]

I hate frontend 👴

[gusty vapor]

me too.. so I'm just making the tools for frontend folks 😂

[lucid oyster]

is background-repeat broken?

[gusty vapor]

define broken

[gusty vapor]

@gusty estuary is Label still has ushort vert limit like in tmp? pretty sure both use TextCore

in the context of making debug console, so there will be lots of text displayed

[gusty estuary]

no idea

idk tbh

I did lorem ipsum size of 50 pages

worked fine

😅

[gusty vapor]

lmao

[trail oasis]

Can we have custom pseudo classes or only the built in ones unity offers like hover etc

[gusty estuary]

they are same thing as just combination of 2 classes

Unity regrets implementing them

so technically you can implement any amount of pseudo classe just by adding them

like AddClass("pickedUpFromInventory")

and then make some style

.inventory__item--gold .pickedUpFromInventory{
//styles
}
.inventory__item .pickedUpFromInventory{
//styles
}

that would be pretty much equal to
.inventory__item:pickedUpFromInventory

[gusty vapor]

@gusty estuary is there a way to prevent clicking items/uielement in a listview?

[gusty estuary]

?

callback, check if selection is valid, if not - set previous

[gusty vapor]

seems no other graceful way of doing this I guess

[mellow silo]

How would I go about extending a UIToolkit element? I want to make a custom VisualElement type that has a parameter that locks the VE's size to a particular aspect ratio. I know that standard things can be done with controls, but I'm not sure how I'd go about making a property that changes the VE's size.

[trail oasis]

you would make a public property

and link it with uxml traits class

unity has an example on the docs using two custom controls

[mellow silo]

Ok. Thanks for the help!

[gusty estuary]

    public class SquareElement : VisualElement
    {
        private MainSide _type;

        public SquareElement()
        {
            RegisterCallback<GeometryChangedEvent>(GeometryChanged);
        }

        private void GeometryChanged(GeometryChangedEvent evt)
        {
            switch (_type)
            {
                case MainSide.Height:
                    style.width = resolvedStyle.height;
                    break;
                case MainSide.Width:
                    style.height = resolvedStyle.width;
                    break;
                default:
                    throw new ArgumentOutOfRangeException();
            }
        }

        public new class UxmlTraits : VisualElement.UxmlTraits
        {
            private readonly UxmlEnumAttributeDescription<MainSide> _side = new()
                { name = "Type" };

            public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
            {
                base.Init(ve, bag, cc);
                ((SquareElement)ve)._type = _side.GetValueFromBag(bag, cc);
            }
        }

        public new class UxmlFactory : UxmlFactory<SquareElement, UxmlTraits> { }

        private enum MainSide
        {
            Width,
            Height,
        }
    }

[mellow silo]

Thank you!

[mellow silo]

Is there a way to get the native size of VisualElement's backgroundImage? I've managed to modify @gusty estuary 's code to set the VE's Size to any user specified ratio, so now I just need to be able to be able to automatically set the ratio to the Background Image's native aspect ratio. I've at least managed to get to what I thought would be the image's size (using style.backgroundImage.value.renderTexture.width), but trying to use that gives me an error saying that the reference isn't set to an object, even when I've already set the background image.

[gusty vapor]

feels like you're doing it wrong

[mellow silo]

How would I be doing it wrong? I want to make sure that a visual element's size is equal to the size of the image it's displaying and that it can scale to be consistent across various screen resolutions without stretching the image. What other approach could I even take? Setting size by pixel count doesn't scale, and size by percent doesn't account for the background image's size.

[gusty vapor]

then you use Image element then set the scaleMode

and set your panel scale mode to adapt your screen on runtime

Image element has it's own unique property for scaling that no other visualElements have

now I remember, @gusty estuary you can steal the locking aspect ratio by copying Image element's ScaleToFit property

peek at the source code I mean, it impl is faster than min/max method too iirc

[mellow silo]

How do you get the Image element? It's not in the standard controls set. Also, I need this to also work for a USS button's image, which the documentation says doesn't work.

[gusty vapor]

it's not in UIBuilder yet, only via code.. not out of experimental just yet, at least in 2022

just instantiate it like you normally would var img = new Image();

then set the scaleMode img.scaleMode = ScaleMode.ScaleToFit;

pretty sure Image now available in the UIBuilder in 2023.x

[mellow silo]

Ok, I can see that working for standard VisualElements. That still doesn't solve the problem for a button, though.

[gusty estuary]

what is your goal even?

[gusty vapor]

wdym? you can make Image a button too if you want

1. Instantiate the Image

2. Set the scaleMode as told

3. RegisterCallback

4. Done.... it's a button now

[gusty estuary]

this is not a good approach

Button has built in .clicked event which handles gamepad navigation too

so it's best to just use Button with backgroundImage

[gusty vapor]

or just use Button set the background as transparent then add Image as it's child

[gusty estuary]

why even use Image lol

[gusty vapor]

He needs the scaling

[gusty estuary]

I feel like it's obsolete after styles implement background

what scaling?

[mellow silo]

For the buttons in particular, I'm using them for an inventory screen.

[gusty vapor]

Image element has ScaleToFit property

[gusty estuary]

ahem

doesn't style has it?

[gusty vapor]

so your texture/sprite/vectorGraph will scale properly

[gusty vapor]

it's different.. it's unique to Image element

which was the dude's requirement as said above

man, I miss the old discord, copy message link

[gusty estuary]

I don't really get, what about it?

[gusty estuary]

still works

#🧰┃ui-toolkit message

[trail oasis]

is there a way to have custom shaped elements

i want hexagons with border changing when hovering

not sure how to do it with just sprites

[gusty vapor]

nothing special with clicked.. the only main difference is that it's pooled event + propagation cancelling, which all those can be done with regular callbacks

it's there for convenience only

[gusty estuary]

it is special

look at it's implementation

it uses custom manipulator

which also hooks to navigation events

ClickEvent does not do that

[gusty vapor]

I did look at the impl

[gusty vapor]

yeah, for this you'd need to register another navevent if you want similar effect

[gusty estuary]

so why do that

when you can use Button

that does it for you already

[gusty vapor]

like for particular case the dude was facing above

[trail oasis]

hm yeh theres no custom shaped element =/

i want hexagons but i cant represent it properly so mouse over is off

[gusty vapor]

Use Vector graph package.. so UItk can do SVGs

[trail oasis]

but mouse over reacts to the rectangle shape of the element

not the precise shape of the vector

[gusty vapor]

are you okay for coding approach?

[trail oasis]

i guess i'll have to use code

hope they can add some kinda simple 2d polygon mesh

[gusty vapor]

nice.. then vector api is your bae 😄

[trail oasis]

i have to my own math to determine if mouse is over?

how you make that 👀

thats impressive

wouldn't mind looking at your code to understand that

[gusty vapor]

UItk has VectorImage class, which is a vector graphic in uitk's world..

so it would work with any visualElement

[trail oasis]

is it well documented

[gusty vapor]

as backgroundImages, sprites etc.. you name it it will work

[gusty vapor]

undocumented sadly... just peek at the source code

quite easy

vector api is nice in uitk.. sadly not lotta people know about this

it's a poorman's version of SkiaSharp in .net .. lmao

[trail oasis]

yeh i cant find much about it in the docs to know it

[gusty vapor]

yeah for undocumented stuffs in Uinty you'd want to peek at the source code

[trail oasis]

where is the source code ? is it on github some where

[gusty vapor]

https://github.com/needle-mirror/com.unity.ui

it's a bit outdated

but should get you going

or you can ask @gusty estuary 😃

[gusty vapor]

you don't want to, it was just a POC, and just a project I did on my weekend... I did all those in 1 day.. so it's super ugly

was just testing what vector api can do

[gusty vapor]

it is not that impressive... Vector api is like.. super easy... you just sent bunch of vector3s then it would draw it for you

like dead easy

[trail oasis]

How does it work in terms of the sprites does it act like a mask so it only shows the texture inside the shape

[gusty vapor]

you can make custom masks with vector api

just set the fillRule to odd

[trail oasis]

Neat

[gusty vapor]

not really, it's the apis that made it easy..

            for (int i = 0; i < paths.Count; i++)
            {
                paint2d.LineTo(paths[i]);
            }

            paint2d.ClosePath();   

to draw things, well, just that... like literally

😄

paths there is your screen space coordinates

@gusty estuary do you know any portable json lib that I can use in Unity?

[gusty estuary]

messagepack?

https://github.com/neuecc/Utf8Json

or this

[gusty vapor]

have you ever used the nugget package of it? I'm planning to tuck in the dlls directly instead

[gusty estuary]

no

I did use dlls directly too

but there's also openupm

[trail oasis]

Unfortunately, we took the difficult decision to pause all development activities around the Vector Graphics package. Even though we see the value of providing scalable vector graphics, we decided to give priority to other projects, and hope to consider resuming development in the future.

Nooo

[gusty vapor]

where did you get that from?

[trail oasis]

In the Vector Graphics forum thread

[gusty vapor]

btw.. that's for vector graphic package not UITk one

[trail oasis]

It's in the ui toolkit subforum

[gusty vapor]

link pls

[gusty estuary]

it's probably about SVG package

[gusty vapor]

^

[trail oasis]

https://forum.unity.com/threads/vector-graphics-preview-package.529845/page-26#post-8309307

[gusty vapor]

yeah thought so too

[gusty vapor]

did it cause problems when upgrading to other unity versions?