Unity UI Toolkit in 5 Minutes
Вставка
- Опубліковано 30 вер 2022
- See how Unity's new UI System UI Toolkit works in a nutshell.
If you want to see more videos on UI Toolkit check out our channel:
/ @madcattutorials2422
Udemy Course:
www.udemy.com/course/modern-u... - Ігри
Wow, this is the best five minutes well spent on UI Toolkit. I liked and subscribed
You have done more for me in a five minute tutorial than the documentation did in five weeks. Thank you dearly.
Thank you! This was exactly what I was looking for; A quick overview in a short timeframe going over the key features instead of an in-depth tutorial, we already have plenty of those.
I learn much more from small tutorials like this and then filling in the gaps with my own research. Please continue making videos like this
Very easy to follow, nice choice of music. Pleasing but not distracting. Very nicely edited. This is an awesome tutorial and you sold me on this feature!
Glad you liked it!
Just starting out with the UIToolkit so keep the content coming!
Great introduction to UI Toolkit! This is a better tutorial than the official Unity one. You really captured the essential parts of UI Toolkit and delivered it in a digestable way.
God damnit.. why can't all tutorials be like this. Straight to the point.
Plz don't watch my other videos to keep the good impression 😉
Thanks for the quick tutorial.
The idea of detaching the UI from the Game Scene is really awesome and works fine for overlay UI's. I've worked on games with thousand of UI GameObjects and it never felt optimal to deal with UI that way, a lot of times the Canvas system marks unchanged objects as dirty just because of how it is positioned in the Hierarchy or because another random UI element changed, resulting in new batches every frame, so this new system might help avoiding to worry about the UI into that level of optimization.
Also, since this new system is similar to what UI/UX Artist are used, it will help bring them to build the UI directly in Unity instead of having to create in Figma or Adobe XD and then passing to some engineer to put it into the engine.
Wow! concise and perfect to understand how to begin with UI toolkit! Thanks
I was just scrolling through the UI Toolkit docs and I couldn't even understand what they were talking about. They don't show screenshots, so I didn't even know that there was an editor. Thanks to this video, I now see how powerful and flexible this is going to be.
Somehow this new feature slipped past me. I wish I knew about it three weeks ago as I would have tried this on my latest project at work.
I’m glad UA-cam recommended this, liked and subscribed, keep it up :)
On point and concise. Thanks for the video.
Thank you for the video. Man! This is a big leap from the last unity version I used 2019. Now I actually feel like making a UI instead of dying like before!
Excellent intro to UI Toolkit. Thanks!
Wow, you made me understand the whole think in 6 minutes! Thanks! :)
Learned more here in 5 minutes than with the UnityManual whose workflow is obviously broken. Thanks a ton!
Oh, finaly some usable UI system for Unity. Thanks!
I hate doing UI, especially for Unity games because its so clunky ... Totally forgot there is a new way of doing it and your video was the best start for me to see all the benifits and easy toolchain! Thank you
very good feature and you covered in 5 mins well done
Thank you! This was a quick but valuable tutorial :)
That makes a lot of sense. Helpful :)
Thank you for explaining this thoroughly!
Fantastic!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Hoping from more content from you, quality is top notch
Thank You
Loved this overview! Ty.
What an excellent tutorial! Thank you!
very simple explanation, thank you
The point of reusability is something that always made me hesitate to get started with UI in Unity.
Depending on the kind of game you are making you need some UI for prototyping, some games are very UI-Heavy and the idea of fiddling around with the old system was really offputting to me, especially thinking about having to throw away large chunks of that work when changes are made.
Thanks a ton!
This is an excellent video! Thank you!
Subscribed for the tutorials. Don't care if it takes your months to upload!
God, I'm glad I found your video that helped me
great and concise tutorial
Wonderful Video. Very nicely explained. Subscribed.
hanks lot Sir.. You helping us..
I have your Udemy course. I found this video because I was looking for how to actually get the UI into the game. I think you should put this video at the very beginning of your udemy course. Your udemy course gives SO MUCH detailed information, which is really great. But this video would give context to all the other videos in the course, which would make it much easier for people to fit all the detailed information into their mental model of UI Toolkit as a whole.
Totally agree. I just finished a new Section for the beginning of the course which is doing just that.
This sounds great! How do you use the Ui Toolkit in the World Space thought (ex in a VR project) if it is not a gameobject?
Thx that was helpfull, LaSed.
great tutorial. Thanks
Wanted to try it for a long time, thanks)
One of the main feature of making UI in old way as a game objects is to be able to use Unity Animations feature. So you can easily add cool squeeze animations etc.
What about the new approach? How do you animate it?
Hi, Animations and Transitions were added last year:
forum.unity.com/threads/announcing-uss-transition.1203832/
Hi MadCat, great tutorial! Do you know if it's possible to use the UI Toolkit to do resizable, moveable (eg. via mouse drag in-game) windows? Like I might want an inventory window which I can move wherever I want, and make whatever size I want.
Hi Morax,
yeah that is absolutely possible.
You would have to implement a couple of event handlers for MouseDown, MouseUp and MouseMove (or more generally for Pointers) and then resize or move the elements accordingly.
I hate doing commercials in comments, but since you are asking for it, I have a chapter on precisely that in my Udemy course. So maybe you want to have a look at it.
ua-cam.com/video/JjIznsCcHMo/v-deo.html
Please come back and make more videos
I'm amazed how UI Toolkit became a thing only now. It should have beed developed many years ago
Thank you!!!
Hey man, amazing stuff!
Just started section 5 of your udemy course and it absolutely rocks, I really appreciated the theory that went into the first sections.
I don't know if you're going to cover this but I was wondering if its possible to navigate menus in the UI-Toolkit using a controller for input?
And I don't mean using a joystick to move a virtual mouse, I was thinking something similar to navigating windows using just a keyboard.
You know where you have a selector box ( :hover effect maybe?) that could jump around on various intractable UI elements.
With you extensive knowledge, do you think this would be possible? So far I've not seen any examples so would be great to know your thoughts.
Thanks again for the amazing content, can't wait to delve back into the course project!
Hi, sorry for the late response. Probably the new input system would make that quite easy, but from what I read there are some issues with the new input system and UI Toolkit. If all you need are a couple of keys on the Keyboard however, I'm pretty sure that this is allready feasable. You would just need to wrote the logic yourself. For example have a selected-class which you would set on different elements depending on which key you pressed. If I misunderstood your issue please elaborate :-)
No problem and thanks for responding! That's kind of what I meant and I can understand how to achieve what I want.
I think I overcomplicated my explanation but if you imagine you're playing a console game with a controller, all the menues can be navigated by using the up,down,left,right arrows, rather than a mouse click.
Just wondering if they had a better integration with the UI toolkit
perfect, thanks :)
Amazing!!!
Really good video, thanks! One question though - I'm confused by the syntax with something like buttonStart.clicked += () => cube.StartRotate(). What is that line doing? I'm not new to programming but I've not seen those 3 operators in such a sequence.
So its set of 3 steps written in one line here.
Let me break the operators.
you can hookup actions with +=
It means if function on left gets invoked function on right will be called.
=> is convention for arrow function, its basically a short hand way to create anonymous functions.
On right side of => we can define the parameters the anonymous function will take and on the left we write what the function does.
So this one line basically assigns an anonymous function which rotates cube to the buttonStart.clicked invoke.
Hope that clears it.
I spent years using WPF and now Blazor, so when I started in unity, the way it handled ui was atrocious but this seems pretty good
great video!
Thanks a lot!
thank you bro thank you
This was great! I would be very interested in seeing an image displayed. I looked online and it looks like it has to be generated within a script. Although this is fine, the problem is using a script to generate the image would partially defeat the purpose of using the uitoolkit to begin with. Even though it has GREAT benefits with flex and whatnot, if you have to blind-set stuff up in code, flexbox would not decrease dev time. A good usecase for this would be displaying an icon next to a coin counter.
Hi, you can absolutely set images in the UI Editor (UI Builder) and see them in your layout. Technically you set them as background for a Visual Element but there are some options like "stretch" or "fill" which allow you to adjust the image to your liking. I agree that it would be horrible if you could set images only by script, that is not the case with UI Toolkit.
@@madcattutorials2422 wow. Thanks! So helpful! =D
I love high info density videos like this, thanks!
Btw I have a beginner's question: At 4:50, what if instead of
buttonStart.clicked += () => cube.StartRotate();
I wrote
buttonStart.clicked += cube.StartRotate();
Would that work? If it works would there be any problem?
Thanks for your comment.
buttonStart.clicked += cube.StartRotate() would not work. What would work is ... += cube.StartRotate (without the parenthesis).
This seems like a minor difference, but in your case you would actually call the function (because of the parenthesis). What you really have to do is pack the function in a box and tell the 'clicked' action: "Heres a function.... call it whenever you want" . I am using a so called Lamda which is also allowing me to pack the function into a box (I'm speaking metaphorically here ;-) .
If this is confusing don't worry. This is touching one of the tougher pieces of Unity for beginners: Delegates, Actions and Events. If you want to go deeper into the rabbithole of this check out the two episodes from Sebastian Lague on this topic. ua-cam.com/video/G5R4C8BLEOc/v-deo.html&ab_channel=SebastianLague
This is the best and shortest explanation I know of.
@@madcattutorials2422
Thank you for replying and explaining in such detail! xD
Oh, I wasn't familiar with that part of the syntax! So you would only add the ( ) when you're defining or calling a function, right?
Ah I see why you're doing it like this. With a syntax like " [some action] += () => [some function]", you can subscribe and call any function, no matter if that function is compatible with the delegate. So even though you could subscribe this particular fuction directly, you did it this way out of a habit. It would also look more neat if there're other subscribers following that're not compatible.
Though I have one more question, if you subscribe a function with a lambda like this, are you able to unsubscribe it afterwards?
@@kruth6663 this is a good observation. You are right I am mostly doing this out of a habit, but this is because for events you can then also pass parameters to your delegate. Like ... += (e) => someFunc(e) . As for the unsubscribing, you are correct that this is not exactly good practise. For this short video, to keep it simple I am ignoring unsubscribing. But you could correct that very easily by just keeping a reference to your delegate like: Action myAction = () => {do something}
@@madcattutorials2422 I see, I remember there are also the generic Action where you can include parameters. Ohh I did not know you could define a new function by simply adding something like "Action myAction =" in front of the lambda. That is awesome! Thank you so much to spend time to answer so many extra questions, all my confusions are now cleared. xD
I got a _yellow_ #warning triangle on the main VisualElement (which "fixed" something when _clicked_ ) then the container took ages to "actually fix" (but I did re-learn flex) I had to add *100%* width
4:46 Everything was perfect until that moment. Connecting entities by object names (magic string) is a nightmare. I hope the Unity UI Toolkit has alternative solutions.
In Android Dev you do something similar. In Javascript you have document.querySelector("#someId") which is very similar. You need some way to traverse the hierachy and obviously you can not just use IDs but also classes, types and everything that you can use as a selector. The ID version is just the most simple one...
@@madcattutorials2422 That is the limitation of query that web uses. We are making games with complex UI that can use particles, 3D objects, animations etc. and not web page with 3 buttons and a div. Being able to use old UI system interchangeably with the scene was one of the biggest selling points, while having references for the UI elements as gameobjects. Only redeeming quality that this new weblike UI has are flex options and responsive design and that is it. If you want to make simple phone games that have start, settings, quit then this new web UI can be beneficial. Any other serious game is a big no, if you want to actually finish your game...
Can you please do a video on how to prevent click through (raycast) when click on a UI element like a button? Most of the solutions I've found are for the legacy uGui system.
Is it possible now, to bring the 2D interface built with UIBuilder into a 3D scene and render it in world space?
Want a video on Android tooo BTW great video ☺️
How is it that they don’t advertise this because I have been struggling and hitting my head against the wall and I didn’t know it could be so easy
works gj
nice tut & auto subs🤩
I don't have a space for cube instance named "Cube". What can be the problem?
Hi, great tutorial. Im having a problem though, everything worked well up until the UI.cs script. Unity says the CubeController is not namespace it recognises. Spelling, case and everything else is good. But unity does not know the CubeController.
Help please!
Hi, the CubeController is not part of unity. Its a very simple custom script which sets the rotation and the color. The script is on the cube gameObject which is why you see me later dragging the cube on the public cubecontroller field.
The point I wanted to make (that's why I don't show the cube controller) is that you can hook up any other script that you wrote to your UI like that, so the cubecontroller is not really important, its just an example-
Nice but you need to do something like add an InputSystemUIInputModule script to the UIDocument GameObject or it won't accept mouse input. No idea how it works in the video - it doesn't if I copy each step.
Is the StartRotate and StopRotate methods from a script on the cube game object?
Yes, I did not show them because it's not really the topic of the video how to rotate a cube, but it's very basic stuff.
It sounded great! But it is ABSOLUTE PAIN to create some navigation. So back to standard UI. :/
Where i can find the code for CubeController, Great video, thanks!!!
Is it possible to apply styles to UI Element that aren't using the UI Toolkit? i.e those using the old canvas style? I have some plugins for dockable panels that don't work with the UI Toolkit, and I just wanted to add some global styling to my buttons and input fields... I can't find any tutorials on this.
Hi, I don't think that this is possible. Css classes are a available trough a visual element which basically every UI Toolkit element is. The old UI System is in a different namespace and I don't think that there is a way to make them compatible.
I'm pretty sure that you can create some dockable panels rather quickly in UI Toolkit aswell
@@madcattutorials2422 Thanks, I can't find any thing about how to create them, so perhaps a candidate for your next awesome tutorial! :)
Thanku, I was so sick of the canvas breaking bindings.
what about event system?
we android studio now
Can you now use materials and 3d objects in the ui?
not yet. This might be a question similar to yours. You can have a rough overview on what is intended next
forum.unity.com/threads/ui-toolkit-missing-features.1327806/
what about button gradient or other effects?
Not in the UI Builder yet, but obviously there are some work-arounds (like in this post)
forum.unity.com/threads/background-gradients.976566/
You can create transitions and animations for all the available properties, but it's true that there is still a long way to go to have all the tools that you have on the web with javascript and CSS. Let's give them some time...they will come.
How do you test if the button is long pressed ? On mine i have a button that moves the player but it only moves the player after i stoped clicking it and only for a second. I want to to where it moves constantly when pressed down. Any thoughts?
yes that is possible. The button.clicked action is just there for convenience. You can listen for all sorts of mouse events. In your case you would probably need a MouseDownEvent-Handler to start your motion and then stop it with a MouseUpEvent-Handler. You can see some examples here: docs.unity3d.com/2022.1/Documentation/Manual/UIE-Mouse-Events.html
@@madcattutorials2422 I take it in an Android mobile phone mouse is the same as a touch in screen right? Thanks for the quick reply!
Just read the link, it is the same for touch.
Okay, so i read it wrong, mouse event is diffrent than touch event ?
@@madcattutorials2422 I know you probably dont have time, but would it be posible to post a quick code snippet on how to achive this?
is there a way to use the new input system to navigate using the arrow keys through the menu (ui toolkit)?
The short answer is yes. However there are stil some issues with the new input system. For the long answer you might want to check out this post: forum.unity.com/threads/feedback-wanted-new-input-system-support.963111/
just imagine html and css in unity
With the little twist that you have a editor allready build in.
How do you get the button container to go to the bottom? I have been trying but have not been able to figure it out.
Thanks.
There are several ways how to do it. For Flexbox you should never think about your elements in isolation but as a group. So for things like aligning an element to a side or the bottom, you are actually setting this in the align section of the PARENT, or the container-element.
In this example I create a container which is covering the whole panel (set grow to 1). Then I add a child Element which has a flex basis of 20% (or a size of 20%) and then I only have to set the correct values for JUSTYFY-CONTENT and ALIGN-ITEMS on the !!!(this is important) container.
Try it out and tell me if it works.
@@madcattutorials2422 I am try it. Which one sets the alignment to the bottom? The icons are not clear on how this is done because they all say “align items” or “justify content”. When I click them the element just seems to disappear.
Also, suppose you want one element in a parent at the top, and another element at the bottom. How would you tell the parent to put one at the top and one at the bottom?
Thanks for responding.
@@gfujigo I would recommend to get the latest version of unity. The icons have the correct tooltips by now. I know that this was not the case in earlier versions.
As for "one element at the top and another at the bottom" you would use the SPACE AROUND setting for justify content.
If you want to know more check out the Flexbox playlist on my channel.
@@madcattutorials2422 Ha! I got it working. Thanks so much. Your video is awesome.
This new UI toolkit looks very promising. It seems easier than uGUI.
This is using the old input system
The new UI toolkit looks impressive in my opinion. Hopefully, it proves to be a robust system for users. However, I'm concerned about the development process. It would be better if they could finalize it without introducing other competing systems, like they did with the multiplayer feature. Unfortunately, this has happened a few times recently, making it tough for developers to keep up with the changes.
Unity's constant revisions have made it challenging for me to learn. Every time I started understanding something, they would introduce new tools or make unnecessary fixes. The tools were usually good, but Unity's insistence on constant adjustments created confusion and disrupted the learning process.
This uncertainty is why I eventually stopped trying to learn Unity. They frequently introduced and phased out features, leaving users to adapt to new systems, only to abandon them later. For instance, after investing time in learning one feature, they would suddenly drop support for it, making the effort feel wasted.
Their decision to delay the multiplayer solution by two years is another example of this inconsistent approach. It is frustrating for anyone attempting to learn game development independently. It becomes challenging to keep up with the ever-changing landscape of Unity, and just when you think you have a grasp on things, they pull the rug out from under you.
In conclusion, while Unity's tools are generally good, the constant changes and lack of stability in their development approach have discouraged many aspiring game developers, including myself, from fully embracing the platform.
how to make button animation in ui builder??
You can animate almost all properties of your elements through USS or in UI Builder:
docs.unity3d.com/Manual/UIE-Transitions.html
@@madcattutorials2422 thanks to know
Good Tutorial . Thanks
" public Cubecontroller cube; " . This codeline show error for me. kindly help!
My buttons won't click (nvm got it to work)
The type or namespace name 'CubeController' could not be found (are you missing a using directive or an assembly reference?) What should i do?
Hi, the CubeController is not build in into Unity. It's a custom script I wrote which is attached to the cube gameobject and which is just providing some functions to rotate and change the color. You would have to write the CubeController yourself. My point was that it doesn't matter what functionality you want to connect to your UI.... The CubeController is just an example. You can connect anything you want to those buttons.
@@davidmakowski3052 im just new to unity it would be great if u can share the files on github for references..i learned so much from your video thanks...
@@walidahsan6157 I uploaded the project to github, just for you ;-)
You can find the cubecontroller under assets/5min/general_UIToolkit
This project-code was not meant to be uploaded or published anywhere and is work in progress so no guarantees that everything is correct.
Can you use shadergraph in UI?
It looks like custom shaders are on their roadmap for 2023
forum.unity.com/threads/ui-toolkit-missing-features.1327806/
how to change the visual elements....so you can't manually place or move things anymore?
but it looks more unreal now...maybe this is good
how can i use this dinamically? I mean, if i need X buttons based on a list of items?
Basically everything you can do in UI Builder you can also do in a regular C# Script. You can check out the custom control series for something similar.
@@madcattutorials2422 that sounds so much better than the old system, ive been checking the docs and it seems i can instantiate uxml files inside others and pretend is React lol
wow. finally Unity made something right.
Does translations work with the ui toolkit?
Do you mean translations or transitions? ;-)
@@madcattutorials2422 Translations, to be able to translate the ui into other languages.
Of course u just show the most basic example, its actually a little more complicated
look like html and css to me
After much fighting with UI Toolkit, I much prefer the legacy method of UI which actually takes and uses my fonts, as well as the ease of use when it comes to animating and events.
This new change seems unnecessary...which is very Unity at this point.
Аxyeть
WTF? I didn't know this existed and was using the old UI system, which is DOGSHIT.
In your defense. It doesn't exist for too long yet ;-)
@@madcattutorials2422 I wrote my original comment a month ago. The thing, the new system isn't fleshed out as well. It isn't nearly as powerful as normal css, which is a huge shame.
It just pisses me off that unity has got such a terrible junk UI feature set. Yes how this plugin has done it is great. But now we are dependent upon a third party dev and unity is littered, strewn with huge numbers of abandoned but vital plugins
I dont think that UIToolkit is a thrid party plugin if that is what you mean. It's a part of the main editor and you don't have to install anything in order to use it since the 2022 version.
oooh. no thanks. the new method looks disguisting and less intuitive.
Nice showcase, but not useful as a tutorial - which is not a criticism, I dont think this was intended as one, I'm just trying to shoehorn it into being one. Actually moving and sizing elements is baffling and this doesn't show how you do it. Every time I try moving the button container it just resizes the entire window and typing a basis of 20 into flex means NOTHING and also does nothing.