Tilemap painting in Unity - Step-by-Step Execution

Concept Flow - Tilemap painting

Start

↓

Select Tilemap Component

↓

Choose Tile to Paint

↓

Click on Tilemap Grid Position

↓

Place Tile at Position

↓

Repeat or Finish

This flow shows how you select a tile and paint it onto a tilemap grid step-by-step.

Execution Sample

Unity

using UnityEngine;
using UnityEngine.Tilemaps;

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

    void Paint(Vector3Int pos) {
        tilemap.SetTile(pos, tile);
    }
}

This code paints a chosen tile onto the tilemap at a given grid position.

Execution Table

Step	Action	Input Position	Tile Placed?	Tilemap State
1	Select Tilemap Component	-	No	{} (empty)
2	Choose Tile to Paint	-	No	{} (empty)
3	Call Paint() with pos=(0,0,0)	(0,0,0)	Yes	{(0,0,0): tile}
4	Call Paint() with pos=(1,0,0)	(1,0,0)	Yes	{(0,0,0): tile, (1,0,0): tile}
5	Call Paint() with pos=(0,1,0)	(0,1,0)	Yes	{(0,0,0): tile, (1,0,0): tile, (0,1,0): tile}
6	Finish Painting	-	No	Final tilemap with 3 tiles placed

💡 Painting stops when user finishes or no more positions are given.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
tilemap	empty	{(0,0,0): tile}	{(0,0,0): tile, (1,0,0): tile}	{(0,0,0): tile, (1,0,0): tile, (0,1,0): tile}	same as After Step 5
pos	null	(0,0,0)	(1,0,0)	(0,1,0)	last used (0,1,0)
tile	assigned	assigned	assigned	assigned	assigned

Key Moments - 3 Insights

Why does the tilemap state change only after calling Paint()?

Because SetTile() is called inside Paint(), the tilemap updates only when Paint() runs, as shown in steps 3-5 of the execution_table.

What happens if you call Paint() with the same position twice?

The tile at that position is replaced with the new tile, updating the tilemap state at that position. This is implied by how SetTile() works but not shown in this trace.

Why is the tilemap empty before any Paint() calls?

Because no tiles have been placed yet; the tilemap starts empty as shown in step 1 and 2 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the tilemap state after step 4?

A {} (empty)

B {(0,0,0): tile}

C {(0,0,0): tile, (1,0,0): tile}

D {(0,0,0): tile, (0,1,0): tile}

💡 Hint

Check the 'Tilemap State' column at step 4 in the execution_table.

At which step does the first tile get placed on the tilemap?

A Step 1

B Step 3

C Step 2

D Step 6

💡 Hint

Look for the first 'Yes' in 'Tile Placed?' column in the execution_table.

If you call Paint() with position (2,0,0) after step 5, how would the tilemap state change?

A It adds {(2,0,0): tile} to the tilemap

B It removes all previous tiles

C It replaces tile at (0,0,0)

D No change happens

💡 Hint

Refer to how tilemap state grows after each Paint() call in variable_tracker.

Concept Snapshot

Tilemap painting in Unity:
- Use Tilemap component and Tile assets
- Call tilemap.SetTile(position, tile) to paint
- Position is Vector3Int grid coordinate
- Each call places or replaces tile at position
- Repeat to paint multiple tiles
- Tilemap updates visually in scene

Full Transcript

Tilemap painting in Unity involves selecting a Tilemap component and a Tile asset. You then call the Paint function with a grid position to place the tile there using tilemap.SetTile. The tilemap starts empty and updates each time Paint is called with a new position. This process repeats until painting is finished. The execution table shows each step: selecting components, calling Paint with positions, and how the tilemap state changes by adding tiles. Variables like tilemap and pos update accordingly. Common confusions include why tilemap changes only after Paint calls and what happens if the same position is painted twice. The visual quiz tests understanding of tilemap state changes and painting steps. This method lets you build tile-based maps visually and programmatically in Unity.

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