Official UIElements developer guide

The page on uQuery is painfully sparse. Is there more complete documentation with examples anywhere? At the very least there should be examples of how to query objects with different selectors.

 

I'd love to see links to basic examples in that page. How to create a custom inspector using UIElements, how to write an editor window, etc.

I've seen such examples earlier, but I can't quite remember where they are, so having links in the developer guide would be nice.

As for now, the developer guide has a ton of information about the parts of the system (visual tree, layout engine, etc.), but no context for any of those things.

 

i think you guys should have a look at this github. https://github.com/rocktavious/UIEX i

 

Do we have a roadmap for the game UI phase?

 

@antoine-unity Hi, could you have a look at this thread, please? https://forum.unity.com/threads/nod...nity-built-in-node-graph.657670/#post-4403200

 

Okay, so I came back to this now half a year after I wrote my last post. I've recently upgraded an old project to 2019.2, and I was looking at a custom editor for a MonoBehaviour that was behaving kinda weirdly.

I figured "you know what, why don't I try to rebuild it in UI Elements? It's the new thing, and it looks pretty good". So I googled, and the first hit was the developer guide.

Now, my goal when opening that page was to figure out how I go about writing a custom editor using UI elements. And there's nothing there. There's all this information about the parts of the system and how they work, but not how you do anything. I think there's some very good reasons to put a hello world very early in the documentation. There are two main things people will use UI elements for; custom editors and editor windows. Those things should be the entry point.

In other words, the two first links on the developer guide should be "this is how you write a custom editor" and "this is how you write an editor window". That's the most important things, and the natural way to start out understanding the system.

 

Those are good points. Meanwhile you can look at these videos

And this one https://github.com/Unity-Technologies/UIElementsExamples , I haven't checked them out yet but I keep those tabs open for when I have the time.

 

This is pretty much my experience too.

 

does anybody know anything about that UI Builder they mentioned in the last roadmap video? does it work to create UI for both editor tools and for in-game UI? does it allow us to replace UGUI with it?

 

I hope this happens soon, I'm eager to try it, I realize that after 5 years of using UGUI there are things that are simple not scalable, hard to implement in a good battle-proven architecture like MVC or MVVM or just by design hard to accomplish, like having some rectTransform be anchored to something different than its parent in the hierarchy, or like having a different render order than the order given by the hierarchy, those things are crucial to some UI designs, but since HTML+CSS is used along the entire industry this will be a change for good probably.

 

I can't bring a detailed repro project right now, but for example one difficulty that I usually encounter is when you want a background Image follow the preferred size of a TextMeshProUGUI text, you could do this ideally by adding a ContentSizeFitter to the TMP object, now it's rect will change its size dynamically to fit the entire text, now I could add an Image as child of the text object and then set the anchors to fit the parent rect, the problem now is that the image will render in front of the text, if I could simple give it a different sort order this would be an easy thing to do, even if I could put the Image as a sibling of the text, but somehow have it's rectTransform think it's parent is the text (like how we can do with the recently added ParentConstraint for gameObjects) this problem could be easily solved. But I can't see an easy way with the current system other than making a custom script that adjusts sizes constantly, maybe there is a way if I learn how the layout system works to implement some ILayoutElement or something like that, but that would require knowledge and time, and I tried it before but I'm still a bit helpless about the UGUI layout system, I didn't find much detailed documentation, the devil is on the details and is not as straight forward as, say, how I solved this problem with NGUI in the old days.

other examples are, when you want at runtime to bring something to the front, like if you have multiple panel windows opened, since the hierarchy defines the sorting order then you have to mess with child Indexes and resort childrens to move something to front, or mess around with Canvas objects which are not ideal since they add a layer of additional features and complexity not needed for the case, also I think they break batching.

I'm not saying UGUI is bad or too complex, I've been using it for the last 5 years and I can manage to do lots of interesting things with it, I just think that HTML + CSS + jquery (aka UXML + USS + uquery) are nowadays industry standards to create UI for all kinds of platforms, and bringing them to Unity is a good move, I love the idea of developing interfaces in retained mode, and having my logic separated from styles and presentation, way more MVVM-friendly and adapted to industry standard patterns! I also hope UGUI doesn't go anywhere for the foreseeable future!

 

Hello, I am trying to prepare for the runtime version of UI Elements by only using the stuff in UnityEngine.

I then discovered that there is no dropdown component to use, so I figured I create one myself, like I did for my CSS/Javascript with absolute position and overlay.

So far so good.

But then I noticed that there is no z-index support in USS, which makes it much harder to implement such overlays.

Any standard solution for this? I noticed that there is a BringToFront() etc. but that doesn't really work when there are other components.
For example, if you move the overlay outside its hierarchy, the absolute position property will look at another parent and position relative that and the simple specification of positioning within the USS will have to be scripted instead.


The best solution I have come up with so far is to have all the overlays last in the hierarchy and position them absolute by checking the absolute position of the dropdown. This is fine but a z-index would be much cleaner.

 

https://forum.unity.com/threads/typ...pup-dropdown-screen-space-positioning.764504/

See my post about it and comment any thoughts you may have, I see this as a problem overall.

 

UIElementsEditorUtility appears to be missing from the docs. This is useful if you are going to change the mouse cursor through code.

 

Any word on when we might see some updated documentation? Trying to get up to speed on this system but finding it pretty difficult to get started due to lack of documentation or Unity Learn tutorials

 

I have a question regarding the UIBuilder, as a developer is writing the plain XML files still fully supported, and taken into consideration when you are developing the standards?

My background is in frontend webdevelopment, where nobody uses a visual editor for HTML. Although i see some value in the UI builder for my colleages, i dont plan on using it myself very much and prefer to write plain XML in my text editor. Though when i look at the runtime example the code is quite convoluted with namespaces etc.

 

I havent really read into it completely, but when i read the UXML from the manual here it is quite different, and readable. Much more like HTML, and easily human-writable.

Thanks for your response, but i still dont know if writing it manually is a scenario you want to support or not.

 

Awesome, thats great to hear! It makes a lot of sense that generated code is less readable than handwritten.

Cant wait to use this in runtime!

 

I think something that would be really nice would be if the UIElements debugger had a USS dump section similar to the UXML dump section. The values that are edited get added to a generated USS dump section that I can just copy the changes I like and paste them into my file. And obviously as others were saying more "how to docs".Especially on big picture stuff. For example design strategies. I was looking over how shadergraph was implemented using UIElements and it looked awesome although it was very hard to navigate due to Visual Studio not indexing that assembly. Which meant I couldn't jump to definitions. Plus it seemed to be using some sort of variation of a MVC pattern but not a one to one implementation. So I would be interested in the most efficient organizational strategies you all used.

 

I would just like to mention that there is nothing in the documentation about how to create a UI which consists of an array of objects which comes from a member variable in a Scriptable object using the XML-based approach. It is also hard to know what you can type in with the XML so I avoided it entirely. Perhaps the UI builder is meant to address that part of it. I will definitely give the latest UI Builder a try if I have to make a new UI window in the future.

 

Hi!

I was recommended to ask about this here.

I'm trying to get an EnumField style dropdown to display custom strings that represent the actual enum values, and either I really suck (which is entirely possible, I've got no prior experience working with Property Drawers, as was suggested for me to try and work around this) or there doesn't seem to be a straightforward way of achieving this?

If good documentation or a more straightforward way of doing this is coming, please let me know, otherwise feel free to slap me on the wrist for being low-effort/unskilled and not working harder on this

Many thanks

 

Sorry!

 

Hi,

How can I change the position of the VisualTree, i.e. the panel itself, in realtime/in code? I am trying to render a uxml anchored to a 3D object in runtime.

Also, I successfully bind a serialized object/property to a label UIElement, when the property value changes the text attribute changes successfully (I log the new value of the attribute) but the UI does not render this change, what am I missing? Do I need to manually refresh the UI?

Thank you.

 

Thank you for your reply and support.

So I can actually position it in the world if I transform the values in the transform. Excellent!

Release of what the runtime PanelRenderer or the UIElements package itself?

This is the first time I read this! It is not mentioned anywhere!!! Based on what you are saying I can not use binding at all in runtime and the only way to go is to use either Schedulers or change events?

Thanks....

 

How can I listen to changes in a PropertyField?

 

How flexible is this UI Toolkit in terms of dynamic content generation ? My game is pretty "PopUp" heavy... it focuses mobiles and is server based, this means that everytime a player clicks on a enemy e.g. the server sends a package with the popup, title and possible interactions ( buttons ) to the client where we construct the popup by using the old GameObject driven system.

Im not using any common UI models, so any popup is self driven and contains the logic it requires for inserting title, buttons... Completly based on components attached to the popup gameobject and the inserted title, buttons...

Is this possible with the upcoming UI-Toolkit ? Do we need manager classes for controlling the logic of those VisualElements ? Are they self driven ? Are we able to define logic in custom elements ? And can we define custom elements that act as logic classes which dont render anything ( Store inputs... sorting of elements, choosing insertation location of inserted elements ) ?

 

It's very flexible. You can inherit from VisualElement and stick whatever logic and data you want to in there, it'll still be renderable by the UI.

 

Is this tech useful for simple responsive UI layout and simpler to use than regular unity ui, and how to do that?

 

I've seen that ages ago but the thing is way more complex that just watching a video.

 

So if I have no idea where to start you can't help me?

Tried getting the same windows than in the video but I can't find anything, what asset should I create etc... the video kinda go directly into something you're supposed to know...

 

The point of that video eludes me, sorry.

And the tutorial seems outdated and doesn't work: I get a bunch of errors at the styles part. Maybe it has to do with the fact I had to delete the template data when I created the files through the menu (UIToolkit).