In Godot 3.2, there are 3 types of tiles:
- Single tiles: individual tiles that can span over one or more cells of the tile map.
- Autotiles: using automatic tiling, you can easily draw map areas without manually placing single tiles one at a time. The tiling algorithm will automatically detect edges and internal parts of an area and select the correct sub-tile to use.
- Tile Atlases: an atlas is simply a collection of single tiles grouped together.
We will analyze these types of tiles one by one.
Open the SimpleRPG project. If you followed the previous tutorial, remove Rock, MovingRock and Flowers nodes from the scene, and then delete the Flower.gd file.
Create a folder called Tilesets and move the map_tiles.png file into it. If you haven’t downloaded the file in the previous tutorial, you can download it now by clicking on the button below (when you import the image, remember to turn off Filter in the Import panel).
Now, add a TileMap node to Root.
A TileMap is a grid of tiles used to create a game map. There are many benefits in using tile maps. First of all, you can draw a map simply by painting tiles on a grid, which is much faster than manually placing all the sprites. In addition, you can draw much larger maps because the TileMap nodes are optimized for this task. Finally, tiles can include shapes for collisions, light occlusion and navigation.
The tiles we’ll use in our game have a size of 16×16 pixels. So, in the Inspector, we need to set the Cell ‘s Size of TileMap to 16×16.
Once this is done, we can create the TileSet that will be used in this TileMap. In the inspector, click [empty] near Tile Set and choose New TileSet.
Now, click on the newly created TileSet resource:
The TileSet Editor will open.
To start, we will create an autotile that will allow us to draw grass by randomly positioning various types of tiles. This will make the terrain more interesting and visually pleasing.
To make editing easier, click on the two arrows at the bottom right or press Shift+F12 to maximize the work area.
Add the image with the tiles by pressing the Plus button on the bottom left and select map_tiles.png in the Tilesets folder. Once the image is added, use the zoom buttons to enlarge it.
Now click on New Autotile button. A new tab called Region and its toolbar will appear.
Click on the second button of the toolbar to activate Grid Snap. It’s very likely that the grid that appears will be of the wrong size, as in the following image:
Changing the grid size is not particularly intuitive. To do this, select a random region of the image: only at this point the Snap Options section will appear in the Inspector. Change the x and y values of Step to 16 to set the correct grid size.
Select the 4 grass squares at the top left. Check that in the Inspector, Selected Tile → Subtile Size is set to 16,16:
When there is a region selected, more tabs appear:
- Collision: here you can draw the collision shapes of tiles.
- Occlusion: in this tab you can draw the occlusion shapes used by Godot’s lighting system.
- Navigation: here you can draw the shapes used by Godot’s navigation system.
- Bitmask: used to configure the auto tiling system.
- Priority: when you want to randomly place tiles, you must set their priorities here.
- Icon: it’s the tab where you choose the tile’s icon
- Z Index: here you can set the Z Index of each tile
Go to the Bitmask tab. I’ll explain how this tab works later, when we create the sand autotile. For now, trust me and select all four grass tiles using the left mouse button (you’ll see that each tile is divided into 2×2 sub-squares, select all squares).
Now, go to the Priority tab.
By clicking on each tiles, you can set their probability of being used (they are now all set to 1/4). Select the all-green tile and raise its probability to 17 out of 20 to make it the most used.
Finally, go to the Icon tab and select the autotile icon. I choose the grass tile in the upper right corner.
Using grass autotile
Before trying the autotile we just created, set its name in the Inspector to Grass and save the TileSet to disk. In the Inspector, click on the disk icon, choose Save and save the file in the Tilesets folder with the name MapTileset.tres.
Now, in the Scenes panel, click on TileMap. The TileSet Editor will close and you will switch to the drawing mode.
There are four tools for drawing the map:
- Paint Tile (P key): used to draw a single cell of the tile map.
- Bucket Fill (G key): used to fill a closed area with the selected tile.
- Pick Tile (Control): used to select the cell type under the mouse pointer.
- Select (Control+B): used to select an area of the tile map.
In Paint and Bucket tools, use the left mouse button to draw tiles, and the right button to erase them.
These tools (and others) can be accessed in the workspace toolbar:
Try drawing a contour with the Paint tool and then filling it with Bucket:
For our game, we will create a 50×50 cells map. To draw it faster, first draw all the borders and then fill the area with the Bucket tool.
If you want to make some finishing touches by hand, you can turn on the Disable Autotile checkbox. A new box, with all the sub-tiles inside the Grass autotile, will appear. You can select one of these tile and use it to draw the map as we saw earlier.
For example, I used manual placement to create an area full of flowers in the southwest corner of the map.
If after drawing the map, you no longer see the player, check in the Inspector that Player has a Z Index value of 1.
Setting the game camera
If you launch the game now, you will see the player moving on the map, but the camera will remain fixed and the player will be able to exit the screen. This is obviously not the behavior we want! We want the camera to follow the player when it moves towards the edges of the screen.
The easiest way to do this is to create a Camera2D node as a child of Player. With Camera2D selected, in the Inspector activate the Current checkbox to make it the active camera for the current scene. Then, enable both Drag Margin properties to move the camera only when the player reach drag margins. Doing this, there is a rectangle in the center of the screen within which the player can move without moving the camera).
Now, since Camera2D is a child of the Player node, it will follow it in every movement as it moves around the map. Our project looks more and more like a real game!
Warning! If running the game you have issues with the tile map causing intermittent flickering, flashing, or other tile anomalies, you can try one of these things:
- in Project Settings, activate Rendering → Quality → 2d → Use Pixel Snap (if you followed my tutorials, you should have already activated it)
- activate Y Sort in the TileMap node (this worked for me)
- in Project Settings, disable Rendering → Quality → Depth → Hdr.
To create the sand autotile, reopen the tile set by double-clicking on the MapTileset.tres file. Then, select the image in the left column of the TileSet Editor and, if necessary, zoom the image to work more comfortably.
Now, click on New Autotile and select the sand tiles as in the image below.
Go to the Bitmask tab.
Bitmasking is a method for automatically selecting the appropriate sprite from a defined autotile. It works by setting which parts of each sub-tiles are internal (i.e. which parts are not borders). With this information, Godot can automatically decide which sprite to draw for a cell of a tile map, based on the cell surrounding it.
So, what we need to do is selecting, with the left mouse button, which parts of our sub-tiles are internal, as shown in the following image:
If you select a square by mistake, you can deselect it with the right mouse button.
As you could see, each tile is divided into a 2×2 grid. This type of autotile allows us to have up to 16 different sub-tiles to design our sand areas (our image has only 15 sub-tiles for sand because is missing a tile with borders on all 4 sides).
There are two other types of bitmasks in which sub-tiles are divided into 3×3 grids, and that allow us to have more complicated maps (with up to 48 different types of sub-tiles), but we will not use them in this tutorial.
Once the Bitmask is set, go to the Icon tab and select the icon for this autotile. Finally, in the Inspector, change the name to Sand and save the tile set.
Using sand autotile
Click on the TileMap node and then, in the workspace, select the Sand tile. If you try to draw a sand area, you’ll see that Godot will automatically position borders in the right way.
Add some sand areas to make the map more interesting. My result is this:
Repeat the procedure we used for the Sand autotile, this time selecting all water sub-tiles in the image.
Water is an obstacle that our player will not be able to pass through. So, once you have set the Region, the Bitmask and the Icon, go to the Collisions tab to draw collision shapes.
Let’s take a quick look at the toolbar. Going in order, the buttons are:
- Select current sub-tile: this tool is used to select the sub-tile to edit.
- Create new rectangle: with this tool selected, clicking on a sub-tile will create a rectangular collision shape, which you can modify by dragging the corners.
- Create new polygon: with this tool you can draw a polygonal collision shape.
- Delete shape: remove the current collision shape.
- Keep polygon inside region rect: when enabled, the drawing area will be limited to the selected sub-tile region.
- Snap to grid: when enabled, limits the positioning of the points of the polygons to the grid.
Before starting to draw the collision shapes, make sure that Keep polygon inside region rect is enabled and Snap to grid disabled.
Select the water sub-tile at the top left and then click Create new polygon. Using the left mouse button, draw the polygon one point at a time until it is closed, as in the following figure:
If you make a mistake, you can cancel the procedure by clicking the right mouse button. Once you have drawn the polygon, you can edit it by dragging its points or delete it with the Delete shape toolbar button.
Now, repeat this procedure for all the sub-tiles, until you get the result in the image below.
Finally, change the name of the autotile in Water and save the tileset.
Using water autotile
Use this autotile to draw some water areas, just like you used the Sand autotile before.
To prevent the player from leaving the map, we will completely surround it with water. Turn on Disable Autotile and add a water border to the entire map (you’ll have to manually select the correct border and corner tiles). Add a “thickness” of 7 tiles of water around the map, so that when the player is on the edge of the map, the gray background is not visible.
My final result is this:
Try to launch the game and make sure that the player is not able to pass through water areas.
Moving around the map, the player will encounter obstacles that will block its movement. For convenience, we will group all these obstacle tiles in an atlas.
Reopen the tileset file, select the image on the left and click on New Atlas. Then, select the image area that contains the obstacle sprites.
Switch to the Collision tab and, for each tile, draw the collision polygon like we did for Water.
Finally, choose the atlas icon, set its name to Obstacles and save the TileSet.
Using obstacle atlas
Click on the TileMap node and select the Obstacles atlas we just created. A new box will appear, where you can select which obstacle to place on the map. Place obstacles at your leisure.
You’ll get something like this:
Lastly, we’ll create a single tile to place trees on the map.
Reopen MapTileset.tres and select the image on the left. Click on New Single Tile and select the two sub-tiles that make up the tree.
Switch to the Collision tab and draw a polygon that encloses only the lower part of the tree, as shown in the following image:
Finally, set the name of the tile to Tree and save the tileset.
Using the tree tile
If we place trees directly on the TileMap that we have used so far, the ground below would be replaced by the tree tile. But we want the trees to be drawn above our map, so we’ll have to create a second TileMap just for them. Create it, and call it Trees TileMap.
In the Inspector, click on [empty] next to Tile Set, choose Load and select MapTileset.tres to use the same tileset we created earlier.
When the player walks behind a tree, it must be hidden by its sprite. Therefore, we must set the Tree TileMap Z Index value to 2, so that it’s drawn over Player (which has Z Index 1).
Also, still in the Inspector, set the Cell Size to 8×8, so you can place the trees in closer groups.
With Tree TileMap selected, place the trees where you want. If you place the trees close together and one above the other, you will see that they are drawn in the correct order to simulate distance and perspective.
Below you can see my final map.
In this tutorial we learned how to use Godot’s tiling system to create the game map of our RPG. Beside that, we used the Camera2D node to make the game’s camera follows the player as he moves around the map.
You can try what we’ve done so far by clicking here:
Currently, the player sprite always remains the same, whether the player is still or moving. In the next tutorial, we will learn how to animate the player sprite based on the direction in which it’s turned and whether it’s moving or not. In addition, we’ll add animations for two types of player attacks (sword and fireball).