UI Toolkit for Runtime [Unity] 7/10 - Clicking a button

welcome to section 3 of this course during this lectures we will add interactions to ui elements and we are going to connect the displayed text with data in the code in this lecture you will learn how to assign a simple behavior in code to a start button in the ui document we will also learn some theory behind the script that takes care of that behavior so let's close ui builder for now and then let's create a new script inside scripts folder and call it panel manager the panel manager is a script that will manage all the ui screens in our scene it's going to take care of triggering transitions between the screens by turning them on and off inside of it we will also create so-called binding of the menu buttons then we have to create a new game object called ui inside the syn hierarchy and then we add panel manager script to it now we create main menu screen object under the ui object we also got to make sure that all the parameters for position and rotation are set to zero even though these objects won't be visible we still want to be able to locate them easily inside of 3d view and now we have to add a panel renderer script to our main menu screen object a panel renderer is a class used to render a uxml file and stylesheets in the game view we can set its initial state by assigning to it a visual tree asset which is our uxml file as well as a stylesheet file so let's go to ui and move main menu screen to uxml field as well as a menu stylesheet to where you need to stylesheetfield now let's open a panel manager script i have prepared an initial version of a panel manager script and now i will go through it together so that you can understand what each part of it exactly does i'm gonna delete what's already in the script by default and i'm gonna paste the code that i've prepared previously in the beginning we create a public variable of type panel renderer so that we can assign main menu screen asset to it we will go back to on enable method in a moment but let's first take a look at bind main menu screen function inside of it we assign a visual tree from our main menu screen to the root variable of type visual element the visual tree is the top level element we will use it to get access to all other visual elements including for example a start button we assign it to a variable of visual element type because it's a base class of all other ui elements in the next lines we create a response to an event of clicking a start button first we utilize uquery which provides a set of extension methods for retrieving elements from a visual tree uquery is based on jquery or link to use uquery to retrieve elements use the uquery extensions.queue or initialize builder with viewqueryextensions.query in this case we use an extension method q to find the start button in the tree of ui elements in this method we pass the name of the button as a parameter of this function and it has to match the name that we have created in the ui builder as otherwise the program will not be able to find it in the next line we check whether the button was actually found and then we add a test behavior to a clicked delegate that will just display a simple message in the editorial log clicked delegate is a part of clickable class that inherits from manipulator classes down the line and it is a part of baden class other actions are possible as well now let's go back to on enable method inside it we assign the bind main menu screen function to post uxml reload this is a delegate that gets triggered after uxml document has been loaded now we can go back to unity editor but before we do that let's change the name of a class to panel manager now we can save the script and go back to editor so now let's assign a main menu screen object to a main menu screen field and the panel manager now one last thing that we have to remember about is that we should add an event system to a main menu screen object now let's click play and after we click on the start button we should see the test message in the editor log so now we have a user interface with a simple logic bound through code and now we can move on to the next lecture where we will learn how to use binding to create simple transitions between the screens so to sum up in this lecture you have learned how to assign a simple behavior in code to a button in the ui document we also created an organization structure in the scene for main menu screen panel and other panels we will create soon

Channel: 🕹️ Code with Mat

Views: 12,942

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

Id: 11Ngw3fFtAE

Length: 7min 24sec (444 seconds)

Published: Wed Aug 18 2021