UI Toolkit for Runtime [Unity] 8/10 - Switching menu screens

in this lecture we will create settings screen and learn how to switch between it and the main menu screen using simple transitions so let's start by creating a new ui document called settings screen most of the elements will be similar to what's already present in the main menu screen so we can copy all the ui elements from it but before we paste them in the new settings screen we have to create a temporary blank visual element so that we can add an existing menu stylesheet so now let's save it open the main menu screen we can now select all the elements and copy them into the new settings screen and we can of course delete the the first element that we've created and now let's make all the necessary changes so main menu screen should be changed to settings screen and then a start title should be changed accordingly as it is going to contain a text and not a graphical logo we can change its height to 100 pixels and the background should be reset to a default state by clicking on set now to display a title let's add the label called settings title as a child we can set its size and width to 100 percent and the height also to 100 we can choose this font and change the size to 40 and color to white we can also set the alignment to center and middle so that the text is right in the middle of the settings title visual element we also have to change the actual text of this label to settings now as for many buttons let's delete one button as we will only need two of them then set the first button text to dash and the second button text to back the name of the second button should be back to menu button the first button doesn't have to have any name set for now now let's save it and let's go back to unity where we create a new object under ui give it a name settings screen and add a panel renderer script to it next we have to repeat the steps that we've done for the main menu screen and that is to assign a ui document and a stylesheet to the fields and the panel renderer script finally to make it all work let's add some new code to the panel manager script we start by adding a new field of panel renderer type called settings screen then to enable transitions between ui screens let's create a method called set panel enable state that will either enable or disable panel depending on the arguments passed to it now i have already prepared this method so i will paste it in here and we'll go through it step by step so this method has two parameters the first one of type panel renderer and the second of type boolean next depending on the state the method sets the display style of the panel renderer either to flex or to none flex means that element is displayed normally and none means that the element is not visible and is absent from the layout next we set the enabled property of the panel to the final state and finally we do the same with the event system now setting the display style of the panel to none is what actually causes a chosen screen to disappear the method disables the panel renderer and the event system to make sure that there is no any kind of interference when we look at and interact with a different screen we could achieve the same effect in a different way but this code makes the most sense into this particular case however if you would like to modify and improve the code feel free to do so now we can use the set panel enable state method that we have just created to define two other methods the first one go to main menu screen is going to enable the main menu screen and disable all other panels similarly go to settings screen method is going to enable the settings screen and disable all other panels for now we have just two panels but we will add one more at the game screen later on in this course next we go back to bind main menu screen method where we add a support for settings and exit patterns so that when we press the settings button we will be moved to the settings screen we have just created and when we click the exit pattern the application will be stopped and terminated to achieve this we use the go to settings screen method that we have created a moment ago now to make sure that whenever we launch a game the first panel shown will always be a main menu screen let's add a go to main menu screen function to a start method now when we can freely move between the two panels we have to take care of what's going on inside the settings screen we can copy the content of the bind main menu screen method and only change the name of the button to back to menu button and its content to go to main menu screen function finally let's assign the bind settings screen function to a pulse uxml reload delegate so that when the settings screen panel is shown it's going to allow the action for clicking the pattern inside it we can now save the script and go back to unity now we also have to add the event system to a settings screen object so that we can trigger different events and also let's add the settings screen to settings screen field in the panel manager now let's check whether if our recent changes actually work let's click the settings and we are moved to a settings panel now let's click back and we go back again when we click exit the applications should quit but because we are in the editor nothing will happen so now let's maximize the game view and let's see how our menu actually looks in full screen so we can see that everything works as expected to sum up all the things in this lecture you have created settings and game screens and learn how to switch between them using simple transitions

Channel: 🕹️ Code with Mat

Views: 16,702

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

Id: a8g-MqTUXiU

Length: 11min 46sec (706 seconds)

Published: Thu Aug 19 2021