How To Make An Options Menu - Unreal Engine 5 Tutorial

hello in this video we're going to go over how to create an options menu inside of unroll engine and we're actually going to add the four options that I've added to my game you also have the ability to add more options if you want to so the options are going to be to have a window mode so you can decide if you want the game to be windowed full screen windowed or full screened you'll be able to decide the resolution of your game so if you have a lower resolution it kind of helps the game run faster you'll be able to decide if you want vsync off or on in your game and finally you'll be able to decide what type of Graphics you want for your game so they're going to be four options we're going to add Ultra epic high medium or low so using these options menu hopefully your player will be able to make the game run faster or slower depending on their PC needs and at the end of this you'll also get the project files so if you just want to look at the code for this and see how it's done you'll get that this video will be continuing from the previous video that I made how to make a main menu inside of Unreal Engine if you've not seen that video no worry you can still follow along and learn so to get started you just want to right click and go user interface select widget blueprint then the user widget and just call this the options menu widget blueprint then if we double click and open this up we want to go over to the palette and look for a canvas panel and just drag this into the designer and we're now ready to start designing our options menu go back to the palette and look for a vertical box just drag it somewhere into the center of the screen and expand it a bit and also just go to Anchors and anchor to the center of the screen when our options menu appears we want it to kind of be in the center of the screen then we also look for a horizontal box and to drag this horizontal box inside of the vertical box then we're going to look for some text and just drag this text inside of the horizontal box and then we'll look for a button and we just want to drag this button inside of the horizontal box then we want to look for one more piece of text and just drag this inside of the horizontal box again and then we're going to look for another button and subtract this into the holes in the Box and finally we're going to look for a text and just drag this text inside of the first button then drag and place another text inside of the second button then separate's first text box and just make it say Window mode and then we just want to select this um text and make it show the left Arrow then we'll select this text and make it show the right arrow so this is going to be one of the options that our player character can control the Window mode so this basically means we can control basically if the screen is going to be full screen windowed and that type of thing with this text selected just change this to be fill as I kind of want arm this to basically fill up the space of this vertical box and then we're going to add the other options that we want the player to be able to control so if I just select this horizontal box press Ctrl C then select this vertical box and press Ctrl V that will basically duplicate it then we're going to do this two more times so select the vertical box and press Ctrl V and just do that one more time so in this tutorial we're just going to add four options that the player character can control at the end of this video I'll show you how to add more options if you want to do that but these are kind of the four main options that games allow you to control so the next option will give the player to control is going to be the resolution so for this text I'm going to make it say resolution and then for this third text I'm going to make it say graphics and then for this fun text I'm going to make it say vsync so when the player is clicking these buttons or basically going to allow them to change the options so for this button just select it and we just want to call this Window mode minus and then select this one and just call this Window mode Plus do that for the following buttons the resolution graphics and vsync because this will just make things a bit cleaner when we're designing them so just do that now I'm just going to fast forward okay so I've now enabled all of my buttons appropriately the next thing we're going to do is make it so when we click these buttons it can kind of change the settings in our game so I'm just going to select this button scroll down and go to unclipped and then also here this will take us to event graph what I can do is just find my windows plus mode button scroll down and just add the unclicked here and basically I'll use these buttons to control the Window mode of my game what we want to do is create a new variable and just call it Window mode and for the variable type we just want to look for the E Window mode so here it is e-winded mode and if I just compile this we can see that um there are three windows that are available in our game the game can be full screen it can be windowed full screen or it can be windowed so these are the three options we're going to allow the player to basically choose when the player presses the Window mode minus button what we're going to do is to track in our window mode get it and just drag off here and look for integer and we want this one to integer this will convert this variable into an integer which is a whole number and we just want to drag off here and look for subtract and just select it and we want to subtract this by one and then just drag off here and look for clamp integer and we want this to have a max value of 2 and a minimum value of zero so basically this has um three options when this is zero this will mean it's like full screen when it's one it'll mean this is windowed full screen and one this is two it means this is on windowed then after we basically do this we want to drag off here and look for integer to bite so if I just look for byte this will convert our integer back into a byte and then we just want to drag in our winded mode and set it then connect it into here then just connect from here to here so when we press the negative button on the window mode it'll basically decrease our window mode we're going to do the exact opposite for when we click the plus button so I will just drag in the Window mode get it I will then look for integer so two integer although this time we're going to look for ADD and we want the add operator here and we just want to add one I will copy this bit so I press Ctrl C and Ctrl V and connect from value into here and from here into here so when I click the Window mode plus button it'll basically increase by word mode by one on whatever it is save us on full screen increase it by one to um when did full screen so with that we have set up the Window mode buttons next we'll set up the resolution buttons so that way the player can change the resolution of the game so if I just select this button I will scroll down and go unclicked then I'll also just select the resolution plus button and click it so when the player collects the resolution bones we'll allow them to change the resolution of the screen for this if we create any variable and score that resolution and call it resolution index and change the variable type to be an integer and then we just want to drag it in get it when we click the plus button we're gonna drag off here and look for add and we just want to go to this one add operators and we'll add one then subscribe here and look for clamp so they're going to be four resolution options that the player is going to be able to have so for the max here put four I'm sorry I mean they're gonna be five resolution options that the players can be able to have zero accounts as an option so they're going to be five in total and we just want to drag here set resolution index and connect from here into here and from here to here then we're going to do the exact opposite for the negative so I will drag off there and look for subtract Arrow subtract one and then I'll just copy this connect this into value and this into here then we just want to drag in the resolution index get it drag off here and therefore switch on hint and add five pins connect from both of these into here so depending on the resolution index will depend on the screen size that will set for the game so if we just create a new variable and call it resolution change the variable type to be an INT point here then we just want to drag it in and look for set resolution right click on here and look for split structure pin and just copy and paste this four more times and connect from zero into here from one into here two into here from three into here and from 4 into here for this first one we want the resolution X to be 12 p t and the resolution y to be 720 so this is going to be the lowest resolution option available to the player for the second one we're going to be 1600 by 900 for the third one we are not to be 1920 by 1080. for the fourth one we're going to be 2560 by 14 40 and then for the last one we're going to be 3840 by 2160. we can just compile that then go back to the designer and we'll set up the graphics so for this we just want to select um this box scroll down and go unclipped and then I will add the plus graphics so control the graphics we're going to create a new variable and just call it Graphics index change the variable type to be an integer and then we're going to do a similar thing here so we are just going to drag in the graphics get it track off here and look for ADD and we want this one add operator we'll add one we'll drag off here and look for clamp they're going to be five Graphics options so for the max put four and then we will just drag in the graphics index and set it to be this value connect from here to here and we'll do the opposite for the graphics minus bun so I'll just trade off here look for subtract and I'll put one here and then I'll just copy this connect this into value and then I'll just copy this and connect from here into here then if we go to the designer that is um one last option which is the vsync I will click on this button and when I click on this one for this one we're just going to create a new variable and call it vsync question mark change the variable type to be a a Boolean and then if we just drag it in and look for set let me click the vsync negative button will make a um we'll make this variable false and when we click the vsync positive button we'll make it true so unclipped I will just copy this and set it to be true okay so the next thing we need to do is make it so when the player actually clicks these buttons it applies the changes to our game so if we go back to the designer and in the palette look forward button and just drag this button here at the bottom here and then we'll look for some text and just make this text say apply and I'm just going to select this button and make it Center align so it's a bit smaller and I'm also just going to select this um horizontal box above it and add a padding to the bottom of 50. that way there's a bit of a gap and when I take this apply button I'm going to apply all of the changes that I've made here so if I just scroll down and go unclip when I click this button we'll make it load all of the changes that the player has made so when this button is clicked we'll just right click and look for get game user settings Connect into here Ben we just want to drag off here and look for set full screen mode and then we'll set the full screen mode to be whatever our Window mode variable is so we'll just get it and connect it into here then we will set the graphics so just drag off here then I'll look for set overall scale ability this will allow me to control the graphics of the game or zero is basically the lowest Graphics a four is the highest Graphics we can just drag in the graphics index get it then Connect into here and what I can do is just double click so I can add a reroute node so it's a bit tidier and I'm just going to press the alt button and break the link here and then connect it here that way it's a bit tidier and I'll actually just move this to the top then we'll just drag off here and it will set vsync and we want this one set vsync enabled connected into here and then I can drag in the vsync get it and then connect it into here and if I wanted to I could just drag off here and it will set foliage quality and then I could set up a bunch of buttons so that I could control the fornage quality but I don't want to add every single option menu otherwise that could take a while but that's how you easily add more settings if you wanted to I just covered um The Window mode the graphics index and the vsync and the resolution as all of the other options kind of follow a similar format to that so that I wanted to basically add a foliage option I'd kind of do it in a similar way to how I've added the graphics index so I just wanted to Showcase that and then for the final one it's going to be the resolution index we can just drag off here and a full set resolution and we want this one set screen resolution and then connect it into here and then we just want to get the resolution variable that we made and then get it and then connect it into here and then we just want to drag off here and look for apply settings and then connect it into here and that will make it so that when we click this button it will apply all of the settings that we have made the next thing we're going to do is make it so the game will basically be able to load in the settings that the player has made so if the player makes some settings and applies them we want to make it so if they open up the game again it'll basically load in the previous settings that they've made so to do that we can just right click and look for event construct and this will basically fire as soon as our options menu is displayed on the screen and a bank contract we are gonna just drag up here and the forget game user settings this will get the settings that our game has and what we can do is just look for load settings and this will basically load the previous settings that we set inside of our game then what we can do is just double click to add a rerout node then what we want to do is just drag off here and look for get a full screen mode and we're going to track in our window mode set it and connect it into here that way our window mode is basically going to display what our full screen game mode is then we just want to drag off here and it will get overall scalability level and we'll set our Graphics index to be that connect this into here then we'll just drag up here and look for is vsync enabled and then set our vsync variable and connect it into here then we'll just drag off here and it will get Reserve solution so this one get screen resolution and then we'll set the resolution to be whatever this is and for this one we just want to track off here and look for break int and if you remember earlier when we were setting this up so that the game knows what to set the resolution index to what we're going to do is just drag off X and look for equal and if the x is ever equal to 1280 we are going to have a brunch cut from hand to here and if that is true we will set the resolution index to be zero if that is false then we are going to do another branch check and we'll check to see if the X resolution is equal to 1 600. if that is true then we'll set the resolution index to be one if this is both then we will have another branch and we'll check to see if the X resolution is equal to nine twenty if that is true we'll set the resolution index to be 2 if this is false I will have another branch and then we'll try to see if the X resolution is equal to 2560. if that is true then we'll set the resolution index to be three if this is full we'll have one more punch and we'll try to see if the resolution in the x is equal to 3840 and if that is true then we'll set the resolution index to be 4. oops so just four here so we've handled basically applying our settings and then loading in our settings if the player opens the game again the final thing when you do is make it so these text blocks will basically display what window mood what resolution and what graphics and if the v-sync is on or off so let's do that for the Window mode we just want to select this text go bind and go create binding then we just want to track in the window mid get it and just track up here and look for enum then we want to select enum to string and connect from this return value into here and this will basically display whether our game is in full screen window full screen or windowed mode next we want to select the resolution go bind and go create binding for this one we were tracking whatever our resolution is gonna look for break endpoint and then we just want to right click on it for append sorry not this one right click again and I've got append and we want to scroll down and we want this one a pen string and this basically allows us to put two pieces of text together add a pin and for the B we just want to say X and then for the a connect X into here so this will display the resolution on the X then we're going to connect from y this will display the resolution on the Y and just connect the return value to here so if our screen resolution is for example 12 80 by 720 it's going to show 1280 x 720 that way the player knows the resolution for the graphics just select it go find create a binding and then for this one we have to drag in the graphics index get it drag off here and look for switch on int and add five pins connect from get text into here and if this Graphics index is zero we're going to make it say low because that'll basically mean the game is on low graphics I'll just copy this if this is on one we want it to say medium because it will be on medium graphics if this is on two we want this to say hi so I'll make this just say hi if this is on three that means we want this to say epic because our Graphics will be epic and if this is on four we want this to be ultra and that will mean our Graphics are Ultra we can just go back to the designer then if we go to the vsync I will create the binding and if the v-sync if we just get it drag off here and not for a branch if this is true we'll make this a on and if this is false I'll just copy this we'll make this say off go back to the designer so I'm going to be adding this system to the main menu system that I added last time so if I just close this and go to my main menu widget blueprint I'll select the options button and I'm just going to go unclick when I click this button I am just going to drag off here and look for remove from parent this will remove my main menu widget then auto track up here Connect Four create widget and the widget I'm gonna create is going to be the options menu that we've been making and then I'll just drag up here and add this to my viewport that way I can see it then if we just go back to the options menu and select the apply button I am actually just going to add another button that way the player can go back to the main menu if they want to so my palette I'm going to look for another button and I'm just going to add this below the apply button and I'm going to just give this some text I'll make it say go back and for this I'm also just going to make it kind of century and for the apply button I'm going to add a padding of 50. that way there's a bit of a gap and when I click this button I am going to drag off here and look for remove from parent and then I'm going to look for the create widget and that widget is going to be the main menu widget blueprint and we just want to drag off here and it will add to viewport that way it adds our main menu back to the viewport and I think I can test this out select a compile close this so I'm in a level where I basically added my main menu to display as soon as my game starts so my level blueprint event begin player basically at the main menu that way I can see it so if I just go play I can see my menu if I click the options menu it will remove my main menu and then I can see my options menu So currently right now we can see the vsync is on the graphics are high and the resolution is 1920 by 1080. let's change some of these things so if I make a medium or turn the vsync off and just go apply and then if I push this and if I want to because this is kind of looking a bit weird I'm just going to copy the image from my main menu and then for my options menu I'm just going to paste it in the canvas panel and for the Z order give it a z order of something like negative one and make sure this has a z order above one sorry as the order of above negative one that way this image appears above it and now I just go compile close this and I go play if I get my options we can basically kind of control something so maybe I want this to be full screen I can decrease the resolution and let's go apply and as you can see it kind of changed the settings for me and then two more things because my options menu doesn't basically appear as soon as my game starts it's not actually going to load in my settings so what we want to do is just copy this get game user settings and then basically paste this whatever the player goes as soon as the game starts that way it loads in the old options that they have so like over to my graph and go over to the event big gameplay here after I do this I'm just gonna paste my get game user settings and load them that way as soon as my game starts it will load in my settings right now I kind of have to go to the options menu if I want it to kind of load in my settings so if I go play now whoops oh okay I forgot to connect the return value to here so just make sure to do that so if I go play now as soon as my game starts it's going to load in my settings that I set last time I can click options it'll take me to my options screen where I can change the options of the game if I go back it will take me to my main menu I can even click um start and when I start my game I'll have the options that I selected in the options menu that's all for this video If you enjoyed like And subscribe and one more thing I'm just going to attach the project files for this video the main menu and the options menu that way you can download and check them in case you've made a mistake all of you just want to skip straight to the code okay bye

Channel: Unreal University

Views: 59,566

Keywords: how to make an options menu in unreal engine 5, options menu unreal engine 5, options menu unreal engine, unreal engine, unreal engine 5 tutorial, uisco, unreal engine widget blueprints, unreal engine tutorial, unreal engine beginner tutorial, how to make an options menu

Id: Ff67XtqgSxc

Length: 27min 11sec (1631 seconds)

Published: Thu May 25 2023