UI Toolkit for Runtime [Unity] 6/10 - Hierarchy of UI components

in this lecture we will create a hierarchy and layout of ui components to build a main menu screen which will contain a background a logo and three buttons to achieve this we have to take into consideration different properties of the buttons and the panel that the buttons will belong to because this is an introductory course about the new ui toolkit for runtime i will not go too deep into the details of how to create different layouts or describing all the properties that we can use to achieve different effects of positioning ui elements on the screen probably as this course evolves i will add more lectures focused only on positioning ui elements for now just remember that the layouts in new ui toolkit are created using a flexbox system if you would like to learn more about positioning ui elements using both their position and size as well as the flexbox layout system to create lists of elements you can study the resources listed in that section positioning size and layout of ui elements can seem difficult at first but it's pretty straightforward once you grasp the basics of how it's all connected and related to each other the beauty of using css for ui is that we can create very complex and generic ui layouts where the sizes of ui objects depend on each other as well as on the resolution of the final screen we created a style of the button but we can change it a bit so that it looks even better let's start by increasing the font size of the text property to 20 and let's also change the color to plain white we can also change the horizontal alignment to center and vertical alignment to middle so that the text is right in the center of a button now let's save the changes and now we can move on to creating our main menu screen so let's start it by defining a screen style that is going to be a background for all other screens so let's create a new visual element let's put it at the top of the hierarchy and let's call it main menu screen and now we can change the properties of this component so let's set the flex grow property to one so it's going to fill whole available space and because patent is going to be one of the children of this object so main menu screen is always going to be filling whole available space just like it is now next we set the alignment of items to center so that whatever is a child of this visual element it's gonna be right in the middle and it's all gonna make sense later on when we actually create the rest of the components and now we can save this inline style to a class called screen so let's type in the screen class and let's click extract inline styles to a new class screen now appeared in our list of styles and we can move on to adjusting and assigning background texture so next we change the background image texture to background this is the graphic that we previously imported in the graphics folder the scale mode should be set to scale and crop so that it nicely fills all the available space no matter what the resolution of the actual viewport is now we can save this recent changes to class called screen background and we can extract the style so you can now see that when we change the size of the ui window the background scales together with it and it always fills it evenly it's important to create such universal and generic interfaces because when we want our application to run on different devices it's hard to predict the size of all of them now we can save the recent changes okay now we can move on and for now let's delete a button that we've previously created as we won't be using it for now and now create a new visual element inside the previous main menu screen and call it menu center panel we can change its align items property to center and let's also set justified content to center in the size section the width should be set to 50 percent and hate to 100 so that the panel containing the menu buttons and the title logo will be placed in the middle but occupying the space from top to bottom let's now extract these properties to a menu center panel class we also have to create a class for a background of the center panel so let's change the background to a black color and set the opacity to 100 and now we can save this style to menu background color class and as you can see we have a nice dark transparent panel right in the middle of a screen and depending on the resolution of the final device or a screen it's always going to be evenly placed at the center now we're going to place our main logo so let's start by creating a new visual element inside the menu center panel name it menu start title [Music] and change its size so that the width is set to 100 percent and height to 35 also the minimum height should be set to 150 pixels so that when the ui canvas scales down the logo will still remain visible a graphic for the logo should be stored in a graphics folder as a logger.png and the scale mode should be set to scale to fit we can also collapse other properties so that it's easy for us to see what we've just changed we will not save the style to the class it's going to remain as an inline style because we will only have one object with a logger texture assigned to it however remember when you plan to use a particular ui object more than once you should always try and export its properties to a new class so that when you make some changes they're going to be consistent throughout all the objects we can also save the rest and changes please remember that it's important to save changes often especially in the beta version of both the unity and the ui builder that we're now using because whenever something wrong happens like for example an unexpected crash we won't lose our work moreover it's worth considering using a system version control because even when we save the changes when there are some serialization problems with the for example a ui boulder that happened also to me we can easily lose some of our work and we will have to repeat some of the steps so it's important to back up the changes using for example a source tree or a git svn now below our logo we create another visual element called menu buttons list and let's change the align items property to center and justify content to flex start also if we want to override the default state of particular property so for example the default state of justified content is flex start but we would like to make sure that it always is like start no matter for example what the settings of a parent are then we gotta change it to any other state and then go back to flex start then the width should be set to 50 and minimum width to 200 pixels and let's also export it to menu buttons list class now we are almost done with creating main menu screen last thing is to add three buttons named start settings and exit then we will have complete functionality of our first menu screen so now create a new button inside the menu buttons list and assign a button class to it but we want buttons in the menu to look slightly differently because its size is mostly going to be controlled by the menu buttons list we have to give it more freedom by changing a width to 100 percent and the height to 100 pixels let's also change the top and bottom margins to 10 pixels and finally the font size can be set to 40. now save the recently created style to menu button class let's now duplicate the first button two times we can also make the canvas slightly bigger so that it's easier for us to see how it's gonna look later on and we can now name them accordingly so the start button will be called start button and the text should display start the second button will be settings button text should be settings and finally exit button with the text set to exit we can also change the hierarchy display mode so that we can see the type of the element in the list okay so this is a complete main menu screen later on we will add functionality so that when we press start or settings button we're going to be moved to another screen but for now we can click the preview and check how it's gonna look during runtime everything works so we can save it and move on to the next lecture to sum up this lecture you have learned how to create a hierarchy and layout of ui components then by organizing a background a logo and three buttons we build a main menu screen

Channel: 🕹️ Code with Mat

Views: 9,377

Keywords: UI Toolkit, UIElements, Unity, UI, Unity UI, Runtime, Development, Programming, Flexbox, XML, UI Builder, Udemy, Course, Tutorial, Learn, Unity 3D, css

Id: tbWce-1fPJM

Length: 16min 11sec (971 seconds)

Published: Tue Aug 17 2021