Simple Options Menu In Unreal UE5.2

if you want your game to work on a wide range of Hardware you need a settings menu lucky for you I know just how to set one up and it's not that hard when you're done with this video you will have a fully working settings menu complete with saving and loading first things first you'll need to make a folder and call it UI to hold our UI assets next we will need to create a widget and call it settings menu UI then we can open it up and dock it so it is not a floating window the first thing we need to do is search bore and drag out a canvas panel from the palette then we need to drag out a border and put a vertical box in it the in the Border details panel we need to find a brush color and turn down the alpha to zero and hit OK to make it transparent the next thing we need to do is set the position of our border to 400x 120y with a size of 1 1200X and 840y now we need to drag a horizontal box under the vertical box followed by a spacer set the spacer to fill and set the horizontal box to auto next add a text box to the horizontal box and set it to fill with left align under font set the size to 40. next we need to add a button in the same horizontal box followed by a text block and then another button make the text block have a size of 40 then add another text block to each button and add the thing that looks like an arrow in each text block such that they face away from each other like this collapse everything in the horizontal box then select the horizontal box and spacer and press Ctrl C to copy them then Ctrl V to paste them do that seven times have eight in total now that we have eight settings we can name them as follows Window mode resolution Shadow quality texture quality Shader quality anti-aliasing vsync and finally frame rate cap next you need to name the buttons the one on the left is decreasing the one on the right is for increasing so I'll name it accordingly the one next to window will be called window minus and window Plus the one for resolution will be named resplus and res minus the one for shadow will be named Shadow minus and Shadow Plus and you get the picture so I'll just name the rest of them and get back to you when I'm done next we will add one more button to the vertical boss and put a text Block in it with a font size of 40 saying apply settings and rename the button to that as well then we will need a text block that is the child of the canvas panel with its anchor set to the top middle like this you can then set its position to negative 125x and 28y with a scale of 250 by 76. the font size should be 52 and with the text of options and Center alignment on the text finally to finish off the design we need to add one last button to the canvas panel with a text block saying back anchored to the bottom left but the position of 20x and negative 60 y and a size of 100 x by 40y this makes a good place to save it so I will do that now that the UI is designed we saw a few things to set up before we start in the code proper first thing we'll need to do is go to the graph View and remove the auto generated events as we will not be using them next we need to make the variables that will be used by our code for the settings we will need a float called frame rate an end pointer called resolution a Boolean called Beast tank enabled an e-window Mode called Window mode and then finally five integers for shading quality Shadow quality texture quality AA quality and finally resolution index next we need to make bindings for each option by clicking on the text box in between the buttons and then selecting bind create then create binding right click and name it to something memorable do that for all the settings and I'll be back when I'm done now I need to compile and save so the variables and bindings work now we need to set up the binding such that they work I will go over resolution first as it is the most complex the first step is to drag out the resolution in pointer then on its output pin right click select split struct pin you'll then see an X in the Y from X drag out and search for to string no do the same for y next you can drag and append node with x in the top the letter X in the middle and Y on the bottom then finally drag the return value to the output with that you can press X on the resolution to close it and we will move on to Window mode this one is simpler as you only need to take the variable then drag a to string then drag that to the output and close it vsync we need to drag the variable and take it into a branch then copy the return node so you have two and connect them to the output of the branch in the one from True right on and in the other right off you can do the same as we did for Window mode for frame rate by just dragging it out the four quality setting values are very similar so I'll just do the one for texture quality start by copying the return node four times so you have five of them next disconnect the execute path from the default one after that put low medium high very high and Ultra in the return nodes next Add a switch on it node then add the variable for the texture quality next Add a switch on int from the input then press the add pin button five times to add the outputs then drag them to the return nodes one per node you can then copy and paste this for the three remaining values just change the variable to the correct one you can then close them all now that we have the boilerplate done we can start on the code that changes those variables first thing we need to do is go to the designer and for every button we need to select the green on clicked to add it to the view graph I'll do that and come back when they're all added now that we have all of those we can start with the vsync first find it and then from the plus and the minus drag out the vsync set variable then for the plus check it DNM put a comment box around it called vsync next find the one for frame rate and drag the variable out next to it then drag out a minus node and a plus node for a float and put 30 as the second value for both then take both outputs through a clamp node put the Min as 30 and the max at any multiple of 30 you want I will do 180. then drag out two set nodes and put the return from the clamp into them then finally comment the section next we'll do the one for Window mode start by taking the variable out then put it into a two inch byte node then take a plus and minus node with one in the other slot then a clamp end node for both of them with a minimum of zero and a maximum of two after that take the two sets of variables and put the outputs of the clamp to the inputs a two byte node then take that to the inputs of the variables then finally you can comment it next we will do resolution start by taking the resolution index variable and then taking a minus and a plus set it to one in the other slot follow that with a clamp set to zero and three followed by two sets for resolution index follow that with a switch on int node with four outputs with a new reference to resolution index then pull out four set resolution nodes for each node's input plot a make in pointer node this is where you will set the resolution I will use 1280x 720y 1920x 1080y 25 60x 1440y and 38 40x 160y then I will set the default pen to 1080p then comment it now for the other four we can copy and paste the middle of the resolution code then change the clamp to between 0 and 4. you can then change the variables to the right one for the event and hook it up you can then comment them if you want I will to make it easier for this tutorial if you've been enjoying this video so far please modify the settings of your YouTube account by subscribing and save them by ringing the bell for all my future uploads our settings are useless if you can't save and apply them so let's set that up now first you need to go to the on clicked event from the apply settings button then from that we can drag out a get game user setting node then from the return value we can drag out all of our different settings starting with frame rate then double click the blue line to get a redirect node and then from it drag it out to set screen resolution then do the same for shading quality Shadow quality vsync texture quality anti-aliasing quality and finally full screen mode then take the variables for each one and match them up after that we need to drag out a apply resolution settings node from a blue line then a apply non-resolution settings node finally with a save settings node you can comment it if you wish to make it better to read or look at now that we can save our settings we need a way to load them back when the game starts first add an event construct node followed by get game user settings node with the return value going into a load settings node with Force reload on then follow that with all the set nodes for the variables for our settings except for resolution indexes that is not saved and we will have to construct that with information from the saved resolutions then we can get the settings as they appear from the light blue line after doing that it should look like mine then we need to get the resolution index we will do that by taking a break endpoint node from the resolution then from the X we will have 4 equal equals blocks for the four resolutions first one will be 1280 second one will be 19. 20. the third one will be twenty five sixty and the final one will be 38.40 from each of those drag out a branch node with a false going into the input of the next one like this meets true bring out the resolution index variable pet node and put the following indices in the spot after this we just need to add one more thing back at the apply settings code we need to create a custom event called set all and drag it to the input of the first node then back where we set the resolution index we need to call that function then back at the front of this you need to add another custom event called onstart you should then comment this section and compile and save now we need to go to the level blueprint of your startup map like this and then at the end of it add a create widget node for the settings menu and call the onstart function all it's left to do is to make it usable this part follows from my last video on setting up a main menu if you have not seen that there will be an i card now watch that and come back or you can use whatever you already have and plug this into that it is up to you but with that said if you're using my main menu the first thing you need to do is add a remove all widgets node from the settings on clicked in the menu UI followed by a create widgets node with the settings menu followed by an add to viewport node then back in the settings menu on the unclicked event for the back button drag out a remove all widgets node followed by a create widget node with the menu UI and a player controller as owning player followed by a add to viewport node now you have a fully functional settings menu for your game that can save and load settings across game starts if you found this video helpful please like And subscribe if you feel that someone else might find this video helpful please feel free to share if you have any questions or comments please leave them below or in my Discord have an amazing day and bye for now

Channel: Savage Games

Views: 15,559

Keywords: Game Dev, Unreal, how to, tutorial, UE5, help, UE4, game development, indie game development, game dev, US5.1

Id: j9OAV7LO3Pg

Length: 17min 58sec (1078 seconds)

Published: Sun Jan 22 2023