Make your first 2D grid-based game from scratch in Godot

hello everyone so today we're going to be making a very simple game we're gonna cover grid-based movement collision detection kinematic bodies studied bodies and areas 2d which are the basic notes that you will need to make any 2d game with basic collisions so I have this empty product here with only the assets which you can download from the descriptions there are only four sprites and one font that I really like it's pixelated you can use it in many other places since you already seen the end product at the beginning of the video we have to set up the scene first so if you notice if I move the player here it's very very small in the screen so we need to make it zoom and also you see that the sprites are not pixelated as they should so if I add them here in the screen you see that they have the blurry borders so we need to reinforce them to do that you can select them here and in the import tab you can disable the filter flat and click on the import that way all the pixels are going to be pixelated as we wanted another thing I have to do is set up the scene size because let's try this out let's save it game ok and everything is very tiny so we need to submit it to do that let's go to the project settings now display here and window ok sighs when we're gonna go with 180 for 720 and at the bottom here in mode let's do 2d and keep that way it will keep the aspect ratio when we stretch it now let's do the background so here in rendering environment here the background color and the color that we are using for this is 71 45 and 60 so the colors on the sprites are available here in this website you can download them it's their public domain so you can use them for any kind of purpose yeah I really if you need something to prototype you can go here and download them so coming back to a project let's remove these nodes yes we don't want them and this one as well let's create a new one which is only going to be a simple node to D and let's create the camera the camera is going to be swimming in to this bright let's add one again for reference okay let's add the camera to D okay here in the anchor mode which means where it's going to be set on here the position so if you go to transform you see that it's there and we want it to be on the top corner right now let's change the anchor to fixed top left that way we can set it to zero and let's use the zoom you want this to be like 0.25 which is like super big in comparison to the other like if you do it to house like 0.5 you should be like to have and this is going to be like half of that so we see the new frame of the window which is this purple thing and if we run this let's see we need to portray the current the further goes wider which means it's the camera that we're going to use and we press play and now the view is something and sprites are pixelated so we have that already done another important thing is that we need to have everything on a grid so let's enable here the grid and as we see it it's not exactly as we want it to be because like we don't want the half steps we only want like the bigger ones let's change the settings of the grid by going here and configure snap so here the steps should be 16 so we get the same size as the sprite now we need to do the same as we do with the camera but with the sprite so here on the offset instead of having it on Center zero in x and y is going to be the top-left corner same as with the camera so now we have it and we can move the player in this kind of grid let's move the player to zero position let's create a new node which is kinematic body and put the sprite inside of the kinematic body and we see a warning here because every collision node every node that has physics or collisions they need to have like a bounding box like a hitbox where it will detect when something is colliding with it otherwise got a doesn't know exactly when the sprite ends or when it finishes so we need to create one to do so let's add a new child and they are all here in collision object 2d physics bodies these are the objects that need this kind of collision and the collision shape is over here so we created now we get another warning which is that we need a shape this case since everything is got a big grid place let's gonna use a rectangle shape and now we can set the transform so the position is going to be eight and eight I'm just gonna make it a bit smaller let's disable for a second a grid so that way we make it a bit smaller than what we actually want and there we have it we have the kinematic body the players plate and the collision shape now with this we can save it as a separate scene and let's create a folder which will scenes and let's call this player let's rename it as player as well here so if in the future we want to have two players at the same time we can use the same scene and everything's okay now that we have the player we can start with some code so let's go to the editor so now we open only this scene let's touch script to it inside of scenes players at Gd and let's do the code right here so to make this tutorial I use kids can tell grid-based movement as a reference so most of the explanations are here if you want to go deeper for now we are just gonna get the basics of it and modify it so it fits better our project but I really recommend it there's links in the description as well as where you can download everything that I'm using but let's continue now with the movement so we want to capture every event that is happening which means every key that is being pressed so we handle inputs which is a built-in function and now we find the directions of the players wants to move so that way we know that when we are going up we're going to this vector which is 0 and Y and when we're done on or left and right so that way we can always multiply the grid size which is right now 16 by 16 by the direction that the player is moving so if it's up we'll multiply that on top and we know exactly where the player should be in the next grid movement so let's define those now inputs and we have the default here the private private settings input map here we have UI up down left and right which are the 1 start binded to the arrow keys and we're gonna be using that no need to create new ones so UI vector 2 and you can write it like so so God already knows that you want the vector that is going up now you I would say vector 2 down okay so now I'll have the inputs we can continue with this which is for direction in inputs and we want to check for the keys which are these strings here if the event the event is the thing that cannot tell us that it's not being is is action pressed and the direction so we're checking the you up you're down or left UI right we'll do the moving here so more in the direction and we are basically sending the value that we want to another function which will handle the movement so we keep those separated the movement on one side and the input for the other the more we move the position equal to the input we select the direction that we're going x 16 which is the size of the grid so 16 is the size of the grid the inputs will be checking for this and it will give us the direction that we're going and this should work let's try it out I'm not entirely sure yes it's moving on a grid okay so now that we have the movement we can continue doing other stuff and we're gonna get back to this one just in case you want to change the grid later on or you have a different size of sprites I really recommend to have a variable called grid size which in this case is going to be 16 so instead of doing this number here and later on when you have that of course you only know you have to change it in many places let's do it always with the grid size variable okay so we have the grid size there now let's create some walls to do that let's do the same but instead of creating a kinematic body we're gonna be creating a static body since it's a wall let's our sprite so sprite and the texture we can use the wall texture same we change the offset and we create the collision so here we have this story okay so collision shape and with the rectangular shape zoom in to be more precise eight and eight with the same old agreed we'll make it smaller we have the wall and we enable the grid again so now we have a wall let's see let's put now whenever we have a complex structure like this I'm gonna be saving it as a different scene so that way we can reuse it many times so let's save this branch as a scene and it's gonna be wall and let's rename it so now let's move the wall here and let's try okay so we are moving on top of the wall why is that happening because we're not doing any collision checking so since we're moving the position of something we need to first check if that position is available or not can I move there and if you cannot don't allow it so let's go ahead and code that to check that we're gonna be using what is called our ray cast so we create ray cast which is imagine like a laser that you have and you can point to some directions and if that laser touches something it will tell you you're touching that thing so instead of checking whenever you are already there you can check with the laser okay I'm that place is gonna be busy because I can see the spot so ray cast is basically doing that let's add it and you see this arrow which is represented in gurad as the thing that will be checking the direction and we want that rake us to be first smaller in this case 16 because we're not going to be checking very far away only the next block and we want to have these on the eighth position and eight okay so that's coming from the center of the block that way we know where we are going and that's it for the setup of the nose now let's go to the code let's do a variable already far pan let's call it rate to make it shorter because we're going to be using this a lot and that's the raycast TD now before moving we need to check if that direction is available or not we'll check with the raycast just to which means change the direction to and we want to get the same position that we're gonna be moving eventually which is this one since we're gonna be using this a lot let's create it as a variable and let's call it vector position okay so we know that we're gonna be checking that the vector position and also we're going to be moving to that vector position after moving the raycast sometimes since the physics engine like updates in a different pace you need to make sure that the raycast is updated so that's called the forest reyga's update which will make sure that we know exactly that the raycast is looking where we want it to look and we check this exclamation sign means that the opposite so if it's not colliding we can move it so to go back a bit we first update the position we make sure that the raycast is looking where we want now we check if that place is not colliding with anything we can finally move let's try it out again we should be moving and yeah whenever I try to move in that direction I cannot so we have was working let's try it out a little bit better let's create now here on the main scene the wall let's if you control D or command D on Mac you can duplicate this node so we can move it and we have different ones so you can start creating our level like this and [Music] let's try it out if it works should work no problem yes okay can I go through the walls yeah okay perfect now since we're gonna be making our levels like this we're gonna have a lot of instances of nodes that are gonna get really messy so let's create a new empty node let's call it walls and let's put all the walls inside of it okay so that way we know that all the walls are there and we have to see them all the time now another really important thing of this is the boxes that we're gonna be pushing and the spots where they should be so let's create those nodes so one the boxes since are you also going to be moving we can use the same kinematic body that we use for the player so this is going to be the box and for the spots we're gonna be using a different one which is the area TD areas are to detect that something is inside us of a place or outside of it and we don't want that to be the area doesn't have to collide with anything it just needs to check that there's something on top of it or not so let's create that area for a spot and the box is already there so we now need to create the sprites inside of them and the collisions so we create a collision shape same as before rectangle transform 8/8 let's disable this make it smaller okay enable it again and instead of doing it again we can just duplicate this one with ctrl T and move it to the spot one okay now let's save them as separate scenes so we can reuse them or create a bunch of them so it is the Box one and this is the spot so now we have one box and one spot around for our levels so the basic goal of this game as you might already know is move The Box to the spot so whenever the box is there and all the boxes are in all the spots you win the level and it continues so let's do a very basic level to test the things are working and then we can create a more complex one whoops okay so it's gonna be super simple box here the spot here and let's try it out let's see if we are colliding with things okay we can move on top of that that's it but we cannot go into the box which is the same logic that goes with the walls the raycast is checking and it's seeing that there's a kinematic body there and it's colliding so you cannot move there okay let's now make that the boxes are also able to move whenever you are pushing them so if you want to move to the direction it will check if the place that we will go it's available and if it is you can remove and your player is gonna move a squat so it's gonna require a little bit of the same code that we were using also it's gonna require a ray cast so let's create it right now same properties as before 16 seems gonna be 8 and 8 and we have it there okay so this is the right cast that we're gonna be using and let's create a script yeah we call box okay I'm just gonna copy all this from the player and use it in the box as well now we're going to modify and remove the things that we don't want we wanted to move individually so we can remove this we also want to be checking and returning that to the player so now let's do this that if it can move let's do return true and if we cannot move it will return false that way every time we call the move function we're gonna see if it's movable or not and that's gonna be useful because now now here in the play we need to check that if it is colliding with a box if that box returns true to that movement we can also move let's make the boxes now here in the node you have a different tab which is groups let's add them to a group which is box now boxes are on a group and we note that all the boxes are inside of that group so we don't have to check individually if the object that we are colliding is a box or not we just have to check is it on this group yes ok so now we assume that we are colliding with something so we need to check if that Collider so now we have to check if that Collider so cake glider if Collider is in group box which is the group that we created we make it move into the direction that we want it is the same that we work trying to move and since this is gonna return true if the object can move we can now move ourselves opposition and position and that should be it so now what is happening is if we are colliding with something we get to collider we check if that Collider is indeed a box if that's a box we can move in that direction the box and if that returns true it will move ourselves is if the box cannot move it will return false so we will not look ok let's save this and let's try it out we should be able to now move the box yes ok and I cannot move the box to a wall so whenever we are there we cannot move and we lose because there's no way to move it outside of it ok if you have some issues here and the errors are not working the wolves are colliding weirdly or anything like that you can always here on the debug tab press on visible collision shapes and you will see the game as you see it here so you will see the direction that the raycast is going and everything like that that way you can check if there's something wrong in your setup if the raycast is not looking where it should be looking or if the collisions are not properly set up it's a very good way of debugging any issues that you might encounter but let's now make that whenever I move this box into the spot the game shows like ok you've done it like level tier let's create a dialogue so and in control popup window dialogue except Tyler let's created we have to set it to visible and let's move it to the middle of the screen now it's looking like it's behind the elements but it's gonna be on top of them and let's change title to smiley face and they tell I was gonna say level clear it okay so another we cleared level let's do this in our case okay so we want to show this dialogue whenever the box is inside the spot but to do that we need to check and since we haven't done any pole for that let's create the code now for the boat for the spots let's go to spot scene and touch script this is gonna be much much simpler I'll keep pie so are we occupied or not this is the variable that we're gonna check for checking that all the spots are occupied and we need to use these signals which are body entered which connected to the script and the other signal is body exited so if a body is inside of this we do something and the same with the other one this case we need to check if the body is in group box so we don't want the player to be one of those elements that makes it be occupied or not occupied it's true and we can copy and paste now and to false so whenever our body entered that means that there's anybody that comes in it's true and whenever it everybody goes out we say to false so that means that it's not occupy yet this of course works because everything is moving and I grid and there's no chance that two objects are gonna be on the same place so that's all you need for spots and now we need to a script here for the game itself to check if the game is over so let's create one script which is called game and here on the game script let's create a new function this process the Delta you can do the underscore because we're not gonna use it and if you don't do it you will get a warning like you are not using this variable but it's okay we want to check all the spots so to do that let's first move the spots into a different node like we did with the walls so but so we know that all the spots are gonna be inside of this node same we're gonna do with the boxes okay box okay now is everything study and we can also check them so spots are gonna be spots get children count so this will return if there is only one spot it will return 1 if there are two spots it will return 2 and so on and so on because we want to make sure that all the spots are occupied so now that we have all the spots we need to check if any every spot is filled so for in sports get children this will give us an array with all the nodes that are inside of there so if it is occupied we can set the spots count though we have 2 minus 1 so if we are checking every one if it's occupied and we subtract one that means that one all the spots are occupied we're gonna get the 0 as the number of spots so if spots is equal to 0 show the accept dialog could we do it like this would pop up since process is something that is happening all the time and you don't want to show the pop up all the time let's do an extra variable which is game end and let's check also for that if game end is equal to false that means that the game hasn't ended yet then we can do this and if the spots are zero game and true so that means that whenever we are checking this if we get to the end we shall the pop up and we say that the game has ended let's try it out now I will disable these visible collision shapes okay now if I move this their level tier okay problem is that now we can keep playing we want to just change the level or to anything else so we can set this signal which is confirmed so whenever they press on okay we can get the tree which is the node that has all the seen and everything and we reload the current scene that means that the game will start over that clear okay yeah and it goes back to the beginning let's make now a different level let's make it like this let's do two spots now to test it and let's do one box here and the other box there that's at some difficulty to eat something like this okay it's not a hard but I mean it's getting a little bit more interesting let's try now what happens with two boxes and two spots first of all you will notice that if you move the box went to another you cannot push two boxes at the same time because it detects it as if it was wall which is what we want in these kind of games and now let's see if we move one there okay we still need to fill the other spot so as soon as we move it okay level to it that's great and when I press ok it resets so another thing that it's very common in this kind of games since there's many ways to finish complex levels is to have a counter of how many steps you have done that way we can see if you can clear it in less steps than the others and eventually in a future episode we're gonna make a level editor and if you share those levels with other people you can also have like high score to check if people near level unless movements than the others so let's do that with the label now let's label one level is gonna be for the name of the level which is level 1 and we want to use this custom font because the default one is very pricks pixelated and blurred so that's why I added this asset at the beginning to do that let's take this one and here in custom font we can create a new dynamic font just gonna make sure that I'm not covering the properties with my head here so font it's gonna be this one and we need to set now on the settings where I said here here okay if you press on the font and the earliest you need to disable it and size let's make it a bit smaller to 12 okay now let's call this name label which is gonna be the name of the level and let's duplicate it with ctrl T and let's do these moves zero so move so every time we make a move with the character we want to add one to this level so to do so let's go to the player script and we want to add it here movement plus one and also here which is also when it moves but to track it is we're not sure how many players without that let's do it on the game script which has all the information we need here we can do the moves equals to zero and here let's do that the moves label text is gonna be moves equal to plus string of moves so that way every time like we're moving it were always checking and we are always updating the kind date the amount of moves so now when we go to the player we can set it parent which is gonna be the game node this node just do that in a very clear way so game is gonna be kept current so now game moves plus one understand for here so we are updating the variable here and this variable is adding the text let's see one two three four five six okay so if I clear the level I did it in 37 moves will press ok it goes back to 0 so we know that we are in a new ok ok there's one final thing that I would like to add here and is that when you whenever you press the letter R you can reset the game so you give the players a way out these kind of situations where they find that they cannot complete it because they made a mistake it could be any of these mistakes so it's very simple in the player events here in the handle inputs we need to create an action which is going to be reset that reset action is a new action that we can set to the key R and if the event is action pressed reset the same as we did before get three and reload current scene so now we are moving around and you made a mistake you press R and you go back to the beginning the next video will cover this movement so we can try to make it smoother or you can also do it yourself with the tutorial from kids can code like the ones I took about at the beginning and my goal for this series is to add a level editor so in the next episode we're going to see how to create a game editor and how to share those levels with other people if you like it thank you very much everyone for all your support and thank you very much for all your sports to hold my patrons because it's linked to you that I can keep doing these videos so thank you very much

Channel: Emilio

Views: 33,449

Keywords: kinematicbody, staticbody, collisions, area2d, raycast, game, tutorial, sokoban, box

Id: HmnwNadwHWI

Length: 36min 8sec (2168 seconds)

Published: Thu Apr 02 2020

Reddit Comments

[u/golddotasksquestions]

May I ask why you are not using a Tilemap for the level design and Godot's built in collision system to allow/prohibit a KinematicBody2D to move?

[u/Asket-]

Really good tutorial, thank you!