Get started with UI Builder (UI toolkit) - time to ditch old UI system?
Вставка
- Опубліковано 1 сер 2024
- 🎁 Support me and DOWNLOAD Unity project: www.patreon.com/posts/5233763...
This tutorial/guide will show you how to get started with the new UI builder (UI toolkit) package in Unity. I know that many of you prefer to white your UI in code or would like to have some kind of standardised way of doing that. While I myself love older UI system I also see a lot of positive aspects of this method. I will show you how to create a simple labels, buttons, visual elements and how to style them. Finally at the end we will write some code to make our UI interactive.
If you'd like to see more UI builder in action, check out my previous livestream where I explored this package: • Alternative to Unity U...
💜 Join our Discord: / discord
🔵 Follow me on Twitter: / bionicl333
You will learn:
- How to create a button in UI builder
- How to create a label, text in UI toolkit
- What is UI builder package
- What are the alternatives to Unity UI system
- How to code UI builder layout
Timestamps:
0:00 - Intro
0:49 - Installing
1:50 - Setup
3:22 - Adding components
4:36 - Placing
6:58 - Absolute position
8:26 - Styles
10:13 - Hover/active attributes
11:23 - Code setup
14:01 - Coding buttons
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👍👍✌️
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 is objetively the most well polished introduction to the topic I found so far. The work on it is noticeable. Thank you!
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.
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.
Yesterday I watched the live stream of UI Builder and subscribed. I guess I have good timing.
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 🎉
Brilliant! - Clearly explained and gets me up and running with UI Builder with useful examples. Thank you.
It's insane to me, that you don't have more subscribers. Love your content :-) Thank you.
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!
Holy cow, UI Builder is exactly what I've been looking for in a UI solution for Unity. This is amazing.
This video is uber-helpful, literally no better place to start off with the UI toolkit, thanks a lot!
This was very helpful! Looking forward to more videos on UI Builder!
One of the best tutorial to get started with UI Toolkit. Thanks!
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.
So easy.. Loved your tutorial, thank you man!
Great tutorial. Always wondered what UI Doc was. Thanks!
Thanks for the video! Will definitely check out UI Builder soon in my new project :)
Very professional presentation! Thanks a lot :)
Just when Im getting used to creating UI, now I discover this UI Builder.
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!
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.
Its great im thinking of using this for our new project.
Awesome work!!! Explains a lot. Thanks!
This has a bootstrap studio vibe to it, and I am liking it!
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❤
Very good tutorial! Thanks man!
Excellent Tutorial, many thanks
now with a bit of CSS skill I able to design UI I always wanted, thx
Great tutorial, thanks.
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, as android studio cool, let's make some test to see if this tool is so great. Thanks for the video.
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)?
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..
This guy is underrated af I'm subscribing
A good video like this makes 16min feel like 2 minutes
We miss you 🚀💪🏻
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.
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 .
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.
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
Interesting tutorial :)
I Liked That "Public" 12:49
You are a gem brother
💎 🎉
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.
太有用了，感谢感谢
Helpful
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.
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!
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?
May this channel become more spread....
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
Does USS supports some cutting-edge features like backdrop-filter etc? If it is then i probably found a perfect addition ☺️
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
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
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.
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
Can i use this toolkit for creating a UI for my VR GAME.?
what about onscreen controlls like onscreen joystick?
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 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 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.
how an earth do you get buttons side by side
Followed step by step but the secondary Event system (UI) did not load onto my object.
Same
The tutorial looks great but on 2021.2.3f1 I can't follow it. Components created are different.
is there performance improvement with this new one?
seem there is no more event system in component on unity 2021.2 :S
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!
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.
How do you do a responsive UI by using UI toolkit ? it is too hard?
how to make automatic text size?
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.
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 don't see the button I made!
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.
yet the text is still blurry for small font size
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.
just like unreal UI great!
can you more tuts on unity ui builder
Muito bom.
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.
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.
hmmmm It wont add the Event System automatically if I add UIDocument...
In fact, I have no Event System (UI Toolkit)
cannot install the packages :(
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.
Old project new version unity converter tutorial plz
I guess web devs will be able to write Unity Ui now :)
> [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.
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
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?
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: ua-cam.com/video/X8Qr78Vs0Ss/v-deo.htmlsi=VrVUjfTugN4SpbaQ
@@CocoCode Thank you soo much!
Good luck animating them without coding. Actually the old UI system is less confusing and more flexible.
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
Hi. How to make an animated kill Popup like in Valorant.
Well, you have to either calculate scale and position of popups manually, or just ditch this new ui system