START MENU in Unity

in this video we're going to have a look at how to create a cool main menu inside of unity at the end it should look something like this special thanks to hansoftoon duderman and armando rusi for their support on patreon and now let's make a menu so i currently have two scenes a menu one which is completely empty and a game one just pretend that you're seeing a game here now inside of our menu scene let's begin by creating the ui let's right click in our hierarchy go ui and select panel this will create a canvas and inside of this canvas it will create a panel now i want to go under image and replace the source image i've imported my own background image here that we can drag in you can choose to use any sprite here just make sure that when you select it under texture type it's set to sprite 2d and ui then under our panel let's go to color and let's amp up the alpha channel so now we have a nice backdrop for our menu let's rename it to background and at this point we're ready to add some text let's right click on our canvas go ui select text and of course we could just use unity's default text here we could scale it up center it change the font size change the color but that's about the control that we have if you want to change the font we need to import some custom fonts we can't add nice looking shadows or gradients and for most menus that i've created i definitely want to have these options so instead let's delete this text object and let's import a free package called text mesh pro so let's go to the asset store search for text mesh pro i'll of course have a link for this in the description let's select the pack here this pack was recently acquired by unity and i've created a separate video on how to use it so if you find something confusing along the way definitely check that out for now we can just hit download or import and we'll hit import again and after it's done you should see a folder in your project panel called text mesh pro now we can go back to our scene view we can right click on our canvas go ui and you should now see an option here called text mesh pro text and right off the bat we can see that the text renders a lot more clearly let's go into the font size here and let's change it to something like 84. let's also give our text some room i'll hold down alt to scale from the center let's make sure to align our text to the center both horizontally and vertically now instead of new text we'll write play with capital letters and i'm also going to change the font asset to roboto bold and i think we can make this even more bold so that's also on the font style check off the b here that looks pretty good but currently it's just a plain white to change this let's scroll down onto the material settings let's first add an underlay in order to create a shadow let's enable this let's offset it by 1 on the x by -1 on the y we can also increase the softness to play the shadow a bit i think that looks a lot better let's also add a gradient to the text we do that under the font settings where it says color gradient we'll make sure to check that and we now configure a color for both the top left and right and the bottom left and right but instead of doing that in here since i want all of my text elements to share the same gradient we can create a color gradient asset to do that we'll go to the project right click go create text mesh pro and let's select color gradient let's rename this asset to gold and now we can define some colors and i have some color codes at the ready here so i'll simply paste these in i'm going to be using the same one for the top left and right and then for the bottom left and right we'll choose another one a bit darker this time so that's some nice yellow and orange colors let's now select our text object let's scroll to the gradient part and let's now drag in our gold object into the gradient preset slot and there we go we now have a nice gradient to our text let's rename this text to play and of course this is currently just a symbol text object we want to turn this into a button to do that let's right click on our canvas go ui and let's create a button let's start by scaling this button up and let's move it up as well for the image here we'll make that completely black and for now we'll just go ahead and disable it then under our button we'll notice a text object and this is what we want to replace with the play text that we just created so let's delete this text object and instead drag in our play text let's just rename this to text and instead rename our button to play button we now select our text object we'll click on the anchor presets at the top of the reg transform hold down alt and click on the bottom right corner this will snap our text to the center of our play button and make sure to always scale it to the same size as the button so now we should see that if we hit play we can actually press on our text however we don't actually see anything changing we need some visual feedback on what's going on to do that let's re-enable our image under the normal color let's go and change the alpha to zero then under highlighted color we'll definitely also decrease it but we do want it to be visible and when we then press the object we want it to be even clearer so with these settings if we try and hit play we should see that when we hover over our text the black box appears and when we click it it becomes even darker awesome we can of course change the size of the black box by adjusting this element so when we're happy with our button let's go ahead and duplicate it we'll click and drag while holding down shift to move it down on only one axis and this is going to be our options button so let's change the text to options let's also increase the width to make room for it and let's rename it to options button again we'll duplicate this hold down shift while moving it down and finally we want this to be our quit button again we'll resize it to only just fit our text and we then rename the button to quit button awesome so if we now hit play we should see that we're able to select three different buttons and that you can also use your keyboard to change between them of course our buttons currently don't do anything our play button should load the next scene our quit button should close the game and our options button should lead to another menu let's start by creating this menu to do that let's go to a canvas let's right-click and create an empty we'll rename this to our main menu let's also just size it up a bit this is going to contain all of our main menu elements so we can select all of our buttons and drag them under our main menu object let's then duplicate this object and let's rename this one to options menu let's disable the main menu now for this menu i don't want a lot of buttons but i do want it to say options at the top so i'm going to go under my options button take the text element alone and drag it to the top i'm then going to drag it up here where it says play and i'm going to delete both the play and options button the quit button we can turn into a back button let's call it back button and change the text to back i'll also decrease the text size to something like 50 and we'll then resize it to fit and now we have some room where we can add our settings i'm just going to show you how to add a simple slider we'll right click on our options menu go ui and select slider let's definitely make this wider and a bit taller let's go into the slider find the handle and let's disable the image component we can then select our background and make this a neutral black let's also decrease the alpha to not make it stand out too much finally we can go under fill area and select fill and let's use the color picker here to get a nice color from our text now we should see if we hit play that we're able to adjust our slider to anything that we'd like let's also add a tiny text element telling what the slider does to that let's duplicate our text let's move this on top of the slider let's rename this to volume let's change the text to volume as well and let's decrease the font size to something like 32 we now shrink down this element move it to our slider and let's align it to the left and we've now created a volume slider of course a slider doesn't change any settings if you want to know how to create a options menu in unity definitely let me know in the comments so now we have our two menus an options menu as well as a main menu all that's left is to add functionality to these two menus let's begin with the play button this is found under the main menu object but instead of adding a separate script for the play button itself let's add a script to the main menu object that will have functionality for all of our menu buttons let's hit add component let's write main menu let's create a new script of type c sharp create an ad let's double click it to open it up in visual studio now let's remove our start and update and instead let's create our own function that will call whenever we press the play button in order to be able to call it from the button we need to make the method public so we'll write public void let's call it play game and inside this method we'll simply load the next level whenever we want to change scenes in unity we need to be using unity engine that's scene management now we can simply go scenemanager.loadscene and here we could give it a name of the scene say level1 we'd also give it a build index say 1 but instead of loading a particular level let's simply load the next level in the queue to do that we get the index of our currently loaded level so scenemanager.getactivescene dot build index and we simply increase it by one so plus one if we now save this and go into unity we of course need to make sure that we add our scenes to the queue to do that we go file build settings and here we have all the scenes in our build first we want to add our menu so that has an index of 0 i will then add our game which has an index of 1. now the last thing we need to do is simply hook up our play button to the function that we just created to do that let's select the button let's scroll down to where it says on click this is a unity event we can add an action to this event by hitting the plus button we need to select an object that will be our main menus let's drag that in there now we can go and find our main menu script and under here we've created a function called play game and now if we play our game and press on the play button it loads the next scene which is our game even though currently maybe our menu is more fun so that's awesome the next button we'll hook up is the quit button again we can do this inside of the same script so we'll create another public void and this one we'll call quit game and this is even simpler we simply go application dot quit and that should close down the program however this won't happen inside of the unity editor so just to let ourselves know that this is working we'll throw debug.log and the message will be quit again let's go into unity let's select our quit button let's scroll down to the on click event let's add an action again we want to reference our main menu and the function that we want to call is under main menu and it's called quit game and again if we hit play and select quit we now see the quit message displayed in the console and i promise you that if you build this and try and do the same thing it will close down the program now the last button that's left is our options button that's because we don't want this to load another scene or quit the program we simply want this to change to another menu and we have that menu available right here it's just disabled so we don't actually need to do any programming we simply select the options button scroll down to the on click event add an action and here we can simply reference our options menu directly then as the function will go under game object i will choose the set active function this is a really awesome part of the unity ui events the fact that we can call functions on unity components and then we can choose whether or not we want the game object to be enabled and in this case we do but we also need to disable our main menu so we'll just add another action this time we'll reference our main menu we'll again go under game object choose set active and this time we want it to be false so if we now play the game and select our options we can see that our main menu gets disabled and our options menu gets enabled and here we are in our options menu of course we also need to be able to transition back using the back button to do that we'll go under the options menu select our back button add an action and here we want to reference our main menu go under game object you guessed it we'll select set active and we'll set that to true and then we want to disable our options menu so we'll add another action drag in the options menu go game object set active and this time false and that completes our menu we can go quit in order to quit the game we can go options in order to go into our options menu and adjust our volume we can select back and then we can press play and it puts us into the game yay that's pretty much it for this video if you enjoyed it make sure to subscribe so you don't miss a future one also if you like the videos in general i suggest checking out our patreon page patreon is a way for you to donate a monthly amount of your choosing and you can cancel it at any time it's what keeps this channel going on that thanks for watching and i will see you in the next video thanks to the awesome patreon supporters who donated in october and a special thanks to dudeman armin hanselftune cole cabral superman the great james p thomas volley cyborg mummy jason detito derek hemskirk faisal marify manolis nick lang aaron robert bundt and peter locke you guys rock

Channel: Brackeys

Views: 2,217,432

Keywords: brackeys, unity, unity3d, model, texture, models, textures, material, materials, beginner, easy, how, to, howto, learn, course, series, tutorial, tutorials, fix, tip, game, development, develop, games, programming, coding, basic, basics, C#, menu, main, mainmenu, options, play, back, button, gamedev, buttons, text, mesh, pro, textmeshpro

Id: zc8ac_qUXQY

Length: 12min 52sec (772 seconds)

Published: Wed Nov 29 2017