Make A Gorgeous Start Menu (Unity UI Tutorial)!

hey I'm so glad that you clicked on my thumbnail and I'm glad to see your beautiful face smiling back at me my name's Thomas brush of the creator of a game called pinstripe I'm also working on a game called once upon a coma I've been making games for ten years it's my full-time job I love what I do but I never really had a system in place to actually create menu systems with animations effects make it look really cool and most importantly keep it simple all right so the very first thing that you're gonna need to do is create a 4k image in Photoshop Illustrator so just go to image size here and make sure that when you create your image it's 300 3840 pixels wide by 2160 pixels wide and this is going to be a 4k image and should work on all 4k devices so you'll see I've got a logo here I've got some cool little flourishes here I have text but these are just reference layers we're not going to actually use these in unity but to help us see what this UI is going to look like as a finished product and I think that's really important when you're putting together a menu don't try and just put it together in unity really create a mock-up like we've done here inside a Photoshop or illustrator to give you a better idea of what it's going to look like in the end all right so we've also got some rectangles here a little rectangle we can use to create a selection effect so all we've got to do here is actually just export these out and you can use a really cool script called Photoshop layers to PNG and I will put this script in the description below so download that install that into Photoshop and you can export your Photoshop layers to PNG if you're using illustrator or you can individually export each one and those will show up it you need to be as well so we'll export that and we'll create a folder called layers here and just click OK so let's start laying out the scene first thing we're going to do is just drag our BG reference in to the scene here and make sure it's zeroed out and so what I've done here is actually already set our camera to orthographic and ten point seven nine seems to be the right size of the camera so as you can see you could sort of scale it to fit what your size is ten point seven nine seems to be a good size for a 4k background image now we've got the background sprite here what we're not going to do is create sprites for our menu objects those are actually gonna be UI elements so let's go up to game object UI and create our first UI element clicked image now as you can see it's created a UI canvas and this you can sort of zoom out to see this is not the camera this is actually the UI canvas and it will scale to the size of your camera at runtime in the editor and also in the actual standalone build so let's go ahead and zero out this image I like to zero out all of my elements just to get a good starting point and then I can move them around accordingly it's good to start at a center point so we have an image here and we can move our logo into this little image sprite component and then just click set native size now what you're gonna want to do is make sure that when you go to your game window you have a 4k option available here so click the plus icon if you don't have this and most most of the time by default you're not going to have this and you can create at a fixed resolution of 3840 pixels by 2160 pixels and click OK and now in all of your projects you can have this 4k setup basically what this is doing this is previewing what its gonna look like in the game window depending on your device so as you can see you've got 1024 by 768 notice how it's not really working and we'll fix that in a second you have 4k which looks great and then 1920 by 1080 which doesn't look perfect because this is actually scaled improperly and all sorts of aspect ratios as well so let's go ahead and fix that first thing you're going to need to do is go to your inves scaler and we're gonna fix the sizing issue here canvas scaler by default will be slapped on to your canvas as a component and you want to set the canvas scaler to scale with the screen size now this is incredible like in 2009-2010 this option did not exist and you actually had to code by yourself the scaling for each device and it was a mess my first game pinstripe I had to write the whole thing from scratch to scale with the screen and it was a real pain so you're really lucky to have this so click scale with screen size and it looks terrible right well that's because the reference resolution is incorrect so the reference resolution you're gonna want to make sure in your mind you have a reference resolution across the board for your game this is going to be the sort of starting point unity knows is the pixel size that you prefer so again we're gonna want to make sure that we're setting it to 4k so let's just go ahead and change it to 4k really quick 3840 by 2160 so as you can see everything looks good and when you change it to all sorts of different sizes it looks pretty good you can even shrink it and notice how it's adapting to the screen size and you can actually see it sort of delaying a little bit because it's adapting at real time that's pretty cool so if the user changes their screen size like let's say they have a windowed application they're playing it on Steam if they're changing their screen size like this it's actually going to update at real time that's pretty cool so let's move this up and then also add a flourish so let's just copy this image here call it flourish and let's be sure we name this logo now this flourish we can use the flourish left and make sure you set it to the native size and move it over here and then you can move this one over here as well and this will be flourish right all right looking good and then finally we're gonna add text so just go to UI text and let's type in new game right new game all right we're gonna use a font called bar Cantina and so all I need to do if you don't have a font you like all you need to do is actually just drag the font into your project folder in Windows Explorer or if you're using a Mac finder and once you open up unity everything will import properly your font size might be set to a little smaller in the inspector here I like to set mine to a pretty big size so that looks really clean and crisp so I did 150 and now we can go ahead and set the font to bar Cantina let's zero out this text notice how it's sort of off centered so I love to zero things out it makes me feel safe and clean it's good to start out at that zero point so as you can see it's pretty small so let's set the font size to like 35 and you can't actually see it and that's because it's wrapping inside of this window here so let's click this and just change the size here there you go so about that and again because we moved it like that we have to zero it out again just to be safe hold shift and drag down and it'll drag along the vertical axis and let's go ahead and Center vertically and horizontally here all right so we're gonna set our horizontal overflow to overflow but we're gonna keep the vertical overflow to truncate so that everything stays centered in color so here you go we have a nice clean text image and we're gonna set the text color to white for now and I like to get for my games I like to have a nice space in between each letter unity doesn't have a tool to create letter spacing so for now we're just gonna do something like this and that's gonna match a photoshop file here create that sort of spaced out traditional almost vintage text but you don't have to do that obviously you do whatever you want doesn't matter so there is our text we're going to zero it out and we can just go ahead and create our other text as well and you can change the name for each one options and then quit so there we have it these are your text and your background will show up behind it when you're in the game view so if we hit play you'll notice that everything pretty much stays the same so this is the general layout for your canvas and again if you change the sizes everything looks good so whether you're on mobile or steam or Xbox or switch it'll all show up properly there's really nothing else you have to do so now what we're gonna want to do is actually create animations for selecting and deselecting our text so because I'm a smart dude I already have everything set up so let's click on this and turn that on so everything is set up I didn't want to have to create this again I figured it would be a lot easier to show you how this looks when it's already completed so this is our canvas let's delete that back up there and you'll see that I have prefabs here I have a prefab called menu button so let's click this arrow here and it's gonna take us to the prefab this is a default prefab and if we can use this over and over so we have a prefab called menu button now and we can use this across the game entirely so it has a text field has a rectangle and it's inside of this parent called menu button so this is actually really cool this rectangle I can scale at any size using these handles here and these rounded corners will never change their size so watch what happens if I change it from sliced to simple which simple is going to be as default if I scale it look what happens these stretch it looks ugly looks like a really terrible PowerPoint presentation my teachers used to do this all the time they would scale rounded rectangles and it would look like this you don't want that so we're gonna make sure we go back to sliced now in order to set up the slice you can actually go to your sprite here click sprite editor and see these green lines here I set these up before recording the video to show you that we can actually move them and what it means is is that this corner here this corner here this corner here and this corner here will not scale so no matter how big the image gets those will always remain the same size the only thing that's going to scale is this center piece here so if we had like a cool texture inside that would scale up really big but the edges of this rectangle will not scale so this is really cool to have so this is really useful if you're gonna have a very detailed box you see this in games like breadth of the wild where the edges of a box are really ornate and delicate and there's maybe some cool designs and Nintendo can scale up that box as big as they want to and it will always look pretty so let's go ahead and hit apply and you can see now that our rectangle we can use and scale as much as we want now just be careful when you're scaling this if you're gonna scale it this way or that way you'll notice that it's now off centered so just make sure you Center it back up it looks pretty clean there now what you also want to remember we're gonna jump into this in a second when you're animating your UI elements you need to have rules in your mind okay so there's actually two ways to scale a UI element you can scale it with these handlebars and watch this the width and height here are actually changing a good way to think about this is this is the actual maybe pixel size of your object so you can scale it with these handlebars you can also scale it with maybe a scale parent property and so this actually you could set to 1.2 1.2 and notice it's scaling it across the board so think about this as almost like a overarching scale and then the width and height is something beneath that so no matter how we change the width and height this multiplies and makes it bigger and you'll see why this is effective in just a second we have our menu button prefabs that I showed you and each one of these has a different text in it and we want to scale this rectangle based on the text size now we could do this with code and I've seen people do this before but it's actually pretty challenging to get it perfect because every letter size is different what we can do this manually for now if you're going to be localizing your game then you're going to want to write a script because every text field is going to be a different size based on which word in which language is being used but for now we're just going to I'm going to show you how to set the size of each one so let's set this rectangle to this and you can see that the continue button it's a little smaller and then the rectangle for quit is a little bit smaller as well so we have that set up and let's just zero out the positions [Music] and then finally what you're going to want to do is create animations for your menu button so because I've already created this prefab I can just show you the animations that we've created so you can see in our project hierarchy here we have a animator controller and it's got a different icon than this one which these are animations and this is the controller this is the state machine and we're going to be able to control which animations are played based on bullying's I know it sounds confusing but give me just a second I'll try and explain it so we have this menu button and notice it's capital letters I like to keep my controllers capitalized and I like to keep my animations lowercase so I know which one is kind of apparent and which one is the child so let's go ahead and go to window general or window animation animator and let's put our animator state machine right here and you can see that we've already created here the state machine we have a deselected animation a pressed animation and a selected animation and they're sort of set up in a triangle here to help me visualize how it works and let me show you what each animation looks like so if i if i click on any one of these menu buttons they all have this animator component which is referencing the controller menu button each one has the three inside of it so the selected one if we hit play here all it is is one frame and it's just scaled up now you can make this as complicated as you want you can make it bounce a little bit and I'll show you that in a second but for now all we need is one frame we could go to press and press is when the user actually maybe taps it on their iPad or iPhone or when they press the a button or the enter button so you can see here when we press it just flashes a little bit notice how it's looping but it simply flashes white sort of presses in a little bit so you can notice the scale and again this is why we are using scale we can't actually animate the width and height we don't want to do that because that's actually gonna change the width and height of the rectangle and we don't want to do that because that will suddenly turn those variable sizes into a constant and all of the sizes will be the same we don't want that because all the rectangles are different but we can change the scale here and that's just that multiplier so we're gonna set it to 0.9 and so when it goes it when you press it it actually goes small it's almost like you're pressing in a button it shrinks a little bit and that bounces back and the rectangle flashes its color as well notice over here it's flashing a little bit in order to change your color and your size and all that we can change pretty much everything that's a child of the menu button that has this animator class we can change that by clicking record and actually adjusting things we can make the text turn green if we wanted to [Music] go maybe read and it would flicker green and red but that looks terrible so we're not gonna keep that but overall that's how you do it as long as the animator function is on the parent these can be animated as well so this animator here is going to control everything that's inside as a child so again we have all these cool animations here for each state deselected pressed and selected so as you can see very simplistic right nothing too fancy now each one of these menu buttons has a different state machine each one is referencing a default state machine but each one can be controlled individually so as you can see new game is selected and that's this button right here you can see that this blue bar is indicating that it's selected it's set to not loop we don't want it looping nothing is looping and the reason why it's playing the selected animation is because the transition here calls for the condition selected equals true and that's being controlled by script and we'll get into the scripts in the final segment of this tutorial it also says if selected is set to false it will go back to deselected it says that if pressed equals true it will go to the pressed animation if pressed equals false it will go back to the selected animation so as you can see it's checking for certain conditions and we set those conditions with scripts and if those conditions are met it will jump to each animation and as you can see our deselected has exit time for most of these animations and these transitions simply because when the user presses the input button you want it to be immediate you want it to be really quick and what exit time tells unity is that it's going to wait for the selected animation to play before the pressed animation plays so I want the moment I press space I want it to immediately jump to the pressed animation I don't want it to wait all right so those are our transitions again where we're setting conditions selected equals true or selected equals false and the arrow indicates where it's going so the reason why we're using an animator controller as opposed to the button class a lot of you might have used the button class before which is it out of the box component that unity has is simply because with animation we can actually make things really cool so let me show you how we can do that so instead of just changing the color and size when we've selected we can actually make it bounce a little bit when you've selected it so let's click record here way to change this to one point to see that and then we can sort of zoom out here and maybe right there set it to point eight or point nine and then one point one one and then just lerp and just smooth to one so now we have a bounce effect when you select the item pretty cool so now we have a really cool bounce effect so that is why we're using animations to control how things look because you can really get complicated make it look really special we could have particle effects coming out of each button we could have sounds and rotations happening so I'm gonna go ahead and get into the final portion of this video and that is the scripts believe it or not the scripts are incredibly simple but the first one that I want to talk about is the menu button controller and this is what we're gonna slap on to the canvas here so let's take a look at the menu button controller all you got to do is drag menu button controller to canvas so as you can see here all the menu button controller does is it tells unity what the index is and what I mean by indices which button is selected so we start at 0 which is new game+ 1 takes us to continue plus 1 takes us to quit and then if the integer is higher than our max index value which in this case it's 2 because 0 1 2 it'll loop back to 0 so as you can see we have a max index value of 2 0 1 2 we have an index value of 0 which that's the starting point here and then it also checks to see if the key is down all right so let's jump into the script I can show you how it works so our variables are really basic here we already talked about in debt skee down max index in an audio source which is just going to reference an audio source component and on start we're just going to set a variable called audio source which we've already defined here a public variable and all it really is is its referencing the audio source component in our game object now on update all we're gonna do here is check to see if the user is pressing up or down that's all we got to do regardless of what device they're using whether it's a gamepad or a keyboard we're gonna check and see if their vertical access for their input meaning pressing up or down on the gamepad or the keyboard if it does not equal zero then it's gonna start incrementing our index variable really quick let's go ahead go back to unity and I'm gonna show you what is actually happening inside of unity so if you go to edit project settings you can see we have this input field here and what unity has done for us is they've already created all of the various inputs that are going to be used by most players on most devices so vertical all it is is it's an axis so it's listening for a controller input up or down or a keyboard up or down and what it does is it increments from 0 a starting point of 0 if the user presses up it increments to 1 if the user presses down it decreases to negative 1 so go ahead and set the gravity to a thousand and all gravity means is how quickly it goes back to 0 so believe it or not we can have it so that if the user presses up and goes to 1 it'll slowly slide back to 0 but we want it to be really quick we want to say if the user is pressing up it's going to immediately - 1 if they release the button it goes back to 0 really quickly so all that's happening here is we're increasing the index if the max index is not met so if index is smaller than max index we're gonna increase our index this is just creating that loop effect if you get to the bottom it's gonna go back to the top and this right here is checking simply if vertical is smaller than 0 meaning if the user pressed down if they pressed up which is greater than 0 it's going to decrease the index meaning go backwards on the list again we're setting a loop here so if it the index is greater than zero we can actually go down in our index but if it is zero then it's actually gonna go to our max index meaning take us from new game down to quit so it's gonna create that loop effect now the reason why we use if key down is simply because we don't want the user to be able to just spam up and down so I want to explain exactly why we're using this if key down so let's go ahead and comment it out and go back into unity and let me show you what happens when we remove it what we can do now is we can actually spam the menu see that so if I hold down it's just gonna go crazy so what we want to do is have this check and basically what it says is if the user has pressed the key we can fire all of this stuff but right after its fired right after all these checks are fired key down is set to true so that this condition is no longer met so the moment they release the key though meaning the moment the input axis for vertical is set to zero then it's gonna be set back to false meaning they release the key and they can press it again and again and again so let's go to our actual menu button here the prefab you notice has a menu button script time and this is really simplistic obviously we want to reference the menu button controller here we also want to reference to animator classes that I'll get to in a second this is just the animator itself and then this is animator functions which is the last script we'll talk about and then finally we have a integer called this index and all that is is its label which index isn't so you can see here that this menu buttons index is set to 0 this is 1 and this is 2 you could also define this by which child it is but for now we're just gonna say 0 1 & 2 and so again what's gonna happen is the menu button controller as the index increments these buttons are gonna listen and say okay what's my index value is it 1 if my index value is 1 and this value is set to 1 I'm going to animate so this is how the script works here we actually don't need anything in start so we can just remove that and this is happening on the update so all we're doing is checking for a condition if the menu button controller which is that parent controller if the index value is the same as this current index the index that we've set manually for each individual button then we're gonna fire the correct animator scripts so we're gonna set the boolean selected to true and then we're gonna check and see if we're actually pressing the submit button so unity already has a input called submit that we can use which is the enter button the space button the submit button is actually a float value so it's again just like the axises it's zero and then if the user presses enter or space it jumps immediately to one or back down when they release and we say if it's set to zero not one meaning they release the button it's gonna set the boolean back to false and then it's going to set this interesting variable called disabled once to true and we'll get to that in just a second and then finally we say if it's not equal to the current index then it's just gonna go back to selected false so we're setting boolean z' for our animator and those are gonna tell the state machine what to play alright the final script the final script is actually going to play our sounds for us and this is actually one of my favorite scripts to write when I'm making games it's something called animator functions and these are functions all sorts of cool functions we can create to fire in our animations whenever we're playing in animation whether it's a boss or a player or trees blowing in the wind we can play certain animations just by clicking on the actual animation field here clicking this new event clicking this new event button and then you can choose all sorts of cool functions that you've created right now we only have play sound but we could create a function called emit particles we could have one called screen shake we can have one called quick game all sorts of cool events that will play when in animation actually plays so right now all we have is the moment that we've actually selected our button it will immediately fire this event here called play sound and if you look at our script here this function play sound actually has a parameter for an audio clip so we can actually choose which audio clip we want to play so in our case we actually have this sound called click conversation progress meaning as we go down and progress through the menu or maybe a conversation in our game it will actually play this sound and then finally for our press animation here we have one same sort of thing event called play sound but in this case it's click conversation end so it's a selection sound so it's really simple function here now again remember we have this if disabled once you don't actually have to have this to get it to fire all that we're really interested in here is telling the audio source which is on the controller to play one shot which is gonna play a single sound really quick and it's gonna play which sound which is again this parameter here so let's jump into the future and I want to show you what the cool things that you can create with your menu we're in the future so as you can see things look a little bit different here you'll notice that our background looks really cool you can actually create a 3d background behind your scene so notice I have this really cool background here for a sort of layered look and feel and let's go ahead and hit play and show you all the cool kinds of things that we can create alright so as you can see here things can get really complicated but as long as you have that foundation as long as you have the simple core for your menu system you can really get things looking amazing but if we click start game here we can actually fire another menu system and sort through that menu system and then go backwards or you can actually quit the game so there's just a ton of different things you can do transitions between each menu transitions between each button it can get really cool so instead of creating static simple button classes that change the color for example of your button you can actually just have it fire and different animation and create some really cool animations for your menu alright guys that's it that's how you create a menu in unity if you like this video please hit subscribe hit the bell icon to get notified of when I livestream i livestream game development it's like one of my favorite things to do during the day if you want to see me do that hit the notification bell and you'll get notified and you'll get notified and you can join the conversation if you want to get mentored by me head on over to patreon and see if that's something for you I like to meet with people over Skype and talk about game development help you take the next steps to becoming a successful indie game developer also if you want to see your name and the credits of the next video head on over to patreon support for five dollars a month or more and you can see your glorious beautiful name in the credits of my next video thanks guys talk to you later bye [Music] you [Music]

Channel: Thomas Brush

Views: 350,243

Keywords: thomas brush, unity, unity3d, model, texture, models, textures, material, materials, beginner, easy, how, howto, series, course, tutorial, tutorials, fix, game, development, develop, games, programming, menu, basics, coding, C#, main, mainmenu, options, play, back, button, gamedev, buttons, text, user interface, GUI, UI, canvas, interactivity, step by step, learn, sprite swap, game dev, indie game dev, video game, game design, making

Id: vqZjZ6yv1lA

Length: 30min 28sec (1828 seconds)

Published: Tue Jan 22 2019