Unity 2D tilemaps

Creation of a tilemap

Open the Unity Hub and then create a new project:

Select [2D] as the template for the project and then create the project:

Wait for a while until the new project is ready.

We want to create a tilemap with rectangular tiles. Click on the [+] button, on the [Hierarchy] browser and then select the option [2D Object > Tilemap > Rectangular]:

Now we have a Grid and a Tilemap item in the Hierarchy browser on the top left:

Next we need a tile palatte. Thats a palatte with different types of tiles we can then add to our tilemap. For example if our tilemap should represent a geographic map. We could have a tile of type “sea”, another one of type “mountains”, another one of type “forest”, … in our tile palatte. We can then select for example the “sea” tile in the tile palette and then draw a sea consisting of many tiles of type “sea” on the tilemap.

Creating the tile palette

To create a tile palette select [Window > 2D > Tile Palette]

We have now an empty palette. From here there are different ways we could proceed. We could for example download a nice tile palette with nice painted tiles from some internet page that offers ready tile palettes. Or we could add out-of-the-box tiles of Unity. In this example we want to create our own tiles and add them one by one to the tile palette.

For example we can draw a tile symbolizing a forest in Paint brush like this:

Then you can save the file, in this example “Nordic Forest land.png”, somewhere on your PC, for example on the desktop. To load this into the Unity Editor, you can simply drag and drop the file on to the [Project] window on the bottom:

The image file is placed in the Assets window:

Switch over to the [Tile Palette] windows and click on [Create New Palette]. A new small dialog opens that allows you to define the tile palette. For this example we prefer rectangular tiles. Click on [Create] once you have selected the Grid type:

Select the folder for tile palette assets. The drag and drop the “Nordic Forest land.png” image from [Assets] windows to [Tile Palette] and save the new tile asset file “Nordic Forst lang.asset” in the [Assets] folder:

In the same way we can create more image files and add them to [Assets] windows and then to the [Tile Palette] window:

Editing the tile palette

If you are not happy with the tiles on your [Tile Palette] you can delete or move them by clicking on the [Edit] buttom (1), followed by selecting the selection tool (2) and then selecting the tile (3) you want to delete or move around. Note that the tile is only considered as selected for editing if it has an orange border around it:

Once the tile is selected for editing (orange border) you can for example press the [delete] button to delete it or select the [Move] tool to move it around:

Once you are done with editing deselect the [Edit] button.

Editing the tile map

To edit the tile map, select the paint tool (1), select the tile (2) you want to draw on the tile map and start drawing on the tile map (3):

Adding a script to the tile map

In this section, we will add a script to the tile map, which would make every selected tile turn red.

Before adding the script to the tile map we add a new tile image e. g. “Seleteted tile.png” to our [Assets] windows and from there we drag and drop it onto our tile palette:

To add a script to our tile map, we have to first select the tile map (1) in the [Hierarchy] window on the left side and then click on [Add Compontent] (2) on the right side:

A drop-down opens. Click on the option [New script]:

Give a name to the new script and press on [Create and Add]:

The new script now appears in the [Assets] windows:

Click on the newly added script in the [Assets] windows: The [Inspector] Windows opens on the right side:

Click on the [Open] button to open the script for editing with the default editor (you can configure your favorite editor for the scripts under [Edit –> Preferences –> External Tools –> External Script Editor]):

Once the script is opened in the script editor (e. g. VS), update the script to match the following content:

HighlightSelectedTile.cs:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Tilemaps; 

public class HighlightSelectedTile : MonoBehaviour
{
    [SerializeField] private Tilemap tilemap;
    [SerializeField] private TileBase selectedTile;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            Vector3 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
            Vector3Int cellPos = tilemap.WorldToCell(mousePos);

            if (tilemap.HasTile(cellPos))
            {
                tilemap.SetTile(cellPos, selectedTile);
                tilemap.SetColor(cellPos, Color.red);
            }
        }
    }
}

Save the changes on the script and then go back to Unity GUI and select the tilemap (1) and then assign the Tilemap to the property tilemap and the Selected tile for the property selectedTile (2):

Now you can switch to the [Game] tab (1), run the application (2) and see that by selecting any tile its color changes to red (3):

admin

Uncategorized