The first thing we’ll do in creating a new project is to, well, create a new project. In the Godot editor select “New Project” and save it to wherever you like.
Near the beginning of projects I like to have some placeholder assets to work with. One of my favorites in the case of a top-down grid-based game like this is 0x72’s Dungeon Tileset II, which is what I’ll be using for this tutorial. The pack is a name-your-own-price download, so you can download it for free if you are only wanting to follow along this tutorial with the same assets I’m using. If you end up using it for a commercial project I would highly encourage you to go back and donate to the author, as the sprite work is absolutely fabulous!
I’m going to start by creating a TileMap node and setting up the tilemap properties in the inspector. This will allow for me to easily paint a level directly into the editor itself that we can later read with code. (At the end of this post I’ll link to the source code used, including my TileMap asset if you don’t want to have to create your own.) For now I’m just going to draw a 12×12 grid of regular floor tiles with the Rectangle Paint tool (Ctrl + Shift + Mouse).
Now we’re going to get into the code. I’m going to create a script on the TileMap node and name it GridLayout, and save it in a new subfolder called “Scripts” (for organizational purposes).
I like to use VSCode for code editing, but Godot comes with a built-in script editor that works just as well. When we create that script it should open up in the default editor you have configured for Godot (which you can change under Editor Settings > General > Text Editor > External if you want to set your default editor to something other than the built-in one).
Because this game is going to need to handle click events when a tile is selected, now is a good time as ever to test that we can do that! Something I really love about Godot is that you can run scenes independently of the whole project, which makes testing script functionality very easy.
Inside my GridLayout script I’m going to add an input event listener through the _input() method. In this method all I want to do for now is see if the input event the GridLayout received was a click, and if the state of the click was “just pressed” rather than “just released.”
func _input(event):
if event.is_class("InputEventMouseButton") and (event as InputEventMouseButton).is_pressed():
print(world_to_map(event.position))Because the the script extends TileMap, we have access to the world_to_map() function, which takes the event’s position and returns the grid coordinates of the tile. Great! If we run the scene we can see that indeed it outputs the grid coordinate.
Eventually we’re going to want to know the type of tile we clicked on, as we’ll be adding more than just floor tiles. Because I set up my tilemap asset to use multiple sprite atlases, I can use the get_cell_autotile_coord() function to get the coordinate of the exact tile in the atlas. Of course, without a map to know which tiles are what, this is not currently worth very much. Later on I’ll set up that map and probably organize the tilemap asset a little more to make this process easier in code.
And that’s it for part 1! In the next post I’ll be adding in some placeholder character sprites, new grid tiles, and character movement. It will be much more involved in the code side of things, as I’ll be implementing a pathfinding algorithm.
Here’s a link to the project as it currently stands: Part 1