2D Movement in Godot 4 using TileMap

today I wanted to talk about how to make a character move on a tile map like it's part of the the cell map grid and we will be using the custom data layers of the tail set to determine the tiles on which we can walk and we're also going to use a raycast in order to not be able to get onto other entities in your game so let's uh let's start so I've created a new 2D main scene and I have imported the tile map that we're going to use which I will provide a link for in the description of the video um so first off we need to set some project settings we're going to have a screen of 160 by 160 and then we're gonna make the actual screen four times that size we're going to set the stretch mode to Canvas items and then because we're working with pixel art we're also going to set the default texture filter to nearest okay then first off we're gonna add a tail map get a new cell set drag your tail map into the detail set we want to cut them up that's pretty good so now they're already cut up into separate tiles and we're gonna work with a custom data layer in detail set that's going to Define if something is walkable or not and it's going to be a Boolean and in order to Define that on the test set we go to tell set paint select your custom data layer we want to paint the tiles that are going to be walkable so I'm going to select all of the floor tiles that we want to be walkable we're only going to be using um some of them but in order to Showcase it that's how we do it okay so now let's draw our tail map real quick okay now that's done we're gonna create a new node 2D it's going to be our player and it's gonna need a Sprite all right we're going to use the atlas Sprite for now the atlas texture because we have this tile map which also includes characters go to edit region grid snap our tail set is 16 by 16 pixels and then you can just pick any Sprite you want we're gonna go with this one and we're gonna have to position this player note to be inside of a town map node so if we place them over here and you click on the file map you can see he's exactly inside of this town map cell and we're also going to add a camera to the Sprite because if we start moving the Sprite then we probably also want to make sure the camera goes along with the player and then next up we're gonna start making a script and we want to listen to inputs from the player at every frame so we're going to do it in process but before we can do that we need to actually make the input map I'm just going to be w all right so now we have some actions we can listen to if we're going to listen to if a action is being pressed continuously so every frame and we're going to also do that for all the other directions there we go and we're going to make a function that's going to be activated once we want to move the player it's going to take a direction which is sort of type Vector 2 when you're going to see why in a minute okay so you want to give this function the direction the player wants to move and we can do that because we know we want to go up and we can actually get the vector constant Vector 2 dot up and if you look this up you can actually see those are predefined values that we want and we're going to be using these values to also figure out what the tau is going to be that you want to move towards okay so this one's up this one's down you know how this goes so now if we press any of the keys we expect to see the vector 2 that we pass in to be logged okay so it works now to actually move the player we're going to have to do a couple of things so I'm going to come into what we're going to do because that's going to be easier for us to implement we need to get the current towel vector 2i which is a we're going to get the talmat position of the cell that we are on then we're also going to get the turbotel vector 2i then we're going to get the custom data layer from the target cell because we want to see if it's walkable or not and on the target tile I'm gonna have to do that in order to know if we can move the player there or not and then we actually need to move the player okay so in order to get the current tile we need to have a reference to tile map because tile map provides us with a couple of functions that can give us the coordinates of the towels we're looking for we're going to say current Tau which is a vector 2i is cell map Dot I think it's sort of local to map so we're going to convert our Global position to a mapped position on the on the tile map and we want to know the current tile so Global position of this object is going to be the current Tau and then to get the target towel we are going to which is also going to be of x2i is we're going to make a new vector 2i and we're going to combine the current tile Vector 2i value with the direction value in order to accumulate the position of the target cell because we know which direction we're going we can add that value to the current dial position and then we have the position of the target tile an integral structure of this Vector 2i we're going to say current Tau dot X Plus direction.x because they're both vector 2. and we're going to do the same for the Y value and if we print this print current tile and if we also print the you can actually use prints you can also print the target cell so now if we press we should get 2 4 is our current dial 3 4 is going to be the next style which is this style all right then now we need to get the data layer or we want to fetch our customer our walkable data from this target cell and we can do that by saying um car tile data which is going to be a child data object is tell map Dot get celltel data it's going to be on layer 0 because we didn't change anything and the coordinates are going to be targeted L because that's the factor 2y that we want to get the data layer for and now we need to check if it's actually walkable we want to know if the target cell is a valid tell to move on so we're going to say if Tau data Dot I think it's called get custom data yeah walkable and we're gonna um early return if we if we can move here so we don't get a coding pyramid if this is false we can't move here so we just want to return this function ends if we get here if it's true we're going to ignore this return though this return statement and we can actually move the player so we're going to say Global position is telmap dot map to local we're now going to convert a vector to Y to effector 2 for our player to move to and we need a vector 2 here which is going to be targeted because that's where we want to move and this should already work it's a little fast now because we do it instantly um we can also make the player actually move to the point wait till the player is there and then process the next command so that's what we're going to do next all right so in order to animate the player to its new position we're gonna have to do a couple of things first of all we're going to introduce a is moving variable which is going to start out as false in the script and we don't want to listen to user inputs if we are moving around because then we're going to wait until we finish moving and then we're going to list to input again and the way we're going to move the players we are actually setting the global position of the player entity to the new tile and we're going to move the Sprite back to the current tile in this Frame of the game so we're gonna move the player entity towards the new Target and then we're going to move the Sprite back to the original position and then animate the Sprite 2D to move towards the new glow position of display object uh and in order to do that we need to get a reference to our Sprite and then we can say after resetting is moving to true because apparently we can move now don't forget that we can say after we move the player object to its new position I'm going to say it set to the Sprite Global position it's going to be tail map and we're going to convert our Vector 2 by of our current Town back to a global position for this Sprite so we'll map to local because we're going to convert a vector to Y to a vector 2. and we're going to pass our current Style if we test this now we can move once and then we can't move anymore because we never set this moving back to false but we can at least check if the entity of the player is moving towards this new position and sets the Sprite back let's check that okay we can't actually see that because the camera is coupled to the Sprite 2D what we can do is we can convert this node two ways right and then we have to explain from spray to D here as well and now if we attach a new Atlas texture to this object oh my bad to this Atlas and we pick something like this movement indicator or something now we should see this Sprite move to the tile next to it and the player staying on the previous Style and it does so we set the player object to the new towel and we we set this right back to the original tile so there's only one thing left to do and that's we're gonna move the player in the physics process function and we're going to do that by first checking if we are not moving then we don't want to do this function at all so if it's moving is same as false return and then we're going to check if we've arrived at our destination and we can basically do that comparing This node's Global position to This node's Global position and if they're the same then apparently we're done moving set moving back to false so if Global position of this object is the same as Sprite to the global position it's moving it's false and we also want to quickly function we want to stop this function right here because we're done moving we're going to listen to the next input um so if we are moving and we're not at our destination then we want to move the Sprite towards our new Global position so we're going to say spray to D dot Global position is right to D dot Global position dot move towards and we want to move toward our Global position of this player entity and we're going to give it a speed of one okay Let's uh check if we forgot anything all right so it's moving and we can keep on moving around if I hold the button it's just going to go in in a direction that we picked and if I press any inputs while we're moving it doesn't do anything so right now we are on the tile map grid um at some point you're gonna get more entities in your game like other things moving around and we're going to be looking at that right now how we can detect if there's something if there is a collider in the next style and then determine that the player can move there alongside the fact that we have determined the custom data layers on this style map so let's check that next okay so in order to detect other entities we first need to make another entity so go back to your scene let's add a new node 2D called enemy and the enemy is going to have a Sprite and we're gonna make a new Atlas texture edit the region I guess we're gonna make it a ghost okay let's place it on the grid correctly like so I think yeah so it's on the grid let's enable the grid options because that makes it easier to move around 16 by 16. we move it now but we still need to set an offset okay so if we move it now it's always going to be on the grid say we put the enemy here it's inside of the tail map so so that's good um and we also need to add an area to D because we want this goes to have a collider shape it's gonna be a square for now 16 by 16. okay um and in order for the player to detect this Collision shape we're going to be using a raycast we're going to set it to 16 because we use 16 by 16 grits so this is pointing to the middle of the next tile only thing we have to do is we have to make it look in the correct direction based on which direction you want to move uh and then we still have to make sure that this Rick has detects areas because we're using an area and it's it's Collision mask set to one and now we have to make sure that the area is actually it it defines itself as the layer one so we are detecting it that's good so if we actually show the Collision shapes and we move over here the arrow will be red because it's colliding with an area and we are detecting the layer which this Collision shape is identified as so that's good we have all the notes in place now all that we need to do is go to the script get a reference to your raycast and then we're gonna have to Target the raycast before you move so alongside the part where we detect if a child is walkable we're also going to make sure that there's nothing else on this style and the first thing we need to do is set the rate gas position we can do that by saying raycast 2D dot Target position which is if you look at the raycastity settings this is the target position we do -16 it's going to point up you do 16 is going to point down if this is going to be 0 and we're going to say 16 it's going to go right this is the value that we're going to be editing I'm going to leave it like this for now and we're going to set that value through code and we can do this very easily because we already have the direction we're just going to have to multiply it by 16. so Eureka City the target position is Direction times 16. so now we're going to get a vector 2 with 1 value 16 minus 16. other values zero it's going to set the target position to the direction you're looking at once we do that we need to force this raycast to update because we cannot wait for the next frame in order to have this raycast attacked a collision shape we need to force it to immediately update and detect Collision if we don't do that it won't work and we can do that by calling this function on the the raycast force raycast update it will force it to update its raycast its Collision detection in the same frame after we've adjusted the target position and then we can simply say if raycast.2d as a function called is colliding and that means that it's detecting one or more things that's colliding with and we're only interested in if it's actually colliding with anything because it already signals that we can't move there and if we can move that we're going to return because we don't want to move the player into something we cannot move into and I think that's it so let's check it out you can actually see the target position of the raycast moving around and once we get next to the ghost we want to move left we point to the left update the raycast raycast detects Collision we can't move and if we come from far away it also does that if we stand next to it and move it also does that I hope you learned something and uh I'll probably see you in the next video thanks for watching

Channel: Retrobright

Views: 23,334

Keywords: Godot 4, Godot, Game Development, Tutorial, Easy, Beginner, Area2D, Collision, Tilemap, Raycast, custom data layers

Id: 9u1Dq6h7sGU

Length: 19min 27sec (1167 seconds)

Published: Thu Sep 07 2023