Tilemap painting in Unity - Mini Project: Build & Apply

Tilemap painting

📖 Scenario: You are creating a simple 2D game in Unity where the player can paint tiles on a grid. This helps design levels by placing different types of tiles on a tilemap.

🎯 Goal: Build a Unity script that allows painting tiles on a Tilemap by clicking on grid positions. You will set up the tilemap, configure the tile to paint, write the painting logic, and complete the script for interaction.

📋 What You'll Learn

Create a Tilemap variable to hold the tilemap component

Create a Tile variable to hold the tile to paint

Write a method to paint the tile at a given grid position

Complete the Update method to detect mouse clicks and paint tiles accordingly

💡 Why This Matters

🌍 Real World

Tilemap painting is used in 2D game development to design levels and environments quickly by placing tiles on a grid.

💼 Career

Understanding tilemap painting is important for game developers working with Unity to create interactive and visually appealing 2D games.

1

Set up Tilemap and Tile variables

Create a public variable called tilemap of type Tilemap and a public variable called tile of type Tile inside the TilePainter class.

Unity

using UnityEngine;
using UnityEngine.Tilemaps;

public class TilePainter : MonoBehaviour
{
    // Your code here
}

Need a hint?

Use public Tilemap tilemap; and public Tile tile; inside the class.

2

Add a method to paint a tile at a grid position

Add a public method called PaintTile that takes a Vector3Int parameter named position. Inside the method, set the tile at position on tilemap to the tile variable.

Unity

using UnityEngine;
using UnityEngine.Tilemaps;

public class TilePainter : MonoBehaviour
{
    public Tilemap tilemap;
    public Tile tile;

    // Your code here
}

Need a hint?

Define PaintTile(Vector3Int position) and call tilemap.SetTile(position, tile);.

3

Detect mouse click and convert to grid position

Inside the Update method, detect if the left mouse button is clicked using Input.GetMouseButtonDown(0). If clicked, convert the mouse position from screen space to world space using Camera.main.ScreenToWorldPoint. Then convert the world position to a grid position using tilemap.WorldToCell. Store this grid position in a variable called gridPosition.

Unity

using UnityEngine;
using UnityEngine.Tilemaps;

public class TilePainter : MonoBehaviour
{
    public Tilemap tilemap;
    public Tile tile;

    public void PaintTile(Vector3Int position)
    {
        tilemap.SetTile(position, tile);
    }

    void Update()
    {
        // Your code here
    }
}

Need a hint?

Use Input.GetMouseButtonDown(0) to detect click, convert mouse position with Camera.main.ScreenToWorldPoint, then convert to grid with tilemap.WorldToCell.

4

Call PaintTile method on mouse click

Inside the Update method, after calculating gridPosition, call the PaintTile method with gridPosition as the argument to paint the tile where the mouse was clicked.

Unity

using UnityEngine;
using UnityEngine.Tilemaps;

public class TilePainter : MonoBehaviour
{
    public Tilemap tilemap;
    public Tile tile;

    public void PaintTile(Vector3Int position)
    {
        tilemap.SetTile(position, tile);
    }

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            Vector3 mouseWorldPos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
            Vector3Int gridPosition = tilemap.WorldToCell(mouseWorldPos);
            // Your code here
        }
    }
}

Need a hint?

Call PaintTile(gridPosition); inside the mouse click check.