Start Menu in UNITY! 2020 Tutorial

what's going on guys in this video I'll show you how to make a nice and simple Start menu so you can go into options you can go back and when you hit quit it D bugs quit now this actually does quit the game and when you hit play it does just that before we get started I want to let you guys know that making a start menu in unity is actually very simple so even if you are just starting out you should be pretty confident in yourself because this video is really just a springboard for you to make much more complex UI than this but I want to ask you to subscribe because it really does help me out with that being said let's jump right into it all right so the first thing I'm gonna do is I'm gonna go under UI and select panel now when you make a panel it automatically makes a canvas for you which is pretty cool I'm just gonna double tap on my panel and I'm gonna go to the source image and change it to the source image that I want and I'll bump up the Alpha on that and now that we have a background I'm just gonna rename this to background actually and now we need some buttons so I'm gonna go ahead and create a UI button and I'm gonna scale this up to make it quite visible and then on the button you have a default text and this text there's not much settings that you can tweak on it and it's actually worse quality so just go ahead and delete this text and you want to go on to your button and then go under UI and select text message Pro go ahead and do that and you don't need to import the extras go ahead and leave that out and I'll rename this to just text now I'm gonna go to the button and make the color blacked out now I'm gonna mess with the buttons interactive colors here so the normal color is just gonna be black maybe 50 the highlighted color is going to be 75 opacity and then the pressed color is 100 and now under and and under navigation instead of on it now under an now under navigation instead of automatic select none this way you can't select the button you can only press it now after doing that if we hit play and try to interact with the button hover over it and press it it all gets darker now I'm gonna mess with the text a little bit so I'll go into the buttons text and change it to play I'm gonna go under the rect transform and while holding options and I believe it is control and PC select the bottom right corner and it'll stretch to the parent and now I'll just bump up the font size to something like maybe 120 and I'll line it in the center and the middle and now my text looks kind of thin I don't like that you can import fonts if you like but I'm just gonna make the font style bold which just makes it look a bit nicer now the cool thing with text-message Pro is you can have a color gradient so I'm gonna check this box on and now you can make your own gradient right here or you can get your own color preset now I'm gonna make a color preset real quick so I'm gonna go create and under tex-mex color gradient and I'll just rename this to gold gradient and on the gold gradient asset you can select the gradient that you want so I'll go from a brightest yellow and copy that on all fours and from bright yellow to a bit more orange now after we did that go on to your text and under the color preset go ahead and dragging the gradient that you just made and now as you can see that looks quite nice already and it even complements the background quite nicely and now we can just go ahead and rename our button to something like play button and now we need an options button and a quit button so I'll just duplicate the play button twice I'll rename this to options button and rename the quit button and I'll just drag them into place roughly and I'll go into their text and change it accordingly and quit alright so you already have a quite nice-looking start menu but now we need to add logic to these buttons so the first button that I'm gonna hook up is going to be the options button and to do this what we need to do is just collapse our buttons I'm going to create an empty game object and call this start screen and make sure you reset the transform for good practice now I'm going to put this game object that I made and drag it under the canvas and parent all of my buttons to the Start screen and now that the Start screen is parented to all the buttons if you duplicate this and just disable the Start screen and only work on this Start screen that we just duplicated we just call this option screen and now we could just tinker around with this to make it look like an option screen so I'm going to go ahead and delete the options button I'm going to drag out the from the play button and just delete the button itself so now we can only see the text and I'll call this text header and I'll say options instead drop the font size to maybe 100 and that's already looking quite nice now let's go to this quit button instead of quit bun will just say back button and I just want to scale this down a little bit and I'll change the text to back and drop this size colon I'll just make a volume slider for now so under the options screen select UI and slider and I'll just pull this to the center scale it up quite a bit and then under slider I'll just name this volume slider and open the volume slider and just delete the handle slide area if you don't need it and also if you go on to the volume slider and scroll down you'll find a value here you can crank up this value to see how your slider looks and to change the color of your slider and just go under your fill area select fill and just change the color here I'm just gonna keep it gold also and I want to change his background - so go under background and make it a dark with maybe low alpha cool and now I'll just take my header text duplicate it and put it over the volume slider here I'll drop the font size to maybe 60 I'll go and I'll line it to the left and then I'll change it to volume and I'll scale it around a little bit we're not gonna get into details for options menu that is out of the scope of this video but now I want to hook up this back button to take us back to the Start screen now to do this all we have to do is go under your back button and find on click event go ahead and add one and you want to reference your Start screen for this and then go under function game object and you find this one called set active bull and what this does is enables and disables an object and what we want to do with the Start screen is enable it and we want to do the same thing for our options screen now to do this we'll just add another click event and again reference our option screen this time same thing game object active bull and then this time you want to set the option screen off now if we actually hit play you can see this working straight away and it brings us back to our Start menu but now with that being done I'll just collapse the options screen disable it go back into the Start screen and then now I want to hook up this options button to go to the options screen just I'll go to my options button again scroll down to find this on click event add one and here you want to reference the Start screen and again same thing gameobject.setactive Bowl and we want to turn ourselves off add another on click this time referencing the options screen so that we can turn it on function game object selectable and this time trim it's not really complicated at all you'll get very very familiar with doing this stuff now if we go to the options button press it it takes us here and we can go back now I want to hook up the play button and the quit button but this requires a little bit of coding but the code is extremely simple it requires a few lines of code and how I'm gonna go about hooking up the play button and the quit button is real quick I'm going to create an empty game object I'm gonna call this game object are seeing loader always reset the transform and on this scene loader game object go ahead and add a component and we're gonna add a script called scene loader go ahead create and add and open it up in Visual Studio now let me just zoom in for you guys all right we don't need to start or update go ahead and get rid of both of those now whenever you're loading scenes in unity you need a using tag for that so that's using unity engine scene management now we need to make a function for loading the game so I'll go public void load game now make sure double check that this is public not private and it cannot be just void either because if it's just void it still won't find it it has to be public so your button can access it so here on this function what we're simply gonna do is go scene manager dot load scene and here we could do a number of things we can put in the name of the scene say you called a game you can put in a build index say it has a build index of 1 but what I'm gonna do is I'm gonna take our current scene and plus it by 1 2 just simply go to the next scene so I'm gonna go scene manager dot get active scene parentheses dot to build index and here we want to plus our build index by 1 and close this off now if this syntax looks confusing to you just don't worry because you're going to be using this same old boring line of code a hundreds of times it's it's nothing special guys so if you simply remember this line of code you're good to go with loading scenes in unity now we need another function for quitting the game and again make sure it is public and I'm gonna call it quit game this time is just application dot quit and parentheses there and that's it that quits the game for you but you can't close the game inside of unity so for now we're just gonna debug it in the console debug log quit that's it and don't worry about this syntax just try to remember it and you'll be good to go make sure you save your script jump back into unity and again making sure that your scene loader script is on the scene loader game object now the play button and the quit button needs this scene loader so you go onto the play button scroll down again to the onclick event add one and this time we want to reference our scene because it has the script on it and now go function and this time we want to find our script and find the function that we made in our script so I made this load game function so we can load the next scene and same thing for the quit button we'll go add an onclick event again referencing our scene loader go function scene loader and this time quick game now if your functions weren't public you will not see these in here so make sure it was public also if you want to make animations for when you hover over the buttons you can go check out my animation tutorial the card should be at the top right corner of the screen if you want to load the game scene and you have a scene in here that you want to load make sure you go under file and build settings and make sure that your game scene is in the build settings or else you'll get an error that kind of looks just like this and that's about it now we can go to options we can go back we can quit game and it says quit in the console I promise you this works you just can't quit in unity and when you hit play there's this example scene I set up broth and I quickly set this up anyways that's it for this video if this video helped you out consider subscribing and leave any suggestions you have in the comment section and with that being said I'll see you in the next video

Channel: Kap Koder

Views: 40,180

Keywords: Unity, start menu, main menu, menu, start, buttons, make, tutorial, unity engine, code, c sharp, c#, kap coder, easy, play button, options button, quit button

Id: mGjqmK_O5jA

Length: 12min 26sec (746 seconds)

Published: Fri Apr 24 2020