 Hello everyone, so today we're going to be making a very simple game. We're going to cover grid based movement, collision detection, kinematic bodies, static bodies and areas to do which are the basic nodes that you would 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 on the screen you see that they have the blurry borders so we need to reimport them. To do that you can select them here and in the import tab you can disable the filter, flag and click on reimport. That way all the pixels are going to be pixelated as we want it. Another thing that we have to do is set up the scene size because let's try this out. Let's save it, game, okay 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 okay size when we're gonna go with 1, 2, 8, 4, 7, 20 and at the bottom here in mode let's do duty 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 and the sprites are available here in this website you can download them. They are public domain so you can use them for any kind of purpose. Yeah I really recommend if you need something to prototype you can go here and download them. So going back to the 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 2d and let's create the camera. The camera is going to be zooming in to the sprites. Let's add one again for reference. Okay let's add the camera 2d 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. We want this to be like 0.25 which is like super big in comparison to the other. Like if you do it to half like 0.5 you should be like half 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 first say to current the border goes wider which means it's the camera that we're going to use and we press play and now the view is zoomed in and sprites are pixelated so we have that already done. Another important thing is that we need to have everything on our 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 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 hit box where it will detect when something is colliding with it otherwise Godot 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 shapes is over here. So we created now we get another warning which is that we need a shape in this case since everything is going to be grid based let's going to use a rectangle shape and now we can set the transform so the position is going to be 8 and 8 and it's going to make it a bit smaller. Let's disable for a second the 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 player sprite and the collision shape. Now with this we can save it as a separate scene and let's create a folder which will be called 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 and 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 attach script to it inside of scenes player.gd and let's do the code right here. So to make this tutorial I use kidscan code grid based movement code as a reference so most of the explanations are here if you want to go deeper for now we're 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 that the player wants to move so that way we know that when we are going up we're going to this vector which is zero and y and when we're down or left or 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 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 defaults here in the project settings input map here we have ui up down left and right which are the ones that are binded to the arrow keys and we're gonna be using that no need to create anyone so ui up vector 2 and you can write it like so so godot already knows that you want the vector that is going up now ui down and with same vector to down okay so now that we 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 could not tell us that it's not being used is action pressed and the direction so we're checking the ui up ui down left ui right we'll do the moving here so move 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 move and we move the position equal to the input we select the direction that we're going multiplied by 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 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 a lot of codes you don't really know you have to change it in many places let's do it always with the grid size variable so 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 add a 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 we do new rectangular shape zoom in to be more precise eight and eight we disable the grid we make it smaller well 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 wall so now let's move the wall here and let's 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 a raycast so we create raycast 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 and that place is gonna be busy because I can see the spot so raycast is basically doing that let's add it and you see this arrow which is represented in Godot as the thing that will be checking the direction and we want that raycast to be first smaller in this case 16 because we're not gonna be checking very far away only the next block and we want to have this 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 node now let's go to the code let's do a variable already far and let's call it ray to make it shorter because we're gonna be using this a lot and that's the raycast 2d now before moving we need to check if that direction is available or not we check with the raycast cast 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 gonna 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 let's call the forest raycast update which will make sure that we know exactly that the raycast is looking where we wanted 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 walls 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 press ctrl d or command t on mac you can duplicate this node so we can move it and we have different ones so we can start creating our level like this and let's try it out if it works it 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'll 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 gonna 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 gd areas are to detect that something is inside 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 it's 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 control d 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 this 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 that things are working and then we can create a more complex one whoops and okay so it's gonna be super simple box here spot here and okay 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're gonna 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 that direction it will check if the place that it will go it's available and if it is it's gonna move and your player is gonna move as well so it's gonna require a little bit of the same code that we were using also it's gonna require a raycast so let's create it right now same properties as before 16 and it's gonna be eight and eight and we have it there okay so this is the raycast that we're gonna be using and let's create a script it's gonna be called box okay I'm just gonna copy all this from the player and use it in the box as well now we're gonna modify and remove the things that we don't want we don't want it 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 it 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 player we need to check that if it is colliding with a box if that box returns true to that moment 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 know 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 okay 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 get collider if collider is in group box which is the group that we created we make it move into the direction that we want which is the same that we were trying to move and since this is gonna return true if the object can move we can now move ourselves so position and vector position and that should be it so now what is happening is if we are colliding with something we get the 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 move okay let's save this and let's try it out we should be able to now move the box yes okay 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 okay if you have some issues here and the arrows are not working the walls 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 us like a okay you've done it like level clear let's create a dialog so in control pop up window dialog accept dialog let's create it 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 the title to smiley face and the dialog is gonna say level cleared okay so we know that we cleared level let's do this lower case okay so we want to show this dialog whenever the box is inside the spot but to do that we need to check and since we haven't done any code for that let's create the code now for the for the spots let's go to spot scene and touch script this is gonna be much much simpler occupy 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 we 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 in 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 so occupied it's true and we can copy and paste now and set to false so whenever a body entered that means that there's a new body that goes in it's true and whenever a body goes out we say it to false so that means that it's not occupied yet this of course works because everything is moving on a 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 create 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 just the 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 but let's first move the spots into a different node like we did with the walls so spots so we know that all the spots are gonna be inside of this node same we're gonna do with the boxes okay the boxes okay now is everything steady 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 one if there are two spots it will return two 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 spots 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 that we had to minus one so if we are checking everyone if it's occupied and we subtract one that means that when all the spots are occupied we're gonna get the zero as the number of spots so if spots is equal to zero show the accept dialogue which we do it like this with 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 and and let's check also for that if game and 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 shoot so that means that whenever we are checking this if we get to the end we show the pop up and we say that the game has ended let's try it out now oh i will disable these visible collision shapes okay now if i move this there level clear okay probably means that now we can keep playing and we want to just change level or do 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 the the scene and everything and we reload the current scene that means that the game will start over level 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 let's add some difficulty to it something like this okay it's not that 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 one to another you cannot push two boxes at the same time because it detects it as if it was a 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 cleared that's great and when it's okay it resets so another thing that it's very common in these 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 a high score to check if people clears level in less moments than the others so let's do that with the label now let's add a label one label is going to be for the name of the level which is level one and we want to use this custom font because the default one is very 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 fonts we can create a new dynamic font just gonna make sure that i'm not covering the properties with my head here so font is gonna be this one and we need to set now on the settings where is it here here okay if you press on the font and the alias you need to disable it and size let's make it a bit smaller let's do 12 okay now let's call this name label which is gonna be the name of the level and let's duplicate it with control d and let's do this moves zero so moves label so every time we make a move with the character we want to add one to this label 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 since we're not sure how many players we have things like that let's do it on the game script which has all the 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 will always checking and we are always updating the kind the amount of moves so now when we go to the player we can set get parent which is gonna be the game node this node let's do that in a clear way so game is gonna be get parent so now game moves plus one and the same 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 six okay so if I cleared level I did it in 37 moves when we press okay it goes back to zero so we know that we are in a new game okay 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 this 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 unhandled 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 whenever 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 the 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 one that I talked about at the beginning and my goal for this series is to add a level editor so in the next episodes we're gonna see how to create a game editor and how to share those levels with other people have you liked it thank you very much everyone for all your supports and thank you very much for all your supports to all my patrons because it's thanks to you that I can keep doing these videos so thank you very much