How To Create A Main Menu - Unreal Engine 5 Tutorial

hello in this tutorial i'm going to go over how we can create a main menu inside of unreal android so i'm in the third person template but you could be in any template and the first thing i'm going to do is go to my window and go to my content browser and just click content browser 1 just so that's permanently here then what i'm going to do is just right click and create a new folder just call this ui and we can head inside here and we're going to create our main menu so to do that we first want to right click and then go to user interface and select widget blueprint and then select user widget and i'm just going to call it my main menu and then we can double click and open it up and once we're in here we just want to go to the palette on the top left and look for our canvas panel and just select it and drag it into this hierarchy tab and this will be our canvas where we're going to create our main menu next in the palette we will look for a vertical box and just drag it into the center of the screen and make it a bit wider and then you just want to anchor it and anchor it to the middle of the screen and then inside of this vertical box we're going to add three buttons and these buttons will be the options on our menu so under the pallet i'm gonna look for a button and just drag this button three times into the vertical menu so i'll just do this three times and with each button i want to say there's a bit of a gap between each of the bones so just select the first one and we'll go to padding and under the bottom and i put a padding of the value of 100 this will basically push the button beneath it down by space 100 so you can just play around with the values here if you wanted to i could also put a padding at the top of 100 and we can see that it pushes this button 100 from the top i'm also just going to put a padding of 100 here and i'm just going to leave that one blank next i'm going to add some text to my button so to do that you want to go back to the palette and look for text and we just simply drag from the text here and drag it onto our button and it'll drag the text onto it so we're just going to do this three times for this first text i will make it say the word start so we'll go to the content and then under the text here just type in what we want it to be so i'm going to type in start for here i'm gonna type in options and for here i'm gonna type in quit now my text is quite small so i want the size of it to be a bit bigger so i'm gonna do is select each text and then what we can do is go to font and then we can see size here and i'm just going to make it so the button is 40. and as we can see that makes all of my text a bit bigger next we're going to make it so that our main menu basically appears in a level and we can set up all these buttons so that they work so to do that i'm just going to close this main menu and then i'm going to create a new level so i'm going to go to file new level and we want to select an empty level and just click create and then the first thing i want to do is click save it's going to ask me where i want to save this level so i'm just going to save it in my content folder and i'll call this the main menu map and click save and one thing when you create a new level if i click play we can see that i start as um this third person character or you'll start as whatever game mode your project is in we don't want this we want it so that when we are in our main menu level that no character spawns in order to achieve this effect all we can do is create a blueprint so i'm just going to right click and go blueprintcast and then we want to select gamemodebase and just call this menu game mode and now if i go to my window and we go to world settings a while settings tab will appear if i just drag this menu game mode onto my game mode override right now it's blank now if i click save and click play we can see that i'll spawn no character and that is because inside of my main menu game mode there's no default pawn class if i say made this the third person character i'd always want as the third person character so we just want to leave that blank that way no character will spawn inside of our title game mode next we want it so that our main menu actually appears inside of this level to achieve that effect we just want to click this little three um dots and then go to open level blueprint and then event we can play what we're going to do is just drag off this node and look for create widget the widget we're going to create is going to be the main menu and then we just want something drag up here and that for add to viewport and click compile and if i close this and go play we can see i'll have my main menu with the start options and quit button the next thing i'm going to do is basically make it so that all these buttons work and i'm also going to add a background to my main menu so we're not just staring at this black screen so i'm just going to close this head back to my main menu and when i click the start button i'll just select this button we can scroll down and go to unclipped and when this button is clicked i'm just going to drag off here for open level by name and then we can type in the level we want it to open so i'm inside of the third person um template and the level is called the third person map so i'm just gonna take a copy of the name copy it head back to my main menu and just paste the name inside here and then go to my designer for the scope of this video we're not gonna create an options menu although in a later video i'm gonna go over how we can create a full options menu so we'll leave this blank for the quit button we just want to select it again scroll down and go unclicked and unclicked you can just drag up here and for quit game and this will make it so that we quit the game next i'm going to basically add a background for my main menu so i found this called arnold engine background on google so i'm just going to drag it inside of my project and then right click go explore actions and apply paper to detection signs just to make it clear then if i head back to my main menu and go to the designer under the palette i'm gonna look for image just drag it in and then for anchor i'm just gonna anchor it so it's across the whole screen and i'll make the offset zero this zero this zero basically everything zero and then for the brush i'm just gonna select the image that i imported okay so it's called ue mannequin image one thing for backgrounds you kind of want the image resolution to be 1920x1080 then to make this image basically appear behind our bones what we can do is just change the z order to b minus one and as you can see this will put the image behind the vertical box menu that we made because if i select this vertical box you can see that z order is zero so the way the z order works basically the higher numbers will basically be displayed on top and now that i have my image i'm actually just going to select my vertical box and move the main menu here just so it looks a bit better and i'll also just move the anchor so it's here and now i get compiled let's test out our main menu so if i go play if i click start i'm taking to the third person game mode if i click quit the game quits there's one more thing we need to fix with our main menu if i click the play button as you can see when i start i first have my mouse however i click my mouse disappears and i can't really get access to it again also if i hit the play button and i click start when i start my game i start with this mouse cursor we don't want it here so we're just going to add a couple of settings to fix that so we go back to our main menu and we're going to head back to the graph event construct so this is going to fire as soon as the main menu is spawned what we're going to do is just right click and it will get player controller and then we're going to drag up here and for set show mouse cursor just leave this button checked and this will make it so the mouse cursor basically appears in the game and then i'm going to drag up here and of course set input mode ui only and then hook this into here and this will just make it so the mouse cursor basically appears on the screen and then when we click our start game button we're going to basically do the opposite so i'm going to copy this bit it'll get that controller it's actually a mouse cursor paste it here although this time you want to uncheck the show mouse cursor this will make it so the mouse cursor is hidden i'm going to drag off there and look for set game mode only so set input mode game only and then hook this up and click compile and now if i click play i'm just going to go full screen i can click my last cursor and you can see my mouse still appears if i hit stop on my mouse cursor disappears and i'm spawn straight into the game without my last cursor and we have a functioning main menu so that's all for this tutorial and that's how you can create a main menu you

Channel: Unreal University

Views: 258,589

Keywords: how to make a main menu in unreal engine 5, unreal engine 5, unreal engine 5 tutorial, unreal engine 5 main menu tutorial, unreal engine 5 main menu, uisco, ue5, how to create a main menu in unreal engine 5, widgets, game design, how to, main menu, widget blueprints, ue4, unreal, main menu ue5, ue5 main menu, create a main menu, options, easy, quick, make, UI, User interface, short

Id: kumZj_mov58

Length: 9min 20sec (560 seconds)

Published: Wed Jun 22 2022