Creating An Options Menu Part 1 | Setting Up The Visuals - Unreal Engine 4 Tutorial

hey guys and welcome back to another unregion 4 tutorial in today's video what we're doing is we're going to be going over creating an options menu carrying on from our previous main menu video and in this you can see we'll be creating an options menu here where we can also change our different graphics settings and everything else which we want as you can see here so we can change the window mode the display resolution the frame rate limit and some other nice graphic settings as well for example view distance post processing anti-aliasing text quality and shadow quality there are also a lot of other options we can change here as well which i will be going over but won't be explicitly showing here but i will tell you how to do it and you can also see we have an optimal settings button down here so if you press this it will set the optimal settings you can see it's kind of loading there and it's now set the optimal settings you'll notice the visuals here haven't changed but it does actually set the proper settings what i'm going to be going over is actually setting up this official site here in a separate video so today we won't be going over selecting them visually like this but we'll do that in a different video most likely the saving and loading of the settings which again i'll do in the next video and that will then also include changing it for the optimal settings as well but this will be going over and creating today so without further ado let me do 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 change something which we did in the previous video so to do that we're going to open up our main menu and then go over to the event graph here and remember you might not have done this but i did on event construct what we're doing is we're going to be disabling the options button and that's just because we hadn't set it up yet now because i've now set it up i can just delete that as we no longer need to disable it we just have it enabled as it is by default to the player can now open up and use it we compile and save and we close that as that's all we need to do we just need to make sure we are now enabling the options menu and once we've done that we can open up our options menu so again we created that in the previous video and if you haven't watched that you can go watch it now if you want to or if you've already got an options menu kind of set up you just want to add the stuff in then that's fine as well but i will leave a link to it in description down below if you do want to watch the main menu video so once we've opened it up mine looks something like this which again is what we did previously i do want to modify this slightly so my vertical box which we have here i'm just going to expand so it's kind of the full size of the screen here or so it's a little bit bigger anyway as i've got quite a lot of options i want to add in i want to make it a bit bigger making sure to re-center the anchor there and i might also just move the actual options name at the top as well like this just so it's a bit more centralized just changing up how it looks a little bit i'll compile and save that now we want to start putting in some of these buttons for us to be able to change the options so the first thing i'm going to start with is the window mode so to do this what i'm going to be doing is i'm going to be using horizontal boxes inside of our vertical box and that's we can have things going from left to right as well as top to bottom so if we search for horizontal box we can drag that in to our main vertical box which we have here i'm going to rename this horizontal box to be window mode hb for horizontal box then the next thing i'm going to do is add some text into this box and i'm going to input into the text window mode so the player and the user knows what this does then i'm going to add a spacer underneath that and i'm going to give it a space on the x of let's say 10 how's that going to look i think that's going to be quite good maybe even 20 i think will look quite good as well after this we want to add in two buttons one for full screen one for windowed so i'm going to add in a button under that spacer renaming this to be full screen button and i'm going to change the size to be fill which again i mentioned and went over in the previous video i'm going to add some text onto this button and in here i'm just going to simply write full screen so again the player knows what it is changing this to be completely black once again and also if i select the window mode text i'm just going to change the horizontal and first alignment so it looks a little bit nicer as you can see there now i want to add in another spacer after this button just to give it a bit more space in between so it looks a little bit nicer so add that into the window mode horizontal box and i'm going to give this one a space of 10 on the x so it doesn't need to be as big and then i'm going to duplicate the full screen button so select it control c select the horizontal box control v just so we have another one and change this one to be windowed button and then again obviously change the text to say windowed now a lot of this video is going to be very repetitive just basically doing this over and over again but with the different options now looking at this i don't like how it looks so i'm going to change the size of the spaces so this first spacer i'm going to change to be 30 and the second one i'm going to change to be 20. now i think that looks a little bit better obviously it's all just personal preference we'll compile save that now we have our window mode buttons here what i'm going to do is minimize the horizontal box select it and hit ctrl c then select the main vertical box and hit ctrl v so now we have another horizontal box in here for our next set of options in between these two things i'm going to add in another spacer just so again make it look nice and organized and i'm going to give this one on the y so up and down i'll give it a space of 10 what does that look like i think that looks good for me maybe even slightly a bit more so let's say 15. now the next set of options i'm going to do in this horizontal box is going to be the display resolution so i'm going to rename the horizontal box to be resolution hb then obviously you're going to change the text to say display resolution and you'll notice now that that text is obviously bigger so there's a bit of a gap between them you can leave it like that if you like but what i personally like to do is just add a few spaces in the window mode just to keep them all in the same length like so you can obviously increase the space if you want i like to just do spaces there instead of the actual spacer itself because keeping these the same just makes it a bit more easier for me to keep track of but obviously do it how you prefer this is what i like to do now in this i'm going to remove the two buttons which we have as we don't need the buttons for this specific thing i'm also going to remove a spacer there so now we should just have the text spacer and then empty space what we want to use for this is a drop down menu or what it's actually called is a combo box combo box there place that after the spacer now you notice we have this little arrow here because like i say it's a drop down menu you can add in as many options in this as you like for your different screen resolutions however i'm going to be adding in four so let's add in four array elements here i'm going to be doing 25 60 by 1440 1920 by 1080 1280 by 720 and 720 by 480 i believe those will correct anyway that is just off the top of my head but i believe those are correct there so those are the four different resolutions i'm going to be going with those are the four most common ones as well people will really just be using 1920x1080 or 2560x1440 but it's always good to give people the option to choose whichever one they prefer so those the ones i'm going with we can compile and save that i'm also going to set the selected option by default to be 1280x720 as that's what the game will typically start up as unless the players obviously changed this and saved it so you can obviously choose what that is for you but that's the selected option i'm going with and make sure you spell it exactly the same as you spelled it in the other default options here so now if we compile and save you'll notice our selected option here is 1280x720 so that is perfect now what you can do is leave it as that or change it to fill but i don't really like it looking like phil so i'm going to leave it as auto just so it takes up the amount of space it needs to next we're going to do the frame rate limit so i'm going to minimize this again and then i'm going to select the window mode horizontal box because i do want the buttons in it again so i'm going to select that and copy and paste it and i'm also going to copy and paste the spacer placing it in between them like so as well now this new horizontal box i'm going to rename to be fps cap and the text i'm also going to obviously change to be frame rate limit and add in any spaces i need to i think that's gonna be good for me so now i've got two buttons already but i want to have four buttons to again give the player four different options so firstly i'm going to change over the buttons i have at the moment so full screen button will be 30fps button then changing the text to say 30fps the windowed button will be 60 fps like so and then i'm going to select both of these buttons and duplicate them because i want another two so i may as well do them both at the same time also duplicating the spacer in between them and the second 30 fps button is going to be 120 fps obviously changing the text as well and then the final one will be unlimited so the player can also choose to have no frame rate limit on that fps if that's what they wanted as you can see there so i'm going to compile and save that so now we have our four different buttons for the fps which we want and the size of my vertical box seems to fit those buttons quite well if it doesn't look good for you increase the size of your box or decrease the size of your buttons and font so those are the first three things we've got set up window mode display resolution and the frame rate limit next i want to start doing some more of the graphic settings so because this is going to be a different thing entirely what i'm going to do is actually put a bigger spacer in between them so i'm going to get the spacer again in the vertical box but instead of 15 i'm gonna make it 50. just to give us a bit more of a gap because again this is something different now then i'm going to select the window mode horizontal box and just duplicate this once again this time renaming it to be the view distance horizontal box like this the text will obviously also be changed to view distance and putting in as many spaces as you think you need then for all of these next options we want four buttons so i probably could have actually duplicated the framing limit but oh well it's too late now so what i'm going to do is rename this first button from full screen to be near as obviously it's the view distance so it's near changing the text as well the next button will be medium so we have a medium distance then duplicate these two buttons once again with this next button being far so it is a far distance and the last one being epic now epic is just the highest setting you can get actually i think that is ultra as well i believe but i'm just going all the way up to epic you can include ultra if you wanted it's the exact same thing you just add in another button so epic like so so now we have our few distance there now these next ones are a lot more simple as we don't need to change as much so what i'm gonna do is get another spacer just with the size of 15 so go back to the old sizes and then duplicate our few distance horizontal box this one is going to be our post processing so we can change it from a few distance to post processing horizontal box and one thing i actually should mention is we need to rename the buttons we just created so sorry for that so if we go back to our view distance near like our original view distance we have near button i'm going to change it to vd near so we know this is the view distance near none of the other ones do have near but they do have medium and epic and all the other options are the exact same as each other so we need to make sure we specify what it's actually for so we've got vd near vd medium vdfar and vd epic then for the next one which we've just duplicated it's also post processing so i'm going to change the text to be post processing and this button isn't going to be near anymore this is going to be pp low the next one will stay as medium but obviously it will need to be pp medium then after that it's not far it's high so we have pp high which we also need to change the text of let's change that to high which reminds me we haven't changed the first one to be low instead of near so we'll do that now and the last one is obviously pp epic that one does remain as epic then this is not very simple because like i say all the other options stay the same so we can select the spacer and post processing copy and paste that into the horizontal box the vertical box sorry and just change over these from post processing to the next one which is anti aliasing change over the text anti aliasing and all of these buttons stay the same we just obviously need to rename them to be a a instead of pp so aa low aa medium aa high and aaa epic next is the texture quality so again minimize spacer anti-aliasing copy vertical box paste and just rename them over so this is what i mean by it gets quite repetitive but it's just the same process over and over again to get all the options which we want this next one is the texture quality so rename the box rename the text and rename the buttons you get the idea you get the picture you know what you need to do now so these will be t q low tq medium tq high and tq epic there we go now i'm going to do one final one and that is going to be the shadow quality so again duplicate everything over that you need and just rename them to be shadow quality instead of texture quality so i have sqlo sq medium sq high and sq epic once i get there there we go so we compile and save that and again those are all of the options which i'm gonna be going over you can obviously add more in if you wanted but these are the ones which i've got what i'm also going to do is add in the optimal settings button which i mentioned earlier on in the video as well so what i'm going to do to that is i'm just going to duplicate my back button as that makes the most sense for me really it's going to be the same thing just changing over the functionality so i'm going to select my back button control c select the canvas panel control v and i'm just going to move this over to the right hand side instead so i'm going to move that over here i'm not going to put it all the way over because i do want to leave space for my save button which i will eventually add in as well so i'm going to move this down like so now if you want you can also add in an apply button to apply the settings however the way i'm doing it is i'm just going to be applying the settings as soon as you do change them over as well so we'll compile and save now what i have noticed is we don't actually have a spacer in the middle of all these options here so i'm going to go add that in in the background i will cut it out because you know what you're doing you just add in a spacer i'll show you for the first one just in case you don't so the first one is under is the view distance as you can see we're just missing a spacer between medium and far so i'm going to select my spacer between near medium control c select the horizontal box view distance control v and then just drag it in between medium and far now we have our spacer there i'm just going to do that for all of them for post processing anti-aliasing texture quality and shadow quality as well so there we go that now looks much nicer so again we've now got all of our visuals set up and since this is all the space i'm going to take up i'm going to lower my size of my horizontal box a little bit and then just move it down so it's a bit more centralized within the screen like this just to make it look a little bit nicer might actually move up a tiny bit more but this is where i'm just getting a bit finicky with the details which doesn't matter too much because this is just a tutorial so i'll compile and save that now as this video is getting quite long what i might do is actually stop it here and then make another video where i go over creating the functionality of these buttons which will be the next video uploaded so you don't have to wait too long for it but what we've gone over today is creating up the visuals of the options menu so we can have all the different buttons in here and we've set it all up in order to then really nicely and efficiently move on to actually coding it later on like i say the buttons all have a great naming convention and the coding is actually very simple because we're not doing consequence we're doing it much more efficiently so i hope you don't mind about me cutting it here again i don't want to have the video going on for too long and the weight won't be too long for the next video but what we can do is hit play and we should be able to see this come up on the screen looking good how we want so you can now see we've got our main menu our options are no longer disabled if we press it we can see them all in here again the resolution is like this because like i say that's what happens by default so what i might just do to show you is change it using the cons command and we can see we have it here obviously nothing happens yet when we press these buttons but you can see we can actually press them and it does work one thing i've just noticed is i didn't change the back button here so i'm going to do that now very very quickly change it from back button to i'll just name it optimal button for optimal settings and rename the text to be optimal settings like so making the button a little bit bigger just to fit the size of that like that so thanks so much for watching i hope you enjoyed this video and i hope you did find it helpful and if you did make sure to like subscribe down below so thanks for watching and i'll see you in the next one [Music]

Channel: Matt Aspland

Views: 51,256

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, ue5, unreal engine 5, view distance, post processing, anti, aliasing, anti-aliasing, texture quality, texture, quality, shadow, shadow quality, frame rate, limit, fps, windowed, fullscreen, resolution, ue4 main menu, ue4 change settings, ue4 change graphics settings, change, graphics, settings, options, texures, ue4 how to, main menu, game user settings, hardware benchmark, screen

Id: pHro_fEzIPo

Length: 18min 53sec (1133 seconds)

Published: Sat Mar 26 2022