Creating Tile Sets

Tile maps are visual areas made out of little squares or tiles. Take a look at the following image:

A tile map with rows and columns of a lot of tiny squares with various icons and designs.

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:

A screenshot of the create new node window where the tile map under node 2 D is highlighted.

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.

A screenshot of the Godot window. A grid is present in the tiles experiment 2 D editor. The tile set option under the inspector is highlighted.

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:

A screenshot of the Godot window. In the tile set tab, the plus button and the texture option are highlighted. In the resource window, the images slash colored dot P N G under the matches option is highlighted.

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:

A screenshot of the tiles window. In the tileset option, separation values can be adjusted. Some of the tiles of the tile map are highlighted.

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:

A screenshot of the tiles window where the tilemap option and some tiles are highlighted. The highlighted tiles are superimposed on the grid.

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.

A screenshot of a grid with a single tile at the center.

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:

A screenshot of the tilemap where the source, atlas coordinates, and alternative are mentioned.

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:

A screenshot of the tilemap window where the tileset option is highlighted.

Drilling down to TileSet properties

Then, find the terrains tab and add a new terrain:

A screenshot of the tilemap window where the terrain sets are highlighted. The terrain sets include mode and terrains options.

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:

A screenshot of the tileset window where the select a property editor option under paint properties is highlighted.

Painting terrains

A screenshot of the tileset window where the terrains under paint properties, terrain set and terrain options underpainting, and some base tiles are highlighted.

Picking which terrain to add tiles

Pick the terrain and color in the parts of each tile that should connect to each other:

A screenshot of the tileset window, where some of the base tiles are highlighted.

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:

A screenshot of the tilemap window where the content of the terrains tab is highlighted.

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:

A screenshot of the code to draw terrains. It includes a dialog box for experiments DEBUG.

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!