How To Create A Main Menu - Unreal Engine 4 Tutorial

hey guys welcome back to another relationship tutorial today i'm going to show you how to create a main menu and the links to different options menus and credits and all of those buttons and adding the main functionalities in the main menu today and in future videos i'll show you how to set up the option so you can change the screen resolution the graphics settings lighting all of this and volume and stuff so again that'd be a future tutorial but today we're doing the main part of the main menu so let's get right into it and what we're gonna do first is an optional part which is create a new level so i prefer to do this as it helps with performance and helps keep things organized again you don't have to so you go to file new level and then you do empty level and i'm just gonna do file save current as and i'm gonna call this main menu level like so and then save this into your maps or wherever you want so i'm just going to create a new folder call it levels and just put that in there so save and then to actually get started with this i'm going to create another new folder call this main menu and then i'm going to right click create user interface and create a widget blueprint i'm going to call this main menu widget and then we'll just open it up straight away and then what i'm going to do is just have an image so search image drag that in to have this as the background so i'll set the position x and y as zero and zero then the size x to 1920 and size y 1080 and i'll set the anchor to the whole screen like this and then you can set this any image you want for the background you don't need to do this either um but i'm just going to set it as an image so so i'll set it to an image that i made that i have from a different game that i'm working on so i'll just import this so i'm just importing it now and again this is from a game that i'm working on and this is original background from a couple years ago so i just kept it as kind of nostalgia type thing so if i just select this and then go back into the blueprint uh the widget sorry and then over here once you have the image selected you go under brush and then where it says image here you're going to select it but i already have it selected just press this arrow here and now we have that set up so we the image is now there so if we compile this and if we just close this go to blueprints and then open level blueprint and then off event begin play if we just create widget and then put in the main menu widget that we just created and i'll return value just add to viewport like so this means that when the level starts it should open up our main menu so there you go we have the main menu here you see we don't have a cursor and we can't really interact with anything if we had buttons there but we'll get into that in a minute so let's just open up our main menu again now we're going to start creating some buttons so obviously search for button there i'm just going to put that in and i want i like to keep things organized so i'm going to name this one start button like this i'm just going to scale up a bit right there like that and anchor it to the center of the screen like this and if i just zoom in and use the arrows to just get this perfectly centered like that there we go and then i'm also going to put some text in there so you can just drag that into the middle of it so it stays organized i'm going to call this start text and in the text there i will just put start or play or anything along those lines i'm going to change the color to a nice black and then i might also change the font as well so obviously i haven't got any imported but if you do then you can use them there so i'll just set it to that one and i'll increase the size a bit like so and you can just mess about with all these settings that you want just to get the perfect text but this is basically the main part and as we've put it on the button which means if we move the button we're not moving the text as well so if we duplicate this so copy it and then and over here in the hierarchy select canvas channel and then paste like that we now have another button which will have the exact same settings and again you can change the color of the buttons as well so you can change just the basic colors and also on normal and hovered and pressed so if normal you want it white on hovered you want it kind of grayish and then when you press the button it's let's say a bit of a darker gray almost black so that way you can kind of tell when you're not interacting button when you hover over the button and when you actually press the button just a bit more visual representation so let's just delete that and duplicate it again like so make sure it's all lined up perfect and then again we'll change the names so this isn't start button this will be options so call options and then where it says start and change that to options on the text as well like that and then we'll just do this again so copy and paste and you do this for as many buttons as you want on your main menu and on my main menu i'm going to have a start options and credits button and also quit as well so i just change all of these to how i want like that so now i have credits and then do the same one final time for the quit button and again customize this however you want i'm just doing a basic one like this but you can just get really creative with this make it look really nice but again i'm just doing the basic kind of things just to start with the main menu and you can put these in a horizontal box as well or a vertical vertical block sorry to keep them nice and organized but i prefer doing it this way because i have kind of more freedom of moving them about and organizing them and stuff like that so now if we get into the actual functionalities of it we'll start with the start button so if we select it and scroll all the way down here and click the unclicked event that's now on clicked start button what we're going to do is simply just open level like this and for the level name you're going to want to set this to the name of the level that you have in your game so if we find it what it's called it should be third person example map but if we actually find what it's called so third person vp maps it is third person example map if i just go to rename it and copy that so so i know it's the exact same and then just open this up again in level name third person example map meaning that it will then open that level that we want so obviously choose this for the name of the level that you have and that is that part done it's very simple and then we'll do quit as that is also extremely simple so again select it go down to unclicked and then we come off of this and we simply just type quick game and that is it it's as simple as that and so obviously that will just close the game so go back to designer and then options and credits we're going to open up a separate a separate widget for that so the credits i'll do in this video as it's very short but the options i'll leave for another video as you can get into quite a lot of detail with that so on on credits we're just going to get the on clicked event i'm not going to do anything with it at the moment we get it ready and if we just minimize this go back into folder and create a new widget so right click user interface widget blueprint we call this credits widget now you can do this all in the same widget by just simply hiding and showing different parts i prefer doing it like this is it's a lot more organized and a lot easier to see so you could just simply hide hide these and then show the credits or the options or anything but like i say i prefer this way as it just looks a lot cleaner and it's easier to organize and stuff like that so i'm simply just going to do the same image thing so 0 0 1920 1080 and anchor to the middle set the image as the picture i imported like that and then i'm just going to put some text in now you can make this in photoshop and just import the image but i'm just going to do this credits so then i just do i'll just simply write game made by matt asplund using unreal engine 4 like that so again type whatever you want however you want it but this is what i'm going to do i'm just going to center it to the middle like that and then just make it a bit bigger and so i'll size the content so it just stays like this and then i'll keep it white it won't change the font or anything like that i'm not going to mess about how it looks too much if i then just make it a bit bigger as well so that's under font and then just increase the size like this and again obviously anchor it to the middle of the screen like so so now we have the credits set up we're going to compile this and then go back to our main menu widget and to the graph so we've got unclicked credits button what we're going to do is remove from parent which essentially just gets rid of the main menu widget off of the screen and then what we're going to do is create another widget so create widget and this one is going to be the options menu so sorry credits so if we just search for credits widget and then again just simply add to viewport like this and compile that would then work and then go back to the credits we also want to make a back button so we can go back to the main menu so if we simply just get a button in down there call it back button and then put some text on there again back text you don't need to name all these but like say i just like to keep things organized so i know what's what very quickly and just type in the text back and then i'm going to change this just so it's all the same and then change the color to nice black so we can see it again i think that size works quite well and i'll just anchor the button to the bottom left of the screen and then again with the button selected scroll down to the on clicked event then what we're going to do is the same as we did for the main menu so we're going to remove from parent which takes the credits menu off of the screen and then create widget like so which will then add the main menu back on so we select main menu widget and add to viewport like this compile and that should not work so if we play this we'll see it doesn't quite work so we have all these we hover over it it's like gray if we click it it goes black and you can see that open this level but the reason why wouldn't work too well is because if we click somewhere else we now don't have a mouse cursor so that we then can't interact with it at all so what we need to do is actually be able to keep the mouse cursor on screen at all times so we can use it so to do that what we need to do is what we need to do is create a new game mode for our main menu so if we just find the default third parts in game mode uh or the gamer that you're using your game anyway so mine will be third person bp and blueprints and starbucks and game mode so i just duplicate that so copy go back to my main menu and then paste i'm just going to rename this to main menu game mode and then in the world settings so that'll be over on the right if you don't have that you go to window and then world settings here so that you go to word settings and the game mode override we're going to set to our main menu game mode that we've just created so main menu game mode there and then you open select a game mode underneath that and you can keep the default pawn class to anything you want to your character and then leave the hud class as non or if it's hard by default leave it as hud and then what we need to do is create a new player controller so by default it will just be player controller but we need to create a new one for our main menu where we can constantly show the mouse cursor at all times so if we just simply right click go to blueprint class and then open up all classes down here and search for player controller there is we just get player controller there and then select and i'm going to call this main menu underscore pc player controller and then we just open that up and what we need to do is find the mouse interface so here it is here and we just simply tick show mouse cursor there hit compile minimize this and then here where it says player controller if we just change this to our main menu pc that we just made and if we just save all this so ctrl shift s to save all this should work so now if we hit play we can see that we have our main menu we click we still have our mouse and when we hover over things they are great if we click on them it will go black so if we hit quit that will close the game and if we click hit credits it takes us to our credits menu so again made by matt aspen using i'm religion 4 and then if we hit back that will go back to the main menu so if we hit start as well we are now in our game and if you click on the screen again at the mouse cursor will disappear as it goes back to the normal player controller so if we just test this again hit play hit start within the game and everything works perfectly hit play go to options it hasn't done anything yet as we are setting up setting that up in the next video hit credits we can see our credits and if we hit back it goes back to the main menu and then if we hit quit it closes the game so as that all works perfectly fine and we've done everything wanted to do i think that'll be it for this video hey guys i was just editing the video and remembered i actually need to say something else so when you play your game by default so when you launch your game it will just open up your main level again rather than your main menu so if you want to be able to change it so it loads up the main menu straight away in this level what you want to do is go to edit project settings and then go down to maps and modes in the editor start a map you'll probably want to leave as your main level but the game default map you're going to want to change to your main menu level so when someone plays your game it will start in the main menu so this should now fix that issue if anyone was having that so thank you so much for watching i hope you enjoyed and hope you found it helpful and if you did make sure to like subscribe down below so thank you for watching and i'll see in the next one

Channel: Matt Aspland

Views: 185,992

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, 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

Id: K1vVbwMJCTQ

Length: 13min 30sec (810 seconds)

Published: Sat Jul 25 2020