This might be the best video about UI Builder so far. Unlike other videos very clear, easy to understand. Before this ui builder looks like a ton of messy buttons, screens etc for me :D
Saw a few of your tutorials on UI implementation and they are really well done. There is a lack of tutorials explaining use of UI tools within unity and I am really glad you have picked up these area of unity to make tutorials on. Please keep it up👍👍✌️
Maybe one day I'll switch to this UI Builder.. but for now I prefer the old one.. BTW your teaching style is concise and easy to understand. Thankyou for this❤
Thank you, I watched a bunch of tutorials trying to figure out how to change the hover color of a button, your the only one who didn't gloss over it in a vague way.
This was a great tut. Is there really no way to assign buttons to serialized variables in code? I HATE the fact we have to reference the buttons by a string name...
You could probably write an editor script to generate scriptable objects representing the elements but it’d be awkward to maintain with any changes to the document I guess.
Thank you for this! This is the only video I've found that explains how simple it is to create a UI Document object and asset to make a button menu. I'm just getting started in Unity. One reason I did so now is this new UI system. I'm glad I waited and never had to learn the old one!
Just as note, "Canvas Background" isn't the finish Background, it's just for editing. If you want to create a solid background, you have to create a VisualElement (like a Image in the old UI system).
Excellent intro tutorial! A couple of points: 1) in my version (2021.3.25f1) you have to manually click 'Add default input modules' in the Event System, otherwise nothing works, 2) When I create button style, font size for some reason defaults to 9.
thanks so much for making this UI tutorial. just saved it on my playlist. Still making my Ludum dare game to completion and being a weird beginning game dev I am. I was looking to build my UI first before I come up with my game loop idea. lol
I see that UGUI has a lot of drawbacks, but I don't see the advantages of the UI Builder. In UGUI I can drag and drop components and Unity events directly in the inspector and don't have to reference widgets by string in code. I can set up the wildest UI animations. And I can use World Space Canvases. I can have 3d objects inside the canvas, and all that stuff, since the UI is composed of GameObjects and MonoBehaviours. How am I supposed to do that with the UI Toolkit package? Does this new UI have a better performance? Does it have better implementations for inputfield and scrollview? Can the CSS and XML files be changed externally after the build? Can I add custom widgets and layouts?
oh my god, coming as web development this is a godsend, basically css on unity - which I always thought why they never integrated something easy than their old UI system. I'm in awe!
I like the idea of UI Builder but for now I am going to stick to normal UI. Looks more complicated for coding than it should be. Changing the name of a button in UI Builder will screw your whole code (Of course, you should start coding after you planned everything). With standard system that is not the case. I don't know, there are a lot of positives but a lot of negatives as well but I also didn't like the Tween package and now I can't live without it when creating simple game animations or UI animations, like: 1) Move platform left/right with oscillations (sin axis) - 1 line of code in Tween, that is better optimized, instead of creating the whole function that will be ran in Update every frame. 2) Rotation - easy to create and not using update function (pretty sure Tween uses some weird optimization with Update, still new with it and reading the documentation) 3) UI animations - coins pickup from the current position to UI coin location, etc. All I am saying is that UI Builder might grow on me. After the current project for the company I will try it for a few days/week to see what I really can/can't do with it. The same way I did with Tween and now I use it for most of the simple animations. Thanks for all the UI videos, made me learn a lot and hopefully you will be here for along time to educate people like me! Thank you very much man!
when I create the UI Document, it has no Event System Component. I downloaded both packages so I'm not sure why that is. anyone have any ideas whats going on?
This looks a lot easier than using the traditional canvas system, now I'm annoyed with myself for ignoring UI Builder. I'll use it in any future projects
For newbie, all of this coding things looks more complicated. Just creating UI elements directly in Unity looks still clearer. I thought this Builder will make the coding work easier, but looks like its only add the CSS-like-style possibilities.
Thank you for this fantastic tutorial! One thing I didn't understand was using the root variable. Does setting the root visual element establish the UIDocument in use? And does 'root.Q' effectively query the root for object(name)?
Hi! Unity won't let me download com.unity.ui [Package Manager Window] Cannot perform upm operation: Unable to add package [com.unity.ui]: Cannot find a version of package [com.unity.ui] compatible with this Unity version (2021.2.2f1) Now I don't have the event system (ui toolkit). What can I do about it?
@@AndyGneiss as far as I can tell you shouldn't even bother. I think in the end I figured out that this is just how it is in newer versions. Let me know if you're able to find out otherwise.
Thank you for this great tutorial, it helped me a lot to see where all the elements are and how to use styles! What a blast! Btw. is there a way to do databinding as well? I have read something about it, but wished there was a proper tutorial for it..
Go on you are helping people I recently started coding and had trouble and you vids helped me ofcourse you are not as good as someone like brackets but keep going and you will get there
Strange... my game object created by right clicking in the Hierarchy panel > UI Toolkit > UI Document does not contain an Event System, only the UI Document. I am on Unity 2020.3 with Unity Builder package 1.0.0-preview.14.
Unfortunately, changing versions to 2020.1.17 from 2020.3 did NOT solve the problem for me. I think that it has to do with an outdated com.unity.ui package. In any event, there has been a beta release at 2021.2 which has the Unity builder installed. This tutorial works with the new beta.
In any case you can add an Event System anywhere in the hierarchy. It also did not add an Event System for me but I already had one elsewhere in my scene.
> [is it] time to ditch old UI system? Not for a while. The text input control, particularly multi-line editing is so buggy as to be unusable. The current version as of this date (1.0.0-preview.14) is no where near production ready.
it is a good tutorial to learn the new UI Elements, can you cover the UI scale change relative to screen size as well ? I found it is a bit difficult to deal with it .
As some one who used to work in HTML and CSS when making UI, this is really good add to Unity, for sure my next project will use this UIBuilder, for now I'm too deep on my project I can't switch, already wasted so much time creating assets in photoshop while you can do them easily with this new tool it also save some app space
I admit this is looks interesting compare to making ui in the legacy system. If they really take reference from unreal widget editor I hope they have somekind of automatic code n ui binding.
When creating a UIDocument It does not come with the Event System (UI Toolkit) component. Which I think is why my button clicks are not registering. I can't seem to add that component either.
15:28 So the difference between js and unity is that you add the methods to the buttons "clicked" field thanks to the operator overloading functionality of C# (using the + (+=) operator) I guess. Then what would usually be called the "documentElement" is the "rootVisualElement" (line 17) Also the VisualElement might the a good ol' div tag. Everything else is pretty much the same. As an improvement, I would recommend not duplicating the button style, or at least cleaning the USS code, since there might be many properties with the same values in the hover and active state
the clicked field doesn't have much to do with overloading operators. clicked is a c# delegate event that you can add methods to. you could do clicked = clicked + OtherMethod too, += is just a shorthand
Downloaded it today. It's still in the Preview stage as of Dec 1, 2021. I imported it into my project (Unity vers. 2020.3.22f1) and the console spit out a bunch of warnings and errors, mostly to do with trying to import the StyleSheet. There are sample scenes you can also import from the git packages. Perhaps these will work better but I would recommend importing them to a new project just to be on the safe side.
For some reason, Unity doesn't let me drag a TMP Font Asset into the UI Builder Inspector to change the style. I can find a Font and set the asset to None and get the result, but the preferred method is to use a Font Asset. Any ideas why I get a big red crossed circle when I try to drag it and if I click to open the selection panel instead of dragging, my asset isn't there as a choice. I've wasted hours on this.
I'm also not a fan of the new system - mainly because I tend to build much more complicated UI systems. But it's good to see some other options! Myself I see that UI builder as a great tool for building inspector windows etc. - for runtime the current system it's much more universal
Very good video, it helped me a lot, I didn't know where to start. Is it possible to create this programming with Bolt/VisualScript? I am wanting to unite the two.
I downloaded both package but it gives me error, error CS0006: Metadata file 'Library/ScriptAssemblies/UnityEditor.UIBuilderModule.dll' could not be found. How can i fix it?
Your video was great...the UI Builder on the other hand, very buggy. I'd keep editing my UI and the app would crash and throw away all my changes. Very frustrating. It's 2022 and this still seems very buggy and not ready for use.
I've tried your tutorial for UI Builder, but when I try to interact with buttons in game, I get the error "InvalidOperationException: You are trying to read Input using the UnityEngine.Input class, but you have switched active Input handling to Input System package in Player Settings". Any idea on how to fix this ?
Hey! At the time of recording this video I was using Visual Studio for Mac. Since then I switched to Visual Studio Code, here is a video about it: czcams.com/video/X8Qr78Vs0Ss/video.htmlsi=VrVUjfTugN4SpbaQ
Thx, nice video. How about unsubscribing from the events next time though? Let’s teach proper coding style to people who are at the beginning of their coding journey 🙂
I was definitely one of those that said they disliked working on UI so this is going to be a huge help!
I couldn't stand the old UI system either its so bad for simple 2d ui's imo.
This might be the best video about UI Builder so far. Unlike other videos very clear, easy to understand. Before this ui builder looks like a ton of messy buttons, screens etc for me :D
Thank you 🎉
This is objetively the most well polished introduction to the topic I found so far. The work on it is noticeable. Thank you!
Yesterday I watched the live stream of UI Builder and subscribed. I guess I have good timing.
Having a lot of experience with CSS I am really looking forward to UI Builder. From your video it looks pretty straightforward to use.
It really is a dream come true!
Saw a few of your tutorials on UI implementation and they are really well done. There is a lack of tutorials explaining use of UI tools within unity and I am really glad you have picked up these area of unity to make tutorials on. Please keep it up👍👍✌️
Maybe one day I'll switch to this UI Builder.. but for now I prefer the old one.. BTW your teaching style is concise and easy to understand. Thankyou for this❤
Thank you, I watched a bunch of tutorials trying to figure out how to change the hover color of a button, your the only one who didn't gloss over it in a vague way.
It's insane to me, that you don't have more subscribers. Love your content :-) Thank you.
This was a great tut. Is there really no way to assign buttons to serialized variables in code? I HATE the fact we have to reference the buttons by a string name...
It’s essentially an xml document so it works like jQuery does with html?
You could probably write an editor script to generate scriptable objects representing the elements but it’d be awkward to maintain with any changes to the document I guess.
@@codemonkeynorth7503 Pretty much this. They really wanted to emulate the web development experience, even down to using strings to select elements.
i feel the same way. btw love your vids :)
@@domportera I love you
Holy cow, UI Builder is exactly what I've been looking for in a UI solution for Unity. This is amazing.
Thank you for this! This is the only video I've found that explains how simple it is to create a UI Document object and asset to make a button menu. I'm just getting started in Unity. One reason I did so now is this new UI system. I'm glad I waited and never had to learn the old one!
This video is uber-helpful, literally no better place to start off with the UI toolkit, thanks a lot!
So easy.. Loved your tutorial, thank you man!
Brilliant! - Clearly explained and gets me up and running with UI Builder with useful examples. Thank you.
now with a bit of CSS skill I able to design UI I always wanted, thx
Just when Im getting used to creating UI, now I discover this UI Builder.
Just as note, "Canvas Background" isn't the finish Background, it's just for editing. If you want to create a solid background, you have to create a VisualElement (like a Image in the old UI system).
Great note!
@@CocoCode 👍in my case I prefer that system because as Senior web developer, to have CSS properties is an advantage.
For anyone coming to this on newer Unity versions, the visualElement can now be center-aligned by using the alignSelf option in the Align properties.
Excellent intro tutorial! A couple of points: 1) in my version (2021.3.25f1) you have to manually click 'Add default input modules' in the Event System, otherwise nothing works, 2) When I create button style, font size for some reason defaults to 9.
Great tutorial. Always wondered what UI Doc was. Thanks!
Thanks for the video! Will definitely check out UI Builder soon in my new project :)
One of the best tutorial to get started with UI Toolkit. Thanks!
This was very helpful! Looking forward to more videos on UI Builder!
Great job and keep it up! Would love to see some more in-depth videos on UI builder, as there is a real lack of them on youtube atm.
I Liked That "Public" 12:49
This has a bootstrap studio vibe to it, and I am liking it!
Awesome work!!! Explains a lot. Thanks!
thanks so much for making this UI tutorial. just saved it on my playlist. Still making my Ludum dare game to completion and being a weird beginning game dev I am. I was looking to build my UI first before I come up with my game loop idea. lol
Good luck!
I see that UGUI has a lot of drawbacks, but I don't see the advantages of the UI Builder. In UGUI I can drag and drop components and Unity events directly in the inspector and don't have to reference widgets by string in code. I can set up the wildest UI animations. And I can use World Space Canvases. I can have 3d objects inside the canvas, and all that stuff, since the UI is composed of GameObjects and MonoBehaviours. How am I supposed to do that with the UI Toolkit package? Does this new UI have a better performance? Does it have better implementations for inputfield and scrollview? Can the CSS and XML files be changed externally after the build? Can I add custom widgets and layouts?
UGUI also works, at least for WebGL, UI Builder errors out and won't show up on an actual build.
Same question I have been asking. UI builder is taking us from 2015 back to 1970.
oh my god, coming as web development this is a godsend, basically css on unity - which I always thought why they never integrated something easy than their old UI system.
I'm in awe!
This guy is underrated af I'm subscribing
A good video like this makes 16min feel like 2 minutes
I like the idea of UI Builder but for now I am going to stick to normal UI. Looks more complicated for coding than it should be. Changing the name of a button in UI Builder will screw your whole code (Of course, you should start coding after you planned everything). With standard system that is not the case.
I don't know, there are a lot of positives but a lot of negatives as well but I also didn't like the Tween package and now I can't live without it when creating simple game animations or UI animations, like:
1) Move platform left/right with oscillations (sin axis) - 1 line of code in Tween, that is better optimized, instead of creating the whole function that will be ran in Update every frame.
2) Rotation - easy to create and not using update function (pretty sure Tween uses some weird optimization with Update, still new with it and reading the documentation)
3) UI animations - coins pickup from the current position to UI coin location, etc.
All I am saying is that UI Builder might grow on me. After the current project for the company I will try it for a few days/week to see what I really can/can't do with it. The same way I did with Tween and now I use it for most of the simple animations.
Thanks for all the UI videos, made me learn a lot and hopefully you will be here for along time to educate people like me! Thank you very much man!
Its great im thinking of using this for our new project.
Thank you! I learnt a lot about this UI Builder but I think you should stop at some parts of the code and explain what each line does.
Excellent, as android studio cool, let's make some test to see if this tool is so great. Thanks for the video.
Very professional presentation! Thanks a lot :)
Very good tutorial! Thanks man!
May this channel become more spread....
when I create the UI Document, it has no Event System Component. I downloaded both packages so I'm not sure why that is. anyone have any ideas whats going on?
Excellent Tutorial, many thanks
We miss you 🚀💪🏻
This looks a lot easier than using the traditional canvas system, now I'm annoyed with myself for ignoring UI Builder. I'll use it in any future projects
For newbie, all of this coding things looks more complicated. Just creating UI elements directly in Unity looks still clearer. I thought this Builder will make the coding work easier, but looks like its only add the CSS-like-style possibilities.
Excellent it seem to be the same as Android studio cool. I had to test if it is working with New input système. Thanks a lot for your vidéo.
The tutorial looks great but on 2021.2.3f1 I can't follow it. Components created are different.
Thank you this will help
Thank you for this fantastic tutorial! One thing I didn't understand was using the root variable. Does setting the root visual element establish the UIDocument in use? And does 'root.Q' effectively query the root for object(name)?
Followed step by step but the secondary Event system (UI) did not load onto my object.
Same
Hi! Unity won't let me download com.unity.ui
[Package Manager Window] Cannot perform upm operation: Unable to add package [com.unity.ui]:
Cannot find a version of package [com.unity.ui] compatible with this Unity version (2021.2.2f1)
Now I don't have the event system (ui toolkit).
What can I do about it?
I'm having the same issue.
@@AndyGneiss as far as I can tell you shouldn't even bother. I think in the end I figured out that this is just how it is in newer versions. Let me know if you're able to find out otherwise.
Thank you for this great tutorial, it helped me a lot to see where all the elements are and how to use styles! What a blast! Btw. is there a way to do databinding as well? I have read something about it, but wished there was a proper tutorial for it..
Great tutorial, thanks.
I really like the smooth tweening in your videos, what video editing software do you use ?
Glad you like it! - I spend a lot of time on editing ;)
I'm using ScreenFlow on Mac
Go on you are helping people I recently started coding and had trouble and you vids helped me ofcourse you are not as good as someone like brackets but keep going and you will get there
In the latest version of unity the code in this tutorial will give errors.
Strange... my game object created by right clicking in the Hierarchy panel > UI Toolkit > UI Document does not contain an Event System, only the UI Document. I am on Unity 2020.3 with Unity Builder package 1.0.0-preview.14.
I experienced the same issue with Unity 2020.3. Tried with his version of 2020.17 and the Event System showed up. :)
Same issue with 2020.3.
Unfortunately, changing versions to 2020.1.17 from 2020.3 did NOT solve the problem for me. I think that it has to do with an outdated com.unity.ui package. In any event, there has been a beta release at 2021.2 which has the Unity builder installed. This tutorial works with the new beta.
In any case you can add an Event System anywhere in the hierarchy. It also did not add an Event System for me but I already had one elsewhere in my scene.
> [is it] time to ditch old UI system?
Not for a while. The text input control, particularly multi-line editing is so buggy as to be unusable. The current version as of this date (1.0.0-preview.14) is no where near production ready.
it is a good tutorial to learn the new UI Elements, can you cover the UI scale change relative to screen size as well ? I found it is a bit difficult to deal with it .
As some one who used to work in HTML and CSS when making UI, this is really good add to Unity, for sure my next project will use this UIBuilder, for now I'm too deep on my project I can't switch, already wasted so much time creating assets in photoshop while you can do them easily with this new tool it also save some app space
I admit this is looks interesting compare to making ui in the legacy system. If they really take reference from unreal widget editor I hope they have somekind of automatic code n ui binding.
When creating a UIDocument It does not come with the Event System (UI Toolkit) component. Which I think is why my button clicks are not registering. I can't seem to add that component either.
You are a gem brother
💎 🎉
Good luck animating them without coding. Actually the old UI system is less confusing and more flexible.
Helpful
15:28 So the difference between js and unity is that you add the methods to the buttons "clicked" field thanks to the operator overloading functionality of C# (using the + (+=) operator) I guess.
Then what would usually be called the "documentElement" is the "rootVisualElement" (line 17)
Also the VisualElement might the a good ol' div tag.
Everything else is pretty much the same.
As an improvement, I would recommend not duplicating the button style, or at least cleaning the USS code, since there might be many properties with the same values in the hover and active state
the clicked field doesn't have much to do with overloading operators.
clicked is a c# delegate event that you can add methods to. you could do clicked = clicked + OtherMethod too, += is just a shorthand
Is this ready for production? Or is it still too buggy to use?
well....it corrupted my entire game so...dats your call lol
Downloaded it today. It's still in the Preview stage as of Dec 1, 2021. I imported it into my project (Unity vers. 2020.3.22f1) and the console spit out a bunch of warnings and errors, mostly to do with trying to import the StyleSheet.
There are sample scenes you can also import from the git packages. Perhaps these will work better but I would recommend importing them to a new project just to be on the safe side.
For some reason, Unity doesn't let me drag a TMP Font Asset into the UI Builder Inspector to change the style. I can find a Font and set the asset to None and get the result, but the preferred method is to use a Font Asset. Any ideas why I get a big red crossed circle when I try to drag it and if I click to open the selection panel instead of dragging, my asset isn't there as a choice. I've wasted hours on this.
Does USS supports some cutting-edge features like backdrop-filter etc? If it is then i probably found a perfect addition ☺️
Good video. In my opinion it doesn´t make anything really easier.
I'm also not a fan of the new system - mainly because I tend to build much more complicated UI systems. But it's good to see some other options!
Myself I see that UI builder as a great tool for building inspector windows etc. - for runtime the current system it's much more universal
Is it possible to make a "Inputfield" ? Because I want give it a try with the Login UI!
11:01 - hover doesn't work for me in the editor only in game view in play mode
太有用了，感谢感谢
Very good video, it helped me a lot, I didn't know where to start.
Is it possible to create this programming with Bolt/VisualScript?
I am wanting to unite the two.
How do you do a responsive UI by using UI toolkit ? it is too hard?
hmmmm It wont add the Event System automatically if I add UIDocument...
In fact, I have no Event System (UI Toolkit)
Can i use this toolkit for creating a UI for my VR GAME.?
Interesting tutorial :)
I don't see the button I made!
seem there is no more event system in component on unity 2021.2 :S
I downloaded both package but it gives me error, error CS0006: Metadata file 'Library/ScriptAssemblies/UnityEditor.UIBuilderModule.dll' could not be found.
How can i fix it?
how about perormance? is this new system better with canvas rendering?
UI Toolkit submenu doesn't appear in my hierarchy but it does appear in my Project tab. Do you have any idea why?
How would you clone new buttons from a script?
I wonder if they made it so you can animate buttons without refreshing the entire UI on every frame.
Otherwise, it's LeanTweens for me.
Wasn’t that bug fixed years ago?
how an earth do you get buttons side by side
what about onscreen controlls like onscreen joystick?
is there performance improvement with this new one?
Your video was great...the UI Builder on the other hand, very buggy. I'd keep editing my UI and the app would crash and throw away all my changes. Very frustrating. It's 2022 and this still seems very buggy and not ready for use.
What most people dont get is that UI Elements allows you to separate UI visuals (widgets), logic and data and has a powerful UI builder tool too
how to make automatic text size?
just like unreal UI great!
yet the text is still blurry for small font size
can you more tuts on unity ui builder
cannot install the packages :(
I guess web devs will be able to write Unity Ui now :)
I've tried your tutorial for UI Builder, but when I try to interact with buttons in game, I get the error "InvalidOperationException: You are trying to read Input using the UnityEngine.Input class, but you have switched active Input handling to Input System package in Player Settings". Any idea on how to fix this ?
Sounds like the UI Builder library is using the old input management routines, while your project is setup with the new input manager.
Is this really that much easier.
Especially when we have to write code to fetch each text, Button or image element…
I am sue you get this question a lot, but what IDE do you use?
Hey! At the time of recording this video I was using Visual Studio for Mac. Since then I switched to Visual Studio Code, here is a video about it: czcams.com/video/X8Qr78Vs0Ss/video.htmlsi=VrVUjfTugN4SpbaQ
@@CocoCode Thank you soo much!
Thx, nice video. How about unsubscribing from the events next time though? Let’s teach proper coding style to people who are at the beginning of their coding journey 🙂
You’re right, my bad!