Learn How to Create an Unreal Engine Main Menu

hey everyone in this video I'm going to show you how you can create a generic game menu now this game menu is going to have essentially four buttons now I'm going to show you how to set up the initial game menu with a play button a quit button I'll also show you how you can switch to other um menus so like a settings menu and as well as like an info menu we can include I don't know like um tutorial information um maybe just any type of info that you want to add there we'll go in there at a later date um we're also not going to go into how to set up the setting page yet this will just be how to transition the UI accordingly and match it um with whatever intentions you're trying to make now in this tutorial I'm going to be utilizing two plugins one of them is going to be the async loading screen I'm not going to go super in depth on what it can do but we will use it as basically a loading screen from when we hit the play button button uh I find it very easy tool to use um it does loading screens automatically it makes life very simple at least for me now you can go about doing your own type of loading screens whether it is um level streaming or whatever the case may be uh but for this tutorial that's what I'll be using and the other one is going to be the common UI now common UI has really amazing features it has terrible documentation pretty much everywhere uh and honestly for me it took me to watch tons of tutorial videos to kind of figure out what each things do I will show you just some generic info on it this is not going to be a common UI tutorial but we will be utilizing it the things that I do use I will make sure to go over with all of you uh so with that let's get started on creating a game menu all right so first things first is we're going to need to install both the plugins now you will have to grab the async loading screen off of the marketplace it is completely free so no worries on that make sure to install to engine before opening your project it just saves you some time so you don't have to restart things over and over again after that you want to go into your plugins so edit plugins you can search for async or you can actually just type loading it'll pop up as first turn that on and then you want to go into common UI and then you want to also turn that on as well these are the two plugins we'll be using you'll definitely need them in order to go across doing this all right now that we have both the plugins what we'll need to do now is work on our widgets so the first thing we're going to need to do is basically build our base widget this widget is what's going to be pushing all of the other widgets um by push I mean this is what's going to switch between the main menu the settings uh the info Tab and then going back to the main menu and going back and forth so what we'll need to do first is we're going to create a widget so um I do have two images that I added already one is going to be for my background and the other one is going to be for my loading screen so um if you have two widgets co uh import those do that or not widgets uh images um now let's go into making the widget we'll go in here we're go to blueprint class what we're going to want to search for is I think this is what is it common user widget all right these are anything with common in front of it is using the common UI if you didn't add that you're not going to see it so a lot of These Blueprints are using just common UI stuff so very important I view common UI as way better than the standard Unreal Engine blueprints because there's so much more you can do with it and it natively provides controller support So if you want uh somebody to be able to use Xbox PlayStation switch controllers you need common UI not using common UI makes the process horrendous so highly recommend if you ever want controller support don't try to do it with the basic Unreal Engine uh widget Blueprints and get common UI it will save you time so so much effort all right so for our widget it's going to be W what is it widget blueprint underscore and we'll name this menu stack open this up so like any other type of menu we're going to grab a canvas and just toss that on there next we're going to need to do sorry for that we're going to need to grab a stack stack if I can type we're going to get the common activatable widget stack throw that onto the canas panel now from here we're going to want to change the anchor we want it to fit around the entire area and then under root content widget class switch this to comment activatable widget you actually don't really have to do that uh but I'll show you what the purpose of doing that will do in a moment so from here let's rename this to just um guess we could just do menu stack now we're going to need to create our our actual menus so this is just where we're going to start pushing the main menu pushing the settings and all of that this is just going to be like the general um centralization of everything so next we're going to go into our menu so let's create a new one blueprint class now we're going to search for activatable widget as you saw when we added this stack over here it is a common activatable widget stack so it's a stack that contains activatable widgets so you have to now make activatable widgets repeating a lot of the same terms but once you start getting used to it um gets a bit easier sorry uh activatable widget all the way at the bottom we'll hit select we'll do wbp oh accidentally hit enter wbp and we'll just name this main menu open this up they're on canvas from here we're going to grab a image throw that down here changing the anchor so that we can fit it around make offset to zero save us so much time you don't really have to name this you actually don't need to have that as a variable either I'm going to change my brush into my background next I'm going to grab a vertical box because I'm going to put all my buttons just in a vertical box we're going to change the anchor to left middle we'll put that to zero and then I think alignment 0.5 cool and the reason I'm doing that is so that the buttons will always be on the left side of the screen and then I did 0.5 alignment here because if I do zero it's actually going to be kind of like the bottom right and I kind of want it in the center so that it's even um on both sides so with that I'm also going to need to push that to the right because they're a little too close to the wall so let me see X position 50 does that look good is that good enough indent should we do a little more maybe like a 75 what about 100 you know 100's good and then we'll change the size to something like 400 good width and then maybe make this a little larger 600 a little more yeah that should be good um Okay cool so now we have the vertical box and now we want to put our buttons inside there now the thing is we're not going to be using the normal Button as you will see here we actually want to make our own buttons because it'll save us a lot of time if you ever want to change the styles of your buttons you'd be able to do it all at once it is dramatically helpful um and one of like the greatest things about this so to create the buttons let's go into a new folder we'll just name that like widgets it's not really a good name but nonetheless blueprint class and now we're going to search for common and then button what's it called here and okay cool common button base so you'll notice that when you type in common there's a lot of common things here these are all based upon common UI and you'll notice that they're all basically child blueprints of other standard um widgets so like text block and you have common text block it basically allows you to customize the style of all of them so if you were to ever edit a single text and let's let's say the text had the color of green on your all of your menus and then you're like you know what I want to now make this blue you changed the style to Blue and every button changes so you don't have to go into edit all of the texts it will save you tons and tons of effort so nonetheless that's my little rant we're now going to select on button base widget blueprint uncore button basee we'll open this up from here we're going to throw in let's just do a border throw that and then for brush I'm actually going to where's the brush color turn that to zero and then we're going to now need to add text so text where's the common text throw that on there and then for this for text I believe you have to also change the name to text action name should compile let me show you what happens if you don't let's just random text oh okay sorry I think I'm thinking of a different different uh blueprint so if you actually did what was it button if you do the common bound action button it requires you to put a very specific name otherwise the compile won't work that's not the case for button base so you can actually ignore that but there's a little tip for you there um so you can actually name this whatever you want so this could just be text txt button name compile done and then for this we also have to do one last thing what we're going to do is create a variable we'll name this button text and stram we're going to now make that instance editable and exposed on spawn this just allows us to edit the string beforehand so that we can see um the button text immediately oh almost forgot we need to also make sure that this button text is in center of the screen so for vertical alignment we're going to select the center align and then we're also wanting to go down justification and put that in the middle let's also make this should we leave the text size to 24 I think we can't let's change it to 30 and just see see how that goes if anything we can go back and shrink it and then I can show you the purpose of why we're building a common base button and then from here next thing we're going to need to do is you'll notice under style where there's none we need to actually create our own let's see if this button Works cool so you can hit the button this will allow you to create a new style for the button so actually don't know what the the um what's the word I'm looking for naming convention for this would be so we'll just do common button style that actually looks horrendous probably not the case at all but nonetheless and then we'll just name this menu button this will now open up actually wish it didn't open it up like that can I get the there we go cool so I prefer not to see the full blueprint editor because there's really no point in seeing the event graph for me right now and then from here this is where you can design all of your buttons really easily so if you need to change what the base hovered and press would look like you can add a tint to all of them which is what I'm going to do and then it will affect every button of this style so for here let's go with a tint of let's go with a bit of a green maybe a let's go a bit of a harsher green and then for here let's go for kind of like a a light teal color and then for pressed we'll just do like a gray bit of obvious changes here and then we'll go back to our button base blueprint and then now our style should automatically be linked up if you hit that plus button if you didn't just make sure to select this uh if you wanted to see if you go into blueprint class button style you'll have common button style and then you click that you'll be able to create it just like we just did um it's exact same way and then now this style could get used for anybody using the style all right so now that that's done we shouldn't need to touch that right now because I believe we got our string set up we're all good and then now we can search for wgb button base and then we'll controll d d d all right and now we can change this to let's just do button play oh maybe I should have did this let's do control D1 2 3 and then that way I could just do settings I didn't mean to delete that info and quit we'll also need to change the button text so the variable that we created is by default right here so we'll type in play settings I think I actually forgot something to do in the button so we have to reopen that in a second because you'll notice that these texts aren't changing so let's actually reopen our button base select on our text yeah and we'll see where we have content text it's not actually bound so click on bind select button text compile save the fact that the text is not showing here yet it's kind of annoying you know what here's what we could do instead of binding could do pre construct get this select on our text make this a variable drag out this set text plug that in and there we go now we can see it cool I prefer to see it automatically instead of when you hit play then it appears all right close out that button now let's fix these buttons so it doesn't look a little janky we're going to hit fill for all so that's great and then let's just add a padding of I don't know 20 does that look good see overall we got yeah I guess that's that's good doesn't need to be absolutely perfect and show you really quick on the style if I actually open up the style over here if I change this color to let's make it I guess closer to a brighter green actually yeah and we'll notice that the colors change let's make something more noticeable let's make a blue compile and now it's blue so you'll see the difference between using Styles instead if you had individual buttons you'd actually have to click on it go over to it click on the style and then change it throughout yourself so quite horrendous save us some time let's actually make that back to green pile all right now we have our buttons the next thing we now need to do is create our settings so for me it's going to be basically the same thing as what I just did here so I'm going to control D change this to settings let's open up settings we're going to now change the names here um what are some common settings let's go with um audio audio and we'll go with controls controls um Graphics but there's no s and now I put another D for some reason graphics and then we'll need a back button all right we're not really going to do much here so this should be good for now we'll leave it open but we're not going to touch it yet because there's really nothing for us to do yet so now what we're going to need to do is go back to our stack so with our stack if you actually select on this drop down menu where we put common activatable widget we're going to hit main menu this is going to be our default content so if we actually oh we can't hit play yet because I haven't set up the HUD yet but nice we'll be able to set that to the default it's going to automatically start from the main menu so we won't have to do anything here here all right so let's go into our graph now we're going to need to do stuff to where we can now push our settings menu our menu go back and forth between um which menu we're on and then we'll also need to set up the buttons for the play and the quit button and the back button so now let's do a custom event we'll do this push menu contrl D push settings we're going to now grab our menu stack contrl D and the stacks have this thing called push widget what this will do is it will choose the type of class that you're using and it's going to push it so uh by push I mean it's going to make it visible on the UI so kind of how like adding to viewport that's kind of what it's doing and then it deactivates and activates accordingly without taking up um space on the viewport truly helpful let's go into main menu contr D plug that in and then settings all right now the other thing we're going to need to do for our main menu and our settings is we need to set up those buttons as well but we also need to be able to push um and deactivate themselves in the main menu so what I mean by that is we can't let's see uh let's grab the settings button and let me make this a little bigger so you'll notice that they have different button um events compared to normal buttons so uh on button base clicked is just like on clicked as you would see a button but it also has the ability of on button double click so if you wanted to have something activate based upon double clicking the button this is where you would click on here this is something you normally have to build yourself so it's really great that it's built in by itself it um it's a lot less work on your part and then hovered un hovered it's all the same uh let's do on clicked so on play button what we want to do is just open level so you want to go into your game so I'm just going to do demo map when we hit play it's going to open up the demo map that's super simple that's what we want and then for quit we're going to do on button base click again we'll just want quit game and we'll quit uh let's just do owning player you don't really have to but nonetheless um quits the game next for settings on clicked what we need to do is the thing that I was originally talking about is we need to be able to push the settings widget but we also have to deactivate our own widget so we can deactivate ourselves but you'll notice that we can't push if you type in push and you can't [Music] activate a widget you kind of just activate yourself so what we need to do is make sure to pass along the menu stack so what we we'll do is add a new variable call this menu stack search and variables for menu stack we also go into the settings button so copy or was it contrl C go into settings click pretty much anywhere and then contrl +v paste that there perfect so now they both have that variable go into menu stack again we're going to drag off this and we're going to do set menu stack and sell set menu stack and self control o oh I forgot to compile yep there you go all right so now on button click for button settings I can grab the menu stack I can push settings and then I will deactivate the current widget so when I select on the settings button I deactivate main menu and then I push the settings button and then I'm going to need to do the same thing here for the back button on base click we're going to grab the menu stack we're going to push menu and deactivate widget all right so see we should have all the buttons set up quit settings um I am not going to make a page for info because I'm not sure what I want to put in there yet but it's going to work the same as settings where we'll be able to push a widget um you would do the same thing where it' be push info and then make sure to deactivate whatever the case may be so let's go over here now we need to set up a main menu so under Maps let's go to level we'll call this main menu yep yep yep should have a blank world it's exactly what we want now there's a few things we're going to need to make we need to make it so that the default HUD class will be the main menu HUD class and then we also want to be able um to create our widget from the beginning of the game so let's go into we'll just make a new folder here just to centralize everything we'll just call this HUD few blueprint blueprints we're going need to make we're going to need to make a game mode we'll call this game mode GM for game mode uh I don't know menu mode well open that up from here we want no Pond and then now we're going to need to create a HUD so for here we want to create new blueprint go back into UI HUD and we'll call this BP for blueprint HUD menu um main menu a lot of the word menu everywhere but nonetheless um cool so that should be set shouldn't need to touch this right now closing that now let's open up the HUD main menu I don't know why I closed it previously but nonetheless all right on begin play we're going to need to now create widget from here we will create our menu stack owning player so player controller and then add to viewport and then let's see what else so we also need to make sure our UI mode so set UI mode only we want to make sure that they can interact with the UI as well as have a cursor so get player controller UI to focus should be the menu stack just shoving that over here um I mean you could lock always flush input whatever the case may be all right so that will push the menu automatically let's actually and then under your main menu level World settings make sure to set the GM menu mode I think there's still blueprints we need to create let's see hit play oh I have something broken here oh sorry completely unrelated to this tutorial hit play Oh all all right we hit settings okay it's not working we hit play okay so play button works but push settings did not work let's go into graph settings our settings button didn't work let's see I'm looking at the debug list right now wonder let's do it this way go here deactivate the widget beforehand and then push okay access none trying to read menu stack did I forget to do something in the stack settings let's set menu [Music] stack self play Works setting doesn't access none push settings let's see okay so we're calling push settings through the main menu it's not working here let me see okay so I found what the problem was uh what the problem is is that under the menu stack I have the root widget class set to main menu and what I actually need to do is that under pre-construct I need to push menu and what we'll do is we'll remove this I mean I guess we could remove it to none but it actually wouldn't change anything and for that is because we need to be able to push the main menu first and then it sets the stack because if we had the root set we were never actually setting the menu stack for it so this didn't have a value it couldn't push the settings so if we actually go into here press play and then now when we hit settings we'll now go and then you also notice that we get this little fade in Fade Out I actually didn't do anything and it automatically happens so we have our buttons working we can quit we can hit play uh we can also transition to settings none of these buttons do anything yet but the back button does go back to the main menu so the very last thing we're going to do very very simple is we're going to add a loading screen so now we'll go into project Pro settings we'll select on a sync loading screen um default loading screen uh I have set the background to XYZ loading and then the other thing we're going need to do is let me close default um actually is it default yeah actually it's default we need okay so make sure you have show widget overlay turned on you don't need actually loading text that's actually completely irrelevant and then under background make sure to set to XYZ loading and then image I put to fill you can put that whatever you want if you want it just to Scale based off the x or y you can also add in a throbber so I put a circular throbber uh you actually can put whatever you would like and there's a lot of customizability like I said I'm not really going in depth here um this is fully up to you if you want to look into it further there's actually a lot listed here that you can click I am going to be using the center layout um as the layout is defined here based on Classic Center letter box sidebar and dual sidebar there's a lot listed there let me actually close out like all of this so that it makes a little bit easier to read so if you open this up you can select on the background this is where you can put your image you can put multiple images and then you can also set it to where it's going to shuffle based on the shuffle button here so if you have like 17 different loading screens you can put them all there really helpful tool and then layout I just put center now one thing you'll mind you is that if I hit play you'll notice that nothing has been happening this entire time in order to view it you need to be able to do a standalone game and then you'll have it load there's also one last thing about it I want to talk about so once this loads in a second you notice that it kind of starts off black like this and then you get your loading screen afterwards that only happens when it's stand alone uh and you're in the editor if you package the game you actually don't run into that issue the other thing I want to show you is that under project settings you have a minimum loading screen display time I set mine to five uh this means that you will see the loading screen for about 5 seconds I can actually change that to like 10 you can also change it to where it will autocomplete when loading completes what this will do is that once the level has fully loaded it will make the loading screen disappear automatically so if you have this turn turned on no matter what time you have displayed here it's irrelevant it doesn't matter uh and then it will automatically just load based on what's complete I'll set it to 10 and we'll hit load so that you can see my loading screen a little longer it's a really helpful tool because whenever you open a level it's automatically going to provide that loading screen for you anyways bam so we have our loading and then you have a bunch of other settings that you can set as well all right so last final display is that we can hit the play button we can hit the settings info was not set up but you can also quit this is a standard game menu now we'll be able to go into the settings at a later time as well as the info but this is how you can create a main menu utilizing common UI which is significantly better than the standard default UI and provides a lot more functionality if you enjoyed this tutorial please hit that subscribe button hit the like button join the Discord all that other type of self promotion that you could possibly think of I really appreciate all of your guys support any feedback love to hear it any type of requests would also love to hear it hope you have a great rest of your day

Channel: MrButier

Views: 2,042

Keywords: common ui, how to make a main menu, main menu, ue5, ue5 blueprints, ue5 main menu, ue5 main menu tutorial, ue5 menu, ue5 tutorial, ue5 widgets, unreal engine, unreal engine 5, unreal engine main menu

Id: NCKA0w60diU

Length: 40min 19sec (2419 seconds)

Published: Sun Feb 11 2024