Use 2D Tilemap Extras to create maps with autotiles

Page update date :
Page creation date :

Verification environment

  • Windows 11
Unity Editor
  • 2021.3.3f1
Input System Package
  • 1.3.0

Prerequisites for this tip

The following settings have been made in advance as a premise for the description of this tip.

What are the prerequisites for this tip?

About borrowing map materials

It is borrowed from the following site.

About Auto Tiles

Normally, when placing MapChips, MapChips that connect up, down, left, and right need to be placed while changing the MapChips to be placed each time. However, it is quite troublesome because you have to switch the map chips to be placed according to the complexity of the map. Also, since it is all done by hand, there is a possibility of misplacement.

If you use the auto-tile mechanism, if there are MapTips that connect up, down, left, and right, the MapChips will automatically switch and place them so that there is no discomfort. It is necessary to set where to connect in advance, but it is highly recommended because the cost of placing the map chip will be reduced more than that effort.

To use autotiles in Unity, you need to use the extension library. Let's use the official library "2D Tilemap Extras".

2D Tilemap Extras is installed as standard in 2D projects as of Unity Editor 2021.3.3f1.

Prepare MapTips for Auto Tiles

For the time being, any map chip that connects up, down, left and right is fine, but a map chip for auto tiles consisting of 5 chips as shown below is often used.

However, the above configuration is in the form often used in the "WOLF RPG Editor". Five chips are enough because they can be used in 4 more parts of the tool, but Unity does not have that much functionality, so you need to create the required amount of chips in advance from the above 5 chips.

However, it is troublesome to make it by hand, so it is easier to create it in bulk using the following site.

When you open the page, you will see a screen like the one shown in the figure, so drop the image of the 5 chips mentioned earlier in the frame of the blue background.

Then, a split image will be created, so download and use it.

Splitting MapChips for Auto Tiles

After creating the project, place the MapChip you just created in the project and divide it. The work around here is the same as the explanation for the tilemap, so I will post only the image.

You don't need to add it to the tile palette yet.

Adding a Rule Tile

Auto-tile can be achieved with "Rule Tile" in 2D Tilemap Extras. Right-click an empty area in the project and select Create -> 2D-> Tile-> Rule Tile to add it.

The name can be anything. For now, I'll call it "SeaAutoTile".

Select the Rule Tile you created, and the inspector will change as shown. First, specify the default sprite. This sprite does not affect the placement of the maptip, but it will be a thumbnail, so please specify an easy-to-understand image.

Image settings can be set by selecting from the select button or by dropping the maptip image directly.

Next, drop a set of maptips to use for the rectangle frame below. It is possible to drop them individually, but if you drop the image source of the divided MapChips, you can register the divided MapChips in bulk.

Below is an image of the added state. There are 47 chips in total.

What we're going to do here is set in which direction each MapTip will be connected. Click on the 9 squares to switch between "blank", "× (red)", and "arrow (green)". × means not to connect in that direction, arrow means to connect. Blank space is left to the next mapchip.

If you only connect in 4 directions, you can set only 4 squares up, down, left and right.

However, this time, there are some that connect diagonally, and the only difference is that they connect diagonally or not, so set them up properly.

Set all 47 and you're done.

Add to tile palette

Create a tile palette. If there is no tile palette tab, display it from "Window -> 2D -> Tile Palette" in the menu. The name of the palette can be anything. If you need more than one palette when creating your game, keep it easy to understand.

The tile palette settings are created in a new SeaPalette folder in the Scenes folder. The folder name and location are arbitrary.

Once you've created your tile palette, add maptips. In a normal tile map, we placed a divided maptip, but this time we will place the Rule Tile.

When placed, only one chip is displayed, but in the case of auto tiles, this is all that is OK.

MapTips (Auto Tiles) placement

Add a tilemap to the hierarchy as you would for a tilemap.

Select Tilemap to display a grid in the view.

Let's place a maptip here. Select an auto tile from the palette.

If you place it in the view, it will be placed as it is in the case of one square, but if you place it in a connected form, you can see that the map chips are arranged in a different way so that they are connected. This is the arrangement using the auto-tile mechanism. You no longer have to choose separate MapTips to connect.

I tried to arrange it so that it would be a pond. However, the connection is going wrong. This is because the Rule Tile is misconfigured. In this case, go back to the Rule Tile settings and reset the strange location. You can leave the placed MapTips as they are.

Correct where it's wrong.

If you modify it, it will be automatically reflected, and you can confirm that it will be properly shaped like a pond.

After that, try placing it in various forms and check if there is anything wrong. If it is set correctly, you can place the maptip in a natural way just by clicking with the mouse.

It is recommended to set up auto tiles in this way, as it will make map creation very easy. Of course, if you register other map chips in the tile palette, you can create a map that combines auto tiles and regular tiles.