Extending the Unity Editor with custom tools using UI Toolkit | Unite 2022
Вставка
- Опубліковано 21 лип 2024
- Like building your own UI tools? Here we go step by step with the UI Builder to quickly create an Inspector for real-time Play mode debug data visualization. Then we’ll enhance it using USS Transitions and the Vector API, migrate it to a custom Editor window, and finally port it to the Player/Runtime.
Learn more about the UI Toolkit: on.unity.com/3V3P2JN
00:00 - Introduction
02:30 - Custom Property Drawers with Nested Inspectors
08:52 - Decorate with Property Attributes
10:07 - Custom Inspectors
14:02 - UI Documents (UXML)
15:22 - UI Builder for Editor Extension Authoring
19:22 - UI Builder Visual Authoring Workflows
22:33 - Painter2D and Custom UI Shapes (PieChart)
26:02 - Rich Text (with Hyperlinks)
26:58 - StyleSheets (USS)
27:58 - Editor Standard USS Variables (Light/Dark Theme Support)
29:55 - UI Toolkit Samples Window
31:25 - ListView (Virtualized List)
32:50 - Multi Column ListView
38:48 - Runtime Theme Used In Editor
39:45 - USS Transitions on Hover
40:10 - USS Transform Styles (scale/position/rotate)
41:08 - Custom Editor Windows
43:01 - Custom Inspector in Runtime (Player)
44:45 - UI Builder In-Context Sub-Document Workflow
45:33 - New UI Toolkit Data Bindings (Runtime and Editor) in Unity 2023 - Ігри
Programming this still feels like chaos. They could be inspired by simpler implementations like Odin does. However,the big advantage is that you don't have to wait for the compilation to see the result, this really is very useful.
This looks great, especially the new binding sneak peak. Really looks like a lot of this was inspired by WPF bindings.
This looks fantastic! I'm looking forward to playing with and learning all of this. :)
being able to create elements like the pie Chart in the editor is really an interesting feature, I didn't know it was possible x)
Thanks for pointing out new stuff related to UI Toolkit!
Best presentation this Unite! Thanks a lot for the deep dive into the improvements and the great flow through the different options. The changes are very impressive. I think for me UI Toolkit will become the go-to implementation for Editor UI, for Runtime UI I'm still a bit skeptical, if this will work for UI artists and how the connection to "normal" GameObjects is done, since sometimes you will need them (e.g. 3D objects, Particles). Looking forward to a streamlined solution for that as well ♥
I just started working with it and have noted two issues I have found so far for runtime. The text appears blurry in runtime but great in the UI Builder. And UI Builder wasn't able to find the MultiColumnListView control code. Other than that, I love it as I come from a web application designer/developer and this is very similar.
Honestly, you should do more videos like this because even that I'm working with the system for like 2 years now professionally (as a tool programmer hired by studios) I didn't know half the features you were showing there. And not like I didn't try, but the general documentation is dogshit compared to this one video. Most of my UI Toolkit knowledge comes from colleagues and forums and stuff like that. It's like in the '90s ffs.
Is anyone else having their mind blown by the serializable object reference on the script asset at 16:35? I had no idea you could even do that!
Yes, me too, facepalm moment for me. I have had worked around things like putting an asset inside resources with the a default naming convention and whatnot… this will definitely stick on the back of my brain until a similar use case comes in
It looks great, but we need world space UI also for UIToolkit, otherwise, if your project requires it, you are forced to use 2 UI systems together with 2 UI event systems, etc.
World space should be a high priority but from what I can tell from the forums it looks like it's in the backlog. That's really the main thing holding me back from using it.
Any feature will take a long time rlly. I love UI Toolkit but the development goes so slow.
With this dev velocity it'll be 2025 before it can finally replace uGUI.
UI Toolkit started off as Visual Elements back in 2017.
UI data binding, Worldspace UI, Additional UI style properties, UI Masking and Grid are the things I am waiting for. It'll take years... sadly
Same
I know we've said UI Toolkit is not yet officially recommended for World Space UI, but it's worth looking at what it does support.
For 2D UI that follows 3D objects in the 3D world, this does work just fine. There's even convenience APIs to make the UI Toolkit VisualElements follow a 3D object in screen space.
For 3D UI that is actually in the 3D world (like a monitor touch screen on a desk), this is also possible with UI Toolkit today. It relies on RenderTextures on quads. The main reason we haven't claimed full parity with uGUI is because this RenderTexture approach doesn't yet have a very nice workflow or performance profile, but depending on your needs, it can be enough.
same
This video has really helped me elevate my editor, thank you!
Excellent! Thank you for doing this talk!
Excellent video. Thanks for the insight
How does something like this interact, potentially, with Odin?
Awesome video, thanks for the great content!
This video is so useful well done!
Great talk with quality content!
I've been using UIToolkit a lot for general UI< but we really need better Sprite support and features, most thing that UGUI did have to be coded manually, like loading multi-sprite resources properly or fills.
Great video thank you.
If I make a tool for the Unity Asset Store, can someone use this inspector with an older version of Unity?
Ex 2021.3?
Was the multi column list view, the health part (and the starting one at that) was already working as a slider? Or needs to be callback registered too? I ask because of the virtualized situation that it needs to bind to a re-used one, so I’m guessing for that to work it needs four or five parts?
- The creation of it for new ones when no more left are int he pool (the make item part)
- The bind everytime one item comes into view and a cell is reuse (bindItem)
- Register a callback for that new item? Or is it done by the bind itself or around inside there?
- Deregister the callback? Before unbinding happens?
- Unbind calls.
Then there’s also the callback itself, how and which item a changing value targets.
It’s possible that it’s automatic but just wanted to know how it goes about it.
Great talk, have been avoiding UI Toolkit for too long now.
From what Unity version start to use UIToolkit as default to draw the editor inspector ?
Very nice video, I did not know so many things and it is a great demonstration of what we can do with the UI Toolkit.
I just have one thing to say about the creation of our own VisualElement. You made a example with the PieChart which do not need a UI Document but how does it work if I need one.
For instance, I am doing a visual element with an object field and a toggle to display in a visual element the inspector of the object in the object field. To do so, I have made a UI document with an object field, a toggle and a visual element. Now I writing the C# class inherit from VisualElement or BindableElement (I don't know cause I did not find any information about the difference since both have a binding path in their inspector) and trying to figure out how to set up everything to use the UI Builder. To, when I put the name of my variable in the binding path of my visual element, it is going to be assign to the object field ...
I did't find very useful information of the Unity documation neither on internet and forum, may be you can help me.
Ok great but what about worldspace or 3D ui ? Needed for VR. This has already been around for like 2 year. Thanks
I am working with UI Toolkit currently and found the text is blurry in runtime but not in the UI Builder for my scenario.
I've been working with the UI Toolkit recently and, to workaround with the data binds at runtime, i made two Manipulators, one for one-way bind to simple value types, and another for two-way bind with NetworkVariables.
When the new binding system comes out, will this be able to bind NetworkVariables?
Great job by the way :)
The new bindings system will work with anything that has a well-defined getter and setter. By default, this will include regular C# properties with more supported features later, but with the addition of user-defined custom bindings, you'll be able to define your own getter/setter.
I would love a full TreeView RunTime Tutorial, with everything, POCOs of Different Types Nested in each other , with drag and drop and styles where Fonts can be changed and columns heighs, widths, header sizes etc
Can we use Runtime Shader Materials and Particle system in UI Toolkit ? If not, any tentative details on when this might become possible ?
Not directly. We still have an unmodifiable Uber Shader that we use for UI Toolkit. Custom shaders will be a focus for us in 2024.
Great stuff! Can we find the project files somewhere?
if we talk about custom inspector for ScriptableObjects, there are huge problems and another problem: you can't create custom PropertyDrawer and sign to it a uiDocument. If anyone knowing something about it, will much appreciate
Covering Editor Windows with a Programmer UI artist set up also would be lovely. One of our biggest struggles is combattign a programmer off of Edtior scripting and into a Programmer +Desinger co op role. except for the fact that UI Toolkit Editor windows, seem way more hassle compared to traidtional methods, and that UItoolkit/builder, is much easier to impliment
Kudos for more coverage though,
Hello, i rebuilt the shown UI toolkit examples in one of my projects. I use Unity 2022.2.0b16 beta, but whenever I start the playmode the handmade inspector isn't shown anymore. Can anyone help?
Is there a Binding walkthrough/tutorial? I'm starting from scratch with UI Toolkit and this has me pretty stumped.
Hello ) i still have issue on my current project - dropdown field with search field/option, how i can make it?
It'd be nice if there was an overload of CreatePropertyGUI that received a label as a parameter. Currently, it's a bit painful to get the label assigned to the PropertyField that contains the custom drawer. It's one thing that's missing to have feature parity with IMGUI.
This addition actually landed recently in 2023.1. Not sure if it will be backported or how far, but it's coming.
@@uDamian Thanks! That will be very nice.
Currently, it's still possible to get the label from the PropertyField, but it's kind of complex, specially when the label needs to be propagated through multiple nested PropertyFields. Right now, I return an empty root from CreatePropertyGUI, then, on its first AttachToPanelEvent, I add and bind the actual content of the PropertyDrawer.
I still hope it can be backported, but, even if it can't, it will make some things a lot simpler in the long run.
Does anyone know how I can get the button (for example, his restart button) to make a function call?
more tools. neat
how shoud be class TankManger decorated to appear in property Editor, KISS is not working (
And there's no code of tankManager in video.
upd - just mark it as [Serializable]
Besides MultiColumnListView, are there other hidden custom components??
I got stuck with the inspector showing GUI not implemented. Make sure you're trying this in unity version 2022.2 or above if you're trying to put these in the builtin inspector, otherwise it will be incompatible due to lmgui... I know he says it in the video but easily missed by me
cool !
God bless you!
50% of all devs will not look past those hard coded strings around 5:55
Happy Unity is finally moving to markup for UI tho 👍
Could you also show where to change the EventSystems onclick function from leftclick to rightclick.
I see that you can click your UI buttons, not touching your game, but I cant. I have googled, asked, checked every UA-cam … I have done what they told me to do but I still click the game instead of the buttons. Or … I click them both but the game is winning, not the buttons.
Is there a really good UA-cam for that???
I Think I have to change onclick eventsystem to rightclick and gameclicker to leftclicking ...
You guys NEED to find a way to make property lookups not work on strings, but directly on the fields/properties of the target type. How is this supposed to survive even something as simple as a rename refactor? I dunno, do something with the Roslyn or something!
You’d think they’d be at least using nameof
@Skylar nameof doesn't work with private fields outside of their class, which tend to be most of the serialized fields. Those fields are rarely renamed anyway, as they'd loose their serialized data when renamed.
@@MaharbaRacsoChannel well if you are afraid of losing your data you can always use the "FormerlySerializedAs" attribute, tho I don't know how it would work out with these bindings
@@kebrus Right, you can do that. It requires some attention, though, as does remembering to change the binding paths too.
My own solution is as follows:
In the script that contains the private fields, define an additional const string of the nameof of the field. Then an editor script can access the name of a private variable to get the serialized properties.
How is there not a standard visual element for showing images?
All of your tools are always so frustratingly under baked and unfinished. Finding tutorials and documentation for things that feel like they should be super easy and common use cases are impossible to find.
I don't remember it being this bad back in unity 5.0 days.
Nice. I wonder if this will make Odin obsolete, or more powerful.
Odin helps to create simple/fairly complex inspector UI using only attributes without creating an extra file to author the UI. So far, I don't see how UIToolkit can replicate this functionality that I often use, like creating a button for debugging only to remove it seconds later, or to show variables if a bool variable is set to true. Why bother to create an extra file for something that simple?
One thing that UIToolkit is very good tho, it has stylesheets that can be copied around. Also, like in the video, it can help create images and graphs. UIToolkit can be very good for creating a complex inspector, but for a general use, I don't think it's convenience enough.
Well, who knows....
@@raymk Very true, my thinking was they may be able to use it to empower their own toolset, or it may empower competitors (perhaps even unity) to compete in the same space
It should make it more powerful in the long run. The beaty of all those Attributes that generate UI is that Odin can change the underlying implementation from IMGUI to UI Toolkit and users won't have to change any code on their side.
As I mentioned in the video, all built-in PropertyAttributes (ie. Range) have been re-implemented in UI Toolkit. UI Toolkit supports CustomPropertyDrawers just like IMGUI. The same can be done with all of Odin's PropertyAttributes.
Where is part 1 of this?
There are no other parts. Where do you see a part 1 mentioned?
Great video, but at least give us the repo to check the code.... please....
У меня тоже подходит это подходит для телефонов для ПК
Great video, make a tutorial teaching how to make a car walk in Unity...
I have to say that one thing I really did NOT wish for in all the years I was working with Unity is to have css layouts for the editor. I don't see how this makes anything better on the user side. MAYBE for non-programmers, but I feel like even for them there would probably be better solutions. But IMGUI is honestly really good for editor programming. I really hope that Unity doesn't get rid of IMGUI, that would be a real gut-punch.
CSS-like stuff is really useful to apply styles to multiple elements at once, and in general to declaratively implement transitions and variations of style. I guess using a technology which many people are also already familiar with can be an advantage to shorten learning time.
In general, it's all thought to make development cycles quicker for the developers, not as something new or better for the user (although quicker development usually translates to a better final product for the user).
@@MattiaBelletti Sure, but as someone who doesn't work in a large company which needs to enable a lot of non-programmers to create content, and who does a lot of tools programming, for me IMGUI is really great. I don't need to do a lot of styling, that's about 1% of what I do. Making me manage 3 files every time I work on an editor window just makes everything more annoying and slower for 99% of my daily use-cases. I'm not saying no one should use this new workflow. Just that I hope Unity doesn't think IMGUI is now obsolete and they get rid of it. Because for me it works really well
@@Infernovogel I'm sure your use case is better served by imgui. I was responding to a general phrase like "i don't see how this makes anything better on the user side".
Have you tried using only the C# parts of UI Toolkit?
this is way more powerful and straight forward.
more tools to make tools when you make tools
Yeah, I also make tools to make tools in a tool to make tools.
An explanation for the meaning of each "tool" in the sentence above:
(an editor to help edit my other editor window), (my other editor window), (Unity), (the software I'm making using Unity)
Looks like totally chaos to me. A lot of magic strings, manually editing xml and css, property names inside strings in code. Accessing element of array with string concatenation of array name, brackets and index looks like a joke in game code. And yes, you can not refactor this code.
second..!
awful system.
My brother in Christ, why are you still using Hungarian naming, like Java savages? 😔
Does the MultiColumnListview work on the latest LTS for runtime UI? I got these errors:
Element 'UnityEngine.UIElements.MultiColumnListView' has no registered factory method.
UnityEditor.AssetPostprocessingInternal:PostprocessAllAssets (string[],string[],string[],string[],string[],bool)
Element 'UnityEngine.UIElements.Column' has no registered factory method.
UnityEditor.AssetPostprocessingInternal:PostprocessAllAssets (string[],string[],string[],string[],string[],bool)
...
MultiColumnListView was introduced in 2022.1. So, not available in 2021.3 LTS.
This is missing an important feature: Custom 3D view inside a custom window.
Yep, that's still something we're missing as a native UI Toolkit control. Using an embedded IMGUI control inside an IMGUIContainer does still work.
𝔭𝔯𝔬𝔪𝔬𝔰𝔪 😋