Make A Game Like Pokemon in Unity | #49 - Creating Menu

hey everyone welcome to part 49 of my pokemon game series in unity so in this video we'll look at how to create a menu like this so once i press enter i can open the menu and select different items in it and if i select save then that will save the game and if i go somewhere else and select load that'll load my last save all right so we look at how to do all that special thanks to all my patreons for making the series possible by becoming a patreon you can support me in the making of the series and get access to some cool rewards like the complete project files of the series which also contains some advanced features that are not covered here so let's start the video so first let's create the ui for the menu so inside my essential objects we will create the menu ui under the canvas so let me actually turn this canvas into a prefab so that we can easily access it so first i'll rename it to ui canvas and then i'll drag and drop it into the ui folder inside game all right so it's a prefab now and we can easily access it from here so next let's create the ui for the menu so i'll create a new image and i'll call this menu all right so i want the anchor of this ui to be at the right of the window so i'll hold alt and click here to set the anchor and position so the anchor is going to be the right of the window and i want it to stretch vertically so i'll select this all right so i'll increase the size of my image a little let's put it around 180 and let me just resize and reposition this all right that looks good to me so next for the image of this i'll choose the dialog box image okay so we have the background for the mini ui so next let's add the menu items so i'll right click on the menu and i'll create a new text i'll call this menu item so the first menu item is going to be pokemon okay so i'll change the font to orange kit font size to something like 32 and if i make this big it's visible now i'll change the horizontal alignment to center yeah that's all we need to do for the menu item so next let me duplicate this and create the second menu item so the second item is going to be back so i want to arrange this menu items as a list so i'll use vertical layout group for that so to the menu i'll add a vertical layout group all right i'll turn off child force expand height so that the items doesn't take up the entire height of the image and next i'll turn on control child size width and height and i'll change the spacing to 5 so that there is some space between the items so next let me duplicate this and create menu items for save and load okay so this looks good i just want to add a little bit of padding on the top so i'll change the top padding to 10 so that there is some space over here so yeah that's it we are done with the ui so we want this ui to be inactive by default and we want to activate it when the user presses the enter key right so let's write the script for that so inside scripts i'll create a new folder called ui and inside this i'll create a script called menu controller so inside the script i'll create a public function car open menu when this function is called we want to activate the menu ui right so first let me get a reference to the menu game object and then inside the open menu i'll call menu dot set active true all right so let's attach the menu controller to our game controller object all right we can't attach this directly to the menu because menu will be inactive by default so we have to attach it to game controller so next let's assign the reference for the menu so next we should open the menu when the user presses the enter key alright so inside my game controller script inside the update we only want to open the menu when the user is in free roam state right so inside here i'll check if the user pressed the enter key all right so the key code for enter key is return so if the user pressed the enter key we should call menu controller dot open menu function so in here first i'll get the options to the menu controller so let me create a variable for it and i'll grab reference to it from the awake all right and from here now we can just call menu controller dot open menu so let's go to unity and test this all right so if i press enter you can see that the menu is being opened so next we want to implement menu selection right once the user opens the menu screen he should be able to select different items in here so this is going to be pretty similar to how we implemented more selection party selection and all that so let's go ahead and do that quickly so first inside the menu controller we'll create a public function called handle update and from the game controller we have to call menucontroller.handler plate if the menu is opened right so what i'll do is i'll create a new state for the menu okay and when we open the menu i'll set the state to gamestate.menu all right so now when we open the menu we'll be in the menu state and if we are in the menu state then we should call menu controller dot handle update okay so now the handle update will be called from the game controller so next inside the handle update we need to handle menu item selection so first we need to get all the items in the menu so i'll create a list to store all the items and this will be a list of text i'll call this menu items all right so in order to use text we have to import unity engine dot ui namespace and we can get all the menu items from the fake function okay so to get the menu items i'll call menu dot get component so we have to use get components in children because all the menu items are children of the menu game object right so we have to call get components in children should we get components since we want to return multiple and what should we get we should get a text right so let's store this into menu items and we have an error here since this returns an id so i'll use to list to convert it into a list and in order to use to list we have to import link all right so now we have the list of menu items here so next let's write the code for selecting it so i'll create an integer variable called selected item it'll be 0 by default and in the handle update if the down or up arrow key is pressed then we'll change value of the selected item variable so first i'll check if the down arrow key is pressed and if it's pressed i'll increment the selected item and otherwise if the up arrow key is pressed i'll decrement it so once we do this we have to make sure to clamp the selected item between zero and the length of the menu item so i'll say selected item equal to math if dot clamp of circle item and we want to clamp it between zero and menu item start count minus one right since selected item is an index its value will be from zero to the length minus one all right and finally we have to call a function to update the selection in the ui so i'll create a function like update item selection and inside this function i have to loop through all the menu items so i'll use a for loop for that so if i type 4 and press tab twice it'll automatically create the for loop for us and now we can edit these variables over here so instead of length we need menu items.count since we want to look through all the menu items all right so in here if i is equal to equal to selected item then we'll change the color of that menu item to a highlighted color right so i'll say menu items of i dot color equal to highlighted color so we don't have that variable right now we'll create it soon and otherwise if it's not the selected item then we can just set the color to black okay so how can we get the highlighted color so let's look at how we have done that for more selection and accent selection and all so i'll go to the battle dialog box and here if we look at the move selection we are using a variable called highlighted color and we are defining that variable in the battle dialog box script itself right so similarly we can create a variable over here but the thing is usually the highlighted color is going to be same for all the ui in the game so it doesn't make sense to create multiple variables for it so let's actually define it in some global script so that we can reuse it from all the other scripts so inside my scripts folder inside gameplay i'll create a new script called global settings okay and inside this we'll create a variable for the highlighted color okay and we'll create a property to expose it all right and finally i'll use the singleton design pattern here so that we can access the script from anywhere so i'll create an instance of the script so this has to be static all right and i'll initialize it from the opaque the same stuff we do for all singleton classes okay so now let's go back to the menu controller and we can get the highlighted color from global settings dot i dot highlighted color okay so now you can go ahead and use this as the highlighted color everywhere instead of creating separate variables in each script so here instead of making this a serialized field i'll just make it a normal variable and i'll assign the highlighted color from the from the global settings actually we can't assign it directly like this we have to create the variable here and then do the assignment from some function like start okay so i'll move the assignment to start function so now the battle dialog box will use our global highlighted color variable so now we just have to change it here and it'll change in all our uis so let's actually go ahead and attach the script somewhere and assign the highlighted color so i'll attach it to the game controller object okay and for the highlighted color i'll choose a blue like this and you also have to make sure to change the alpha to 100 otherwise the color will be transparent and it won't be shown so let's go back and review what we have done so in the menu controller we are updating the selected item on down or up arrow key process and then we have created a function to update the selection in ui so let's actually call this function from here okay so this will work but we can make this a bit more efficient so right now we are always calling the update item selection function but we only need to call it if the selected item changed right so what i'll do is i'll store the previous selection in a variable and i'll only call this if the previous selection is not equal to the selected item okay just a small thing to make this more efficient so there is one more thing that we need to do since we are only calling this when there is a change in the selection we have to make sure to call it when we open the menu all right so this will make sure that an item is selected when we open the menu even though there is no change in selection okay so we are done with the code for menu selection so let's go to unity and test this all right so if i press the enter key the menu opens and i'm able to select different items in the menu so next if i select a menu item and press set then we should perform some action right so for example if i select save and press set then we should actually save the game so let's look at how to do that so in the handle update we'll check if the z key is pressed all right and if these are keys pressed then we have to perform the action for that menu item so i don't want to put the action for each menu item inside menu controller itself so for example if we take save i don't want to put the code to save the game inside here right i don't want it inside menu controller instead i want it in my game controller itself just like now so how can we do that so what i'll do is from the menu controller when the user presses z key i'll fire an event that will notify the game controller that a menu item is selected and then from the game controller we can execute the action so in here i'll create an event called on menu selected okay so in order to use the action we have to import system name space and in this event i also want to pass the selected item as a parameter so i'll add an integer as the parameter for the action so we have an event car on menu selected and it'll be fired when user presses the z key so next i'll duplicate this and create another event car on back so this will be invoked when the user presses the x key so this doesn't need an integer parameter so i'll remove that so now inside the handle update if that key is pressed i'll invoke the on menu selected event okay and i have an error here it's because we have to pass the selector item as a parameter so let's do that all right and next if the x key is pressed then i'll invoke the on back event okay so this way we can notify the game controller about selection but we also have to close the menu when this happens right so for that i'll create a function call close menu and inside this function i will make the menu game object inactive okay and let's call this function when the z key or x key is pressed all right so now let's go to the game controller and listen to these events so inside the start function of game controller first i'll subscribe to the on back event of the menu controller um when the menu is closed by pressing the x key all we have to do is go back to the free roam state right so i'll create a lambda for doing that okay so when we close the menu we'll go back to the free roam state so next let me subscribe to the on menu selected event okay so there is going to be a lot of code inside this function so i'll actually make it a normal function instead of making it a lambda to keep it clean so i'll create a function car on menu select it and let me just create the function over here okay so this function should take an integer for the selected item so here i'll check the value of selected item so if the selected item is equal to zero it means pokemon is selected else if it is 1 that means bag is selected otherwise if it's 2 that means save selected and finally if it's three it means load is selected all right so right now we don't have an action for the pokemon and bag menu item we'll be implementing that in the future videos but we know what to do when save or load item is selected right so when save is selected we just have to call saving system dot save so i'll copy that and when load is selected we'll call saving system dot load okay so all these things will be done through menu selection and we don't need this code will do saving and loading on key process we just wrote it so that it can be tested easily so now we can just remove that all right so now the saving and loading should happen when we select it from the menu so one more thing i want to do is after all this i want to set the state back to free roam so that player can move around like usual all right so that's all we have to do so let's go to unity and test this okay so if i press enter i can get access to the menu and if i press x then we are back in the free roam state and we can move around so let me open the menu again and now if i select save and press set then we should save the game and now if we go somewhere else and then open the menu and select load we are correctly loading our last save right so we successfully implemented the menu which we can use to run any action so i'll stop the video here if you think these videos are helpful please leave a like and consider subscribing to my channel that'll really help me out so i'll see you in the next video

Channel: Game Dev Experiments

Views: 1,680

Keywords: make a game like pokemon in unity, how to make a game like pokemon in unity, make pokemon in unity, make pokemon game in unity, how to make pokemon game in unity, make a pokemon game in unity, unity pokemon game tutorial

Id: 0JXDBj_Y-4g

Length: 28min 31sec (1711 seconds)

Published: Sun May 23 2021

Reddit Comments

[u/GameDevExperiments]

This is part 49 of my Pokemon Game tutorial series in unity. In this video, We'll create a menu and let the users save and load the game from the menu.

If you're new to it, this a series where we'll create a Turn-Based RPG like Pokemon in unity using Design Patterns and Good Game Development Practices. I'd love hear what you think about it :)

Here is the entire playlist

[u/KeftarkBarin]

The meny looks nice! Can't wait to see the menu.

[u/void1gaming]

Simple and interesting!

[u/faravi]

Even if you are not really into Pokemon, this tutorial series is a must-watch for anyone who wants to learn Unity! I can't recommend this enough, keep up the good work.