Title: Creating a Start Menu in Unity 5
Font Used: http://www.dafont.com/zombie-control.font
In this Unity tutorial we’ll take a look at creating a simple start menu in Unity 4.6 and above. This start menu will contain two buttons, one to play our first level and one to exit our game. If we click on exit we will then be prompted with a pop up menu asking us to confirm if we want to quit our game, if so then we’ll quit the game.
Hello everyone my name is john from the Dallas and this you know smash game unity tutorial we will be going over how to create the start menu in your 4.6 and you will need you in 4.6 and above and we’re gonna be using the new UI system to create a start menu so this is going to be placing an older tutorial that i created using the older gy system in previous versions of unity this is a little more updated and we’re using the new UI system to create stuff like the fog texted see here along with these buttons that are down here if I hover over these you can see that they turn black all right and I can click either one of these days i click on play it’s going to take me to my first level if i click on exit when it gets a little pop-up menu and says are you sure you want to quit all right this is a very common theme I was in a lot of games to prevent you from quitting accidentally and if i click yes it’s going to quit the game and click know it’s going to remove that menu and then now we can select play again alright so if i click play it’s going to take me to the very first level there we go and it’s very simple animation on our camera that screen that effect and then also have another text element within this scene that just as chapter 12 indicate that this is our very first level so that’s why we’re gonna be creating in today’s tutorial so let’s get started alright so before we get started there are a couple things that I want to mention first off you will need your 4.6 we’re using the new UI system in your 4.6 and a bump now i am going to be using unity 5 more specifically the unit 5 beta but you don’t need you need five more do you need Yuri pro to finish the tutorial right everything is that we will be doing in this tutorial can be done with the free versions of unity now if you want to follow along and use the same project files as I am you can download those off 20 / gamescom will be providing a link to that in the description of the one thing I won’t be providing is the zombie control font and reason being is that I can’t reach those files you can just download goes on your own I’ll be providing a link to that as well so if you want to follow along you can download those project files now and we can go to get started alright so the first thing that we want to do is we want to create our fog title text and that’s going to be displayed at the very top right here so to do that I’m going to go up the game object you I and i’m going to select next all right and if you take a look in the center here it’s kind of hard to make out in the video but it says it new text this is our text element that we created you should also see a couple of other things that should pop up in the hierarchy first off we have the canvas which is going to hold all of our UI elements and we have the actual text my element and then we had the event system right so if i click on my scene window here we can see this little bit better let me scroll out here you probably scroll up quite a bit we can see these size of our canvas which is this a large rectangle here now right now if we act like on our canvas we can see that the canvas render mode over here is set to screen space overlay what that basically means is it is going to overlay the entire length and width of our actual screen whatever we’re using as our screen that’s going to overlay the entire length and width of that screen so if i click on play we can’t actually see that canvas because it’s basically invisible to us but we can see whatever is inside of that canvas in this case we’re going to see the text now if i go back to my scene window here we can see that the text is actually in the middle of our canvas and I can click on my text element here in the hierarchy and we can see where look what it looks like and directly in the middle of our canvas alright so that’s how it’s going to show up in our game now I want to move this text element to the top right or the top left up here so I’m just going to do i select the move gizmo up here and I’m just going to move this up to the top left alright if i switch to my game with we can barely see it but its up basically up here all right and what I’m going to do is actually change the font and the color of that text so first off let me go and change the actual text itself i’m going to see the fog all right and i’m going to change the font style the plant right here so i’m going to drag in my zombie control flop into this lot right you can see change the font and i’m going to change the font size – 50 right when you do that it automatically add disappears and that’s because it doesn’t fit within this text box so it doesn’t know what it is displayed essentially so i’m going to say horizontal or flow and vertical flow i’m going to set these to overflow right when you do that you should see that text now appears and there’s a couple of ways to get around this issue if the font sizes too big first the most obvious one is to actually resize the entire text box or you can just set the horizontal and vertical overflow to overflow and that basically means that the text will overflow regardless of the size of the actual container that has he text right so there’s our fog now I want to change the actual font color as well i’m going to change this to a white color and i’m going to adjust the Alpha value here as well so the Alpha value and here is the a right here this little slot under these sliders and i’m going to move this little bit towards the center here maybe about 134 for the Alpha value and see what it looks like in our game right so it still stands out and what i can do is follow make this even bigger let’s go with us 75 all right I think looks good right there where to go to the font size of 75 and I want to make you stand out even more so what I’m going to do is I’m going to add a drop shadow to this and to add a drop shadow to a text element you go to add component with the actual text selected so I had component and I’m going to clear out whatever have in the search bar and if you go up to you i right here under the component at the very top is going to see one says the facts that’s all it’s called it’s just affects you click on that these are all the effects that we can apply to our text elements so i’m going to apply shadow right and you can barely see it right here but go back to my scene window here you can kind of barely see it and that’s because the shadow is it really offset a whole lot of adjust the x value here you can see a little bit better right and are probably adjust the Alpha value can see right now the Alpha value is about halfway so we bring this up is gonna make a little bit darker and just makes a little bit easier to actually see in the game right there we go so that’s what I’m going to do for the fog text i’m going to rename this now so i’m going to select the text from the hierarchy and i’m going to name it the fog so we know exactly what it is right now this is not going to be interactive all at all so we don’t need to add anything else how to create our buttons I’m going to place my buns directly underneath the title itself so i’m going to great right click on the canvas itself select you I and then we’re going to select text is going to be our very first button and i’m going to place this directly underneath the title may be about right here will be good and i’m going to change the actual text itself to display play and it’s actually make this a uppercase play all uppercase and i’m gonna be using the same a zombie control fault for this as well all right it’s going to change the font size let’s go something like 30 and for this one I’m actually going to resize the actual text box just you guys understand how that works there we go to see what it looks like in our game it looks like we need to make it a lot bigger i’m going to make the text box beer and i’m going to change the font size – 50 as well go all right thing looks good right there I’m going to be changing the color of this as well so under the color and the text component here i’m going to change the color to read me something a little bit darkish like that dark red all right looks pretty good right there right now what I want to do is I want to make this a button so when father is a button element within the UI you can see right here but what I want to do is actually make the text itself basically a button so what I want to do is actually selected text and we’re going to add a button component so go to add component type in button and then you want to click on the button is it’s gonna be the very first one it says okay click on that and now this is a buddy so if I hit play real quick I can hover over this and can barely see that kind of I like the color changes very very slightly you may not be able to see it in the video itself but it changes color and we can actually click on this but there’s nothing actually going on because we haven’t told it what to do when we click on that button so what i can do is actually change so many colors whenever we help her over this so in here it should have interactive check on normal clothes can be wide world is going to be using the default color of whatever that button has the highlighted color this is the hover color changes to black all right press color i’m just gonna leave it the way it is and then disable color we’re not going to leave we’re not going to change at all right so if you hit play about how r over this you can see it turns black right now i can adjust the duration between the feeding of the colors right here which is for a duration I can change this to say I . 5 and play and it should take a little bit longer to actually fade in all right fade in and fade out alright so i think i’m good with that button there so I’m just going to duplicate that button it’s going to rename these now so the first one we called play right and the second one is going to be the exit button so I’m going to move this down just below the play button and a close one exit look there we go and i’m going to change the text itself all uppercase there we go you’re playing both days should have the exact same functionality alright alright so now we want to create a submenu and as someone who’s only be available to us if we act like on the exit button so we’ll be taking a look at the a play button after a while but this first focus on creating the sub menu for the exit button so to do that and Mexico to create a new canvas and i’m going to save this current canvas as the start menu so i’m going to rename it the canvas that we have now start menu are going to close that up and i’m going to create a new canvas let’s go up the game object you I and then you want to select a canvas right so it’s going to right-click on the canvas within the hierarchy itself and he wants like you I and then we’re going to create image and text element so right click on canvas once again you I and then text is going to rename the canvas quit menu right click on the image itself and we’re going to expand this out we wanted to be big enough to look like a submenu alright so something not too big not too small let’s take a look at our game window I think it looks pretty good right and i’m going to place the text element right in the top right here I’m just going to move it manually all right that looks good right there that’s going to select the image once again and what I want to do is actually just a transparency or the Alpha value of this image so I’m going to select the color and i’m going to bring the Alpha value down about halfway click on our game windows see what it looks like right I think it looks good right so for the text itself what I want to do first off let me go and center up the attacks right here so under the paragraph alignment i’m going to select the center alignment right here and what I want to do is use the zombie control font so I’m just going to drag that in right and i’m going to rewrite the text in here i’m going to say are you sure you want to quit all right and we can make this a little bit bigger that’s going to change the font size goes something like 30 and i’m just going to manually adjust the size of the text box all right and may be stretching it a bit more something that would be good it’s not gonna be exactly as it was in the very beginning of this video but yeah if I think you get the point you make this little bit bigger or smaller if you want but I’m gonna leave it to wages now for the actual text color i’m going to change this to a white color so i’m using the text component and i’m going to change the color to white let’s see what it looks like in our game right I think it looks good right there you can also add in the actual outline or the shadow here as well but i’m just gonna leave it the way it is right that’s all our somebody is going to have that we’re gonna have a couple of buttons on here that we can click so for that i’m going to i right click on the equipment you once again and before we do that it’s going to move the text underneath the image and i’ll just call this quit just so we know what it is that we so we don’t get confused later on all right go ahead and right-click on the equipment you now you why and i’m going to select text and i’m going to call this yes all right so it’s gonna be the yes or no and that’s what i’m gonna move this right about down in the lower left-hand corner here and then change the text to say yes and I’m not gonna be using a different font face i’m just gonna be using aerial and change the font size to something like 25 that’s going to make this bolt i’m going to change the font style to bold going to make this little bit smaller all right and for this what i can do is actually change the color of the font itself so i make this a reddish color it was something little bit darker all right and just like the start menu how we have the play and exit going to be also applying a button component to this as well so let’s go up to add component and you can see we have button or a selected from before i’m going to select button and for this one I’m going to be using a highlight highlighted color of a black as well just for consistency all right and that’s what we’ll be doing for this so if we are going to our game window it it’s a play so if we have all this you can see it works perfectly fine same with these all right so what I want to do now is actually duplicate that button so in the hierarchy going to select the yes button right click on it and then duplicate and i’m going to call is no right make sure that you’re in the scene window and then you want to move this over and i’m gonna move this over to the opposite end all right and i’m going to change the text itself to say no alright so we have yes and we have no in both these have the same functionality now we need to create a script to determine whether we can play our first level or we can exit and pop this menu open all right so it’s going to right click in our project panel create c-sharp script and i’ll just call this manuscript double-click to open it up in monodevelop all right so the very top would have a couple of UI elements within the script so we need to include a using your engine that you I namespace at the very top underneath your engine i’m going to write out using here engine that you i write this contains all the classes for our UI elements as we’re using these in our script we need to have that namespace it’s all very top i’m going to create a couple of variables now all these variables are going to be public so we can see them in our inspector panel so the first one is going public and this was gonna be a canvas type so canvas and it’s going to be for our quick menu right out another public variable and this one’s gonna be for our buddy now do you know that I’m writing up the actual types here so i have cameras in button these are you I types so I have button and I’ll write out start text and it’s going to be for our play button right so this is going to be for a play button component so public once again and this was gonna be four button and this will this was going to be for our exit text alright so in the start function we need to actually grab those components so in here i’m going to write out quick menu equals is a quick menu not get component and I want to tell it to grab the canvas component alright so basically what we’re saying is whatever is a sign into the equip menu variable within the inspector panel we want you to go ahead to find the cameras component on that natural game object and then we’re gonna be using that we’re going to assign that to equip menu variable right that way we can use any of the canvas methods and variables and things of that sort that are available to us now we need to do that with the start text and the exit text as well so start text equals startx ok component and for these we want to go and grab the button component right and you know that I said start texting right out start button that’s just the name of the variable that makes more sense for you you can just write out a start button and exit button we’re just gonna be using the button component alright so exit text equals exit text like a component button right so we’re going to locate the actual star text in exit text and we’re going to go ahead and grab and the button component that’s attached to that game object right so the text has a button component attached to it alright so in here what we’re going to do is we’re going to write out a bunch of custom functions all right we’re using the buttons to call these functions so the first one that i want to write out is one called public void and can be a public variable so that we can explore a public method they’re going to be using with our button so these be setting public if you don’t write out public it’s going to be private by default so exit press and not too curly braces and in here what I want to do is set a quick menu that enabled it was true there’s one thing I forgot to include in the start function now by default that quick menu is going to be enabled so we need to disable it by just by the start so just a quick menu that enabled equals false so we’re saving that menu from being visible to us whenever we start our game so here we are going to enable it so what do I want to do as well well I want to disable the start and the exit buttons start exit with texts that enabled equals false and I’ll show you why in a bit alright so we’re disabling the start or the play and the exit buttons whenever that many is visible to us so that’s our exit press function and we’re going right out another public function so public void this was what we called no press right so this can be used whenever we click on know and this one is just going to have basically complete opposite of exit press so i’m going to copy all of this and just paste it in here I want to do a complete opposites are going to set this to false set the other two true alright so when our equipment is enabled then these start and the exit texts are going to be false they see disabled and whenever you press on know and i’ll show you what that means in a bit but we’re going to basically the complete opposite let’s continue we have a couple more functions that we need right out so the next one is going to be public void I’m gonna call the start level and this one is going to be whenever you click on our play button to see application that low level and in here was going to write out the actual number which can be one thing we have a very first level and I prefer to use numbers because it’s a little bit easier to kind of organize so rather than having to go back in here and change the actual level name I just write out one and it’s always gonna look for the first level alright so we have 14 are starting level we also need one whenever we actually quit our game so public void and i’ll just call this exit game and here we’re basically want to just quit our game so I’m just gonna write out an application . quit alright so we’ll go over these bit by bit but basically these are all the functions we will be using with our buttons so by default we get our components then we are disabled the equipment you then whenever we hit the exit button from our Start menu we’re going to enable the Quick Menu to be displayed then we’re going to disable the buttons themselves the start and the exit buttons which are the play and the exit buttons all right we don’t want to be able to click those if we have that Quick Menu enabled then if we had no on that quick menu then we want to go and do the complete opposite because we do want the play button and the exit button to be enabled again you don’t want the equipment to be available to us now whenever we click on play we want to go and say okay I want your load the very first level that’s why you see application at low level one with the exit button which is on our Quick Menu if we click on yes then we’re going to quit our game entirely all right so it’s gonna save this minimize this I’m going to be applying this to the start menu right the start menu canvas so click on the start menu and they want to drag your manuscript over and then here we need to apply our equipment you are start text in our exit text right is going to drag in our quick menu right so that’s gonna be in the equipment you slot the play button is going to going to start tax lot and the exit button is going to go into the exit slot alright so now what we want to do is we want to click on the play button and you want to go all the way down in the inspector panel right here watches on click you will hit the little plus icon right in here it’s asking for a object so we’re using the start menu drag that over and reason we’re using the start menu is because we have our manuscript on that sort menu game object so right here it says no function to go and click on that and they want to go ahead and click on menu script this is the script that we created and in here we should have the functions we created available to us now for the play button we want to do actually start level that’s the method or the function that we created so click on that so whenever we click on the play button it’s going to i’ll call that function which is in turn going to play our very first level after the exit button what we want to do is we want to bring up this menu so once again to the same thing as we did before with the play button start my name is going to go into the this object slot right click on menu script and for this one what we want to do is say exit press right as the function is going to bring up this menu now for the yes and no buttons will also need to do something else with those so we have one from the yes and one for the no button so once again we’re going to the same thing with the start menu to the objects lot click on menu script and for the yes we actually do want to exit our game so we have the exit game function and then for the know we want to do something different so let’s go ahead and click on object once again start menu and for this one go too many script and then you want to click on no press all right that’s our function for if we actually click on know i told before we do anything else we actually do need to set up one more thing that is our build cities so if you go up to file build settings alright so in here we have a no scenes and our build so whenever we click on play doesn’t know where to go so first menu that we want to add is our current menu so our current scene rather so click on add current is going to add our current scene right this is the very first scene you can see has zero now I’m not gonna be showing you how to create the second scene you can just do that by going to file new scene you can use whatever you want I created mine so I’m going to open up my first level folder and I’m just going to drag in the scene that I created so this is the first level right and it’s aptly named first level and it’s going to be number one alright so we have our Start menu which is at zero and then we have a first level which is that one if you remember in a script you said application that low level one right that’s what you need to do so click on the X button and now hit play you can see that many no longer pops up if i click on exit it pops up these buttons are no longer selectable right I can’t the condom if i click yes nothing is going to happen because nothing happens within the uri game environment whenever you’re clicking on to quit a level or quit game because we’re basically just testing it with in your dream i will go over how to build this game and then show you how this works never click on know the menu goes away and now i can click on Play or exit if i click on play it’s going to take me to my very first level right alright so see how the yes button here works so to do that I actually need to build my game I’m going to have to file build and run all right I’m going to go ahead and hit play alright so we are playing the web exit if i click on exit you can see we’ve got a little pop-up menu pops up click on now goes away click on exit once again i click on yes it’s going to quit our game entirely alright so that is how you create a simple start menu within the Yuri 4.6 i hope you guys enjoyed this tutorial thanks for watching this unity tutorial.