How to Make a Main Menu in Unity 2022

hello everybody chris here and in this video i'm going to be showing all of you how to set up a main menu screen for your game setup i already have a test level so we'll create the main menu which will have a start game button which will allow us to load this level whenever that button is pressed so to go ahead and create our second scene where the main menu will reside i'll go up to file new scene and then i'm just going to create a basic 2d built in scene and i'm going to go ahead and hit create so because this is a separate scene we'll want to save it inside of our project as a scene we can switch between between this one and the test level so i'm going to hit ctrl s to pop up the save scene menu and then i'm going to navigate to the scenes folder which i created to store all my scenes and i'll save it in here as a unity scene file so for the file name i'll just call it main menu and hit save and now the scene will exist down here so in order to draw any ui elements we're going to want a canvas inside of our scene so i'm going to right click go to ui and you can choose canvas directly but we can actually skip a step just by choosing panel so if we choose panel it'll create a canvas under it so every ui element has to be created on a canvas so a canvas will be automatically created if the one doesn't already exist let's go to scene view and we can see this panel if we uh turn it off then you'll notice that the background of the panel kind of goes away so by default it is this white colored background but i actually want to change that to a simple graphic to use as the background so i just kind of created this in asaprite and put it in the project in the arts folder as a png so we can navigate to that source image here by choosing the selector and finding it by name so i believe i called it something like main menu so i'm going to click on that and this image is 320 by 180 pixels you can see that it's automatically stretching to the extent of our screen and that's because of these anchor presets over here so you don't necessarily have to stretch it if you don't want to but if you know that for instance your game is going to be 16 by 9 and you just want to scale whatever pixar you had up and then you could do that pretty easily now if you are using low resolution alright then once again you're going to want to make sure in your art folder for the ui stuff that you are having it set to filter mode point and compression none for it to actually display correctly so now if we click on the panel we're also going to want to make this not transparent at all we don't want any background color to show through so i'm going to click on color and i'm going to take the a for alpha and set that all the way to 255 which is going to make it fully visible here so now we can add in all the other stuff like buttons or text on top of this so i'm going to right click on the panel go down to ui and let's create a text with the text mesh pro so when you choose this if you haven't already imported into your project you'll get a pop-up that says to import the assets so you'll need to do that before you can use text mesh pro but this is the new standard in creating text elements inside of unity so with this text here i'm going to increase the font size and make it a lot larger so let's try typing in 100 and i'm also going to stretch the box so that the text can actually fit you might also want to position it on your screen and let's go ahead and make it middle aligned here center aligned you can actually make it middle vertically as well if you want but this default font asset liberation sans is a really basic looking font nothing wrong with that but we might want something a little bit more stylized so if you go to a site like dafont.com you can find different fonts and if you bring them into the project this is as a ttf file then we can convert them really easily into a asset that will work with the text mesh plus setup so to do that once you have your font and your project you right click on it you go down to create and then text mesh pro and font asset and this sdf is what is going to be created from that so with the sdf you can change the font asset here inside of the inspector so i'm just going to drag and drop this upheave tt sdf file into the font asset there drag and drop let go and we can see this is a pretty cool pixel art font so let's just scale it up a little bit more i'll do 200 and then if you need it to be positioned let's say centered on the screen perfectly the box not the text inside of the box then you can come up here hold alt down to set position and double click on the center then we can give it an offset with position y so you can either scroll here on the value in the inspector or you can just use the gizmos and move it on the screen so let's get it right about there and change the text so on the text mesh plus field let's open a text ui and i'll just change the text here so i will call it pixel adventure uh maybe you want that on two lines or maybe you want to have it crammed onto one up to you and you can uh change the font size if you need to as well of course so just position it where you need to and then let's add in some menu buttons so we might want a canvas inside of the canvas to kind of be a parent object for the buttons in case we need to change something that applies to all three of the buttons which would be the start game the options button and the exit pattern all at once so i'm going to right click on the canvas go down to ui choose canvas to create another canvas this has a rect transform so it's a little different than a standard game object and now we can position three buttons under this so i'm going to right click go down to ui and then let's see button text mesh pro and i'll duplicate this two times for now and then position them where i want them to be you could either go left to right or top down so you can either lay this out top down left to right whatever works for you i'm going to go left to right for this video just for the sake of demonstration so to make things line up nicely i'm going to make sure that this button on the left has the same negative value for the position x as the one up here as a positive value so for right now i'll just take that negative four five six and turn it into a positive four five six here so now they're evenly spaced out at least and we can also see that those buttons are going to be way too small so we'll need to increase the size of the text as well so if you expand a button you'll see that there's a text element under it so i'm going to click on the text and let's do start game for the second button text let's go down here and i'm gonna change it to options and then the third button i'm gonna go down here and change it to exit or we can also rename the buttons so that it makes more sense so i could call this start game button i could call the second one options button and the third one quick button now if we ever want to use any of these button assets across our game you can always take individual objects like this bring them into your project as a prefab and then you can create copies in other scenes or other menus if you need to for right now i'll just skip doing that so the start game button i want to increase its size so let's click on the text and increase the font size here to start then i will click on the start game button and change the width and height for the button so i'll just make this big enough so it can actually fit the text let's try 320 for the width and 60 for the height that's not enough so 120 for the height and 400 for the width okay looking a little better i will make it 100 for the height and that's not bad right there so i will basically put in the same settings for options 400 100 and then quit 400 100 and let's change the size of the text as well so i had the text set to 72 so 72 and then down here 72 as well so now if i took a look at the game view and i was playing it on a screen this size this would be how it would look after everything scaled up keep in mind that this is much bigger than the size of a typical phone so if you need to shrink it down for a mobile game you'd be looking more at this for your actual sizes so sometimes you actually do need to make things like the buttons quite large so they can actually be pressed on a smaller screen so now back on the scene view i'm going to take the canvas for the buttons i'm going to rename it a button canvas and i'm also going to take the y position gizmo and move this down a bit so that basically all three of the buttons are repositioned at the same time checking game view and maybe i want the pixel adventure text to come down a little bit as well so we can always lower that down maybe even increase the size of the phone 190 or 200 so checking game view one more time it's pretty okay for right now so now we want to give actual functionality to these buttons uh let's start with the start game button so the start game button let's go ahead and so with the start game button we want the scene manager in our unity game to open up a specific scene so you can do that by number or the name of the scene i think number works really well because you can always just go to file build settings to check the numbers associated with the scenes in your game so these won't change unless you actually mess with this list here if we do add open scenes then you'll see that the main menu scene which is currently open is added into this list so now main menu is scene 1 and test level is scene 0. so we might want to pull test level below here so that main menu is scene 0 makes sense since that would be the first screen that would load after all the splash screens and stuff and then a task level can be seen one since that would be the first level for the game or really you can organize however you want you just need to know these numbers down here or the exact string name of the scenes if you want to reference it that way so then we just need to create a script and have on click event trigger for our buttons sorry i already created this basically so i'm gonna do start game button as the script and then to just open it up so you can see it in here i have public end game start scene so this is being stored on the script as a number we can change when we want to change which scene is the first one that's going to start when we hit the start button and then in this method start game which is going to trigger on click we do scenemanager.loadscene and then the integer value or the string name of the scene whichever way you want to do it so to get the string manager you have to be using unity engine dot scene management so add that to the name space up there or it'll give you the option to auto complete add it up here and then we just need to load the start scene so to get the number for that once again file build settings we can see test level is one so i want to set this value to one now i was thinking as you grow your project out you might actually want this value to be something of a global variable that you would set for your game settings and then you can reference that anywhere across your so if you think there's going to be the need for anything else in the game to know what the number of your game start scene is you can write it once and then just keep referencing that value across all of your scripts uh but don't really need to worry about it for right now so i'm just going to store that in the script there so game start scene 1 is going to open when we press on this start gain button but for that actually happen we have to add that method to the on click event so on click for the start game button clicking plus now we choose the script where we're going to get the function from so now we need to choose the script where we're going to get the function from the easiest way to do that is just to drag and drop the start game button script into here okay now we can reference any of the functions on that script so start game button script and then start game so that's how you link the functionality from the script onto the on click event so now if we go ahead and hit play and let's look at game view we can click on start game here okay so right now the start game button isn't actually clicking for me at all if i check my console i can see that right now i'm using the old unity engine input class in my event system this is because i switched to the new import system so i need to click on event system here and replace with import system ui import module you only need to do that if you're actually using the new unity input which is a optional package that you get in window package manager okay so now that should clear up all those error messages if i hit play now we can actually click on the start game button and when we do so about a second later the test level scene is going to load so we can see we have this test level scene loaded up and don't destroy on load there may be some objects in your game where when a scene switches you don't want to destroy that when you switch scenes so next up for the quit game button it's going to be pretty similar so we could keep writing uh these individual tiny scripts just to have like one function for starting the game or stopping the game another alternative would be to have a manager object inside of our scene so we'll do things a little bit differently this time i'm gonna right click in the main menu and i'll create an empty game object i will just call this game manager and then let's add a script to it so i'm going to just call this game manager new script create an ad so instead of having a button script attached to quit button we'll have this game manager which will have different functions and then we can just have one manager have all the functionality for the on click events to actually trigger okay so next for the quit button we would follow a very similar process so one option of course is to just create a tiny script that only manages the start game button or the quick game button and attach that to those objects another option would be to create kind of a menu manager which will have the actual code functionality written in one place and then we can reference that on each of the buttons might be a little easier than creating a million different tiny scripts so i'm going to right click in the scene view create a new empty object and i'm going to call this menu manager and then let's add a component i'll call it menu manager script and let's create an ad so now we just need to edit this and the code won't really change it's just which object we're referencing it on so i'm going to get rid of all this right here and then i will do a new public void function quit game and in order to quit the game we need to do application dot quit and if we wanted to we could just take the code from start game button remove the script and reference it in the menu manager instead uh for right now let's get the quit button and let's reference this menu manager object in the on click event so i'm going to drag this in here then i'm going to go to the function drop down menu manager quit game and now if we hit play go to game view click on the quit button then it should quit out of our game but i guess that doesn't actually work when you're just testing so we actually have to build the game let me go ahead and do that so let's go ahead file build settings gonna do a clean build let's put it out here into a new folder so builds select folder so this is outside of the project if you try to build inside of the project i was getting some errors a moment ago okay now the game's built so let's go ahead and open it up and we can see our screen loads up so let's try the quit button now click it once boom game quits okay so that was extremely magical uh let's show something a little bit more tricky which is to actually uh build out the options menu and open it up so to build out our options menu i'm going to want to add in another panel which will have a background color just like this one over here i'm gonna right click on canvas let's go down to ui panel uh we can see it kind of hovers over the underlying one so this one i'll leave a little bit of transparency but i'm gonna change the alpha value to 200 and to make it a little nicer i'll just reuse the main menu background so let's select from the sprites main menu just click that okay so there now we have one hovering on top of our main menu panel so if i turn it on and off you can kind of see that the background fades into view or not so now i don't want this options panel to completely cover everything behind it so what you can do is you can set the left top right and bottom values so these are a offset from those directions to pull on the sides so if i do 200 left that means the 200 pixels on the left here are going to be cut out from this smaller panel and i'll just do that for all four of those values like so and now we have a smaller panel and here for our options i may want to increase the opacity a little bit more just so that the background is really not getting in the way there and now let's add some stuff to this options panel i might even hit f2 and rename it options panel kind of making it more clear what's what's this up here would be the main menu then we have uh the button canvas and actually the the button canvas i might want that as a child of the main menu that only makes sense so i just drag that up there okay so now all of that can be enabled or disabled with one button click i think that's a little better so the options panel now let's right click on it go down to ui let's try adding something like a slider so the slider is a bar you can click on and you can drag to set settings it would be good for things like volume for instance so i might set 100 as the max value for the volume and let's also add a text so now with this slider i want to make it bigger i'm going to try doubling the width and height maybe even triple the height and triple the width making it nice and big position it where it needs to be and i can add a text element under it which will keep its position relative to the slider so if i right click here i can do text let's pull this over here and then for this text i'll just say volume so if we go into game mode hit play we'll be able to move this slider left and right but we don't have like a number indication of what's going on there so it would be nice if we added another text field here which showed what the actual volume number was so to do that um let's go to scene view i'll rename this text here and i'll call it label let's add another text right click on the slider ui pull this over here and i'll give it a default dummy number of a hundred okay positioning it roughly where i want it and i'll rename this text number i'll click on the slider and on value changed here going to do a plus i'm going to drag in this number object so now i have the slider update this text is going to be pretty simple let's add a component to the slider and i will just call it text slider new script let's create an ad and in here first i'm going to need to get a reference to the text over here so to reference the text object in our script we're going to need to do text mesh pro ugui and this is using the tm pro namespace so i'm going to make this public so that we can set it in the inspector and then i'll just call this number text so with the number text in the script we can create the function for this so public void set number text and we'll need to pass in the value so float value which of course we're getting from the slider and then we'll do number text dot text which takes a string so the value is a float so i'm going to do value.tostring so that it's formatted correctly so if you want to add extra stuff here to the string then you can just combine strings with the plus sign if you want to do that so now we need to reference the number in this field so i'm going to drag and drop that over here and then on value changed for the slider we need to take this script up here grab the function so dynamic flow set number text so we do that and that means that whenever this changes this is going to run automatically so let's hit play and game mode and now we can drag this and we can see that uh the volume is being reflected as a number over there but i probably want whole numbers to be checked here so that the value can only be between 0 and 100 but nothing in between there so we're incrementing one at a time now okay uh we probably also want a way to close the options panel so i'll just create another button right click on the slider right click on the options panel ui button and then button i'm going to anchor this to the top left so click on the anchoring and i'll hold shift and alt down pop that over there then let's just offset it by a little bit so 50 and then negative 50 for y and for the button i guess i'll just rename the text to say close so that should be functional enough then for the button functionality on click let's take the let's see the options panel gonna do that right here and i am going to go into game object and turn it off with set active boolean off so now if we hit play uh we can see the close button actually just disables it automatically you see everything in the hierarchy over here just turns off with that set active off so actually closing the menu is pretty easy and likewise if we uh start with this disabled so just select the options panel and disable that now we can look at the main menu the button canvas the options button and we can take the options panel and this on click and then set it active to true so add a on click event drag the options panel in function game object set active and then true okay so now if we hit play clicking on options opens up this panel and we can click close to close it so really simple uh start game works quit works so now our start game is functioning just takes a second to open the scene options opens the menu and then quick quits the game but that only works in a built version of the game so uh one small thing we might want to change when we open up the options menu we want probably want to take this number value and have it automatically set to the default value in the slider over here so for the options panel the slider we can also make it so that when this text slider script starts that we also set the number text so i'm going to open up the script one more time and this will be really simple because it's just a mono behavior so if we do void start then we do set number text but then we need to know uh the float value and so if we get the slider component referenced inside of the text slider script then we can get the value from it so uh the easiest way to do that i guess would just be to do private slider slider and then on start slider equals get component slider okay now let's import the unity engine ui so that it knows what it's talking about and now that we have this slider we can do set number text slider dot value okay and this will also mean that uh this text slider component requires that being a slider for whatever it's attached to but that should be fine because these are always two gonna go together or one would think so let's go ahead and hit play open up the options menu and we can see it defaults to zero so now whenever we change it uh the value is going to be updated but when the options menu starts it's set to the correct value so to show that let's set the value to 100 also check whole numbers out of the game so now there's no floating decimal point hit play options we can see it's set to 100. if we set it to something else like 80 hit play options and it's set to 80. so that'll do well enough for our purposes here and with these options values you're probably going to later have some kind of game manager script which will keep reference to all of these so that your volume is playing at the right level throughout the game and maybe that's a setting that you save to your game save files as well so that when the player opens up the game they would be playing with the same volume as before as well but that is definitely beyond the scope of this tutorial so as far as building a simple main menu screen with a start game an options button and a quick button goes that is pretty much going to be it for this video so if you stuck around to the end thank you for watching all the way i've been chris and i will see all of you in my future unity content

Channel: Chris' Tutorials

Views: 27,159

Keywords: unity, unity tutorial, unity ui, unity ui tutorial, tutorial, unity gui, unity ui 2022, game dev, game development, game design, gamedev, main menu in unity, unity main menu, how to create main menu in unity, how to create menu in unity, unity ui buttons, buttons in unity, unity ui canvas, textmeshpro, text mesh pro, textmesh pro, unity textmeshpro, unity textmesh pro, textmeshpro unity 2022, user interface, unity textmesh pro set text, unity textmesh pro custom font, 2022

Id: FfaG9TvCe5g

Length: 25min 26sec (1526 seconds)

Published: Mon Jun 20 2022