In this tutorial, we will see how to use Godot’s TileSet Editor to create various types of tiles. As we create the tiles, we will use them in a TileMap to draw the map of our game.

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.

Preparatory steps

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).

Download “SimpleRPG Map Tiles” map_tiles.png – 5 KB

Now, add a TileMap node to Root.

Add a TileMap node

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.

Create new TileSet

Now, click on the newly created TileSet resource:

Click on the TileSet resource

The TileSet Editor will open.

The TileSet Editor will appear on the bottom of Godot’s window

Grass autotile

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:

The grid size is wrong!

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.

Now the grid size is right

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).

In Bitmask, select all grass 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.

Click here to save the TileSet

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.

Grass autotile with Disable Autotile turned on

For example, I used manual placement to create an area full of flowers in the southwest corner of the map.

I drew lots of daisies south-east 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.

Sand autotile

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.

Select all sand tiles

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:

In Bitmask, select the internal parts of tiles

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.

Drawing a sand area

Add some sand areas to make the map more interesting. My result is this:

I have placed some sand area in my map

Water autotile

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.

The Collision tab

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:

Draw collision shape over water

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:

The game is set on a small island.

Try to launch the game and make sure that the player is not able to pass through water areas.

Obstacles atlas

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:

Tree tile

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.

The game map is completed!

Conclusions

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).




12 Comments

Avatar

Randi · October 25, 2019 at 12:31 am

Thank u for these tutorials please keep them coming!

    Avatar

    Davide Pesce · October 25, 2019 at 2:13 pm

    I’m glad you enjoyed them! There will be at least 5 or 6 other tutorials to finish the game. But I think I’ll write more, maybe based on the feedback I get in the comments.

Avatar

Linton · November 21, 2019 at 11:45 pm

Thanks for the tutorial they are typically very easy to follow. I wanted to suggest a callout be added to TileSet button. I spent about fifteen minutes trying to figure out what button to click after creating open the TileSet editor.

    Avatar

    Davide Pesce · November 22, 2019 at 12:57 am

    Thanks for the feedback, I tried to make it clearer which buttons to click. If I can do anything else to make the tutorial more understandable, let me know!

      Avatar

      Linton · November 26, 2019 at 4:41 pm

      You’re welcome David and kudos to you for being open to feedback, lots of people are not.

Avatar

Permagate · January 17, 2020 at 1:59 am

I had no trouble following the guide, though clicking around the Tileset takes some times to get used to. Btw, I think it’s worth to mention that the subtile size should be set to 16. My default was 32 for some reasons, and that makes it impossible to set priority since the subtile takes the whole 2×2 tile.

Also, the tiles seem to be rendered with jagged lines, check this out: https://imgur.com/a/smrfQtY
Is there any option I missed to smooth them out?

    Avatar

    Davide Pesce · January 17, 2020 at 9:57 am

    Btw, I think it’s worth to mention that the subtile size should be set to 16. My default was 32 for some reasons, and that makes it impossible to set priority since the subtile takes the whole 2×2 tile.

    I highlighted this passage better, it was easy to miss.

    Also, the tiles seem to be rendered with jagged lines, check this out: https://imgur.com/a/smrfQtY
    Is there any option I missed to smooth them out?

    If you look at the image, you will notice that the map is blurry compared to the player’s sprite, so you definitely have the Filter option turned on for the map image. To disable it, you must select the map_tiles.png file, go to the Import panel, disable Filter and finally click on Reimport. I think this should fix your problem!

    If it doesn’t work out, in the tutorial there are other solutions you can try, which for convenience I copy here:

    • in Project Settings, activate Rendering → Quality → 2d → Use Pixel Snap
    • activate Y Sort in the TileMap node
    • in Project Settings, disable Rendering → Quality → Depth → Hdr.
      Avatar

      Permagate · January 17, 2020 at 2:20 pm

      Reimport with filter flag disabled did the trick, thanks!

      Also, the 3 steps that you mentioned reduces another issue that I had with flickering tiles, but not completely. Sometimes when I run the scene and walk for a while, one or two tiles still flicker noticeably. I think this one is an issue with Nvidia using GLES3 driver though. It’s currently an open issue in github: https://github.com/godotengine/godot/issues/9913

      I managed to completely remove the flickers by changing the driver to GLES2 and tick the “GLES 2 Use Nvidia Rect Flicker Workaround”.

Avatar

Bureal · February 23, 2020 at 2:25 pm

Trying to follow your tutorial and stuck on tilemap. What is probability?

Thanks for the lessions.

    Avatar

    Bureal · February 23, 2020 at 7:00 pm

    I got it. Thanks 😀

Avatar

Jonas Johansson · March 4, 2020 at 8:40 am

Thanks for the tutorials. They are very easy to follow and explains the concepts in a very good way. Keep up the good work.

A tip to skip turning off ‘Filter’ each time when importing new images is to use “Import: Preset->Set as Default for ‘Texture'”.

    Avatar

    Davide Pesce · March 4, 2020 at 11:28 am

    Thank you Jonas! Nice trick for those who work mainly with pixel art!

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to browse this Website, you consent to the use of cookies. More information

This Website uses:

By continuing to browse this Website without changing the cookies settings of your browser or by clicking "Accept" below, you consent to the use of cookies.

Close