Project Setup and Intro to Godot (Godot Retro Text Adventure Tutorial #1)

in this video we're gonna start our text adventure game project i'm gonna go over everything you need to know to get started using godot even if you've never used it before so if you've never used godot before this is a totally beginner friendly series i will expect a little bit of knowledge about programming you don't have to be familiar with gd script per se but you'll want to be somewhat familiar with core programming concepts and have looked at gd script before if you haven't already i highly recommend going through godot's official tutorial i'll put the link to that in the description below but once you've done that video or that tutorial you'll have everything you need to follow along with this series in this video all we're going to get to is creating our game so it's going to look like this you're going to have a game window that has a area to see responses and game information that's happening and then an area for us to input text so we're going to cover everything you need to know about how to use godot how to use nodes control nodes how to set up this kind of game window how to style your boxes and make something that looks nice and has a retro aesthetic like this and will be set up for future videos where we'll start actually implementing functionality into our game let's get started so what we're going to do first before we get to actually creating our game is we're going to give a brief overview of how to use the godot engine and all the stuff you see here so if you've used godot before you can skip this part i just opened up a completely empty project with nothing in it so you can skip to the next part in the video but otherwise let me show you how to use godot and explain some of the stuff we see here on the screen so first we see all these options up at the top here you don't really have to worry about them right now if you need to go back to the project select screen you can hit project and then quit project list and besides that we'll kind of cover these settings as we go on the left side here we see our scene tree so the way godot works is godot is built or your godot game is built up of nodes and those nodes are related to each other in a tree structure so at the top of your game you have one root node and that root node has child nodes and each of those child nodes can have their own child nodes and it keeps going on and on and your tree can be as tall as it needs to be and whenever you're talking about a group of nodes so a parent node with some children you're talking about a scene so in godot you have individual nodes and then collections of nodes are scenes and a scene is also a tree so your game is a tree of nodes you can also think of it as a scene but each individual sub-tree that makes up that tree is also a scene so scenes are ways or how you make nodes and collections of nodes and godot really reusable and that'll make more sense in just a few minutes when we actually start making our game here but so this is where you add scenes or nodes to your to your game and how you interact with them is this in this the scene section up here down here in the file section is it shows all the files that exist in your games project folder in godot it always calls it res this is just a localized path for the folder that your game exists in because it basically it only shows you the folders it only gives you access to the folders and files in your game's project so that you're not it doesn't uh you don't accidentally change something you didn't mean to and then over here on the right side of the screen we have the inspector tab in the node tab both of these show you more properties about the currently selected node because we don't have a node selected there's nothing here right now but we will work with that in a second then up here at the top there's 2d 3d views that you can switch in between the script editor view you basically won't usually need to press these buttons it'll automatically change for you depending on what nodes you're working with up here we have buttons that let you run your game so you can hit play or command b is the shortcut or control b if you're on windows to play your game if you want to play a specific scene which is a very powerful and awesome feature of godot so if you don't want to run your whole game but just want to play one specific small scene like you have a player that you just want to run around without having to run your entire game you can hit command r hit this play scene button command r control r and you'll be able to play and interact with that specific scene that collection of nodes instead of the entirety of your game so that's about it for a basic overview of godot we're going to go through all this more later on as we get through the series you've also got some buttons down here such as output debugger this output tab is the most common one you'll need it just kind of shows output from print statements that your you might have in your game but you'll get more familiar with this as we go so with that i think we are ready now to start actually adding nodes to our scene so we talked a little bit about what nodes are and what scenes are um there are three different types of nodes in godot there are 2d nodes which are just node 2ds there's 3d nodes which are called spatials so a spatial and a node 2d are equivalent to each other and then there's control nodes which are ui nodes they're user interface nodes and you can see all that here so under our basic default node we have a spatial which is any 3d node and a node 2d so think of spatials as node 3ds and i think they're actually going to be renamed in node 3ds and gdo4 so it's a little confusing but spatials are node 3ds no 2ds are for 2d games and then control nodes are for user interface elements and we can expand any of these and see more options under them these are just the kind of root nodes so under node 2d i have sprites i have particles i have cameras collision shapes et cetera good o comes with all these built-in nodes that will do things that you need so you don't have to implement all of it on your own same thing under spatial we'll see also cameras also collision shapes but these are in 3d instead of 2d so it's important you're using the correct node for what you want to do because our text adventure game is going to be primarily text and user input we're going to be doing a lot of work in this control node which is ui nodes again so if i expand this we'll see a lot of user interface nodes such as pop-ups containers rectangles graphs lists labels etc things that are meant to give options or user interface elements to the user so this is where we're going to be spending a lot of our time and to start our game i'm going to create a control node so i'm not going to select any of the sub nodes i'm just going to select this basic overarching control node and hit create and this is going to be our game and you'll see now all of a sudden we have a control node right here on our left it's the only node in our scene or in our game and then on the right here you'll see there's actually properties that we can change and edit about our control node now that we actually have a node selected so the first thing i'm going to do is double click on this control node you could also right click and hit rename but i'm going to double click it and i'm going to call this game this is going to be our game scene so i'm just changing the name of our node and this is going to be the root node for our game for now and then i'm going to hit command s or control s or you can just come up to the scene button up here and hit save scene either work i'm going to hit command s and we're going to save this just as game and you'll see all of a sudden i've got a game.tscn which is a scene file and our file system here so when you have multiple scenes you can double click them down in your file system to open them up up top so we have our first godot project and we have our first node added now we're ready to start adding some more nodes and kind of talk through how to use control nodes in godot and we will start and format our game so i'm going to explain some things about how control nodes work as we start adding more to our game and it's okay if you don't understand them all right now it'll make more sense as we keep going but control nodes are pretty smart about realizing the width the dimensions width and height of our game so if i select our control node and go to layout up here i can tell it automatically how to layout we want this control note it's going to be our our game so we want it to be the full rectangle to take up the full screen you'll see this little light blue line here this is your camera or your window size and so if i hit full rectangle while our control node is selected our game node you'll see that all of a sudden our game has expanded to fit our entire window so that means that we have told our game hey fit the entire screen and then if the screen expands expand as well to match it so if i hit command s to save now we'll have a game so this is good except there's just nothing really going on so we're going to add a few other control nodes now to start formatting our game and the thing we're going to do in this first episode we're not going to build really any functionality but we're going to build out our windows so it looks like a text adventure game and we've got the pieces we need to start implementing functionality later on so let's talk about some of the control nodes that we can use in godot if i hit this plus button this is how i bring up the window to add new nodes so once i do this i can add any of godot's built-in nodes here and the node that i want to add now is a panel container so containers in godot are basically control nodes that format all of their children automatically you can manually control control nodes so if i go up here and hit the move mode and then move our control around you can see i have control over moving it i'm going to undo that when you have a container node you cannot move its children manually the container node automatically determines the size and position of its children so what we want is a container node that's going to contain all of our game elements and will help automatically determine how those elements are laid out so we're going to start with a panel container so i'll hit container and come down into panel container another thing you can do though because it's confusing and difficult to remember where everything is is you can just type up here so if i start typing panel container we'll see right here and it's important don't use a panel we want a panel container so if i do a panel container i can also come over to our layout and hit full rectangle for this one and we'll see we now have this panel that extends for the entire width of our game this is good but it kind of looks a little weird right now we'll change in a bit the reason we're using a panel container is because panel containers come with this background and you can edit their panel style to make them look differently so we want to do some coloring and formatting of what our game looks like that's why we're using a panel container as our root now the next thing we want to do is make sure our children aren't touching the edges of our screen that kind of looks bad and it doesn't sit well with different monitors you always want to leave some safe space at the edge of your screen so what we're going to do is add as a child of our panel container a margin container so what a margin container does is it lets you set margins on each side that children will be confined to so you see our margin container is slightly less big than our panel container and we below as a child of our margin container we'll change the margins in a second we're going to add a v-box container so what a v-box there's two types of um box containers you'll see there's an h box and a v box a v a h box container will let you stack items horizontally so it'll create columns and you can specify the width of each column you can do some customization within there but it's a simple way to format items in column formation however we want to stack things vertically in rows so we're going to use a vbox container and if this is confusing again i promise as we keep working with these they will be a lot more familiar so i'm going to add a vbox container here now we haven't renamed our panel container or margin container and i think that's fine but when i'm using vbox containers and hbox containers it can get a little confusing so i like to rename them and so i'm going to rename our vbox container as rows because i think it just makes it a little bit easier for me to remember hey this is the overarching container that is determining the rows how our elements in our game are vertically set up how they're laid out so we've got this rose container now and if i select our rose container in our margin container you see this orange box their their dimensions are the same but what happens if we take our margin container and change these margins to be 20 on each side now if i select our rows container our rows element our rows node you'll see that it's much smaller because there's a margin of 20 pixels being applied to each side so if i make this 40 on each side then it'd be even smaller we'll stick with 20. and again i'm finding this under custom constants each container or ui element will often have a custom constant section where it has uh items that are unique to that specific control node so our margin container has custom content constants that let us determine the margins of each side so let's go through and set these to be 20 again margin right top left and bottom okay so if i select our rows now we see we've got a pretty good margin on the side of the screen which is nice because now our ui elements aren't just going to butt up right to the side of the screen this is perfect this is exactly what we want but let's talk about our layout for our container here we want to have a big section up here that's going to take up most the screen and this is going to be where all the interesting stuff is happening it's going to show the player what they've previously inputted what they've typed in and it's also going to display any responses from the game so we're going to need one big panel up here that is going to contain the information from the game and then we're also going to want a panel down at the bottom where the player actually types their input so we're going to add both of those now and they're going to be children of our rows because again we are using our rows h or v box container here to lay these out vertically automatically for us we don't have to code any of the layout good always going to do it for us so as a child of our rows i'm going to come up here and hit the plus button additionally besides hitting the plus button the plus button man you can um hit command a to bring that box up control a on windows so you can either hit the plus button to add a child or hit command a i really like using hotkeys it's a little bit faster once you get used to them so i'll try and give hotkeys as we go along for each operation i'm doing so the child we're going to add of our rows is going to be another panel container because we want our history area or our game area to be slightly different colored so it's easy for the user to make out now the problem is that we've got two panels here but they look kind of the same we kind of want to differentiate from them so what we're going to do is use godot's built-in styling functionality of panels to change the color of what our game looks like so let's start with our background and i'll actually rename this to be background our top panel container so if i select this and come into custom styles you'll see that there's a panel element right here so we can modify this panel property to apply our own custom style to our background here which is what we want to do so i'm going to select this empty bun and just click it and there's a couple options for different built-in styles you can do you can add a style box texture if we had a background an image that we wanted to apply but we don't for now we just want to do a flat color so we'll hit style box flat and we're going to create a new style box flat here and you'll see automatically we've got this gray background let's make it something that looks a little bit that stands out a little bit less and if i come to background color here this little property in the preview i can adjust the background color and let's make it a dark gray not black but a darker gray so right about not quite black but pretty dark i think that's good so now we can see a little bit more of a difference between our panel up here our game info panel and our background and we're actually going to do the same thing for our game info panel so i'm going to call this and say let's call it game info and here we're going to come into our custom styles as well hit new style box flat and on this one we're going to make it slightly lighter not super light but a little bit lighter we can't really see it now so what i'm going to do we'll adjust this in a second there's a lot of different properties here on controls that are going to be important for us but right now the only one we need to know that we'll talk about is size flags so our rows container takes up all of this space here but our game info only takes up this much space and that's because by default these controls only take up as much space as they need unless they're told otherwise so one way we can change that and tell our game info panel here to take up as much space as it can is we can come into our size flags and we can hit expand on the vertical so you'll see both horizontal and vertical are fill what phil means is that you're telling this control hey take up as much space as you need but we don't want it to just take up as much space as it needs we want it to vertically take up as much space as it can so we're going to hit expand all of a sudden we see our game info panel expand to take up as much space as our rose container is going to give it so now we've got this and we see that this is a pretty good this is a pretty good color it stands out from the background but also kind of is just just nice gray so we've got our game info section now we're good to add our input area so in order to add our input area we're going to create another panel container so i'm going to select our rows and i'm going to hit command a or hit the arrow up there and i'm going to create another panel container and this is going to be input area we'll call it and so you see we've got a new panel container down at the bottom here and what we kind of want to do is make it take more space than this because right now remember our game info is saying hey take up as much space as you can we don't want our input area to take up as much space as we can if we set the size flag vertical to expand it would take up half the screen because both of these game info and input areas would be competing to take up as much space as they can so it would even out but we don't want this this is just an input area it only needs a little bit of space and so what we can do instead is give it a minimum size so if i come in direct here this is the rectangle properties you can set the properties for this this node now remember we said that containers determine the position and size of your rectangle so if you change these you'll be a little disappointed because they will get overridden by its parent if it is a child of a container node so we can change these i could change its size to be 2000 and it looks like it changed but as soon as i i toggle it on and off all of a sudden it gets set back because our container is really determining its size but what we can do that our container won't won't affect is set a minimum size and so we could give this a minimum size of say 40. and what we're doing is we're saying hey this has to take up at least 40 pixels at its height it has to be at least 40 pixels tall we could also do that for the x but we don't actually care right now the size that our container is giving it is perfectly fine so let's actually make this a little bit bigger let's do 60 and i think that looks pretty good and all of a sudden we have a minimum size of 60 here and even if we try and reset our size here it's always going to keep that minimum size even if we hide it and then show it again it's going to keep that minimum size so within when you have a control that's a child of a container you can't really do much with the position and size but you can change the minimum size which is a nice way to give elements a certain minimum height or width so now that we have a minimum size and we've got an input area that looks good let's go into our custom styles here we'll make a new style box flat like we have select this and we want this one to be gray too but just slightly lighter than the other grays i think uh let's i think that's pretty good so you can adjust this as needed and if you want to do an aesthetic that isn't gray you know you want to make purple and blue and green go ahead make this your own game for sure i'm just going to keep it at a gray kind of like this just to give it a simple old-school aesthetic so we've got our input area set up we've got our game and our container looking good one problem is that it'd look a little bit better if there was some more space in between our input area and our game info area so in order to do that we can come to our rows node here and as the custom content constant of a v box or hbox container there's a separation property you can set and this determines how much space there should be between each row it defaults to a very low number i think it defaults to like five or something and if i check it and put it at zero you'll see they just butt up against each other but we want a little bit more than that so if we set it to 20 that kind of gives a little bit more definition and i like doing 20 because remember 20 is what we said as the margins on the side so it looks consistent there's the same amount of space on our side margins as there is between elements and this is the really cool thing about godot's layout system because we set the separation to 20 you might expect that one of these elements is going to get smaller get pushed off the screen but remember we're saying we're telling our game info panel here to take up as much space as it can to vertically expand and so when our rows when we increase our separation what it does is it decreases the available room for our game info panel to take up so it just makes it push up or it makes it go up a little bit and take up less space because there's less available space for it to take up but it means that godot is handling lane outer components in a really nice pleasing way we don't have to do any of the hard work of coding our layout for us and we're letting godot's layout system take care of it so when you use containers in godot you lose a little bit of flexibility because you are letting them determine the size and the position of your child nodes of your control nodes but the nice thing that comes out of it is you get a really powerful and flexible layout system that's going to handle it for you so in this video we haven't set up any of our functionality but we have a game area that looks great it kind of has the aesthetic we want and we've gone over everything we need to know about how to start a project in godot and get our text adventure game going so this is going to be it for the first video and the next one we'll actually start implementing some functionality i hope this video has been helpful for you if it has a like and subscribe to support the channel are always appreciated we'd love to have you in our discord server you can ask any questions you have there the link to that to join is in the description and if you find my work helpful donating on buying me a coffee to help me be able to continue making great videos is always appreciated thanks so much everyone see you in the next video

Channel: jmbiv

Views: 43,847

Keywords: godot, godot engine, godot 3.2, godot tutorial, godot 2d, how to make a game in godot, game development, game development tutorial, game development for beginners, godot for beginners, game dev, indie game dev, how to make video games, how to godot, gamedev, godot game engine, godot text adventure, godot text adventure tutorial, godot text, godot input, godot user interface, godot control, first godot game, my first godot game, godot beginner tutorial, zork, zork tutorial

Id: wCI650TDhHA

Length: 23min 21sec (1401 seconds)

Published: Tue Feb 02 2021