How To Create Dynamic UI With The NEW UI Toolkit - Unity Tutorial

[@DapperDinoCodingTutorials]

Check out Admix here: admixplay.com/

[@Othello379]

You should make a video about why to use this rather then the old UI system. Benefits and downsides!

[@sliptrixx2]

This is no exaggeration. I feel like you make some of the best tutorials for unity! Great job.

[@DapperDinoCodingTutorials]

Thanks for the kind words!

[@rohitaug]

I'm so glad you're doing this. I think I kinda get how it works but the lack of tutorials on it has always been baffling considering this is what Unity wants you to use.

[@DapperDinoCodingTutorials]

There's no rush :) This is still in preview and will be a while before it's the recommended UI system to use. But since they are heading toward this I think it's good to start to understand how to use it for when that times comes!

[@mrtigeriffic2992]

Thank you for this video. Starting to use UIToolkit for a project and enjoy your video the most. Easy to follow and very informative.

[@wowgingermobile2123]

Super helpful video! Please make more videos about this new UI Toolkit in the future, much appreciated!

[@enriquemorenotent]

Thanks for adding the details about installing the packages this time :) Now there was no place for confusion ;)

[@DapperDinoCodingTutorials]

No problem 👍

[@enriquemorenotent]

@@DapperDinoCodingTutorials I am going to try it right away. I am a web developer, so CSS should be a breeze, but I'll let you know if there are some gotchas on the process :D

[@enriquemorenotent]

@@DapperDinoCodingTutorials Weird... the installation worked, but Unity does not seem to behave the same way with me as it does with you. I have all the settings properly done (opacity, bg color, size, position...) and I saved the layout with CTRL + S, and yet the "Game" tab still does not show the UI :/ Pic: paste.pics/AFFAH Update: Here is also the generated UXML code

[@RugbugRedfern]

It looks like they took a lot of inspiration from Microsoft's WPF UI interface. Very interesting! I'm excited to use this once it releases.

[@subliminalcastillo2126]

I was thinking the same thing!

[@mrx10001]

Thank you, this made a lot more sense than UI Builder one where you looked at the Unity's examples. Which just left me very confused.

[@Dxpress_]

8:33 I'm hoping in the future, they add a feature to "expose" UI elements from the documents, similar to shaders, so that you can drag/drop their references in the inspector rather than having to reference them by name.

[@spider853]

I don't think this will happen as the UI Document is a separated renderer, but they might do it as a text drag and drop for string names

[@BrianBakerCA]

Simple, but it tells us everything we need to get going on our own. Thanks a lot!

[@DapperDinoCodingTutorials]

Glad to hear that you enjoyed it. There will be more for specific use cases

[@Othello379]

Thank you for these high quality helpful videos! Really appreciate it! :)

[@wendten2]

Finally .This is literally the first such tutorials on the topic, there are so many unity youtubers out there talking about the same topic using the same examples. Also I really like you style and the level you teach at. I must however admit that its a bit against pride as a master engineer to take tips from a school kid, but I guess that's how the world work anno 2020

[@DapperDinoCodingTutorials]

Glad I could help and don't worry, keep your pride :D

[@lazykid9167]

A "Master" Engineer. whhoooow, whatever that is

[@user-dm5qi4nb6l]

This tutorial was really well explained, I'm a beginner and I'm trying to learn these new unity updates, I'm working on the new Input system too pls do more videos about these subjects.

[@albarnie1168]

Really great and concise intro to the ui toolkit. Keep it up!

[@crazyfox55]

This is really well made tutorial. Just an idea but unit tests would be great with this new UI, and might make for a good tutorial as well.

[@DapperDinoCodingTutorials]

Thanks, I'll keep it in mind and perhaps I'll have a look on the forums to see if anyone is discussing unit tests.

[@sullainvictus]

Love your videos man. Question: Does this new system have any functionality for animating UI elements?

[@Rj-nw4vc]

Excellent preview. Thank you, this video saves 30min of my time

[@pulkitmidha5710]

This was much needed. Thank you

[@goldone01]

Thanks for the video - great to see some info on this. The documentation is hard to understand at the moment. In your view, what are the key things that are still missing vs. the old UI system? Thinking about whether it's worth switching now or a bit later when things have "settled down".

[@DapperDinoCodingTutorials]

I think you should wait before using it in a "serious" project but by all means go ahead and get some experience with it now so that when it's more stable and is production ready you already know how to use it. The main problems I see right now is that the UI Builder window is a bit buggy sometimes but I'm sure that will get sorted soon enough.

[@youtubechannel548]

This makes me so happy... Making UI is going to be so much more efficient now. I bet some features are still missing as this is still in beta? However, the future is looking pretty bright! Hopefully, the performance is also going to be much better. As the current UI system is kind of struggling ngl

[@seersdduR]

Definitely , It seems be better than old(?) ui system.

[@marty34534]

Brilliant tutorial! Thank-you very much!

[@hmada2013]

They made the UI similar to XML which i guess is a good step to make the UI consistent over all platforms.

[@manyfailsonewin4352]

Excellent. Thank you!

[@kabirakzaman]

I'm sure WPF App builders will love it

[@newpractice]

beautiful tutorial, I kind of understand what is going on in the code. how do I take this an extra level by making the 3d world interact with the UI - like how do I make the label change when the construction hat is clicked, rather than when the UI button is clicked?

[@experiFilm]

I've been looking for this as well.

[@hetthummar9582]

Awesome video as always .. I think that the new UI Toolkit is better than the old system but I have one question. .. is it possible to display the user name above the player with the new UI Toolkit. (Like We show name on the multiplayer games) I already tried to implement this by my self but it's not working (It is showing name but it is on the screen instead of above user)

[@gilleswalther5964]

Really good video, thanks!

[@eatpotaro4302]

These are great videos

[@DapperDinoCodingTutorials]

Thanks :)

[@martymayfly8669]

Thank you for this tutorial, I switch to UiElements with your help, but i am stuck on a problem. My game mechanic is effected by ui touch in level screen, how can I prevent this situation while using UiDocument? Do you have any idea or advice?

[@cfloutier]

very useful ! thanks

[@bhanukadasanayaka3457]

can you make more tutorials on this. like progress bar

[@fumetsuhito5561]

Simple and straight forward video. Question, if a stable version is out, will you be using it over the current UI version?

[@broganking9830]

Is Dapper Dino gonna be the next Brackeys? Place your bets.

[@DapperDinoCodingTutorials]

Brackeys will live on in spirit but I hope I can help those who are now looking for new tutorials!

[@perparmiha]

Just needs catchier thumbnails so people will find him

[@theFishy_]

Code monkey is the next brackeys already

[@jverhoog8556]

Hmm I see some benefits over the UI system, but also drawbacks. Especially for AR development since the UI is now created out of context of the scene. Is World Space Canvas still supported?

[@shami9353]

Can't add the script to the UIDocument? It says it has to be derived from MonoBehaviour which it does. I've seen some solution to remove everything from the Editor folder. But have not worked for me. Edit: My mistake I kept trying to attach the Editor instead of the script itself. Such a simple mistake.

[@andersencastaneda6080]

Great Tutorial. Is this new system better than the old one (performance)?

[@DapperDinoCodingTutorials]

I think it either is, or it will be. Still has a bit to go before it's production ready.

[@sharavanakumar2000]

In the video time 11:50 as I can see the opacity is 100 but the visual element background color is not black however in vedio time 11:52 when you change the opacity to 100 how the color changed to black please help I do have the same issue

[@vizualwanderer]

what about the vertical/horizontal gridding thing? how much did they change that, if they did... that part was the only thing that was uncomfortable about the old UI, but really good non the less.

[@RonenGoldstein]

Thanks for the great video! Quick question - do we need an OnDisable function to unload the callbacks? It's hard to find any information on whether or not this is relevant. I'm getting a lot of issues after doing this with the UnityEditor.SettingsWindow:OnEnable() - any ideas? I appreciate it!

[@TheOddler]

Note: As of writing the latest version of the ui toolkit (1.0.0-preview.14) does support 2021.1: forum.unity.com/threads/ui-toolkit-latest-version-1-0-0-preview-14.941420/#post-6819866

[@awake1293]

Thanks for making this tutorial! I still haven't found a decent way of binding data to n number of UI elements efficiently. Having to store a reference to each button in something like a Football Manager game is just painful. uGUI used to be easier with Prefabs and SciptableObject events - but I can't see a way of doing this with the new UI toolkit. Do you have tips?

[@mirasonicrex]

I couldn't get this to work until I changed OnEnable to Start. This is my first time using Unity UI, so not exactly sure why.

[@kambaalayashwanth123]

Thank you, but can you show how can we make any movements for the element like , bouncing , slide in out over other elements .

[@awesomedata8973]

This is a great tutorial -- but I was actually hoping this was an EditorWindow tutorial, rather than a runtime tutorial. Do you have a video showing how to do EditorWindows? -- I'd like to see rearrangeable Drag/Drop elements in an EditorWindow showcased. :)

[@ProkerKusaka]

I don't understand how to change toggle checkbox size. Only root component is changeable but his child elements are grayed out.

[@froggo4363]

nice tutorial

[@DapperDinoCodingTutorials]

Glad you liked it!

[@TheWolverine1984]

Is there a way to bind the data to the UI? As in, bind the number it displays to the int in the code? So every time the data changes the UI updates to reflect it? As far as I recall they said there will be data binding features.

[@anonymoussloth6687]

Great Video! I had a question: Can we use custom sprites for buttons, borders, backgrounds, etc in this toolkit? Also, does this UI toolkit support the different canvas rendering methods in the normal UI (ex: screen overlay, world space, etc)?

[@Sykes19]

It's only been a few months, but the "UI Builder" isn't listed in the registry anymore. What am I doing wrong here? Did I miss something?

[@tacman1123]

Thanks -- great tutorial. I'm following along exactly (I think) but I'm not seeing the UI display in the game view or editor view. I'm using the latest version of 2020.1.11f1. I've tried with both the regular 3D and URP, but no difference. Any suggestions? Or could you post the final version of this in a github repo somewhere, so we can compare? Thx.

[@waytoomuchtimeonmyhands]

add com.unity.ui.builder in the package manager

[@Salmonman0604]

I just dont understand why I would use this over the current UI system. What problems does this feature solve?

[@DapperDinoCodingTutorials]

I could try giving an explanation here myself but I think they explain it better here on the forums: forum.unity.com/threads/ui-roadmap-q3-2020.980202/

[@gabrielwhite9881]

I think the problem this solves is that some people can work better with something that is more like CSS. :)

[@Redagrandrei]

@@gabrielwhite9881 Nop. Current unity UI is just not extensible at all.

[@gabrielwhite9881]

@@Redagrandrei And why is this not more css like? :)

[@MoTheBlackCat]

Thank you! I've been searching everywhere just for this CRUCIAL step: "Create a UIDocument object (you must install the UI Toolkit Package EVEN on 2021.1+ and link it to your uxml to DISPLAY your UI". Soooo tedious!

[@anthonygirdler606]

I think I'm stuck at the same section. I can't install UI Toolkit. I can't creat a UIDocument object. Using 2021.1.3f1

[@MoTheBlackCat]

@@anthonygirdler606 I'll try to check the process and come back to you with a step by step.

[@JONIMASAKIS]

I like how Unity gets things more complicated instead of easier with each new thing

[@BrianBakerCA]

Many front end web developers will be able to get into this easily as this is a similar workflow for css/js. It’s only complicated because the old system wasn’t good lol and because it’s unfamiliar. Don’t worry, this is definitely better

[@DapperDinoCodingTutorials]

Have a read of the forums where they explain what they are doing and to some extent why: forum.unity.com/threads/ui-roadmap-q3-2020.980202/

[@AugGust]

And I'm just almost done with my current UI using the old UI system... RIP

[@Katniss218]

Don't worry, I can bet you'll still have a few years before this new UI is fully out.

[@DapperDinoCodingTutorials]

The old system isn't going away any time soon. This is still in preview and will be a while before it's the recommended UI system to use. But since they are heading toward this I think it's good to start to understand how to use it for when that times comes!

[@MxmOzn]

Hello ! Thanks for your video, it helps a lot ! I'm actually looking for displaying a 3d asset into my UI using the UI Builder and UI Toolkit from Unity. Is it even possible ?

[@signalised9540]

Good vid

[@DapperDinoCodingTutorials]

Thanks!

[@MrHandsy]

What about adding and removing items from a list?

[@tryptex]

Will this be replacing TMP at some point?

[@Tymon0000]

How to do this without the magic strings?

[@sathiyanarayanan3373]

hey guys, I'm new to unity ui and i just installed latest UI builder for 2019.4 version but it shows like nearly 300 errors in the cmd window...Any solution..?

[@richmattisson3011]

Seems so complicated. What's the benefit of using this new UI system? What's wrong with the old 1?

[@DailyFootballEditsDFE]

why your not making your own game and story i'll wait for it i hope you do that like dani he haw karlson

[@DapperDinoCodingTutorials]

I'm very busy with a lot of things but I do plan on making my own full game/s someday. For now I try and enter game jams when I get the chance.

[@DailyFootballEditsDFE]

@@DapperDinoCodingTutorials waiting for it 😍

[@mrcryptographic4803]

can you make a tutorial about Integrate steam workshop in a unity game?

[@DapperDinoCodingTutorials]

There are a lot of things people want me to show how to integrate so I won't make any promises but it's definitely something I would be up for covering at some point.

[@mrcryptographic4803]

@@DapperDinoCodingTutorials ok

[@tr233]

good tutorial for starters, but people should think further, separation of concerns dont mix classes responsibilities. Meh another Unity push to new version ;)

[@atur94]

Those packages still have a lot of bugs. Just huge amount of them. You cannot just select object from the list once you deselected it. It's get laggy with time passing. You need to restart UI builder window often. It is so annoying. It looks promising but it is still early alpha and you cant build UI with it efficiently

[@ZoidbergForPresident]

Why doesn't Unity provide stuff like this?

[@brainwashing5576]

Спасибо. Было полезно

[@cashewmaurice5771]

Hey, loving the videos so far, could you please do a video on how to implement client-side prediction / server authoritative movement in Mirror?

[@MikevomMars]

You could have first explained what basic components the UI system consists of (Panel Settings, Tree Asset, Styelsheet, UI Document etc) and how they are related to each other. But as it is, it's all rather confusing.

[@kwan8247]

The russian supporter: Dino: I don't even know who you are

[@DapperDinoCodingTutorials]

I've reached out to them to ask about the pronunciation :)

[@fidel_soto]

Wait a minute... What was wrong with the old UI???

[@fidel_soto]

@@bezoro-personal major pain points? To me it seemed like the best feature Unity had and hands down the best way to build UI of any software ever.

[@jeronimocollares320]

I just think you should change the name of your tutorials to 'I'm running because I don't want anyone to understand anything'. :)

[@tr233]

man why its only works in 2020 ;(

[@Wuddigot]

Second.

[@DapperDinoCodingTutorials]

Silver medal for you

[@Wuddigot]

@@DapperDinoCodingTutorials Yesssssssssssssssss

[@Inf4mousKidGames]

warning to those who are using this tool at the time of this comments creation dont install UI builder current version is broken as hell tried it in the LTS version of 2020 and oh god it's not worth the headache

[@VIN_Wolframwow]

Thanks a lot! Was trying to figure it out as well how it works, but not even the context menus appear to build the document. I can create it in a folder but I can not even use it in a new object.

[@gregoryfenn1462]

Personally I’m finding all these new features way too fast and too much. I’m getting used to the new render pipeline and the new input systems, but I’d rather they focused on making the existing tools either more versatile or more efficient without overhauling the existing APIs. We also have the new shader graph and VFX graph to get to grips with. People learning unity as newbies are going to be bambozzled by the number of differences between all the Brackeys and Udemy tutorials vs the new ways of game development in unity as it’s all different. Pretty much every way we learned to use Unity needs to be relearned and all the great tutorials overhauled and deleted... I just wish they’d focus on making the existing APIs more stable and idiot-proof for rookie and newbie developers, and allow more advanced users to build their own systems on top using a small but very solid set of APIs. We still have DOTS (formally known and ECS and Burst) to get used to! Great tutorials though!!

[@DapperDinoCodingTutorials]

I agree that all these new features are coming very quickly but I guess that's what's needed with the rate that technology is advancing and the increasing demands in performance and visuals. I think the problem isn't the speed, it's that beginners need to know what tool they should use for what job and whether to start learning the current systems or to start on the new systems.

[@cok3n]

kids at school one , two , three and kids at youtube first, second , third......

[@DapperDinoCodingTutorials]

Huh? :D

[@younghsiang2509]

You should do that in Awake instead of OnEnable XD

[@seraphimsarecoool]

lol, this looks very similar to unreal's UI editor coincidence?

[@cyqry]

Bronze Medal?

[@DapperDinoCodingTutorials]

Sure thing! 🥉

[@dedovagency]

lol windows forms for unity

[@DapperDinoCodingTutorials]

It is nice to now have a dedicated UI builder

[@nati7728]

They should change the "Q" for query api to avoid associations with weirdo american politics