How to make a menu in Unity - UI Tutorial

in this video you'll learn how to create a user interface for your game including anchoring elements animation button clicks and more let's go alright let's build this ui so i have included these ui assets uh link in the description uh just some things that i drew to for this tutorial uh you can use those or you can follow along with your own stuff so to get started i'm just going to uh just set up my scene a bit i'm going to change my camera from skybox to solid color and maybe use a nice little blue like that okay so to create ui elements right click in your hierarchy ui and you'll see canvas here now everything in the ui has to be placed on a canvas but if you just create any other ui object here for example image it will scaffold that canvas out for you and then put the image as a child of the canvas this event system is used to uh capture the events on the actual canvas you can completely ignore it and actually i might just put it in a little object here just to get it out of the way i usually just create a setup object and place these inside of it so i'll just put that there and we can just worry about the canvas so you can click on your little image here and move it around and you'll notice by default unity selects this rect tool here so this is the tool that we use to manipulate the canvas and you'll notice we've got these anchor points here that you can grab and pull around if you hold alt you can mirror the action and if you hold shift you can adhere to the aspect ratio um and if you hold both then you can mirror while adhering to that aspect ratio just like that now if we want this to maybe just stay at the top here and we don't care what size their screen is what aspect ratio they are we just want it always to be there if we for example go to free aspect here just so i can show you different aspect ratios you'll see that it doesn't actually adhere to what we want it to do see and that's because we're not anchoring it so i'm going to change this back to 1080p so selecting my image if i go up here and click this and as you'll notice these images and everything on the canvas in fact has a wrecked transform as opposed to a normal game object which is a transform so a rec transform gives us access to a quite a few uh more little utilities most notably this one here so if you click this you this is setting your anchor okay so if you click here you'll notice this little uh this little icon here goes to the top and now if we go to free aspect you'll see that it sticks to the top of the screen just like that all right so i head back to 1080p now if you come back in here you'll see here if you hold shift you can set the shapes pivot so not only am i setting the anchor now i'm also setting the pivot of the shape so now if we rotated this shape in a script for example it would actually rotate around the anchor point like that if we hold alt we can also set the position of our shape directly okay so um i generally just hold shift and alt and i put it where i want it because nine times out of ten i don't care where the pivot point is um and so i just chuck it all in the same place all right so that will that will always adhere to exactly uh the top right top left of the screen in addition we can stretch our object to be the full height or the full width or both so for example like that it will always regardless of the aspect ratio it will always go across the full length of the screen alternatively we can do that and it will always be horizontal vertically and lastly if we click this one it will always take up the full screen regardless of the aspect ratio as you can see so let's uh change it back to 1080p now let's actually add our first uh real object that we're going to be using so clicking on the image here and i'm going to go to my ui assets and sprites and now you'll notice i can't actually drag my sprites onto here and that's because they were imported as texture type default now if you're using a 2d project these will import as the correct uh type but if you see here we need them to be sprite 2d and ui so i'm just going to highlight all of my sprites here and excluding my font and click sprite 2d and ui and then just click apply and now i should be able to click my image and then pull my panel out onto it like that that doesn't look too good so as soon as you set a image it will just it will stay to the current aspect ratio that you have got here so if you just click set native size it will go to this actual specific object's proper size and we can just scale that up and down like that but what you'll notice is if i try to drag this now it actually uh stretches all of it now that's not really ideal what would truly like is that these stay true to their proper size and then these panels here these wood panels all stretch so we can easily do that by going by clicking on the panel and clicking our sprite editor now if it says sprite manager isn't installed you can go to windows package manager and make sure unity registry is selected and just install the 2d sprite package there by just clicking the install button down here once it's installed you can click it and go to sprite editor and you'll get this window now you can just drag these in to where you would so basically we're saying everything in this area here we don't want it to stretch but everything within these bounds we don't care if it stretches so that's not really scientific you might want to like uh get perfect values here but it does not matter so i'm just going to click apply and now let's just set native size again on this and now if we try to scale this you'll see that it still stretches because we need to change image type to sliced and there you'll see that it actually works as expected now this is uh really big and fat so i'm just gonna down down scale it to about 0.5 and there we go perfect so i'm going to pin this to the center of the screen just like that so if you remember hold alt shift and just click the center one and it will set not only the pivot but also the anchor and maybe scale that down a little bit and scale it pull it down cool so let's call that panel just so we don't get confused now another important aspect of ui is text so i'll show you how to do this in two separate ways so right click your canvas and go ui and simply click text now this is the built-in uh unity text which has been around since the beginning of the ui system and if you come over here you'll see you've got you know your alignments you've got your color and you can change the text here hello but you'll see that it's not very clear now there's a few ways to fix this for example you can up your text size really high you can give it enough room and then you can actually scale it down seems a little bit hacky i know but that is how you get clear text using the default text input but there is a better way and that is by using ui text mesh pro now this used to be a package that this uh one guy used to maintain but then unity is like hey our text sucks so let's just actually buy uh this from this guy and they integrated it into unity itself so now you can just click text and if you haven't got it installed you'll see this little prompt come up and import text message press essentials and there we go and now as you can see straight out of the box it's crystal clear now the good thing about text mesh pro is you can create your own font assets by simply using an otf file just like this so i just i just downloaded this one from google fonts so i included in there just for the simplicity of this tutorial so you can go to window text message pro font asset creator and it's already detected that i want to use try to make an asset from this font otherwise you can just click it and select your other otf default settings are fine for the rest of this generate fun atlas let's save it uh let's just save it right in the root right there and there we go so we've got this file right here now if we click on our text we can simply drag our new font asset over that default one and now we've got this new font in in unity so in the same way as the traditional font had we've got our alignment here so i'm just going to center it let's just get a bit more room here and again if you hold alt you can mirror the uh expansion now let's change the text here let's say building a ui [Music] now the beautiful thing about text mesh pro is that it gives us access to all this uh additional stuff that the normal traditional unity text is not for example we can add a outline like that let's just make it maybe that and we can add an underlay which is basically if you use photoshop it's just like a drop shadow so let's just offset that a little bit like that and there we go just got some basic text you can do a lot more with it playing with these settings you can get some pretty awesome results but that is as far as i'm going to get into text mesh pro for now so let's just leave that there next let's add a little button here so right click on the panel now traditionally you can go down to ui and actually select this button here and that will give you this object which has got this button component here which also gives you access to this on click but this normal button uh also puts this text here now that may not be what what you want i just want to use my own image for a button so i'm just going to add a normal image like that let's call this play button and i'm going to drag my button image onto it and as you can see it's already got text which is why i didn't need the text now i'm going to set native size to make it the correct aspect ratio then just zoom it down a little bit like that now i can actually add that button component onto it now if you press play ah so it's very little which i'll get into in a moment but as you can see with that button component you'll see that unity by default adds some uh click events to it so that it's it's changing color like it's kind of actually being clicked all right so this is not really what we're expecting is it so if you look at our canvas we're pretty much trying to take up the entire room here when you press play it's just this tiny little area now that's because if you click on your canvas you'll see this canvas scalar component and it's set to constant pixel size what we actually want is to scale with screen size now if you press play you'll see that it's taking up exactly what we wanted that's a exactly what we see in this canvas rect here cool so now it would be cool if we can click this button and it change from this sprite here to this sprite like it's actually being pressed so let's make a little script here let's call this uh clicky button like that and open it up okay so we're going to be needing a few things here using hindi engine oops dot event systems and using unity engine ui cool so when you're just using a game object with a collider you can just hook into the void on mouse down just like that but unity ui doesn't have this by default but we can use something in unity engine event systems so if you just go to after your mono behavior and start using the on pointer down handler and the eye on pointer up handler and then you click on one you can just press alt enter implement interface alt enter implement interface and now these are effectively the same thing as on mouse down and on mouse up all right now i'm not going to write the rest of the code here live i'm just going to copy and paste it and then we'll go through it okay so we've got a reference to our image the actual button image we've got a sprite for the default state and then when it's pressed audio clips for when it's compressed and uncompressed and the source that we're playing the clip from on our on pointer down we're just setting it to the pressed image and playing the compressed clip and vice versa on the pointer up okay back to unity on our play button let's add a script that we just made clicky button and start setting our references so we've got our image there our default button our compressed button uh compressed clip which is in audio uncompressed clip and we need a source there we go let's try that beautiful not a very nice sound but it is what it is okay so what if you want to actually hook up an event to that well we can easily add a function i was clicked i'm typing debug log and let's just say click like that's save it and go back into unity and on our play button you can go to your button component here and the on click just add an event let's send in our clicky button and on our clicky button down here i was clicked and now we should be able to click it and get an event down at the bottom called bananas okay next let's add that uh scrolling background effect and if you need a full tutorial for this growing background i will include a link up there somewhere so click that and then come back so what i'm gonna do here instead of adding an image i'm going to add a ui raw image now the difference between an image and a raw image is the raw image gives us access to the uv rect and a few other things but what we care about right now is the uv rect so let's name this scrolling background and i'm going to scale it way up like that now for the image let's i've got this tarot dev image here and you'll see i've set it up in kind of like a funny way so just drag that on there now the reason i've got it set up like this is so that we can tile it so if you go to uv rect and starts doing the x here sorry it's it's not actually tiling it's clamping so we need to change that go to the tarot dev sprite and you'll see down here wrap mode is set to clamp if you change that to repeat and then let's go back to our scrolling background again you'll see that you can actually tile it like that so i'm going to set the width to something like 15 and the height to 15 as well and then let's rotate it a bit like that that might be too many octa pods or octopus or uh octopuses or apparently they're all correct so let's uh change the color a bit go down to maybe like that and if you've used sprite renderers before you'll know that they've got the uh order layer property and depending on the order layer they'll render in front of each other or not with ui it's a lot more simple than that it's just hierarchical so if i just grab this and then put it behind that panel you'll see that now it is in the correct place behind the panel very very easy all right so to make this start scrolling i have included this script here as i said earlier if you actually want to see how this works just go to the tutorial that i linked earlier so i'm just going to flop that on there let's put in the raw image and let's make this garlic maybe 0.2 and 0.2 press play and that's pretty damn fast let's make that 0.1 and press play yeah pretty cool cool enough anyway okay so lastly i want to add a little uh little menu here that you can click and it will slide out with the icons that you need and then if you click it again it will slide back in so let's quickly do that so i'm going to create a new empty game object here when you create an empty game object on a canvas element it will actually create the rec transform type so let's call this settings panel and let's clamp this to the top left so i'm holding shift and alt here and just clicking on the top left one and it will clamp it up here all right so up here let's add a item let's make this an image i'm going to call this open and i'm going to make it my gear icon like that set native size just to make sure that it's the correct aspect ratio and scroll that down a bit like that and let's actually pull this down a bit the settings panel who knows how how big it's going to be put that right there okay so i'm going to make some more icons here and this one i'm going to call audio and let's put the audio icon in and then let's make another copy down here let's call this vibrate and i'll make the vibrate icon and we want these to actually be starting off screen don't we because we want them to come in when we click it there are a few ways to get these moving you can do it in script and just like left the positions when you need to i personally like to do this via animations uh it's the perfect thing to animate to be honest so i'm going to add i'm going to click on my settings panel and add an animator and then i've got my animation tabs down here if you don't have them go to window animation and then just click these and then just dock them so in my animation with my settings panel clicked i'm going to click create now let's create a little folder here called animations press save and actually i probably should have known something better so let's show uh settings that's what my animation is called and now i'm going to click record on my on my animator and we're going to animate these inwards so let's start with the audio so if we just move forward to say 20 and then pull this in whoops and then pull this across let's like over extend it a little bit you'll see because uh we're in the chart a little bit basically it's taking our first position and it's automatically adding a keyframe for us and then we're adding the keyframe where we actually manually added it and then let's go ahead another five and then pull it to the actual real destination so now if you grab this you can see like it's kind of like doing a little bit of a an over an over extend effect uh you can do that with like lurps and stuff in in code but that that's an easy way to do it with with animation next let's do it with our vibration so let's just actually take a note of where this is the over extend amount and then with our vibrate so let's actually stagger the animation of these two so it looks like they're kind of uh coming down in sequence so if we start this at maybe five so we need to keyframe here so that this doesn't so that the the movement starts here and not here so if you just go to five and then right click here on pause x you can add a key just add the key there and then we need to actually find out the over extended amount so i'm going to go to the point where my audio is all the way out grab its x position go back to my vibration now this is staggered by five so this is where it's going to be overextending just copy that in there go forward another five and then go back to its natural spot and let's try that out there we go cool little wavy effect that's all we really need to do for that so stop recording now on our animator we have this animation let's just actually name that properly show settings but we don't want to be doing that the moment it comes in we don't want to show it straight away so let's actually create a empty state and let's just call this starts and let's make this the default state set as default state and now we want to actually transition to this when we when we click this button we actually want to transition to it and we'll need a parameter here so that whenever this parameter is triggered we'll actually perform this action so in parameters here you it's probably default selected to layers click parameters and let's create a trigger and let's call this show now you might be thinking why didn't we create a boolean and like only show it when it's being shown and i'll show you why i chose a trigger in just a moment so so here in the conditions we need to tell it when do we actually want to transition from start to show settings and we've only got one one trigger here so as soon as you click that it will have the condition there and untick has exit time so it transitions the second we press it and now that we're here we actually need to transition back don't we once we once we press the button again so we can actually use this same animation so copy and paste it and let's call this one hide settings now instead of speed one we can just set this to speed minus one and it will do the reverse so let's set the transition here so make transition this one will also be trigger okay and remove the exit time and then from here we can just go straight back to start and then we can just wait for the for the input again so now we actually need to uh make this button clickable so let's add a button here you'll see this on click uh handler so you add one and throw in the setting panels animator now i told you why we chose a trigger and not a boolean and that is because these uh on click events can only handle functions with a single parameter and booleans require two because they require you to say okay what's the name of the boolean and then the value of the boolean whereas trigger is just like a bam i just triggered something i don't care what it is it's just trigger so we can actually use set trigger because all that all you need for that is the name of it which we call show so whenever we click this we're going to set the trigger show so let's try that let's press play and go aha so that's because on our animation we have got loop time clicked so press play again let's try and there we go in and out so then you would simply just make buttons of this and you'd connect your settings manager or whatever and it would just toggle on the sound or vibration easy as that uh one last thing let's uh add some decoration to this panel so i've got this panel here and i would like some decoration down here and maybe up here or something so let's add a ui image and let's add this plant deco here set native size so it reforms to its own uh aspect ratio and now i always want this to be right here and if we grab our panel and start moving it around you'll see it does not do what we want so that's where we need to use the anchor points so holding shift and alt click the bottom one like this then put it where you want it and you'll see now when we move the panel around it sticks exactly where we want it so let's call that a plant let's duplicate it and i'm going to use the gear that i drew like that and for that one i want it in the top left like that call that one gear so cool that's about all i wanted to show you you've learned how to make a little uh animated menu here with your buttons you've learned some text mesh pro you've learned a little button here with event handlers and you've learned how to have scalable graphics as well as anchoring your graphics to the correct locations on the screen and that that's really the basics now that you know that uh you can start making pretty complex uis if you want to know more about like things like sliders or uh layout groups and stuff which are the more complex things of the ui i've got videos on that so go check those out but until next time i'll see you later

Channel: Tarodev

Views: 5,666

Keywords: tarodev, unity, tutorial, how to make a menu, how to build a menu, ui, gui, unity user interface, user interface, stretch image, animate menu, unity tutorial, unity main menu, game development, unity3d tutorial, game design, main menu in unity, unity ui, main menu, unity gui, how to create menu in unity

Id: lF26yGJbsQk

Length: 26min 27sec (1587 seconds)

Published: Sat Sep 04 2021