Create an Animated Main Menu in Unreal 5

hey everybody we're going to make a main menu for our game so by the end of the video you will have a main menu map where if you hit play we can have a game title you saw a really quick intro animation you can hear button sounds lovers and clicks you can see exit animation go back and we'll have a camera fade you're not hearing the music right now cuz I have it muted we can play the game or we can quit so if we play it'll fade go into our game and that is our intro main menu and we'll cover all the stuff on how to customize that as we build it okay so we have our game it's a simple prototype but we've gotten far enough along that I want to start creating a main menu so when I open it up I can navigate into my game or I can quit or I can see some other instructions or so forth want to build that initial structure so the first thing I almost always recommend you do before you start building any kind of UI is find some reference I'm not going to match this exactly but the things that I like about this main menu are the buttons off to the side and the camera looking at the game world so you can see some movement and things we're not going to just put a flat image on the background I want to render it from a camera and put my UI on top we'll do some button highlighting and other things so find a reference for the main menu that you want to create but I'm going to base mine Loosely off of this all right so our main menu is going to be a separate map so let's just do that we're going to say file new level now you could choose empty level but because I want to actually render a background I do want some kind of lighting in my background so I'm going to choose basic and hit create this will allow me to decorate my background scenes however I want so once you have this opened up I'm going to save it so let's do save current level as I'm going to navigate to this game folder that I created in previous tutorials but you can save it wherever make a new folder called maps and inside of maps I'm going to call this main menu and hit save okay so we have our main menu level it is pretty much empty except for our default lighting and our floor we can always decorate it later and we have it saved now what I need to do is I need to go into my project settings so edit project settings and I want to make sure that this main menu is the first thing that opens up whenever I actually run my game I don't want it to go straight into the game where I'm playing my character when I double click my executable I want it to go into my main menu so that's going to be my game default map go over here and click the drop down find main menu just type in main should see it make sure this is set and then close out and you should be ready to go so we can start customizing our main menu and then whenever we eventually build out our game and run it it will open straight into this main menu that we're customizing now that I have my main menu I want to make sure that when I hit the play button I don't actually go into my game and start moving around right I just want it to show my buttons and allow the player to click so we're going to clear some stuff out over here let's go to the world settings and I'm going to find my game mode where it says override n you could do this I'm just going to assign it to the base just so it goes to the default uh little you know ghost character which is fine and we're going to lock that down and make sure that we can only receive input you could make a special menu player controller but that's a little overkill for this tutorial for now we just want to be able to click buttons and not move our character so I assigned my game mode base it's just the default and the next thing I'm going to do is inside of my level blueprint so open level blueprint when we open this level because this is a main menu I want to set my input mode to UI only we only want to click buttons so I'm going to right click say get player controller pull off of that and we're going to set the input mode now if you type in set input mode you have options for UI only game only or both which uh we usually do like UI button presses and if not that then it'll also process game I only want to click on button so I'm do UI mode only now when you do this you just have to make sure that at some point in your game when you want the actual game input mode not just the menus you have to set it back so we'll do that in a second so we'll plug that in when this level begins only allow UI input and then can pull off of this again let's get player controller and let's set show mouse cursor what I want to do is I want to make sure that we can see the mouse cursor so that we know what buttons we're going to click otherwise it'll hide it we won't be able to see our mouse cursor or what we're moving over or clicking or whatever so we're going to set it to true I do want to see the mouse cursor while we're in the menu so compile save now I mentioned um setting this back whenever we're inside the game so in my game I have a special player controller for my first person character so I'm going to find that down inside of blueprints and first person player controller remember this one only gets spawned in our other map since our other map is using the first person game mode right this one uh this one is not so we're not going to get this but in the other one we we will get this player controller so when we actually load our game we want this one to ensure that we are in our game input so we're going to drag off of wherever your begin play is I have other stuff here so uh you may have that just at some point during this chain let's right click we actually don't need to get the player controller cuz we're already inside of it so we should just be able to say set input mode to game only so this is what we want okay plug that in we're just going to set this to self just in case since we're in a player controller so drag off and type self get a reference to self we don't need to flush the input but we could uh let's pull off of self and we also want to set show mouse cursor and we want to hide the mouse again because in our game it's a firstperson game and we don't want to see the mouse we're just going to put a reticle in the middle or something we don't really want to see our Mouse moving around so we're just going to hide that so make sure that's unchecked but if you were building like a like an RTS or something you probably wouldn't want to hide it so it just depends but my game I want to hide it during gameplay I can always turn it back on or get it back if I want so once you compile save we're going to hop back in our main menu hit the play button okay we should be able to hit play not move around because we're not spawning our character it's just the game mode base and we can see our Mouse and potentially we could click now the other cool thing is we can see these slow moving clouds which means we're rendering from the in-game camera which is exactly what I want and I'm just going to double check back in my other map because I made a change uh let's open up let's find our first person map that we were working in before double click that make sure everything is still fine when we open that up and it is okay perfect okay so let me go back to my main menu and once you're in the main menu you've tested it you know that your mouse is visible and you can actually uh not move around then you are good to proceed so the next thing I want to do is create a camera that I can work with so I can position it in the level and build a scene around it for whatever I want in the background so there's a couple ways you could do this one thing that you could do that's very easy is you could just move your player start to where you want it and try and angle it um I don't really like that method because it feels a little bit hacky and maybe I do want my camera to move around a little bit or something so I'm going to actually create a camera and show you how to set that in your level blueprint so the first thing we need is our camera so let's go to our add and then we'll go to under all classes you're going to see a camera actor this is just a very basic camera nothing fancy so click that add it to the level this is going to be our main menu camera you can select it and move it around and you can see exactly what this camera is going to see and what I want to do is position this roughly where I want it and then we're going to build a tiny scene around it I'm going to use basic blocks just for composition I'm thinking about like a little tunnel again I'm just doing placeholder nothing fancy but you could always decorate it later if you want so I'm just going to build a little tunnel position my camera in it and have it open with some open space on the other end so just position your camera where you want it kind of preview it and then I'm going to do a quick time lapse where I just make a couple blocks and build it around my camera okay so if I hit the play button you see that it's not going to actually go to the camera it's going to my start position so once you kind of get a rough composition it's time to actually set the camera so to do that I'm going to select my camera go into my level Blueprints and what I'm wanting to do is in begin play I want to set the camera to be the view Target so with my camera selected you click it in your level uh inside of your level blueprint you should be able to right click and create a reference to the camera actor just like this and once you have your camera actor over here I'm going to pull off of player controller or you could you know get do another get player controller node but I'm going to pull off and say set view Target with blend so for this player controller we're going to assign a camera we're going to take our camera say this is our new Target so plug that in uh you can have a blend time but I'm going to say zero because I just wanted to automatically take control of that camera and do other things but I am not worried about any of that and and the last thing is make sure you connect the execution node right there and now it will set a new view Target so a new camera to this player controller on begin play and the level so right when the level starts we will assign a new camera to the player let's hit play okay so now we're on the new camera and the cool thing about this is if we wanted to animate this camera or something we could right we could uh do some other fancy things because now we are from the camera and not the player controller so this is a very good starting point again I'm not really going to decorate my level it's just going to be a tiny little tunnel but if you wanted you could import assets you could build a little scene around it and you would get some interesting animations in the background which is a really cool way of doing it all right now it's time to start making our widget for our main menu I mentioned before you could make a specific main menu player controller I think that's a little Overkill especially for this tutorial I'm just going to do some things in the level blueprint since there's only going to be one main menu and I think it's fine to just build it that way so what I want to do is create a widget and then assign it in My Level blueprint to be active so we can actually create our menu when the level begins so I'm going to go to my UI folder if you don't already have a folder like this just make one and I'm going to right click user interface widget blueprint so just click user widget wbp main menu crl s to save it double click to open now the first thing I need to do is actually design my widget so it's always good to start off with a canvas canvas panel this will just render it to the camera so I have that now for me you can go back to your reference at this point right like whatever reference you're using for your main menu I just want a big title text right here long term this could be a image logo that I could import but for now just some text is fine so uh compile save this is going to be a you expand common you're going to see the more common text elements I'm going to use a text drag it down under there I'm going to re label this and call this game title label usually a label is something that doesn't change at runtime like it's it's just text that is always there and does not change so I'm going to Anchor this to the top left I think that is fine let's position it and make it really big for my position let's say 100 100 for my size uh I do want this to take up a lot of space so let's say I think 1,000 is pretty close and then I do want it to be a little taller than that maybe 150 and none of this really matters because I still need to change my font size to actually get this accurate so let's replace this text block with whatever the name of your game is going to be since mine is just for the tutorial I'm going to call this game title this would be the name of your game and let's make this a lot bigger so if you go down to font 24 is too small you can uh make this bigger like this I think 100 is probably going to be pretty close that um you really do want your title to be pretty big it's the main part of your game but again longterm this could be some kind of logo that you import go off your reference if you can another thing you might want to do is add some kind of Shadow right like our shadow color over here by default we don't really have one so so let's turn up our opacity on a shadow so I'm going to turn mine all the way up my Alpha from 0 to 1 and then for my shadow offset maybe five and five maybe that's too big I don't know uh let's actually make that semi-transparent so go back and turn the alpha back down to 0.5 okay so you see how there a nice little Shadow behind it just a really quick way to make some title text Pop now what we've done is we've started to design our main menu widget so compile save but we're not actually rendering it anywhere we have to spawn the widget in our scene so let's open up our level blueprint again we are setting our camera and the next thing we need to do is actually create and assign our widget so right after we set our blend I'm going to rightclick get player controller because it controls what gets rendered to the screen drag off and say create widget and it needs to know which widget to create so do the drop down wbp main menu so we're setting the camera and then we are creating the wi it okay and the last thing we need to do we created it but we need to actually render it to the viewport so pull off add to viewport make sure it's all connected up you have the widget assigned compile save and test it out hit play okay I I think this looks pretty good again you could continue to decorate but we know that our widget is spawning in the scene we can click around we can't move and this is a really good starting point for then putting on some buttons and other additions to our menu okay open up your uh main menu widget again now we're going to create some buttons for our main menu so what I'm going to use is something called a vertical box so if you search for vertical vertical box drag it down underneath the canvas and what this is going to do is this is going to help us lay out our buttons in a very clean way that will expand automatically and be perfectly spaced we don't want to do this by hand and be slightly off in pixels that would just take way too long so we're going to create a box that will automatically space them out how we want so first of all we want to again just align it to the top left just like our title text there are other ways to do it but I think this is a very simple way uh just to the nearest corner so first it's always good to start off with your position and size and Alignment let's try 100 300 I really want it to be kind of underneath my title again you would use your reference for this and I'm going to say size this is actually pretty close I'm going to round it to the nearest uh it was like 580 so want to put it at 600 just get it close to a nice even big number I think 400 uh looks roughly the size of my title text over here it's may be slightly off but that's fine I you know I could reposition if I want and I'm also going to rename this so that I know what I'm using it for we going to say menu buttons panel and so I'm going to put buttons inside this panel and anything underneath your vertical box will automatically get spaced out and let me show you what that's doing it's going to look very weird at first let's go back to our common and get a button I'm going to drag a button underneath there see how it's automatically kind of lining it up uh if you select your button and you duplicate it a couple times you see it's automatically spacing it which is nice but this isn't really doing what I want yet so let's tweak this a little bit to get it closer what we're going to end up doing is customizing one button first and then duplicating it but I want to see what the eventual uh layout will kind of look like before I even start that so if you go to your button this top button over here and you look under your padding um you can actually add some padding on the bottom or above or left and right on your buttons so for example if I were to put some padding on the bottom button let's say 15 see how it spaces out a little well if I were to delete the other buttons this and now I were to duplicate it again they all have 15 spacing so this looks a lot nicer now one thing you're going to notice is that there's no way to actually control the vertical uh size of your buttons at least you're not going to see something over here there are ways to do this right I will tell you it's based off of the size of what is inside your button it's going to automatically expand so to really demonstrate this I'm going to delete these other buttons I'm going to take some text and put it underneath the button here so you see this text block if I were to make this text block bigger so let's find the font or I turn this up see how the button's getting bigger to match and if I were to duplicate this whatever you put inside the button is going to drive the SI the vertical size of this button so hopefully that makes sense so uh I think what we should do is we should resize our text to be what we want and you'll also notice so we can control the padding on our text as well so let's say I kind of do want some padding here say 15 on the left 2 4 two yeah that's fine um I just want to push it over just a little bit and oh and let's actually align this to the left side of the button as well I'm do left side uh in my original reference the button text was all the way to the left and then the hover effect would go a lot further um I kind of want that effect so let's actually make our text smaller now I'm not sure how small let's say something like maybe 30 and it's possible that we'll change this later but now if I were to take my button and duplicate it this is a lot closer and I think in the end I'm only going to want three buttons at least for now uh but if I ever wanted to add more it will automatically space it down and I think this is a very good start to what I want so the next thing that I want is in my reference you can see how in the screenshot if I were to hover over a button there's actually no button image behind it until I hover over and then there is a very light background we're not really going to import our own custom image but I do want to get that effect of highlighting the text when I hover over by having it transparent whenever I'm not hovering so to do that let's click our first button which we're going to customize first and what I'm looking for is style you can see that I can define a style for normal hovered and pressed now you could get crazy with this but I'm just going to keep this real simple and just do let's see a tint on normal so by default I want it to be zero opacity so nothing behind it and when I want hovered let's give it a little bit of opacity so I'm going to change this from 1.0 so fully opaque to 025 so just a little bit and then on press I'm going to keep this how it is I think we we can make it full or we can do 0.5 I think make it even brighter so it's Z and normal 025 and 05 let's compile save remember this is only on this first button so let's actually delete the other two so we just have this first one compile save and if I hit play see this covering effect I think this is pretty cool and you could be more intense with this if you want you could import a background image or whatever but I like this effect of nothing and then when I hover over there's a very long highlighting image in the background okay now that I've customized my button let's actually go in and clean all this up because we do want a couple different actual buttons for our menu I think I want a play some kind of how to play or some kind of instructions and a quit button so I only need three let's uh rename this first one to play button okay I think this this is a customized one let's duplicate this two more times so CR d contr d the second one we will call how to play button and the last one will be quit button okay and it's also a good idea to uh relabel the text underneath those buttons as well so we'll call this play button text how to play button text and quit button text now just because I labeled the doesn't mean that the text inside of them change so make sure you click on the play button text let's replace the content text with play let's do the how to playay button text and replace that one with how to play and then the quit button quit Okay play how to play quit and if I did everything correctly then I should be able to go and test it in the game I should see all my hovers and all my buttons play but nothing's going to happen when I click yet I haven't added any functionality I just have some hovering effects but I think this is pretty cool cool for a starting point obviously you could continue to customize this import images tweak the colors you can make this like a light blue instead of a gray or buul opaque or whatever you want really this just to give you a starting point so the next thing we want to do is we want to be able to switch out between menus so I have my main menu but if I click how to play I want to open up a different menu have it pop up and give me more instructions maybe I can go back by hitting a back button and then return to the main menu so basically submenu navigation and one way that we're going to handle this is with something called a widget switcher so go back to your designer and what I'm looking for is widget switcher let's click up here type in widget switcher you see it right here let's drag one of these down and put this in the canvas panel and the reason is because my menu buttons panel is going to be one of my widgets I want to keep my title text I just want to switch this part of my panel depending on what you want to switch you may want to group all that together like if you did want to switch this top part as well that entire menu whatever you're looking to turn off off and on you want to be underneath your widget switcher so my menu buttons panel right here I'm going to drag this under my widget switcher like that and you see how it's going to like resize it and put it off in the corner that's because I didn't customize my size before I made it a child so it's actually undo that and show you a better way take my widget switcher and roughly make this the same size before I do my child parent it's about the same size you could make this exact if we want maybe we select our menu buttons panel could copy this copy all properties go down to our widget switcher could paste it right so now it's the exact same which is great and then we take our menu buttons panel put it underneath and now we don't have it all smoos in the corner okay so we have our menu buttons panel so let's come back up here and do vertical box okay we'll do a new vertical box make it a child so now it's roughly the same size and what I want to do is first I want my title label so my had to play like what is the name of this menu let's get some text put some text in there and remember my vertical box is going to stack all my elements one after the other so let's take my text block we'll call this how to play label change the content to be how to play you could do some other fancier things with that like again you could add some kind of Shadow so maybe we select this and we go to5 give it a shadow maybe three three right uh for title text oh actually like two two better for anything with a title label that's meant to be very important sometimes a drop shadow can help it pop out let's add another text block underneath that so drag it to Vertical box and now it will stack it underneath it this is where I would put the controls for your game so something like let's go to my content let's say was the movement maybe I do shift enter to do a line break space jump shift enter to do another line bre Escape exit left Mouse button uh we we don't know yet maybe a weapon not really sure press enter and now we can actually put our controls right there now what I don't like is it's the same emphasis and boldness of the how to play so let's actually take away the Bold let's make that regular I think it's good let's make it a little bit smaller so maybe 18 and let's add some padding we can't manually position this right now since it's in a vertical box we would have to do this with the padding at the top so let's go to our how to play and padding below let's say 15 all right and it spaces it out just enough you could again continue to tweak this um I actually think I'm going to make this a little bit smaller I don't know why it's back up at 23 let's put this at 18 there we go I like the look at that a little bit more and I'm going to duplicate this again because I want to put one more thing down here I want to give a win objective whatever your game is reach the end of the level without losing all of your health that's a pretty common objective and again you want to add some padding so we'll do uh 15 on the bottom of this one or you can do it from the top on the one beneath it either way and the last thing that I want is I want a button to go back to the previous menu now you can put this button in various places I'm going to put mine at the bottom of my vertical box but you could you know put it somewhere else if you want just make sure that if you do it that way that your vertical box and your button are grouped under a different thing that's under your widget switcher because you don't want to leave the button on and only switch between the vertical box and the other menu right like you can see what's going to happen here uh you want to make sure the button is somewhere underneath here and you may need to regroup things if you don't want it stacked like this so anyways I'm going to have my button as part of my vertical box I'm going to put it down here and so let's get a button like button in our pallet get a button under the vertical box okay go back I don't know why switch there uh we want some text for the button pull that in you can see I'm moving a little bit faster as we get more comfortable and let's change the content of our button of our button text actually change that to back let's add add some padding so on the thing above it that reach the end let's do padding on the bottom now this is where you can spend forever just doing layout tweaks uh you can I'm not going to do this but one thing I am going to do is I'm going to pull the button over to the left side so one thing I can do is my button my right padding going to give a padding of let's say 500 you see how it pulls the button it adds this padding right here I think that's maybe a little bit too much let's go 400 okay that's pretty noticeable that's good now I'm going to do the same thing with my hover effects on my button so we'll normal tint is zero Alpha I don't want to see it okay we'll do hovered I think we did 2 Alpha .25 okay am I pressed I think we did 0.5 so on the tint for that .5 all right so it's going to stack it underneath I actually do want a little bit more space here so the last thing I'm going to do is padding so we add 15 on the bottom I'm going to add 15 on the top for the actual item we'll space it out even more click reach the end 15 on the top and 15 on the bottom for all of these oh not the left sorry uh the top 150 either 15 okay and then back the button not the text on the top we're going to do 15 okay it spaces out just enough that I think that feels a little bit better let's compile and save okay so now that we have this layout here you can see what would happen if you switch between the two right this is intended but we need to add the functionality to use the widget switcher to switch between the buttons so it may seem a little bit overwhelming to think about how you would do this but it's actually pretty simple with a widget switcher if you click on the widget switcher and you look over here down on active widget index zero is the first item underneath your widget switcher so zero is our menu buttons panel and one would be our vertical box let's relable that to be how to play panel okay that's a little better if I select my menu buttons panel and then I click my widget switcher and do zero index it's zero but if I change this to one you can see how it switches it 0 1 so I want to do this in code now think about what you're really trying to do here I'm going to put it back at zero what I'm really trying to do is say if I click this button then I want to switch my index switcher to one right so if I click the how to play button I want to switch at to one and if I press the back button I want to switch this back to zero well we can do that with button events so click on your how to play button right here and if you scroll down to the bottom you can see some events that we have access to and of them is onclicked so when the player clicks this button what do we want to happen so click the little plus button onclicked for how to play I want to access the widget switcher and I want to set the active widget index so we can pull off our widget switcher we probably should have renamed this we still can but uh I think it's fine for now pull off of my widget switcher and we can say set active widget index the function uh you could probably control it directly but this is likely more efficient so widget index and we can run the function and say what is the new index we want well if we click the how to play button we want it to be one right cuz that's the second item if we go back to our designer our how to play is one and this one's zero so when we click how to play it'll set the widget index to one we click the back button let's click the back button right here remember the button and we probably should have labeled that as well we'll call this how to play back button let's uh F2 contrl C for the text underneath control+ V text okay so click on the how to play back button and scroll down to the very bottom and say when we click the back button we want to you can just copy paste this or you can get access to any of the important elements that we would want to script on over here under the variables we it's just easy reference to these components over here but our widget switcher drag it in get or you can contrl c contrl v from up there and actually this would have been way faster let's contrl C contrl V select all that plug it in when we press the how to play back button change the index to zero okay so we're just returning it to one and then returning it back to zero on these two different button presses compile save and hopefully that makes sense but it's pretty easy with a widget switcher if you had even more widgets you could make you know other ones underneath that you could have even more menus to switch between but you just need to set the proper index at the right point in time so on the right button press so let's compile save I think it should work let's actually try it out we'll hit play if we click on how to play switches great instructions hit back it goes back and our other buttons aren't functional yet but we are already learning how we can do SUB menus inside of our main menu okay now let's make our play button and our quit button functional let's come back into our widget when I click the play button what I really want to happen is to load a certain map and in my case it's going to be the first person Maps first person map yours might have a different name your here might be a different map just whatever it is find the map that you want to load when you press the play button and we want to call a function that opens that map by a certain name or by a certain asset so let's go back into our widget click on the button so for play Let's uh select the button there scroll down to the bottom go to onclicked the little plus button when we press the play button we want to Let's right click say open level now you can do by name or by reference so if you do by name you have to type in the name exactly you could do that it's it's pretty common but I'm going to do open level by object reference so now we can actually select an asset so an actual map file inside of our content browser uh this way we just don't mess up the spelling of our name so I'm going to select my first person map I believe that is the correct one let's plug it in again your map might be a different one whatever you want to happen when you press the play button choose a map to load so compile save let's try it out hit play button play and it loads on our map okay great we don't have a way to go back yet we'll you know tackle that maybe at a future point but we still need the quit button to work as well so let's go back into our designer and when we press the quit button we want to exit the entire program usually your main menu is the starting point of your program well if we press quit on the main menu we want to exit out like we want to completely close it all down click on your quit button scroll down to the bottom go to unclick hit plus and when I press a quit button I just want to quit so I'm going to right click type in quit game okay and in the case that this were eventually a multiplayer game a specific player can quit like you might have different players join and quit a particular game session I'm not really planning on having that but just to show you you can drag off to the specific player and say get owning player so whatever player owns this widget that's the one that pressed the quit button so we're going to quit and that should be fine okay so we can compile save hit play We can load our game we can how to play and we can quit and if I were to build this out this would actually exit the entire game but right now I'm an editor so it just exits the editor one quick thing I wanted to show you just in case any of you have a bug or in case you want to protect yourself later since we are setting the input mode to UI only right here in most cases we wanted that to be the game so when we quit it might be a good idea to actually set the input mode back or when you open another level so instead of doing open level like this what you could do is you could say get player controller we can just set our input mode back to Game Mode game mode the input mode game only pull that up connect it uh sometimes it can be a good idea to clean up after yourself if you set it somewhere else let's also pull off and say set show mouse cursor just to make sure that we hide it whenever we go into the game in case they forget to put it inside of the other blueprints they show mouse cursor keep it unchecked for hidden and then we open the level so this is something you could do like if your mouse cursor was in consistent in your main menu you can just reset it back so that you don't have to remember to uh set the game mode in every other level you make you wouldn't you really wouldn't want to work that way so we'll set it back to how we had it and then we'll open the level compile save so that might help solve any bugs that pop up later so one thing I don't like about our main menu is when I hit play if I were to hit the play button inside of my menu it's going to instantly jump into the game Watch it instantly jumps in which is great for just getting into the game but uh it feels kind of abrupt and jarring so what I would like to do is I would like to fade out my camera over a small amount of time and go into the game without it being sued so to do that there I mean there's a lot of different ways to do that but one way you could do that is at the moment that we press the play button you go over here we can find our play button we're going to instead of opening the level let's just wait for a second I'm going to disconnect this we can get the player camera manager we can pull off of that and say start camera fade now what this will do is it'll animate the camera Alpha so you can be full black to transparent or transparent to full black if you hover over it'll give you some hints on what this is doing but we're starting at zero meaning we can see everything and fading to Black which will be one and over a duration 1 second we'll do a 1 second fade we're going to fade to black so we'll leave our color to Black let's also fade the audio we'll handle music in a second and let's also hold when we finish so it doesn't pop in and out like we don't get this weird screen flicker let's connect that up so this should fade the camera over 1 second but then what I want to do is I want to hold just slightly longer and then load the level so we have a 1second fade but as soon as we trigger this node we're immediately still going to load the level so we actually do need to wait I'm going to pull off of this and say delay so we're going to pause our execution here we need to wait the 1 second fade and then I'm going to actually wait another .5 so we'll say 1.5 total so start the fade wait for 1 and 1 half seconds and then load the level so connect that in so let's compile save and see how that looks hit play we'll hit the play button okay so that's a little bit better and you could actually add a fade when you enter the level if you want I don't really want to worry about that right now I just want a good main menu for the moment let's go back and the other thing you can do is you can add some background music to your game so there are a lot of ways to do a dynamic music player I'm not going to do that I'm just going to play music from the level since we only have one main menu I think this is fine but again if you had a more bust music system this is where you would just hook into that so I'm going to find a looping music queue you could either import your own or for me just for testing I'm going to find the starter music with the starter content uh well let's find it down here I don't remember what it's called scroll down starter music okay we're going to grab the que just drag it into the scene and the que should already be set up to play it appropriately a lot of times I like to zero out these kind of things though so 0 0 0 play it origin it's pretty good all right one thing I want to check uh let's actually r name this to music player so we know what it is what it's doing and let's scroll down make sure it's autoactivate that is what we want and let's hit the play button okay so we hear it and let me show you something else if we come back into our blueprint uh over here with our camera fade when we clicked should fade audio this should also fade our music out when we hit the play button so let's try it goes in uh sounds really nice that camera fade and the music fade does add a whole lot it seems kind of subtle but all these kind of Polish details go into a good feeling main menu okay another detail that is kind of subtle but I think very important is button sounds and we can actually do some button sounds very quickly and easily we can do a button sound when we press and when we hover most games have both and sometimes it's really subtle but we're going to put both in there like a hover sound and a press sound and I'm going to use some just simple built-in sounds you could obviously make your own and import them that would be good practice this but I'm just going to select some just for testing so if you click on a button let's say my play button and if you look to press sound we can select a different sound that would be a little intense so one that I found is called selection changes uh just a built-in editor sound again you could make your own let's he what that sounds like right very subtle and then my hubber you want to be even more subtle I think one that I found was Gizmo all click and you'd eventually want replace these right right even more clicky okay so it seems kind of subtle to actually do that for all our buttons we don't have very many so we could probably copy paste that but uh I'm just going to type it in since it's really not that much work right now so selection changes Gizmo I'm probably going to time-lapse this while I do the uh last two buttons okay and the important thing I wanted to mention about the back button a lot of times when we are undoing something or we are going going backwards we may want a slightly different sound for that kind of like a cancel sound so I'm going to do a slightly different sound for the back button so for we're still only keep the hover so for the hover we'll do a Gizmo and it'll select it but for the press sound for this one I found something called object snaps to grid okay so this one it's kind of a little downwards but it should sound different enough that it communicates we're going back we're not confirming something so you could customize this more but uh once you have all the button sounds allocated Let's test it out okay that feels a lot better you see hit the play button all right okay it's coming together pretty well button click sounds and hover sounds just add so much it does not take very long to add and it adds a lot of game feel to your game okay the last thing we're going to do is we're going to add a few subtle menu animations this does not have to be complex but but maybe some slight fading in or a popping in or a sliding in or any combination of those it adds a whole lot rather than having the menu just pop in like that that it's a little bit too much and for final polish we want some subtle animations so first let's go through the process uh let's open up our widget and it's actually pretty quick and simple if you've never done key frame animation before it may take a little bit to understand but once you get it you can add animations really quickly to anything in your UI so first let's do our title I think this is a good starting point to learn so down here if you don't have this docked uh you can always dock a window right like if I close that out you can always get it back go to our window animations and if you need to lock it you can so the first thing I need to do is just create a new animation so hit plus animation we could animate multiple things inside of this it doesn't really matter we'll call this game title enter a lot of times I just want an enter or an exit so we're going to create our animation and then inside of our animation we need to decide what we want to animate like what objects to animate and what attributes on that object to animate so a lot of times it's position or opacity or size or whatever so in my game title enter I really want to animate my game title select the animation select your item and now we want to create a track so hit the plus track and now we select the item so our game title label so we have our animation the element to animate and now we want to animate something on this and you see this little uh diamond with a plus this will tell you what are all the different things that you can animate you can animate a whole lot of different things uh what I want to do is just fade it in so I'm going to hit the plus button and choose what do I want to animate we can see a list right here on our game title label I want to animate the render opacity so here's the trick to key frame animation I like to move the time marker first and say at this point in time I want this attribute to be and then I put what I want it to be zero start fully transparent then I'll move it at this point in time so 1 second I want this attribute to be and then I'll change it one and that's it right it's going to fade from 0 to one so go here and hit the space bar that's our animation we're not playing it in the game yet we're just creating it so let's say that you actually did want to play it in the game you could come back into your graph and you can play an animation at any point in time so let's say event construct as soon as we create our level widget and it is active and drag off and type play animation okay and then it's asking what animation on this widget do you want to play We can look over here on the left and if you expand animations it'll show all the animations we've created drag it over say get game title enter drag it in uh you can do some other adjustments but I'm just going to leave everything else at default compile save so this is saying when we create our menu let's fade in our title text just like we did in our key frame see how it fades in a little bit uh pretty cool like we could actually make that take a little bit longer I think that would maybe be a good idea so if you ever want to adjust it is very easy you just take this this and you stretch it out let's say I want that to take maybe 2 seconds I'll save play all right it fades in a lot slower I like that a little bit better and that's the process you can pick anything you want to animate you can animate anything you like on that object so there's not just render opacity there's all these other things like scale and position and anything really you can think of okay uh let's review and let's do another animation the process for creating our animation remember we create an animation so plus animation then we add a track so what is an object with an attribute on that object to animate so you hit track and you'll add another object then on that object you'll hit the plus button to key frame a specific attribute then you will set the values at different points in time so you go somewhere say I want to be this at that point in time move it and this that point in time that's pretty much the process oh that sorry the last thing you have to do is then play it somewhere inside of your graph so once you create the animation you need to find it and tell it when to play like on start on button press on whatever you want um if you want to play the animation you can but it's all right there so it's a couple steps so let's do it again in this case I want to animate my menu let's fade it in and slide it in from the left a little bit so we'll call that main menu enter to make a new animation main menu enter and we created our animation the next thing is to create a track so hit plus track we can either find it here or we can select the widget we want I want the menu buttons panel so select that click main menu enter and now now when we hit track we can more easily find it so I want this top one the the menu buttons panel okay so on this hit the plus button what do I want to animate on this menu well I want to slide it in from the left and fade it in a little bit so I want my transform but I also want my render opacity so let's do both first let's do render opacity since we already did it so click render opacity let's say at 0 seconds I want this to be zero and at 1 second we'll make this pop in a little faster than the game title at 1 second I want this to be one okay so it's going to fade in always better to have some kind of fade even if it's quick rather than to have something automatically pop in and let's also slide this in from the left so I'm going to add another track on this same object hit the plus button let's do transform so if I expand that you can see I get access to all these things I want the translation and my X is going to be left and right my Y is going to be up and down I could pop it up as well if I want but I'm going to go left and right at zero I wanted to start a little further to the left so I wanted to be 50 so on my X I'm going to say -50 translation so going to be over a little bit and then here let's actually U make it slide in a little faster and then continue to fade after we get into position so you don't have to perfectly match these up you can stagger them and it might even be a little bit more interesting so at 0.5 I'm going to have the X be zero which is our original position so let's try it out slide and then fade a little bit after that right I like how that looks it's pretty subtle pretty clean compiled file save and let's actually make sure that we're playing that uh we're going to do that one in event construct as well okay so on event construct we're going to start our animation for our title but we're also going to start our animation for this menu that we just animated so we'll play our animation for our title and in addition let's grab our main menu enter drag that in say get drag off and say play animation and that's pretty much it it's very quick and easy to play an animation and we'll compile will save uh obviously you can do some other crazy things like you can do looping like if you want something to be pulsing in your menu you could do some kind of Animation like that so let's test this out at play see how they both kind of slide in it's pretty cool and pretty subtle I you can make it even more subtle than that if you want um but this is how you can do a very quick and easy intro animation okay so the last thing I want to show you is how to do an exit animation it's a lot easier than you may think and instead of having to reanimate this all I want to do is just play this in reverse and we can uh trigger this inside of our graph now the the trick with this though is that even though we play the reverse animation if we are switching our widgets remember we're turning them on and off like instantly we're hiding and showing them so what I need to do is I will need to delay a little bit to let my exit animation play through before I hide the panel so for example when we click the how to play button so when I hit play if I click how to play what I want to do instead of hiding that instantly I want to wait a small amount of time reverse it play it back and then switch it right I want to give it a little bit of time to animate out before I do my switch so to do that I'm going to go to My Graph up here and when I click the how to play button we're going to play our main menu enter again so I'm going to copy that and paste it plug that in but instead of playing it forward I'm going to change this to reverse like that so this will reverse it it will fade it from fully opaque to transparent and then slide it back over to the left but I do still need to delay before I switch my active wi widget index because this will happen immediately so I need a little delay note here pull that in you'll have to remember how longer animation is here I think it was 1 second so compile save uh let's look and see how that looks that's a little bit too long so I want to show you one other thing if you did not want to reanimate this what you could do is you could just make this play quickly in Reverse so for playback speed put this at like two uh and maybe my duration I can put this more at 3 or something you could always tweak this or you can make a new custom exit animation if you want I just want to show you options you can control the playback speed forward or or reverse uh you can have delays at different times let's try that out compile save okay you see how it goes faster uh maybe a little too fast uh let's tweak that just a little bit more let's make it play a three playback speed and let's delay for. five okay compile save yeah okay that's a lot better um the other thing you'll notice is that if I try to go back to the main menu you see how it doesn't come back in right because uh it is hidden and fully transparent so what I need to do then is I need to when I press the back button I need to animate it back in So this can be kind of tricky like if you you may need to restore the state sometimes like you want to hold it at a certain position instead of holding the animated position that's the only tricky thing with animations is you need to keep track of that for now I'm going to click my when I press my back button wherever it is how to play back button right here I'm going to switch it or you can add a exit animation for your how to play menu as well like you could animate other things actually would because it's good practice um but for now just to save time in the tutorial you should know how to do it I'm just going to to play my main menu enter again so um not not the reverse one actually the original one uh main menu enter you copy paste it or you could pull it back over here and remake it so I'm just going to copy paste okay we're going to play our main menu animation again so when we press the back button we're going to switch it back to the main menu index zero and play the main menu enter again compile save right let's try it okay I like that pretty cool pretty clean pretty subtle um continue to tweak it and let's do the final one all right and we're in the game okay so I just wanted to give you a lot of tips and tricks to make a clean and simple but effective main menu and you can customize that for any of your games your prototypes or whatever and once you make one or two you'll get really quick at doing it but the important thing is that you understand all of the different little effects and things that you can add to it your main menu is going to be the first thing your players see you really don't want to cut Corners there you really do want to make it look nice set it up do a nice decoration inside of your level do nice animations sounds Fades all that other stuff so I hope this gets you started and I hope that you can come up with some really awesome menus for your game

Channel: ACDev

Views: 2,392

Keywords:

Id: oCfLaWDHRCc

Length: 50min 12sec (3012 seconds)

Published: Tue Jan 16 2024