How to make a UI management system in Unity

hello and welcome today we're going to be making a ui management system in unity engine it's going to be very easy to use and will require a very few amount of code to be actually implemented so to get started we need to create a canvas you can do so by right clicking on the hierarchy and selecting ui and clicking on canvas this will create a canvas and an event system so after that we need to create a scripts folder and create two scripts one called view and another called view manager let's first double click on the view script to open it in visual studio once the script is open we need to make a public abstract class and call it view and it should derive or inherit the main monobehavior base class so we need a couple of methods right now first one is a public abstract void initialize and the second one is going to be a public virtual void height which is going to be called game object that's it active to false and the public virtual void show which is going to do the inverse of the hide method show the object or set the game object to be active excuse me so the use of these methods is going to be simply the initialize one is going to be for initializing buttons or scroll views on our view the hide method is going to be used to hide our view and the show method is going to obviously show our view the reason the first one is abstract because each view needs to be always initialized okay and the reason the second two methods and two other methods are virtual is because for example there's views that need to be hidden and perform some kind of operation for example you have a settings menu when you hide it or when you show it you would like to save or load data to the desk or do whatever so that's why they are virtual now after creating the after writing the following code we go back in unity and wait for it to compile our code changes then we go into the view screen into the scripts folder and create a view manager script and double click on it once you're in the script we're going to type private static e manager give it the s instance name this is going to be basically a singleton reference to the vmanager class so each scene is going to have a an instance of the view manager class and we're going to assign it on the awake method say instance close this once we do this we need some instance fields first a serialized field of type view let's call it starting view another serialized field of type view array called views a private view called current view and a private excuse me reads only stack of view click on this view history and initialize it in the sorry initialize it in line so the starting view is going to be the view that is first shown to the player when the game starts say for example the main menu or the hud for the in-game player and the views array is going to be a list of all of the views that we are able to manipulate for example the main menus ceiling menus etc the current view is just going to be a reference to the currently shown view to the player and the history view stack is going to be basically the history of the views that we have opened for example if i go from the main menu in the settings menu and i would like to go back this is where the history stack will be used for so let's create uh some static methods the first one is going to be a public static t get view which will allow us to search for a view of a specific type we say where t is a view and we use a for loop to iterate over our views a little mistake over here so excuse me when we loop we excuse me very sorry we check for the instance the views at the current index and see if it is the needed type or the view we actually need we simply say if the cur the view at the current index is of the type we specify over here and we simply store this view type in a variable if it is of the required type and we simply return the the key view otherwise we return node for example if we didn't find the view or if the user didn't include the view in the views array now we need a black static void called show it's going to take a generic parameter of type t i'm going to say where t is view i'm going to give it a parameter of type boolean and call it remember see that so this default value to true so this becomes an optional parameter meaning you can or cannot write it so let's go here and do a for loop and iterate over our views array we check if the current view sorry of the view at the current index is t and we don't need to store the time of the view this time and we do a couple of checks first if the current view is not equal to no and if we should remember it we say seonstudents.history.bush the current view and after that we hide the current view using the hide method implemented earlier excuse me and after that we simply set sorry say v s instance dot views the current index dot show and then we set the current view to this view for the view of the current index so that's pretty much it for the first show method now i need to implement another one that takes a reference to a view instead of a generic parameter which is going to be useful in some scenarios public sorry big static void show and the evolution called november as well and now we iterate over s3 we don't need to iterate over our views we simply check if the instance.currentview is not equal to no and check if we should remember it and as we did above over here we push this current view to the history stack and we hide it like so and after that we set the current view the view we want to show and before that we show that so that's pretty much it for the second uh show method now we need a method to go back if from the current menu like we said above over here if i am in the main menu and go to the settings menu i would like to go back i will be using the method we are about to write so public static void show last we're going to do f in this instance.history.count is not equal to zero so if we actually are able to go back or we have a recorded history of views we something called the show method that takes in this instance dot history dot bob the bob method takes the last element to add it to the stack and removes it from it and returns it so this is basically for example i have main menu then i go back i'm going to go to settings main is going to be pushed to the stack so the stack is going to have domain in it and when we call bob the stack is going to remove main and return it so that's pretty much the basic idea so i have main i go to settings main is going to be pushed in the stack when i call bob main will be returned and the stack will be empty so let's remove these comments now this comes now and let's in the show call over here we need to say the remember parameter to false because you don't need to get stuck in a loop so for example i go to the main and remember it and go to synthetic and remember it when we cycle to just keep cycling between the last and current menu lasting current menu so that's pretty much it for the va manager class now we need to implement it in the current scene let's go back in unity excuse me and once it combines our code we need to create an empty game object and call it view manager put it at the top of our scene reset its position set its layer to ui and let's add the view manager component and in our canvas we need to start by creating a symbol main menu view and a symbol settings view so let's go ahead and create do this so we need an empty game object called main menu set its anchor preset to stretch okay on both axes and set all the left top right and bottom offset to zero now let's create an image inside of it or a couple of buttons let's go a button excuse me come on unity so once we create the button let's go like in the start button let's go with settings button okay and let's set the text to settings and let's set the button let's keep the button at its current position let's add a text for the title so sorry title text set it to anchor at the top of the screen set its height to 128 hours goes text 64. and let's do this so our text is at the middle top of the screen let's align by geometry and center our text and set the size to your best fit let's call it example let's make it the main menu okay now let's duplicate the main menu and have a settings menu let's hide the current main menu so it's not selectable and it's not visible let's say settings menu and let's go here call this one the back button let's change its text to back and we just need to sorry disable both of these objects now and currently there is not much use for both of them so let's add some functionality to them functionality to them let's go right click on the scripts folder create a new script and call it main menu view wait for unity to compile our changes sorry to combine the script creation double click on it so we're going to remove all of the default code and inherit from the view class we'll need to implement the abstract void initialize and we're going to add a reference to our button so serialize field private button start button and in the initialize method we simply say start button dot unclick dot add listener via manager dot sit or so you show the me the settings menu view which we didn't create later so let's go sorry we didn't create yet let's say settings menu view and let's remove the users namespaces and let's go ahead in unity and create this settings menu device sorry settings menu view oops just wait for unity to open the second instance of visual studio once we open it we simply remove the default code and heard from view as well we need to implement the abstract class let's add a reference to our back button and that's excuse me add a callback handler to the button on click so i'm going to add listener viewmanager.show last which will allow us to go back to the last view as you can see over here now it's fixed let's go back in unity once it finished has finished compilation let's go in the main menu and enable it add the main menu view script drag our settings button which we have incorrectly named here so let's fix this quickly let's go settings and let's go back in unity our button and let's go back here in the settings menu add the settings menu view script let's drag the back button and disable the settings menu the view manager let's go in the views list array and drag the main menu and the settings menu and let's set our starting view to the main menu now for the starting view to actually show let's go in the view manager and go all the way up straight all the way down and add a private void start we're going to iterate over all of our views and call views i dot initialize to initialize the view then hide it initially so we call hide then simply check if the starting view is not equal to no we show the starting view and we want to remember the current view okay so let's copy the awake method from here to down here and let's go in unity so once we have finished the completion you can see that when you run the game the main menu view will be automatically shown and when i press the settings button you'll get a settings menu and i press back i will go back to the main menu so this is useful because sorry this system is useful and better than most of other ui management system i have used before audio management scripts i've used before is excuse me it allows you to initialize and order your views in any way you want and you can also disable them initially and the view manager will handle their initialization and showing and hiding of them which is pretty useful and actually very efficient instead of having to always store a reference to the view at multiple areas or have to use an enum for example say an item that has a list of all the possible views and you iterate over a list and check if it's match if it matches or stuff like this so this is pretty simple as you can see it's just 95 and 11 lines so that's pretty much 806 lines of code and it's pretty efficient also and allows endless customizability so i just need to implement the view class and there is also a way you can use interfaces but i use vue as a class for convenience so that's pretty much it i hope you enjoyed the video the source code will be included in a guest in the link in the description of the video thanks so much for watching and i'll see you in the next one

Channel: Winterbolt Games

Views: 7,236

Keywords: unity, ui, ui management, easy, view, view manager

Id: rdXC2om16lo

Length: 19min 34sec (1174 seconds)

Published: Sat Sep 19 2020