Get started with UI Builder (UI toolkit) - time to ditch old UI system?

some time ago i asked you if you like working on user interfaces in your projects it turns out that many of you don't and often it's just a necessity why is it that way it may be because the ui system is a bit confusing or you might prefer to code your ui like in html for many of you there is an alternative on the way it's called ui builder it allows you to ditch the old ui system and create a simple interface using either new tools or xml files in this episode i will show you how to install and setup everything to show your ui in the game then we'll create a simple main menu and finally we'll hook up all buttons to the script let's go at the time i'm recording this episode ui builder is not yet included in unity so we'll need to add it manually using package manager open ut 2020 or newer and at the very top select window package manager wait a second till everything loads up and click on this small plus icon here let's select add package from git url and type in com.unity.ui.builder press enter this package includes a nice graphical editor that will allow us to build our ui then we'll need to install a second package that will allow us to place builded ui on the game scene again click on the plus icon then add packet from git url and this time type com dot unity dot ui press enter and give you a few seconds to download and install this package okay so this is our scene with the simple game background let's add some ui to it right click in the hierarchy and select ui toolkit ui document that auto-generated this game object that contains event system to control input panel settings object that has some basic controls which we leave by default for now and the source asset which contains all the data about objects in the scene as you can see the last one is currently empty so let's create it right click in the assets tab and select create ui toolkit ui document that created the visual canvas asset that i will now call main menu template let's link it to the corresponding place in the ui document on the scene and finally double click it to open the editor this is a completely new window introduced with the ui builder package we've installed here in the middle you can see a representation of our game view right now it doesn't look familiar so let's fix it click on the canvas window frame and here in the inspector select match game view toggle that immediately resize the canvas to match game resolution additionally to help us even better understand what's going on turn on canvas background here you can decide to fill it with either solid color image or the camera from the scene perfect now when everything is ready let's add some components to the scene here in the bottom left corner you can find a grid of all available objects let's click on the button and drag it into the middle of the viewport you can see that our button immediately appeared at the top of the scene firstly let's resize it to a more button size and then here in the inspector let's also change its text to start game down here you can also find tons of useful styling settings for example in the background tab i can change its background color to blue in the border settings i can remove that ugly black outline and give it rounded corners i think it's time to check it out in the scene go back to main unity window and press play here you can see our gorgeous new start game button you might have noticed that there are some differences in the design between the ui builder preview and the final look of the button to fix that simply at the top of the ui builder select runtime theme that way you will see components the same way as they will look on the finished product now time for some simple placing changes based on this sketch i'd like my button to be placed inside of this white box that will be in the middle of our scene to create a simple rectangle let's use this visual element container drag it into the scene and resize it i will also quickly style it by changing its background color to white and setting border radius to 15 pixels as you can see by default all elements are placed one under the other to place our button inside of the white box simply take it and drag it into the other object great now time for some alignment click on the visual element and find align settings in the inspector here we specify how children of this object should be placed in this case i'll select to center both in horizontal and vertical axis that setting will apply to all elements inside of this white box so for example if i would now add a new label inside of it that label will also be centered now how about the white box itself we don't want to have it stuck to the left edge but we like to have it in the center of the screen unfortunately we can't do that easily without creating one more visual element that will be its parent luckily that's pretty easy we'll drag in a new visual element into a scene and call it background for now i'll make it black so that you will be able to see what's going on our goal will be to resize it to fill the entire screen to do so in the flex group change grow setting to 1. what grow does is that it resizes the black background to fill the entire space left on the screen then take our white box and place it inside of the background object now when there are no elements next to the background our black visual element has been resized to fill the entire screen the last step will be to center white box by doing the exact same thing as before click on the background and in align settings select center middle perfect time to work on the content inside of the white box based on my sketch i'd like to have a label sync main menu at the very top and two identical buttons let's start with the label i will work on already created one but remember that if you like to add a new one you simply need to drag and drop this label control from library the first thing i'll do will be to make our label a bit bigger a size of 20 should be ok and to change its text to main menu obviously the label should be above the button and the easiest way to do it would be to just change the position of it in the hierarchy that works well but to be honest i'm not very happy about the position of it i think it should be on the top of the white box no matter how many objects there are the way to do it would be to change the position type of the label from relative which stacks all items one after another to absolute that way our object won't take into consideration any other objects next to it and we'll be able to position it however we'd like as you can see selecting that placed our text in the middle but if we go again to the position options and modify the top field by typing 20 pixels now you can see that our text is always placed 20 pixels apart from the top border of the white box great now let's move on to buttons as i mentioned a second before i'd like my second button to have the exact same design as the previous one if i would drag in the new button from the library into the viewport it features the default design and styling it the exact same way would be pretty annoying fortunately ui builder features great stylesheet options that might be familiar to you if you've ever worked with the css files the way it works is that we can create a style based on already existing button and then apply it to the new object let's see that in action i'll click on the existing style button and here in the inspector we can find a stylesheet option let's create a new style class that will store all style properties of this button name it button style and click on the extract inline styles to new class because we don't have a style file yet unit will suggest creating one for us just select add to new uss and save it somewhere in your project now after we created our class you can see it here on the left we can now grab it and drop it on the default button and here it is we have both buttons styled exactly the same way what i love about those styling classes is that i can now easily edit the both buttons at once just click on the style and in the inspector change any settings like the margin of our buttons let's go with the 4 pixels and the text size i'll make it a bit bigger as you can see all changes are automatically reflected to all buttons the very last thing before moving on to the scripting will be some basic button animations if i would select the preview option and try to click a button on the scene you can hardly see any feedback many users might think that the game is broken let's quickly fix that here in the styles list i need to duplicate the existing style and then rename it to the same name but with the colon hover at the end that way we've created a style variation that will be only active when the user mouse overs over any button so make sure the new style is selected and modify any value for example background color to a bit darker shade now when i mouse hover over our buttons you can immediately see the difference to set up something like this for the clicked button just duplicate the style class once more and this time modify the ending as active after another color change and maybe some text tweaks you can see three separate states of the button normal hovered and active great time for the last part how to script our buttons and objects on the scene my idea is to create two interactions my first button will simply transition to a different scene and the second one will display a simple message text let's quickly set it up i'll change the text on the second button to show message and i'll also create a new label that will be just under the second button this label by default will be hidden so here in the display options select the crossed eye button the final step before creating our script will be to name all objects on the scene that will come handy in just a second so the first button will be start button the second one will be a message button and the label with the message should be called message text great time to go back to may unity window now click on the ui document in hierarchy and create a new script called ui controller open it here at the very top type using unity engine dot ui elements to start working with the ui builder then we'll need to declare a few variables that will correspond to the objects in the ui type public button start button public button message button and public label message text after that let's get those three objects from the ui document in the start method firstly we need to get the root visual element which contains all the information we need type var root equals get component of type ui document dot root visual element now we can assign variables by typing start button equals root dot cue type of the button and passing the name of our element in the ui builder so in this case start button now repeat the same for two other objects message button equals root dot q button message button and message text equals root that queue type of the label this time and pass in message text remember that you can get source files for all my unity tutorials by supporting me on patreon link in the description great now we can start coding our buttons let's firstly create two methods that should be triggered on button press type void start button pressed open brackets and void message button pressed open brackets if you watched my tutorial about creating the main menu in unity the first method should be pretty easy to implement at the very top type using unity engine dot scene management and in the method itself type scene manager dot load scene and passing the name of the scene in my case game now let's move on to the second method here we'd like to do two things first change the text of the label and second display it to do so type message text dot text equals and here type your string then message text dot style dot display equals display style dot flex that line should unhide our object finally to assign those methods to the buttons here in the start we simply need to type start button dot clicked plus equals start button pressed and message button that clicked plus equals message button pressed okay everything should be ready to test go back to unity and press play now both options are interactive and clicking on the second button shows the message while clicking the first button triggers another scene so that's it thanks a lot to my awesome patrons that support this channel be sure to check out my other videos about unity see you soon

Channel: Coco Code

Views: 35,204

Keywords: unity, cococode, bionicl code, bionicl, unity3d, Maciej maj, tutorial, guide, playfab, coco code, unity tutorial, unity UI Builder, Unity UI, Unity GUI, Unity UI Builder first steps, Is Unity Builder better than Unity UI?, How to create main menu in UI Builder, UI Builder, UI Builder vs Unity UI, Unity ui alternative, unity toolkit, unity builder button, ui builder button, ui builder script, ui builder scripting, how to use ui toolkit, ui toolkit button, ui toolkit script

Id: NQYHIH0BJbs

Length: 16min 1sec (961 seconds)

Published: Thu Jun 10 2021