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
}

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
}

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
    }
}

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
        }
    }
}

Hint

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

Practice

1. What does the SetTile method do in Unity's Tilemap painting?

easy

A. It resizes the tilemap grid.

B. It changes the color of the entire tilemap.

C. It places or removes a tile at a specific grid position.

D. It saves the tilemap as an image file.

Solution

1. Step 1: Understand the purpose of SetTile

   The SetTile method is used to place or remove tiles at specific positions on the tilemap grid.

2. Step 2: Compare with other options

   Changing color, resizing grid, or saving as image are not functions of SetTile.

3. Final Answer:

   It places or removes a tile at a specific grid position. -> Option C

4. Quick Check:

   SetTile = Place or remove tile [OK]

Hint: Remember SetTile changes tiles at grid spots [OK]

Common Mistakes:

• Thinking SetTile changes tilemap color
• Confusing SetTile with resizing grid
• Assuming SetTile exports images

2. Which of the following is the correct syntax to set a tile at position (2, 3) on a Tilemap named tilemap using a tile named myTile?

easy

A. tilemap.SetTile(new Vector2(2, 3), myTile);

B. tilemap.SetTile(2, 3, myTile);

C. tilemap.SetTile(Vector3(2, 3), myTile);

D. tilemap.SetTile(new Vector3Int(2, 3, 0), myTile);

Solution

1. Step 1: Identify correct parameter types for SetTile

   The SetTile method requires a Vector3Int for grid position and a tile object.

2. Step 2: Check each option's syntax

   tilemap.SetTile(new Vector3Int(2, 3, 0), myTile); uses new Vector3Int(2, 3, 0) which is correct. Options A, B, and D use wrong types or missing 'new' keyword.

3. Final Answer:

   tilemap.SetTile(new Vector3Int(2, 3, 0), myTile); -> Option D

4. Quick Check:

   SetTile needs Vector3Int position [OK]

Hint: Use Vector3Int for tile positions in SetTile [OK]

Common Mistakes:

• Using Vector2 instead of Vector3Int
• Omitting 'new' keyword for Vector3Int
• Passing separate x,y instead of Vector3Int

3. Given the code below, what will be the output on the tilemap?

Vector3Int pos = new Vector3Int(1, 1, 0);
tilemap.SetTile(pos, myTile);
tilemap.SetTile(pos, null);

medium

A. The tile at position (1,1) will be removed (empty).

B. The tile at position (1,1) will be set to myTile.

C. An error occurs because the same position is set twice.

D. The tilemap will have two tiles at position (1,1).

Solution

1. Step 1: Understand SetTile behavior with null

   Setting a tile to null removes the tile at that position.

2. Step 2: Analyze the code sequence

   First, the tile at (1,1) is set to myTile. Then it is immediately removed by setting it to null.

3. Final Answer:

   The tile at position (1,1) will be removed (empty). -> Option A

4. Quick Check:

   SetTile with null removes tile [OK]

Hint: SetTile with null clears tile at position [OK]

Common Mistakes:

• Thinking setting twice causes error
• Assuming tile remains after setting null
• Believing multiple tiles can stack at one position

4. What is wrong with this code snippet that tries to paint a tile?

Vector3Int position = new Vector3Int(0, 0, 0);
tilemap.SetTile(position, myTile);
position = new Vector3Int(1, 0);
tilemap.SetTile(position, myTile);

medium

A. SetTile cannot be called twice in a row.

B. The second Vector3Int is missing the z coordinate.

C. The variable 'position' cannot be reassigned.

D. myTile is not defined before use.

Solution

1. Step 1: Check Vector3Int constructor usage

   The first Vector3Int has three coordinates (x, y, z). The second only has two, which is invalid.

2. Step 2: Understand Vector3Int requirements

   Vector3Int requires three integer arguments; missing the z coordinate causes a compile error.

3. Final Answer:

   The second Vector3Int is missing the z coordinate. -> Option B

4. Quick Check:

   Vector3Int needs 3 ints [OK]

Hint: Always provide x, y, and z for Vector3Int [OK]

Common Mistakes:

• Assuming Vector3Int can have 2 parameters
• Thinking SetTile calls cause errors
• Believing variables can't be reassigned

5. You want to paint a 3x3 square of tiles starting at position (0,0) on a Tilemap named tilemap using a tile named grassTile. Which code snippet correctly does this?

hard

A. for (int x = 0; x < 3; x++) {
for (int y = 0; y < 3; y++) {
tilemap.SetTile(new Vector3Int(x, y, 0), grassTile);
}
}

B. for (int i = 0; i < 9; i++) {
tilemap.SetTile(new Vector3Int(i, i, 0), grassTile);
}

C. tilemap.SetTile(new Vector3Int(0, 0, 0), grassTile);
tilemap.SetTile(new Vector3Int(1, 1, 0), grassTile);
tilemap.SetTile(new Vector3Int(2, 2, 0), grassTile);

D. tilemap.SetTile(new Vector3Int(0, 0, 0), grassTile);
tilemap.SetTile(new Vector3Int(0, 1, 0), grassTile);
tilemap.SetTile(new Vector3Int(0, 2, 0), grassTile);

Solution

1. Step 1: Understand the goal to paint a 3x3 square

   We need to paint tiles at all positions where x and y range from 0 to 2.

2. Step 2: Analyze each code snippet

   for (int x = 0; x < 3; x++) { for (int y = 0; y < 3; y++) { tilemap.SetTile(new Vector3Int(x, y, 0), grassTile); } } uses nested loops for x and y from 0 to 2, correctly covering all 9 positions. for (int i = 0; i < 9; i++) { tilemap.SetTile(new Vector3Int(i, i, 0), grassTile); } paints diagonal only. tilemap.SetTile(new Vector3Int(0, 0, 0), grassTile); tilemap.SetTile(new Vector3Int(1, 1, 0), grassTile); tilemap.SetTile(new Vector3Int(2, 2, 0), grassTile); paints only three diagonal tiles. tilemap.SetTile(new Vector3Int(0, 0, 0), grassTile); tilemap.SetTile(new Vector3Int(0, 1, 0), grassTile); tilemap.SetTile(new Vector3Int(0, 2, 0), grassTile); paints only one column.

3. Final Answer:

   for (int x = 0; x < 3; x++) { for (int y = 0; y < 3; y++) { tilemap.SetTile(new Vector3Int(x, y, 0), grassTile); } } -> Option A

4. Quick Check:

   Nested loops cover 3x3 grid [OK]

Hint: Use nested loops for grid painting [OK]

Common Mistakes:

• Painting only diagonal tiles
• Painting fewer tiles than needed
• Using single loop for 2D grid