Simple Level Select Screen in Godot 4

hey guys welcome to my first ever Godot 4 tutorial and in this tutorial I'm going to be showing you how to create a simple level select screen for your game so without further Ado let's jump right into this video now before we actually begin I want to just mention real quick that any 10 of you guys are actually subscribed to the channel so make sure you hit that subscribe button and turn that Bell notification on because it definitely helps the channel out and it's free anyway with that said let's actually make this work now I am using the dough for beta 1 for this tutorial and as you can see here I have the three scenes that we're gonna need for this tutorial already created which is a level select screen scene and the vote buttons uh scene here and the actual level scene so we're not we're not going to be focusing on on the actual crew you know how to create the layouts for example for like the level select screen but rather we're going to be focusing on how to implement the logic needed to actually get the level select screen to actually work and function but I will briefly describe how the rough layout of everything just so that you have a better understanding of you know how it all works so essentially uh for the level select screen it's just a control node which I rename to level select screen as a color rect and a merging container as a child of it and then it's a child at the margin container there's a v-bucks container and then it's a child of the v-bucks container there's a label and a grid container like I said we're not going to be focusing on on the layout stuff but rather on making the level select screen work if you want if you're more Curious on how everything is set up specifically and what properties I changed in the inspector then you can actually go ahead and download the GitHub project and the link will be in the description so there you will find the completed project as well as the starter project if you actually want to follow along with this tutorial and like I said uh you can find everything that I did to you know the layout and the Styles there such as the default theme that I have applied to this but yeah we're not going to be focusing on that anyway that's the rough explanation of the level selection then for the level button scene it's essentially just a normal button which I have actually gone ahead and added a most entered signal and a mouse uh exited signal to the script so I attached those to the script that I already created which inside there there's some code already and this code you don't have to worry about at all it's essentially just extra code that I added just to make the the button a little bit more fancy and that's boring so essentially all it's doing is we're checking if the mouse entered or the mouse exited if the mouse did add that it caused the grow button function which essentially just plays an animation that scales are buttoned up if we're hovering over it and then it scales it back down if we're not hovering over it so I've actually launched the button scene you will see what I mean so if I hover over the button the button grows and when I'm not hovering it it shrinks back down that's basically all that code does you don't have to worry about it to actually get the level select screen to work so just don't worry about it then for the level scene itself is just another control node in this case with a color rectus a child and a center container as a child and then as the child of the center container we have a label which just says level one and then we have a back button that's the child of the level one directly now this back button is just an instance of My Level button and basically the way the level button works is it's basically gonna check when it's pressed and when it's pressed it's gonna call well it's gonna call a function that's going to change our scene to the specific level that we pass it so we're gonna check if our button is pressed and then we're gonna do change scene to the scene we want that's essentially what we're gonna do and that's the first step we actually have to do to make this work so go over to the level button scene or create one if you haven't already and then pretty much attach a script to your button and then inside that script what you want to start by doing is you want to actually Define the path that we're going to use to change the scene and in this case we want to use an export variable so since we're using guitar 4 we want to use at and then export underscore file because we want a file path in this case so it's going to be an extra underscore file VAR and then the name of this variable is going to be level half now with that we should have a property in the inspector so let's let's set that up and then we want to add another function in this case we want to add our press function here so we want to connect the Press signal to our script so go ahead and do that and that creates this on level button press function and inside this function here what we want to do is first check if we have a level path so to do that we're going to do if level path is equal to no if this is the case then return so basically if there's no level path we're gonna return from this function this is a guard Clause to prevent getting an error essentially so if we do have a level path then we want to do git tree Dot and in this case it's going to be a change scene to file and then we want to pass the level path two to this method here so so that's actually all the code you need to get the button to work how we want it so if we actually select the little button and go over to the inspector you will see that we have a level Path property that we can Define and let's actually Define that for our level seen here for our back button so let's go ahead and open up the level 1 scene select the back button and then for the level path here we basically just want it linked one to get the path back to our our level select screen so go ahead and select your level select screen and now we basically pass the path of our little select screen to our button here which when we click the back button is going to take us to that scene so if we do test it out here you will notice that it does work but we don't actually have any levels yet because we haven't added that functionality to add that functionality we want to go over to our level select screen and rather than adjust instancing in a button here a level Button as you can see here and then linking the button by manually specifying the level path here we're going to do that dynamically and we're going to do that through code so let's just delete that button we added and then select the level select screen and add a script in this case it's going to be called the select screen we're going to make it be an empty script and make sure that we're saving it on the same folder that we saved our level select screen in this case is the GUI folder so inside this script we basically want to start off by getting a our button because we're going to need that button to instance in the buttons we need for the given levels we have so const level button stickler to preload and then our button same so in this case it's the level button.tscn then we want to use an expert variable so in this case we're going to use an at export derp to an add expert there is basically an expert variable where that we're using to get a directory so a directory is basically a folder so we're using this to define a folder path essentially so VAR after path because we want to get the path to a directory or folder whatever you want to call it then we also need an unready to select our grid container because our grid container is going to be acting as the parents of the buttons we're going to instance in so we want to do at unready since we're using ado4 remember and then grid is what we're going to call it is equal to dollar sign grid and then it should actually pop up to autocomplete it there we go then we want to actually add a function to read a directory and then read all the files inside inside that directory to do that we're going to create a function called func get levels that's what we're going to call it and then we're going to pass a path to it like so and then inside here we want to start by doing VAR derp is equal to new or actually it's equal to the directory dot new so we're basically specifying that there is going to be a directory so then we want to open a directory so if there dot open and then our path if they're not open is equal to okay so that opens so dirt open the open method here basically returns an error or okay on success so basically by doing if there that open path is equal to okay that means that we can we did find that directory and we can open it we successfully open it basically so then we want to read that directory to do that we want to dot list there begin Lister begin initializes the stream used to list all files and directories using the get next function so that's basically going to begin the process to you know get all our files then we undo VAR file name is equal that get underscore next like so then get next basically Returns the next element file or directory and the current directory so it makes sure that we're getting the next file essentially then essentially we want to use a loop to essentially Loop draw the files in that directory to do that we want to do while file name is not equal to an empty string if this is the case for now we can do print file name just so that you can see that we're getting the act all the files and then we can do file name is equal to their dot get next and again we're doing that get next to get the next file in the directory outside the loop we can then do the dot list there n so this just pretty much tells our current stream to close essentially then after all that we want to write an else so basically if we couldn't successfully open the directory using the path we passed then we're just gonna print and error curd when trying to access the path you can have it say something else this is what I'm just gonna set it to so that pretty much handles if we can't actually find the directory we're trying to open so now we actually need to create the levels for each essentially every level we have in our levels folder so to do that we want to write another function so in this case it's going to be funk create level button that's what we're going to call it and then basically we want to pass a level path to it which is going to be a string and then we also want to pass a level name so that we can actually set the button text to the level name so it's also going to be a type string like so and then inside here what we want to do is bar button is equal to our level button constant that we set up at the top that instant G8 so that instantiate is the same as that instance incidental 3.5 so we're instantiating our button and then we want to set the button that text equal to the level name and then the button dot level path which is the variable we set back in our level button script to get the path to the scene we want to change to equal to the level path that we're passing to the function here then we want to add this button to our grid so grid the ADD child button like so so now we want to call this when we're reading our files or getting our files and that's right after the print statement that we wrote so right after the print in the get levels function we can do create level button and then we want the path to the uh to the level to the file that we're getting essentially and to do that we're going to use the format string so we're going to do quotes mod s slash mod s and the mod s is basically a placeholder and then modulo and then square brackets der dot get current there so that current there here basically Returns the absolute path of the currently opened directory so it's basically going to be risk slash slash and then the folder we're getting essentially so in this case it's going to be res dot slash slash and then levels which is what's going to be replaced here this is so the first Model S is going to be replaced by this and then the second mod s is going to be replaced by the actual file name so basically our level name and then we also want to pass the level name so it's essentially just the file name so this right here is basically constructing our file path so that we can pass it to our create level button function and then this is the actual name of the file that we're passing as the level name the last thing we have to do here is just create our function ready and inside our function ready we just want to call the get levels function and pass our directory path to it like so now it should actually work but right now if we launch it it won't because we actually need to assign the derpath export variable so select the level select screen and the inspector you will see a dirt Path property which is set to null click on the little folder icon and then select the levels folder so now with that if I actually go to 2D and then I launch this it should actually work and for some reason we are getting an error here so let me just see set the index level on base with value oh it's because I believe I called it level path not level let me just make sure by going to the levels button script yeah it's called level path so make sure that you actually write the right variable name so level path is equal to level path now if we launch it it should work so there we go we actually have a button for the level that we have in our levels folder now it does include the underscore and the dot tsdn if you want to remove that from the button text you can actually go into the create level button function and then where you're setting that text you can do level underscore name that and then you can do trim suffix which is a method that basically you can do exactly what it says trim the suffix so in this case we want to trim the tscn so by doing that that gets rid of the tsem part of the text so now it's just level underscore one as you can see here and then if we want to get rid of the underscore we can do that replace what do we want to replace we want to replace the underscore what do we want to replace it with we want to replace it with a space so now if I save that and launch again and then there we go we just have a button this is level one so if we click on this it's actually not taking us to the actual level which it should have for some reason so let me just see whatever we have research file unsupported format character foreign let me just make sure what I'm doing here is correct all right that seems so good and it was printing the actual uh file correct file name I believe so let me just see some mod S I don't think it's because I capitalized it but let's just make sure so as lowercase s and then monitor okay so this should be fine and I am getting the next file by doing this yep I think it should be good so let me just retry it okay so yeah the issue was because this does need to be lowercase s not capital S so I make sure that it's mod zorki says slash mod work access but yeah that actually as you saw does get our let's level select screen to work so now we are taking to our level and then we can click back to go back to our level select screen now if we want to add more levels basically what we can do is Select our level one here and then we can right click and then do new inherited scene then we can just go ahead and rename this to level two and select the color wrecked to go into the inspector and then just change the color we can select the label and then change the text and the inspector to say level 2. then we can just save making sure that we're saving in our levels folder and then it's called level underscore 2. save and there we go and then let's add another one while we're at it so let's do the exact same thing new inherited scene this is level three change the color red color to an orange I guess change the label to say level three and we can save and the levels folder again now if we go back to our level select screen and then launch it you can see that we have our three levels now now we only have two columns here but if we want more than two columns we can select the grid container and then the inspector change the columns from two to three and now if I launch it now we have a three column layout that works so yeah that's pretty much all you actually need to get a level select screen to actually work and then you can just add all your levels to your level folder and then it automatically will add it to your level select screen so yeah hopefully this video was helpful and if you enjoyed the video make sure you leave a like and consider subscribing and as always I'll see you guys in the next one until then have a wonderful day foreign

Channel: rayuse rp

Views: 7,194

Keywords: Godot, Godot tutorial, gamedev, godot 2d, godot 3d, godot 4, godot multiplayer, rayuse rp, godot 3d games, godot 4 beta, godot 4 released, godot 4 release date, godot 4 features, godot engine, Simple Level Select Screen in Godot 4, game development, godot game engine, godot 4 tutorial

Id: B6kEaQQ71lQ

Length: 21min 58sec (1318 seconds)

Published: Sat Sep 24 2022