In the previous chapter, we created and manipulated nodes using scripts. It’s one of two popular ways to manipulate the visuals of a game. In this chapter, we’re going to look at the other, which is creating and manipulating tiles via scripts.
We need to start in the visual editor, where we’ll learn how to set up tiles and terrains. These are useful for hand-crafted content, and mastering them will save a ton of time and code.
Creating Tile Sets
Tile maps are visual areas made out of little squares or tiles. Take a look at the following image:
This is from https://kenney.nl/assets/bit-pack
This is a tile sheet. It’s a collection of small tiles packed in a way that makes them easier to use when creating maps for games. There are many tiles in this tile sheet that are perfect for creating a map. Let’s create a new experiment that uses them!
Download and extract the asset pack, and copy colored.png into the images folder, in the experiment project. Then, create an inherited scene, based on the GameExperiment class. Follow this up by adding a new node, below the root node, called a TileMap:
Creating a TileMap
Attach a script to the new scene, like we did in the previous chapter. This script should inherit from the GameExperiment class. TileMap nodes are the mechanism for how we draw tiles. They need a TileSet resource, which is what gets drawn in them. We can share tile sets between many TileMap nodes, but that's an exercise for later.
Click on the Empty drop-down next to Tile Set and select New TileSet. You’ll see a grid appear in the 2D editor.
Editing the new TileSet
This grid is where we’ll draw the tiles, but we first need to define tiles in the tile set. I found this part to be a bit tricky when I first tried it. The TileSet editor button at the bottom of the screen wasn’t showing up for me. If this happens for you, select another node, like TilesExperiment, and click back on the TileMap node. You should now see the TileSet tab at the bottom of the screen.
The image we’re using has 16 × 16 pixel tiles, so we don’t have to change the default tile size for the TileMap node. If we wanted to, we could click on TileSet and change Tile Size values that show up in the property inspector.
Let's create a new Atlas by clicking the plus button and selecting Atlas. Then, click Texture ➤ Quick Load. Select colored.png. Godot will ask if you want it to automatically create tiles in the atlas, to which you can say no:
Selecting a texture
The image we're using has gaps in between the tiles. Adjust the Separation values to account for these gaps. Values of 1 × 1 should do the trick. Highlight a few tiles for us to use:
Highlighting wall tiles
Now, we can draw on the grid with a tile selected. When we want to change the tile we’re drawing with, we can select a new one from the set that we highlighted:
Drawing tiles by hand
Modifying Tiles with Code
We can also draw tiles on the grid using code. Let’s create a script for the TilesExperiment node and set these tiles with it:
There are quite a few methods available on a TileMap node, but we only need three for now. The first is to clear tiles that we have already drawn on the grid. This could be tiles drawn via other scripts or drawn by hand.
The second method is to draw the intended tile in the intended cell location. These numbers can be confusing, so let’s break it down.
The first Vector2 in each row of the tiles array is the grid position of the cell we want to draw on. At the center of the screen (or origin), the grid starts at 0,0.
Drawing tiles from the origin
This means a cell on the top left of the one pictured is going to have the grid position of -1, -1.
The second Vector2 in each row of tiles is the location in the atlas of the tile that we want to draw. If you mouse over the tile, you’ll see this number pop up:
Hovering over a tile to see the atlas coordinate
In the set_cell method call, we’re telling the tile map we want to draw the cells on layer 0. We’re telling it that the tile the source is 2.
You can see the source when you hover over a tile in the tile map inspector. Source is the numeric identifier for the atlas of tiles we’re drawing from.
Using Terrains
Drawing large configurations of tiles can be a tedious process, especially when the different tiles represent walls facing a different direction.
Godot has a feature called terrains that can do a lot of this work for us. To set up a new terrain, go to the TileMap node properties and click on the TileSet to go to the TileSet's properties:
Drilling down to TileSet properties
Then, find the terrains tab and add a new terrain:
Adding a new terrain
Select Match Corners and Sides as a Terrain Set ➤ Mode. Next, go to the TileSet tab and click the paint brush icon. You’ll see Paint Properties with the choice of what you want to paint:
Painting terrains
Picking which terrain to add tiles
Pick the terrain and color in the parts of each tile that should connect to each other:
Painting bit masks
You might want to deselect the bit you've selected in error. Change Terrain ➤ Walls to Terrain ➤ No terrain and left click on the bit you want to remove. We can go back to TileMap ➤ Terrains ➤ Terrain Set 0 ➤ walls, and paint with Connect mode selected:
Drawing tiles with terrains
Using Terrains with Code
Scripting terrains is actually easier than scripting individual tiles. Instead of calling set_cell for each cell we want to paint, we can create an array of cells to paint and tell the tile map which terrain to use:
Drawing terrains with code
Summary
In this chapter, we learned about TileMap, TileSet, and the terrain interfaces. We saw how to draw tiles into the cell grid by hand and also via script. We’re going to use these techniques in the following chapter when we build our first game!