How To Create A Main Menu System In Unreal Engine 4 | UE4 Tutorial

hey guys and welcome back to another immersion 4 tutorial in today's video what we're going to be going over is creating a main menu system in which you can have our main menu where we can start the game change the options and also look at the credits as well as obviously quitting the game now the options i'm not going to set up in this video it will be in the next video later on however i will be going over that and doing it in a much more efficient way than i did previously and in the future i might also set up a safe and load system for our games as well so as you can see here this is the main menu screen we have at the moment it's very easy to customize together to look the way you want so you can change how the buttons look you can give them sound effects you can change the positions on the screen and you can change the background and all this great stuff to make it look how you want you can also notice i've got music playing in the background as well that's just the start of content music however i put it in there just to show that you can add music using this system as well so let me go some of the options so again the options will be a future video the credits you can go on it takes you to screen where you can display the credits for making your game so these are just some random ones which i put in off top of my head because obviously there's no credits because this isn't an actual game we can then press back go to the main menu quit we'll obviously quit the game i'm not actually going to show that in the moment though because it is just going to quit and start is going to load up my level this is the only level i have at the moment but you'll notice this works perfectly it's loaded into the level and we can play our game but again there's no game for me at the moment so this is what we're going over today and creating and again i will be continuing to advance upon this in future videos so without further ado let me delete this code and i'll show you how i've done it so the first thing we want to do is we want to actually create our main menu so we're going to be doing this via widgets so i've got my new folder here for main menu just to keep it nice and organized and in here i'm going to right click go to user interface and create a widget blueprint i'm just going to name this main menu very simple name and i'm going to open it up straight away first thing i'm going to do in here is add in my background image so if i just search for image drag that onto the canvas panel close that there i'm also going to rename this to be background just so i know what it is straight away with it selected i'm going to keep the position x and y as 0 but change the size x to be 1920 and size y to be 1080 so it's full screen like this and as it is full screen i also want to change the anchor to be the full screen anchor so it stays in the correct position on screen as you can see here now the image i'm using is just a copyright free gaming background main menu image which i named main menu background i believe let me try and find it so also to add it in sorry you go to brush image main menu i can't find it actually i think i just deleted it now so let me re-import that again so i've got my main menu background here you can just drag and drop it in then what we can do is search for main menu background there it is and now this is the image which i have again you can choose whichever one you want i'm going to compile and save that now the next thing i'm going to add is the title of our game so i'm going to drag in some text onto the canvas panel not background and in here i'm just going to type the name of my game which for the moment i'm just naming this main menu but this is where you'd actually put the name of your game so for example you would write fortnite in here or whatever the name of your game is i'm going to change the color to be black but again you can choose whatever you want and if you wanted you can also give it a little outline down here and change the outline color but i'm not going to bother with that and you can also change the font as well and you can import fonts if you want and if you do want a more in-depth video going over how to use custom fonts then let me know in the comments down below then the next thing i'm going to do is just increase the size and i'm going to make this a size of 100 down here then i'm going to press size content and just move this where i want again moving the anchor to be in the position there so it doesn't move from here i think that's going to be good for me leaving it as it is there so it just says main menu then we want to add in all of our buttons which we're going to use now a nice way to keep these organized is to get a vertical box dragging that onto the canvas panel here i'm going to rename this to just be main vb so main vertical box and i'm going to move this into the position which i want so i'm going to move it here honestly a roughly this size the size we're going to change in a minute but i want it to be roughly this big so now i want four buttons i want the start the options the credits and quit so what i'm going to do is search for a button drag and drop that into the vertical box here now you notice it's in that position there with it selected what i'm going to do is press fill under the size and you'll notice that has now obviously filled up the entire space but we are going to change this in a second i'm going to rename this button to be start button like this then i'm going to drag some text on top of that button so you'll notice it's now parented under there and this button and this text story i'm going to write in here to say start so the player knows what this button does i'm not going to change the size of it but i am going to change the color to be black just so it stands out a bit more once again so now we have our start button so i'm going to do is select both the start button and the start text ctrl c select the main vertical box and hit control v so now we have another button and you'll notice as they're both fill what's happened is it's actually put the space so they're now both equal in there so they're both filling up the maximum amount of space they can have i'm going to rename the start button that i just duplicated to be options or options button and then change the text to say options like this so now we have our options button do the same thing again so duplicate it into the vertical box but this one is going to be my credits button so rename it and then change the text to say credits and then one final time for my quit button again you can have as many buttons as you want so if you wanted you could just have start and quit or you could have more than this if you wanted as well very easy to customize and perfectly set up for how you want so now we have all of our buttons here they're not going to do anything yet but we have them however you might not like how this looks because they're all just completely next to each other like this so what i'm going to do is search for a spacer and add that in between the buttons so in between the start button and the options button i'll add a spacer like so if i were to select the spacer we can change the y value to increase or decrease a gap between these buttons like this the value i'm going to go with is 50. as you can see that gives us a nice gap between the buttons there that's what i want to go with so i'm going to select the spacer and copy it and then paste it into the vertical box another two times move it between the options button the credits button and between the credits button and the quick button so i have a nice gap between them however i don't want the buttons to be this small but i do want the gap to be that big so i'm going to select the vertical box and just increase the size of it like this so it gets a little bit bigger because again the buttons are going to fill up as much space as they can and we are now giving it the space to fill up so i think this size is going to be perfect for me i also now want to move the anchor to be in the middle of the vertical box so it stays in this position on the screen like so and what i might do as well is just move the main menu text over a little bit just so it's a bit more centralized we can compile and save and i think that looks perfect for me so again this is just a very basic one which i've set up you can customize the visuals a lot more if you wanted so if you were to select the start button we can change how the button looks under appearance and style normal here you can give it its own image so you can change it to be anything that you like and the same with hovered and pressed as well so when the button is like this it will look like the image you want when the player hovers over it it will change and when the player presses it it will change as well you just change all the stuff in there and if you just want to change the color you do that under color and opacity like this so again if we go to normal change the tint you'll notice it's now changing the color like that again i'm not going to go into that but i am going to show you how to do it anyway so i'm going to compile and save this what i'm going to do now is minimize this right click on our main menu and duplicate it i'm going to name this one options menu which again we're going to set up in a future video but i will open up now anyway minimize it again right click duplicate and call this one the credits menu which we are going to set up now so i'm going to open that up as well in the options menu all we're going to do at the moment is rename it from main menu to options so the player now knows this is the options menu and so also you'll rename it from your game name to options and i'm just going to delete the buttons which we have inside of the vertical box so i'm keeping the vertical box by just removing the buttons inside of it so now this is ready for us to set up in a future video so i'm going to compile save and close that now with the credits i am going to set that up now simon again i'm going to rename it from main menu or the name of your game to be credits so the player knows where they are in our system and re-centralize it again like so then what i'm going to do is again delete all the buttons within our vertical box and instead just add in some text so i'm going to drag in text into a vertical box here i'm going to change the horizontal alignment to be in the middle and also do the same on vertical as well but this time i'm not going to fill it i'm going to change the text here to just say game made by matt asplund or whoever has made it for you and again i'm just going to change the color opacity to be black i'm going to give this one a size of 50 or maybe 35 i actually think i gave it so a size of 35 then i'm going to duplicate that in the vertical box giving this a size of 20 or 25 and i'm going to change the text in this one to say game made using unreal engine because again you do have to make sure that you credit unreal engine in your game and instead of adding a spacer between these all i'm going to do is just add another line inside of this text here to give me a nice space like that then inside of the same text what i'm going to do is shift enter to add a new line that's how you do that and then i'm going to do animations from mixmo because again you need to credit them so it's always good to make sure you are crediting who you need to credit because as well sometimes if you have a specific model a specific sound effect you need to credit them as well we'll compile that and you notice that these are both going from the left so it's centralized in the vertical box but the text isn't centralized within the text box so if we scroll down we can change the justification to be centered like so then i'm going to duplicate this one final time and actually also sorry give another line space between there and this one is going to be where i have the individuals so programming matt asplund new line 3d modeling jake cox for example and then sound design i'll give another random example uh josh garden like so and compile and save that now we have our credits set up here so one thing i also forgot to do is we need to give these a back button so we can do that now so all we need to do is drag in a button onto our canvas panel rename this to be back button and what i'm going to do on this is add in some text on top of that changing this to just save back so again the player knows what it is giving this a color of black so we can see it nice and easily and you'll notice a lot of this is quite repetitive then we're going to move this back button down into position i we want for me that is going to be the lower left hand corner move the anchor position to be there as well so it stays in that position there we'll compile and save one thing i'm going to do is select that copy it and move this into my options menu so again it's there for when we want to set it up in the next video i'm gonna move this to be in the same position again based on where the anchor is like so compile and save so now we've got all the visuals set up we want to start setting up some of the code so let's do the back button first so if we go into the event graph of this what i'm going to do is delete these three nodes here click the back button under variables and press on clicked so when we press this button the player wants to go from the credits menu to the main menu so out of this i'm going to create widget with the class being main menu return value we add to viewport and after this we're going to remove from parents so what we're doing is we're creating the main menu widget and placing on screen then we're removing the credits widget off of screen now some people don't like to do it this way they like to just have it in one widget or they like to have all the widgets on screen but just layered i personally prefer this way because again i think it's more efficient and it's a lot easier for you developer to handle and work with so that's why i prefer this way there's not really much difference efficiency wise it's just personal preference at the end of the day so we'll compile and save that and i am just going to duplicate this over to the options menu once again but we are now done with the credits menu so we can close that and if i place this into the options menu we will also be finished with that so we compile save and close it now we want to set up the coding in our main menu so again we're going to go over to the event graph like so now at the moment i've said we're not setting up the options menu so what i'm going to do is use event construct drag in our options menu get it and just set is enabled and i'm going to set it to false so what this is going to do is it's going to disable the options button so the player can't access the options menu because obviously we've not set it up yet so we don't want them to be able to go in there and that will kind of signify to them we plan on making options menu but we've not set it up just yet so that's why i'm doing that you don't need to bother if you're not going to release the game just yet anyway but that's why i'm doing it so we're going to compile save it first let's set up the start button so we're going to press start button on clicked event so when the player clicks the start button they want to load into the game so the first thing we need to do is right click and get player controller reason being we need to change the input mode so out of the return value we're going to set input mode game only because we're going to set this up a little bit later but what we're currently going to be in in the main menu is ui input mode so we're just sending it back to the game mode so when the player enters the game they can control the player perfectly then we're going to set show mouse cursor leaving it as false so we're hiding the mouse cursor because again we need it to be shown while in the main menu but not in the game then after this finally we're going to do open level by name and this is where you input the name of the level that you want to open up so for me that is going to be the third person example map but for you this might be a completely different map if you've changed it so obviously just set up for whichever map you want to load up and you have to make sure you spell this perfectly correctly otherwise it won't work so we compile and save that and now i can start my game so i'm going to select this hit c to comment it naming this start button just slow from fire away when i'm zoomed out i know exactly what this does then let's set up the options button so again we're not doing this just yet but we'll still be able to open it when we come to make the video later so unclicked and what we're going to do is create widget creating the options widget which we've just created i could spell it correctly there we go options menu return value will be add to viewport and then out of this we're removing from parent so again as i explained earlier what we're doing is creating the options menu placing it on screen then removing the main menu off the screen so the player can perfectly see the options menu and it won't be layered so there won't be any chance for breaking select that hit c to comment it naming this options menu then everything else is very very similar and pretty much the same so again i only have one other menu to open and that's a credits menu so select the credits button unclicked and what we can do is actually just duplicate this code so select the create widget add viewport and remove from parent control c control v to duplicate it down here and what i'm going to do is just change the class widget to be my credits menu compile and save that's all we need to do again i'm going to comment this to be credits menu now you might think this is very very simple and it is but quitting of the game is actually much more simple so if we press quit button on clicked all we need to do here is drag out and search quit game and that isn't going to quit the game for us that's what i mean by it's very very easy so select that comment it to be quick game and this is now with the main menu set up for us so we can compile and save so all of this will work we can now navigate between all the different menus we have in our game so we can start the game go to the options once we set it up go to the credits and back and forth between them and also quit the game however we haven't actually set up opening the main menu yet so we need to do that now so i'm going to close my main menu widget and the next step we're going to do is we're going to create a new level so we're going to right click and create level here i'm going to name this one main menu level opening up straight away make sure to save with this now this should just be a completely blank and empty level because we don't need anything in here so i'm going to go to blueprints and open level blueprint as that's all we need to do event beginplay we're going to play sound 2d and this is where you'll play your main menu music if you wanted some if you don't want any don't put anything in here but it's quite common to have it so sound again i'm going to be using the stars content music which we have there and this is for some reason very loud so i'm going to change the volume multiplier down to 0.1 and out of this then create widgets with the widget class being our main menu widget so the main one which we've created and return value will be add to viewport so this is now going to place it onto the player screen however again as i mentioned earlier we do need to change the input mode so the player can actually use this properly so i'm going to right click get player controller out of this we're going to set input mode ui only and the in widget to focus is going to the return value of our create main menu widget now you can get away with not doing this it will still work but it would just mean the player will need to double click so they have to click into the widget then click again to use it this just means they don't need to do that so it just makes it a lot nicer for the player's experience but in order to actually click they need to have a mouse cursor so drag out get player controller again and set show mouse cursor and we're going to tick this so it's true so we are showing it when compile save and that should now be the whole code fully set up and working for us i'm going to close this and one final thing is we go to edit project settings to open on the wrong monitor so let me move it over here and then if we go to maps and modes you want to make sure that the game default map is now our main menu level so when the player starts up the game once you've packaged and exported it it will open up the main menu level which is obviously important so it opens the main menu so the whole game works so we'll close that and i'm now going to open it up and hit play so here we are in our main menu you can hear in the background we have the music playing and this is what we've set up so we've got the background here we've got the name and we've got our different options and again as i mentioned this is what the button looks like if i hover over it it looks like this and if i press it it will look different so let's do the options first you'll notice we can't click on it because i've disabled it the credits if we click on that you'll notice it looks slightly different and we now have our credits menu here so we've got credits game made by matthew and it's an unreal from mixmo and all the different individuals down here press back we've now gone back to the main menu if i to press start it's going to open up the game perfectly in the level which we wanted which again you can actually have a proper game here but i don't just yet so this does work perfectly i'm not going to show the quit button because obviously that's just going to quit the game but i think that'll be it for this video as we've done if you want to do we've set up a main menu widget in which we go between the credits the options and back and forth start the game and quit the game as well and again i'm going to continue to advance upon this in the future so we're going to set up an options menu possibly even a save and load with multiple save slots as well if you want to see that so let me know in the comments down below if that is what you want to see and if you do make sure to subscribe so you do get notified of when i post it and so thank you so much for watching this video i hope you enjoyed and i hope you found it helpful and if you did make sure to like subscribe down below so thanks so much for watching and i'll see in the next one [Music] you

Channel: Matt Aspland

Views: 54,246

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, 3d modelling, blender, unity, games design, graphic designer, ue5, unreal engine 5, main menu, widgets, blueprints, blueprint, credits, options, ue4 main menu, main menu ue4, make, how to make, how to create, easy, easily, quick, quickly, quit, start, play, level, levels, different, same, one, multiple, graphics, screen res, resolution, screen, volume, lighting, audio, system, settings, music

Id: oIytjMKNYbU

Length: 20min 56sec (1256 seconds)

Published: Thu Mar 24 2022