How to set up a 3D Main Menu | Unreal Engine Tutorial

hello and welcome back for another tutorial today I'm going to show you guys how we can use this 3D scene and make a 3D main menu for a game um so for this 3D scene I just used an asset pack available in the unreal uh store library and it's called stylized Egypt so the pack actually came with this demo scene which is beautiful and we're going to use it today to make a really nice uh 3D main menu scene so the first thing we're going to want for our main menu is a widget so in order to get this widget all you have to do is right click on the content browser go to user interface and here you'll find widget blueprint click on that now let's rename it widget underscore main menu and let's open that up so straight away a couple things that we are going to want uh straight away a couple things that we're going to want is of course we're going to want some kind of text right this is for our title some cases you can use an image but we don't have that content right now so we're using text let's call this main menu of blah blah game all right and then we make this big let's make this 50. 50 here then we zero this out and there we go main menu of blah blah game and the next thing we're going to want is a few buttons so we go over here to the palette and we search button you have this button option you drag it out drag it into the scene you can scale it to any size you want so let's go like this big and here's a little trick guys so you see this little flower thing over here it always starts well it always uh by default it's on the top left which is basically the origin of the widget element you have selected so it's really important to set this where you plan your widget to sort of hang from right like I want this button to sort of hang from the middle of the screen because it's a button that's simply on the middle of the screen so I'm going to click on it and then head over here to the anchors click on that open it up and we're going to Simply select the center one so now you see the flower thing is moved over here to the center and now this button is anchored to the center of the screen so let's hit compile hit save um let's put some text on this button so we know what it is so let's call this button fight which is basically a play now button right take a little a little bigger and then let's let's name this button let's call it play button now I'm going to Simply duplicate this button so that we don't have to make them all again and let's call this let's name this button exit button and then change the text to quit or exit there we go and then if we click on this button you see that because we uh that because we copy pasted it it actually um is also anchored to the center of the screen so that's good um okay before anything else we hit compile we hit save and what we're going to want to do here is we're going to want to open the level blueprint hit open level blueprint and delete this tick because we don't need a tick here so from event player we're going to want to create a widget and we're going to select the widget that we made so widget underscore main menu in menu and you're always going to want to drag out from this return value let go and put add to viewport because what happens here is when you just create the widget it doesn't actually show the widget to the screen the thing that makes it do that is this thing called add to viewport so once you call this out then the widget is actually shown on the screen like creating the widget makes it exist in in in the game but it doesn't show it to the user until you call uh this add to viewport function and compile hit save so we go over here and we hit play and we should see yeah our main menu fight exit yada yada um all right so now let's set up a camera for a scene right I think this this area is actually quite nice like this uh entrance as our main menu so we go over to the search bar in the place actors so we can search for camera drag the camera into the scene and here we have our camera so you get a little viewport here in the corner and we can actually pin that so that we can look at it while we position our camera so something like that I want to get both the statues in frame maybe a little bit of the stairs drag it back a little bit and yeah that looks pretty cool to me so you see our camera actor is over here and what I want to do is I actually want to use a level sequencer in order to make this camera move uh side to side just a little bit or forward backwards just a little bit to give it some interest so we go over to our cinematics tab over here over here click on it add level sequence we'll call this L underscore main menu sequence and we're going to hit save so now we get this new thing which looks like oh where'd it go this uh new thing which looks like the director's Cut Thing which is basically yeah level sequencer so level sequencer here it is in the content browser that we just saved L underscore main menu sequence and we also get this new tab called sequencer which is basically a timeline like this so let's say we don't have that sequencer open right so we can click on this uh director's cut icon and then hit open level sequence and that'll give us back the timeline so the reason why I mentioned that to you guys is this timeline is extremely important you could use it for so many things like cut scenes you can use it for in-game cutscenes main menus like what we're doing right now and so much more but all right let's let's get on to it so we're going to want to click on this camera and we're going to want to click track over here and add active to sequencer add camera actor so this added the camera into the sequencer but we don't want to be controlling it so we eject from here and our camera is now inside the sequencer so you can see camera actor over here which is basically this camera actor and I'm actually gonna unconstrain this so it doesn't look weird when we when we uh use it so I click on this on constraint uh aspect ratio default is clicked so it's like a little squished and then you can untick it to get the full View all right and then over here I'm going to change the where is it I'm going to change the oh here we go so I always like changing show time as seconds instead of frames just so it's easier to understand so go to seconds and yeah five seconds is good for me so what we're going to want to do here is we're going to want to select our camera actor in the timeline open it up and we have the transform uh we have the transform variables in here or the data if we're transforming here so we're going to want to manipulate this so that it sort of moves back forward and backward just a little bit so we go over to location uh you know you don't actually have to open it up you can simply leave it closed but we're going to want to put a stop here a a frame a keyframe so we hit plus you get this little circle and I wanted to move for two seconds I wanted to move forward just a little bit just like that and then I hit plus here again puts another frame so now you can see the camera moving right just a little bit just a little bit um all right let's put it 2.5 2.5 so it's a little slower and then I'm going to select this keyframe copy it Ctrl C and then go all the way to the end and paste it right so basically What's Happening Here is it's going forward and then it goes back and if I play this in a loop it's it's going to go forward and backwards forever right so let's save this um and what we can do here is we can click on this uh sequencer and hit auto play right there autoplay and loop indefinitely right so if I hit play we're actually in the camera sequence that we just set up right so with the camera moving forward and backwards we got the main menu that still pops up uh yeah it's a little fast for me but you get the idea right you could have the camera moving a little bit during the main menu so hit Escape now let's add some functionality to these buttons in the main menu screen right so I'm going to click on the play button and over here on the right side you can scroll all the way down and you have all the events that you can program into the button so we want an unclicked event so that means when I click on this button whatever I put in here is what the button will do so since this is the play button we're simply gonna uh we're gonna open a level by name right so assuming you have your game in order this level that you open will be your play level right but we but since this is just a demo I don't actually have a level uh ready for you guys so let's just open up the default uh first person example map so I'm going to copy the name of this and paste it into the open level so level name I'm gonna paste first person example map in there hit compile and Save and then for the exit button you want to click on the exit button scroll down here on clicked all you want to do is type in quit game and compile and Save Right simple enough so now when we uh when I hit play it still brings me into this nice 3D movement of the camera going in and out of the environment but now you have your two buttons here and they have some functionality so first let's go with the exit button let's see what happens click it closes the program right exactly what we thought it would do so hit play and hit fight so now it brings me to whatever level you put in there which in my case is the default uh example level so I'm going to hit Escape here and we could do a few more things to make this main menu a bit more appealing right it's a little there's some tricks that I like to do like adding an image and then scaling it really big uh and I just call this bgm which uh or I just call this BG which is like background uh so I drag it all the way to the top we want to make sure that our text actually so this image uh put it in the center and then I like to make this black and what I like to do is put the opacity down 0.3 0.25 and hit compile and you you can see the result here right it just gives this like darker look to the scene uh yeah and I can make it 0.5 if I want it even darker right and there's a couple other things I could show you here so let's delete this background image there's something called a blur a background blur uh effect so you drag it in it just looks like this empty box right but so I'm going to spread it out the entire scene drag it to the top and then over here there's something called blur strength I'm going to make this 0.5 or let's try one so everything behind this background but will actually be blurred a little bit right so if I hit play can see that the scene is a little more blurred but let's make that more dramatic so let's change this to five so you can really see the blur hit play there you go see the scene in the back is blurred out but this is a case-by-case basis you don't want to use this for all of your games only if it makes sense right um and then let's add a few more things to the buttons over here just so we can uh make it look a little better so over here in the buttons and all buttons have this even the default one let's pull one out just to show you okay I'm gonna delete this blur background it's dragging a button and when you drag out a button you'll notice uh three things when you open up this style tab do you have normal hovered and pressed and that's exactly what it means right so I'm going to delete this and use this one so normal is basically how it looks normally I'm going to make it red right I want to make this dramatic so you guys can see exactly what I mean so normal will be red hovered let's make it blue yeah blue and then when you actually press down on it I'm going to make it black so hit compile and save and I'm gonna hit the play again so you can see this fight button right now is red but as soon as I hover over it with my mouse it turns blue right when I click it's black so that's how you could like uh customize your designs and the buttons and how they react when you press or when you hover but usually what people do is just uh they sort of they sort of tint over the so I'm going to close all these tabs and go on to pressed and over a tint I'm just going to make it a little bit darker right great so this is what a lot of people do you have your button you click it turns gray just gives that nice uh information that the button is being pressed so um yeah that's pretty much it for your main menu this is a basic main menu uh you got your play button you got your exit button you could add any other buttons you want in here if you have options yeah go ahead and go ahead and add them um if you learn from this video If you enjoyed hit that like button it helps us spread the video it helps more people see this video and if you want to support us head over to our Google Play page where all our games are free you could try them you can play them and if you really want to help us leave a rating and a nice review on one of our games thank you so much peace out

Channel: Studio Bit Byte Games

Views: 8,869

Keywords:

Id: 00un6NYQdRc

Length: 16min 11sec (971 seconds)

Published: Tue Dec 13 2022