How To Make A Settings Menu in Godot #GoGodotJam

hey guys we're back with another video and in today's video i'm going to be showing you how to set up a settings menu such as the one you see here on screen where we have different settings for video audio and gameplay now i'm not going to be showing you how to set up every single setting that you see here due to time constraints uh because this video would be super long and it's already long enough as it is so before i actually get started i do want to mention that this video is actually part of the go go jam if you don't know what the gold kodo jam is it's essentially a month-long festival celebrating the godot engine and it's going on right now for the entire month of november and hosts are hosting events every day whether it's a live stream or a video that's all good old related if you want to find out more about the go go jam and the events you can actually visit the website the link will be in the description down below anyway with all that said let's jump right in so before i actually get started with making the settings menu work i want to mention a couple things so as you can see here i already have a start screen and i'm not going to be showing you how to make a start screen i if you want to know how to do so i do have a tutorial on my channel i'll leave the link somewhere on screen but basically the settings menu is going to be a pop-up and it's going to be its own scene and the way it's going to work is i'm actually going to have my settings menu as i tell the distort screen it's going to be hidden by default and when we click the settings button here it will actually go ahead and unhide or show the settings menu yeah so that's how it's going to work and then it's going to work the same way as in our pause menu as well so we're going to have our settings menu be part of the pause menu as well when we click the settings button it will show the settings menu anyway let's actually get started with making the settings menu work so i'm actually opening up the settings menu and as you can see here this is the settings menu we're going to be working on and if i just select the tabs container and go to the inspector and change the current tab i can choose which settings i want to show such as the audio the game player the video now i'm not going to be showing you how to make this interface for the settings menu because of time limitations and as you can see it's made up of a bunch of different buttons labels and sliders so i'm actually going to be leaving a link to the github project in the description where you can actually download the starting project and then actually download it and follow along with the video and you can actually access the settings menu scene here and go and look into all the nodes that make it up if you want to you know know more about it in full detail but yeah that's actually good coding so to actually make this implementation this implementation of the settings menu work i'm actually going to be using multiple scripts and one of the scripts that i'm going to be using is a save script so i'm not going to go into full detail here so you can pause the video here to copy the code or if you already have a settings save script then you can modify your save script to be something like this but i'll just briefly cover it so at the top we're setting a path to our save file as a constant we're getting a variables that we're calling game data which is an empty dictionary on already we're doing load data which is a function here that we're doing var files equal to file.new and then we're checking if our save file actually exists with this line of code here if it doesn't exist which is uh the case here if it doesn't exist we're going to give the game data the default values for our settings so such as the full screen on which is going to be set to false by default be sync on to files by default and so forth so this is where you would define all the settings that you want to actually be able to adjust now like i said i'm not going to be covering all these settings just some of them but basically it's going to set these as our game data defaults uh if the uh save file doesn't actually exist and then we're saving the data which is another function where we're doing var files equal to file.new we're opening our save file and we're writing to it and then we're storing the game data as us we're using the store vars uh line code right there and then we're closing the file since we're done with it that this all happens if the file doesn't exist if it does exist and we're opening the save file we're reading the save file and then we're sending the game data to the file.getvar which returns the next variant value from the file so all right that's essentially how it works and then i can do file that close to make sure that we actually close the file since we don't need it anymore so that's how the save works now let's actually add our script to our settings menu so go ahead and go to your settings menu scene select the settings menu and attach a script to it i'm just going to call it settings menu and then make sure that it's empty and then it's going to just be saved in my gui folder you can save it wherever you want and you can name it whatever you want in your case but it is a pop-up so it extends pop-up and then just to get started i want to actually get a reference to all the sliders and buttons that i'm going to be using for the settings so i'm going to start with the video setting buttons so i'm just writing the comment video settings so i know that these are the video sending buttons and then i'm just getting a reference to all those different buttons such as the unready var display options button and then we're actually getting the reference to it so dollar sign display options and then autocomplete should help you get the rest of the path for it as well so we want to do the same thing for the rest of the settings that we want to set and in this case i'm only going to pick a couple like i said so on ready var let me actually see which ones i want to set so in this case i'm going to do display mode vsync and bloom i think that should be good enough for the video settings so yeah let's go with that so we're gonna do unready var vsync underscore button is equal to dollar sign bsync button autocomplete should give you the option to just you know select the path reference and then on ready var bloom button is equal to dollar sign bloom button autocomplete should help you yet again and so forth so just keep doing this for the rest of the settings that you want so now i'm going to do the audio settings and for the audio settings i'll do the master volume slider so on ready bar master slider is equal to mass dollar sign master volume slider and ready var music slider is equal to the music slider so just get a reference to it and make sure that it's actually getting the right reference and then those are all i'm going to set up for the actual audio settings i don't actually have sfx for this or sound effects for this project here so i'm not going to worry about that you can set it up on your own but for the gameplay settings we're just going to do on ready var va fov val to get the and then get the reference to it and then that's the label for rfov showing the amount of it and then i'm ready bar fov slider which is actually getting the reference to the actual fob slider that we set up then we also want to get the amount sensitivity value so on ready var mouse sense value and for some reason autocomplete's not giving me the actual path so i can just right click on the actual node and then do copy node path and then go back to the script and then simply paste it and make sure that the dollar sign is actually in front of it so that it actually doesn't give us an error and make sure that on ready is actually spelled correctly now with that i want to get the actual slider so on ready bar mouse slider sql two dollar sign and instead of writing the full you know notepad i can use autocomplete by just typing mousesense slider so we're getting a reference to all those buttons and sliders that we're going to be using for this video you would have to do this for all the options that you're going to set for your project anyway we're going to set up a ready function and we're just going to do paths for now and then we want to actually start connecting signals to actually make this work so we're going to select the display options button and then we're going to go over to the inspector node and connect an item selected signal to our script for that option there and then for the vsync button we're going to connect a toggle signal and then the same thing for our bloom button it's also going to be a toggled signal to our script they're all going to be passed for now so don't worry about it for now the code at least and then we are gonna do it for our audio settings so as well so open up your audio settings select the master vowel slider and then in this case we're gonna connect a value change signal to your script for it and then we're going to do the exact same thing for the music valve slider as well so this is looking all good to me um for that we're just missing the gameplay settings that we're going to be using in this case so select the fov slider it's also going to be a value change signal and connect it to the script and then now send slider and a value chain signal as well now uh the way the settings menu is gonna work is essentially it's gonna act as a controller uh for the actual settings so the actual settings are gonna be stored in a global script so go ahead and create file click file new script and then in this case i'm gonna call it global settings and then i'm just gonna go ahead and select where i wanna save it in this case i'm just gonna save it in my source folder you could go ahead and actually create a new folder if you want but i'm just going to save it in the source folder that i have here so just click create now we're actually going to make this another load so go to project project settings auto load and then as you can see i actually already have some auto loads here such as the music and the save file which the save file is really important to have as an auto load and then the music but if you wanted to play as soon as the game launches then you also want to have it so not a lot and that that's actually go ahead and add the global settings that's another load here and then click the add to actually add it and now the global settings is a singleton giving us access to it from anywhere in our scripts anyway for the actual code we want to start by defining a toggle full screen function so func toggle full screen and then we're passing a value to it this value is going to be coming from the actual setting menu so to actually set the full screen we do os dot window full screen and then set it equal to the value os is the operating system and then we're getting using the functions which has it has a function called window full screen when true the window is full screen as you saw there so that's how this works so we're going to get the value from our settings menu and then it's gonna be passed to this function and then we're gonna it's gonna be a true false value that we're passing and that's how we're gonna set the full screen to true or false anyway we wanna do something pretty much the same for our vsync option as well so funk toggle vsync we're passing the value as well and then this is also part of the os so os.bsync enabled is equal to value it works just the same way essentially as well so when it's set to true vsync is enabled when it's false it's disabled and we're passing this value yet again from our settings menu then the next setting we're setting is the bloom i believe yes it is so we want to do funk toggle bloom passing the value yet again but this one's a little bit different because this isn't actually part of the os it's actually part of the world environment or our environment so if i go to my world environment which is actually its own scene in my case and i actually go into the environment you will notice a property called glow which is set to default but it disabled but if i enable it and actually have a value for the balloon it's important you actually have a value for the bloom otherwise there won't be any bloom um we the way we're going to make it work is by enabling and disabling the glow and yeah that's how we're gonna actually make this work so to make it actually work in the actual function we're gonna use a signal so uh let's actually define the signal that we're gonna use so at the top of our global settings we're going to define that custom signal so signal bloom toggle and then we want to actually pass a value with this signal so in the actual func toggle bloom function we're going to emit that signal so emit signal bloom toggled and we're going to pass the value we're getting from the settings menu when that signal is submitted passing it therefore to our world environment as well and to pass it to my world environment we want to select the world environment and actually add a script to the world environment as well and i actually already have a script for the world environment so i'm just simply going to load you in your case you will have to create it or if you're using the starter project then you can just load it as well anyway here's the code we actually need and for some reason we're getting an error uh here and i think it's let me see global settings isn't declared in current scope it says at the bottom i think it's just an issue with the naming of the singleton so yeah so it's global settings with the s capitalized so just fix that and it should get rid of the air and so we're doing global settings that connect and we're connecting the boom toggle signal to ourselves and then it's gonna call the on bloom toggle function when that signal is emitted and we actually don't need this co line of code since we're not setting the brightness in this video and we don't need that function as well and like i was saying earlier if i go into the environment properties here and i go to glow we select the enabled property there for the globe by doing glow enabled so we're just doing environment that glow enabled is equal to true which is the we're getting that by passing the settings value which is going to be true or false in the signal which is going to pass that value to the bloom toggled function on our environment or world environment script and yeah that's a little bit you know hard to explain it or understand but uh hopefully you kind of understood what i'm saying there but yeah that's how it's gonna work in this case now we're actually going to let's see what else they're setting so the next thing is are the audio settings so for this it's pretty straightforward to actually set up as well so we actually just want to go to our audio and there's an audio tab at the bottom and we want to mess with the buses so we want to add a couple bath different buses by clicking the add bus button there and we can rename them so we're going to have a music bus and an sfx bus we can choose the parent upset bus by clicking the drop down so the parent of our music is going to be the master the parent of our sfx is going to also be the master you can set it to something else for example the sfx there you can set the music to be the parent but in this case we wanted to actually be the master and if i open up my music scene and i go and select it and go into the expect inspector you will see that my volume by default set to zero and then it's set to auto play when it's loaded and the most important option here to actually get this to work is the bus option there we wanna set it to music so now if i enable plane it will actually play you know the music but if i actually adjust the volume on the music bus it will actually affect the volume of our music so that's how we know that it's actually working now let's actually reset that value for the music bus here and yeah i think that's close enough to zero and then another thing if you change the volume for the master bus you will notice that it also has an effect on the music bus because the music bus is a child of the master bus essentially so that's essentially how the bus system works in the dome now let's actually click this button here and then do reset volume instead of manually adjusting the slider there to try and reset it to zero and then let's go back to our global settings script and make sure that we turn off plane so that music's not constantly playing and actually let me check things here so yeah we want to set a function up in our global settings here so go back to your global settings and then do func update master values whatever we're going to call it and in this case i'm actually going to name the value we're passing val just so that i know it's actually the volume and then i'm going to do audio server and the audio server it has different methods here the one we're interested in is the set bus volume db which takes in a bus index and a volume value so let's get let's use that method so audio server that's set underscore bus underscore volume db we want to get the bus index so by default the master bus is index zero the following bus after that is one and then the next one is two so it kind of looks like a an array sort of so it starts at zero and then increases by one so since we're adjusting the master bus we are specifying zero and then we're passing the valve value we're getting from our settings menu and that pretty much does it for that you can actually go ahead and set it up for the music slider if you want and the sfx slider as well or you could even refactor the same function here to also take in the index that you want to adjust and the volume and just use this one function here you can go ahead and do that on your own i'm just gonna do this for the master bus in this video anyway the next function we want is the update fov function which we're also gonna have to use a custom signal for so at the top i'm gonna define a signal called fov updated and then we're passing a value with the signal so in the actual function we're going to do emit signal and we're emitting the fov updated signal and passing the value with it as well so it's similar to our toggle bloom and the reason we're doing this is because the fob is a property of the camera so we don't actually want this to affect the start menu or start screen camera we just wanted to affect the camera for our player in my case so i'm going to actually uh go to the player scene and then into the player script and as you notice at the top we're selecting the camera already and then for the function ready in our player script we're just going to do global settings dot connect and then we're going to connect that signal so fob updated connecting it to ourselves and then it's going to call the on fov updated function make sure it's actually a string so it's going to call this function when the signal is submitted so let's define that function at the very end so func on fov updated make sure that we're passing the value with it and then inside the function we're just going to do camera which we're selecting with the unready bar up here that you see and then dot fov because that's the property that we want to change is equal to the value we're passing with the signal and that should actually take care of that setting now let's actually do the um the next setting which is the most sensitivity so funk update mouse sense that's what we're going to call it pass the value with it and then we're also going gonna have to emit a signal with this uh so let's define that signal at the top so signal mouse sense updated and then make sure that we're passing the value with it as well and then in the actual function we're emitting that signal so emit signal mouse sense updated and passing the value with the signal as well and you could do it in a way where the sensitivities you know changed for everything i'm just gonna have it affect the player so to do that you know to actually make use of this code we're going to go back to the player script and then scroll up to the ready function again and then we're going to basically do the exact same thing we did earlier so global settings dot connect and then connecting that signal so mouse sends updated to ourselves and in this case we're gonna call the on mousesense updated function which we're defining at the very bottom as well so funk on mousesense updated make sure we're passing the value yet again and then all we're gonna do here is manipulate the mouse and sensitivity that we're defining at the very top over here as you can see so we're going to directly manipulate that value so mouse underscore sensitivity is equal to the value we're passing so that actually should set it all correctly for all the settings that we're actually gonna um you know make work in this video so now if i go to my settings menu we can actually make all these functions uh work from our settings you know from our global scripts and or our global settings script if i can english so anyway in the on display option button we're just gonna do globalsettings.toggle full screen so we're calling the toggle full screen function from our global settings and then we're passing true if the index is equal to one else false then for the next setting uh the vsyncs uh you know setting so when this button is toggled so we're gonna do global settings dot toggle these things we're calling the toggle beasting function from our global settings and passing the button press value into it which is also going to be true or false and then we're going to do the exact same thing for the bloom uh button toggle function so global settings toggle bloom passing the button pressed value then the master valve slider value change function is going to be global settings dot update master ball passing the value to it as well same thing for the music nsfx like i said though i'm not going to go ahead and do that in this video i'm just going to do the master volume and also another thing i quickly forgot to mention earlier is i actually define the min and max values for all the sliders so you want to make sure that you actually go ahead and do that anyway we do the exact same thing for the fov and the mouse sensitivity so global settings the update mouse sends passing the value global settings to update fov and passing the value and another thing i almost forgot to mention is we're actually having a label for the fob slider and the mouse sensitivity slider so we can tell what we're actually setting it to so we actually want to also adjust the text of that so fob valve dot text is equal to str and then value the release and then we also want to do this for the mouse sense slider value label as well so mousesensevalve.txt is equal to str value the reason we're doing str value is because by default value is a int or float value and str converts it over to a string that way we don't get any errors anyway we're going to use the popup centered function to actually show the settings menu from our start screen when the settings button is pressed and this is the same thing for our pause menu so if i actually test this out and click the settings button as you can see it actually shows and we can actually start messing with some of the settings here so if i go to full screen now it's full screen now it's windowed i can turn on bsing you can't really tell since i'm not actually displaying the fps but take my word for it that's actually working bloom turn it on off you can see a slight difference and then with the master volume here you can see that it is in fact actually changing the volume for our game so everything actually seems to be working which is good and then if we go to the gameplay settings here we can adjust this as well now there is a slight issue when i actually start the game you will notice that the settings weren't actually saved in the settings menu yet some of them are actually still being applied to the game but as you see you know it's not showing that the vsync is on or that the bloom is on in the actual settings menu same for the volume and stuff like that so but as you can see it is actually affecting the game already such as the fov and that so they are working it's just not getting saved and this is where our save script finally comes into play so all this is actually going to be used now so all the data in our game data all those setting defaults are going to be used now so let's actually make use of them um now so let's let's actually go to our ready function in our settings menu script and actually write the code we need so we're going to start by doing display options button dot select one if save that and then game data is what we want to access from the save script and then we want to access the that full screen on from the dictionary so we want to access the value from that key and i'm using that notation here but you could also use square brackets and then the string with the name um it's just you know personal preference and stuff like that so i'm just going to use that notation instead so i can just leave it like that so in the else it's going to be zero so the one is going to be selecting the full screen because select works with an index and then i'll say zero so if i actually select the display options button and show the actual menu as you notice selected is by default set to zero which is the window option if it's set to one it's full screen so that's essentially what we're doing here it's set to one if full screen is on else zero so that's gonna save what that setting there shows for our settings menu and then to actually you know make sure that the setting is applied and the next time we launch the game we are actually going to go ahead and have to write this code manually here because for some reason the select doesn't actually trigger the the signal that we're using to actually toggle the full screen so we're gonna manually do globalsettings.toggle fullscreen and then we're gonna do save that gamedata dot full screen and then underscore on and then that should actually work how we actually need it so with that that should actually work for our full screen settings now the next settings we actually want to set is going to be the vsync button so vsync.pressed is equal to the save the game data and then the dot vsync on so yeah i'm pretty sure that's what i called it so yeah then we're getting that key uh we're getting the value for that key by doing this and that's all we need for that now the bloom button is gonna be the exact same so bloom button.press this equal to save that gamedata.bloom on in this case that's what we called it and then let's get our audio settings going so master slider that value is equal to save dot game data that master underscore val is what i called it and then lastly we're gonna do the fov slider that value is equal to the save that game data dot and then i called it fob i'm pretty sure yep i did so that's good you got to make sure that it actually has the exact name otherwise you will run into some errors and then the last actual setting is the mouse slider dot value and this is going to be equal to the save that game data that mouse sends and yeah that's gonna basically trigger all these signals on ready and make use of all these functions that we have here with these signals here and uh the reason we wrote the fob valve.text is because when you know that signals can be emitted when it's unready so it's also going to change the text already as well anyway to the last thing we need to make the settings menu fully work is we want to go to the global settings and then we want to actually start saving those settings so for the toggle full screen it's going to be safe.gamedata.fullscreen on is equal to value and then we want to actually save it so save that save data to actually store that new value and make sure that we're actually saving it to the save file and then we want to just go ahead and actually do this for the rest of the functions as well so the toggle vsync is going to be saved.gamedata.vsync on a sequel to value and we're saving yet again save that save data and then just continue doing this for the rest of the functions making sure that you're using the proper name for the given setting and that you define in the safe script so yeah and then you're actually making sure that you're actually saving or calling the save that save data function so that actually stores the new value so uh let me just make sure that i'm getting the right names okay that should be good and like i said i'm using that notation you could use square brackets and then the string of with the name instead it's up to you but yeah just make sure that you're you know setting the save that saved data for the given setting with the new value and then actually storing that new value by doing save that save data and then the last one is the update mouse sends so yet again save that gamedata.mousesense because that's what we called it in our save script it's equal to the new value and then we're saving that value by doing save that save data now if we finally test everything out everything should actually be working so if i actually minimize the screen a little bit and then i do full screen and now it takes up the full screen set b sync 2 on set bloom 2 on go over to the audio mess with the masters value slider mess around with the fov slider and then let's do start game and as you can see it actually saved those settings uh so if i go into the settings menu again this yes you see it's set to full screen vsync is on bloom is on and the master volume is set to what we had it set before and then we can mess around with the fob as well and the sensitivity for our mouse and so forth and let me actually resume the game and now you see those settings did take effect and then if i actually quit the game and actually relaunch the game it should also have those settings saved when we launched the game again and as you saw it did set it to full screen automatically and all the settings we had on and everything is working so with that you finally have a settings menu complete so hopefully you found this video helpful i know it was a long one but like i said uh hopefully did learn a thing or two from it and it was beneficial and helpful to you guys anyway with all that said the link to the starter project and the actual final project will be down in the description where you can download it if you want and like always if you like the video make sure you leave a like and consider subscribing and i'll see you guys in the next one

Channel: rayuse rp

Views: 22,842

Keywords: gamedev, indie gamedev, indie game devlog, how to make a game, godot, godot game dev, godot tutorial, godot engine, godot 3d game, godot 3d tutorial, godot 2d tutorial, godot top down, rayuse rp, top-down games, making my first game, godot multiplayer tutorial, godot network multiplayer, how to make a multiplayer game, godot 4, Exploring Online Multiplayer With Godot 4, godot 3.4, GoGodotJam, How To Make a Settings Menu In Godot #GoGodotJam, godot game engine

Id: be-Xjg8oPbQ

Length: 33min 8sec (1988 seconds)

Published: Mon Nov 08 2021