Introducción a los mapas de tiles en Godot: TileMapLayer, TileSet, colisiones y Codex

1
2
3
4
5
6

World (Node2D)
├─ Ground (TileMapLayer)       # Césped, caminos, suelo
├─ Decoration (TileMapLayer)   # Flores, grietas, sombras
├─ Walls (TileMapLayer)        # Muros y obstáculos
├─ Objects (Node2D)            # Cofres, puertas, NPC, monedas
└─ Player (CharacterBody2D)

1

tileset.png

1
2
3

16 × 16
32 × 32
64 × 64

1
2

Node2D
└─ TileMapLayer

1

Ground

1

Tile Set

1
2

<empty>
→ New TileSet

1

32 × 32

1

Physics Layers

1

Add Element

1
2

Collision Layer: 1
Collision Mask: 1

1
2
3

Player (CharacterBody2D)
├─ Sprite2D
└─ CollisionShape2D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

extends CharacterBody2D

@export var speed: float = 200.0


func _physics_process(_delta: float) -> void:
	var direction := Input.get_vector(
		"move_left",
		"move_right",
		"move_up",
		"move_down"
	)

	velocity = direction * speed
	move_and_slide()

1
2

Debug
→ Visible Collision Shapes

1
2
3
4

World
├─ Ground
├─ Walls
└─ Decoration

1
2
3
4

Ground: 0
Walls: 1
Decoration: 2
Player: 3

1
2

World
└─ Ground

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

extends Node2D

@onready var ground: TileMapLayer = $Ground

const SOURCE_ID: int = 0
const GRASS_TILE: Vector2i = Vector2i(0, 0)


func place_grass(cell: Vector2i) -> void:
	ground.set_cell(
		cell,
		SOURCE_ID,
		GRASS_TILE
	)

1

place_grass(Vector2i(5, 3))

1
2

var local_position := ground.to_local(get_global_mouse_position())
var cell := ground.local_to_map(local_position)

1

var position_in_layer := ground.map_to_local(cell)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

extends Node2D

@onready var ground: TileMapLayer = $Ground

const SOURCE_ID: int = 0
const GRASS_TILE: Vector2i = Vector2i(0, 0)


func _unhandled_input(event: InputEvent) -> void:
	if event is InputEventMouseButton:
		if event.button_index == MOUSE_BUTTON_LEFT and event.pressed:
			var local_position := ground.to_local(
				get_global_mouse_position()
			)
			var cell := ground.local_to_map(local_position)

			ground.set_cell(
				cell,
				SOURCE_ID,
				GRASS_TILE
			)

1

ground.erase_cell(cell)

1
2
3

Coin (Area2D)
├─ Sprite2D
└─ CollisionShape2D

1
2

World
└─ Objects

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

Este es un proyecto Godot 4.x.

Estructura de escena:

World: Node2D
├─ Ground: TileMapLayer
├─ Walls: TileMapLayer
├─ Objects: Node2D
└─ Player: CharacterBody2D

Escribe un script para World:

1. Convertir la posición mundial del mouse a coordenadas de celda de Ground;
2. Clic izquierdo coloca un tile de césped;
3. Clic derecho borra un tile;
4. SOURCE_ID y coordenadas atlas deben configurarse con @export;
5. Usar la API TileMapLayer de Godot 4.x;
6. Usar tipos estáticos;
7. No modificar el TileSet ni los nombres de nodos de la escena.

1
2
3
4
5

TileSet guarda el arte y las reglas de los tiles
TileMapLayer dibuja una capa del mapa
La colisión se configura en los tiles dentro del TileSet
Los objetos con comportamiento deben ser escenas independientes
Codex escribe scripts alrededor de la estructura real de nodos

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Genera un atlas de tiles pixel art en vista superior adecuado para Godot 4 TileSet.

Requisitos:
- Vista estrictamente superior
- Tamaño lógico de cada tile: 32×32
- Cuadrícula regular de 6 columnas × 3 filas
- Fondo transparente
- Todas las celdas tienen exactamente el mismo tamaño
- Sin texto, sin etiquetas, sin UI, sin personajes
- No generar un mapa completo
- Mantener estilo e iluminación uniformes

Primera fila:
Césped normal, césped oscuro, césped escaso, tierra, arena, piedra

Segunda fila:
Hierba fina, grava, flores, hojas caídas, grietas del suelo, setas pequeñas

Tercera fila:
Variación de césped claro, variación de tierra oscura, tierra húmeda, piedra con musgo, arena seca, suelo de adoquines

Requisitos técnicos:
- Todos los tiles de suelo deben repetirse sin costuras en las cuatro direcciones
- Los bordes no deben mostrar cortes evidentes
- Los detalles no deben cruzar a celdas vecinas
- Salida como un único atlas PNG

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Genera un tileset de transición entre césped y tierra en pixel art vista superior, adecuado para el sistema Terrain de Godot 4.

Especificaciones:
- Tamaño lógico de cada tile: 32×32
- Vista estrictamente superior
- Distribución en cuadrícula regular
- Fondo transparente
- Densidad de píxeles uniforme
- Dirección de luz uniforme
- Sin texto, sin UI, sin personajes, sin escena completa

Debe incluir:
- Centro de césped puro
- Centro de tierra pura
- Borde superior donde el césped rodea la tierra
- Borde inferior
- Borde izquierdo
- Borde derecho
- Esquina exterior arriba izquierda
- Esquina exterior arriba derecha
- Esquina exterior abajo izquierda
- Esquina exterior abajo derecha
- Esquina interior arriba izquierda
- Esquina interior arriba derecha
- Esquina interior abajo izquierda
- Esquina interior abajo derecha
- Camino estrecho de tierra horizontal
- Camino estrecho de tierra vertical
- Conexión en cruz
- Conexión en forma de T

Todos los píxeles de borde deben coincidir estrictamente y conectar sin costuras.
No omitir esquinas interiores ni exteriores.
Cada tile de conexión debe ocupar una celda completa de la cuadrícula.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Genera un atlas de tiles de agua en pixel art vista superior adecuado para Godot 4 TileSet.

Requisitos:
- Tamaño lógico de cada tile: 32×32
- Distribución en cuadrícula regular
- Fondo transparente
- Vista estrictamente superior
- Color de agua y estilo de ondas uniformes
- Sin texto, sin etiquetas, sin UI, sin mapa completo

Contenido:
- Centro de agua
- Variación de agua 1
- Variación de agua 2
- Orilla superior
- Orilla inferior
- Orilla izquierda
- Orilla derecha
- Esquina exterior arriba izquierda
- Esquina exterior arriba derecha
- Esquina exterior abajo izquierda
- Esquina exterior abajo derecha
- Esquina interior arriba izquierda
- Esquina interior arriba derecha
- Esquina interior abajo izquierda
- Esquina interior abajo derecha
- Pequeña onda
- Hoja flotante
- Piedra en el agua

Usar tierra natural y algo de césped en las orillas.
Todos los bordes deben conectar sin costuras en las cuatro direcciones.
El contenido de cada tile no debe salir de su propia celda.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Genera un atlas de tiles de mazmorra en pixel art vista superior adecuado para Godot 4.

Especificaciones:
- Tamaño lógico de cada tile: 32×32
- Cuadrícula regular de 6 columnas × 5 filas
- Fondo transparente
- Vista estrictamente superior
- Estilo de mazmorra de piedra gris oscuro
- Densidad de píxeles y dirección de luz uniformes
- Sin personajes, sin habitación completa, sin UI ni texto

Contenido:
- Suelo de piedra normal
- Suelo de piedra agrietado
- Suelo de piedra con musgo
- Suelo de piedra con manchas de sangre
- Centro de muro de piedra
- Parte superior de muro de piedra
- Bordes izquierdo y derecho de muro
- Esquina interior de muro
- Esquina exterior de muro
- Hueco de puerta
- Puerta de hierro
- Columna de piedra
- Base de antorcha
- Caja de madera
- Barril de madera
- Escombros
- Huesos
- Cadenas
- Trampa de suelo

Todos los suelos deben repetirse sin costuras.
Los bordes y esquinas de muros deben conectar correctamente.
Cada objeto debe quedar completamente dentro de su celda.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

Genera un atlas de tiles en vista superior, estilo cartoon dibujado a mano, adecuado para Godot 4 TileSet.

Requisitos:
- Tamaño lógico de cada tile: 64×64
- Vista estrictamente superior
- Estilo suave dibujado a mano
- Contornos claros
- Trazos uniformes
- Iluminación uniforme
- Distribución en cuadrícula regular
- Fondo transparente
- No generar una escena de mapa completa
- Sin texto, sin UI, sin personajes

Contenido:
Césped, tierra, arena, camino de piedra, agua, bordes de camino, bordes de transición césped-tierra, flores pequeñas, piedras pequeñas, arbustos.

Todos los suelos base deben repetirse sin costuras.
Los patrones de borde deben conectar con tiles vecinos.
Cada tile debe mantenerse independiente y no cruzar a otra celda.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

no perspective view,
no isometric view,
no complete map,
no characters,
no text,
no labels,
no UI,
no irregular grid,
no overlapping tiles,
no inconsistent tile sizes,
no borders,
no mockup,
no screenshot,
no realistic photography,
no shadows crossing tile boundaries,
no objects cut off by tile edges

1
2
3
4

不要透视，不要等距视角，不要完整地图，不要角色，
不要文字，不要标签，不要 UI，不要预览边框，
不要不规则网格，不要瓦片重叠，不要尺寸不一致，
不要跨格阴影，不要让物体被网格边缘截断。

1
2
3
4
5

no preview scene,
no game screenshot,
no map mockup,
only a tile atlas,
only separate tiles in a regular grid

1
2
3
4
5

Tamaño lógico de tile: 32×32
Diseño del atlas: 6×4 o 6×5
Imagen final generada: 1024×1024 o superior
Fondo: transparente
Estilo: pixel art

1
2

Mantener exactamente los mismos colores, trazos, densidad de píxeles,
vista, dirección de luz y estilo de contorno que el conjunto anterior.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Genera un atlas de tiles de terreno base en pixel art vista superior adecuado para Godot 4 TileSet.

Tamaño lógico de cada tile: 32×32.
El atlas usa una cuadrícula regular de 6 columnas × 3 filas.
Fondo transparente.
Vista estrictamente superior, sin perspectiva, sin ángulo isométrico.
Todos los tiles tienen exactamente el mismo tamaño y están bien alineados.
Densidad de píxeles, estilo de color y dirección de luz uniformes.

Primera fila:
Césped normal, césped oscuro, césped claro, tierra normal, tierra oscura, arena.

Segunda fila:
Suelo de piedra gris, suelo de piedra con musgo, suelo de adoquines, tierra húmeda, hierba seca, grava.

Tercera fila:
Decoración de flores pequeñas, decoración de arbusto, decoración de piedra pequeña, decoración de hojas caídas,
decoración de grieta en el suelo, decoración de seta pequeña.

Todos los suelos base deben repetirse sin costuras en las cuatro direcciones.
Las decoraciones deben quedar completamente dentro de su propio tile.
No generar un mapa completo.
No personajes.
Sin texto, números, etiquetas, UI, bordes ni notas de vista previa.
No dejar que ningún patrón cruce a tiles vecinos.
Salida como un único atlas PNG transparente.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

Referencia estrictamente el tileset que proporcioné. Usa solo los elementos existentes de suelo, caminos, agua, muro de piedra y decoraciones del tileset para montar una escena completa, razonable y utilizable en un RPG de vista superior, con temática de aldea en el bosque.

Especificaciones de la escena:

Vista estrictamente superior.
No usar perspectiva ni vista isométrica.
Tamaño lógico del mapa: 24×18 tiles.
Tamaño lógico de cada tile: 32×32.
Mantener el estilo visual, colores, texturas, dirección de luz y proporciones originales del tileset de referencia.
No cambiar el diseño de los tiles.
No añadir edificios, personajes ni objetos grandes que no existan en la referencia.
No generar UI, texto, bordes ni líneas de cuadrícula.
Generar una escena completa, no un atlas de tiles.

Estructura del mapa:

Usar césped normal como capa base principal, mezclado con algo de césped oscuro y césped escaso para evitar repeticiones grandes.
Colocar una entrada clara en el centro inferior del mapa.
Desde la entrada, crear un camino principal vertical que llegue al centro.
En el centro, el camino principal se divide en dos ramales hacia izquierda y derecha. Todos los caminos deben estar conectados. No crear caminos cortados ni fragmentos sin sentido.
Colocar un estanque pequeño de forma natural en la zona superior derecha.
El estanque debe montarse correctamente con centro de agua, bordes superior/inferior/izquierdo/derecho y esquinas. No crear agua cortada ni orillas en dirección incorrecta.
Colocar una zona de muro de piedra conectada en la parte superior izquierda.
Los bordes y esquinas del muro deben conectar correctamente.
Entre el estanque, los muros y el borde del mapa debe quedar al menos un tile transitable.
Mantener una zona central relativamente abierta para que el personaje pueda moverse.
No permitir que el estanque o los muros bloqueen por completo el camino principal.

Reglas de decoración:

Las flores pequeñas aparecen principalmente en césped, no en caminos ni agua.
Las piedras pequeñas pueden aparecer en poca cantidad sobre tierra, bordes de camino o césped escaso.
Los arbustos se concentran en bordes del mapa, cerca del estanque y en esquinas de muros.
Los tocones aparecen solo en poca cantidad como puntos visuales de interés y no deben bloquear el camino principal.
Las grietas del suelo solo aparecen en tierra o zonas secas.
Las hojas caídas se concentran en esquinas del mapa y cerca de muros.
Mantener limpio el centro de los caminos; la decoración va sobre todo a ambos lados.
Menos decoración en el centro del mapa y más densidad en los bordes.
No decorar cada celda; dejar espacios naturales vacíos.

Requisitos de razonabilidad:

Todos los caminos deben tener un propósito claro y estar conectados entre sí.
Todas las zonas transitables deben ser alcanzables desde la entrada.
El agua, los muros y los caminos deben conectar con la dirección correcta.
No crear tiles aislados de agua, muros aislados ni esquinas incorrectas.
No crear espacios cerrados pequeños a los que no se pueda entrar.
El mapa debe parecer un nivel de juego diseñado, no una colocación aleatoria de tiles.
La composición debe tener jerarquía: la entrada guía al jugador, el camino principal conduce al centro, y el estanque y el muro funcionan como focos visuales secundarios.

Generar solo una escena completa de mapa en vista superior.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

Diseña un layout de mapa de bosque RPG en vista superior de 24×18 usando las siguientes reglas.

Símbolos del mapa:
G = césped normal
D = césped oscuro
S = césped escaso
R = camino
W = agua
A = muro de piedra
F = flor pequeña
K = piedra pequeña
B = arbusto
U = tocón
C = grieta del suelo
L = hojas caídas
P = entrada del jugador

Requisitos de diseño:

P está en el centro inferior del mapa.
Desde P debe existir un camino hacia el centro del mapa.
El camino se divide en ramales izquierdo y derecho en el centro; todos los caminos deben estar conectados.
En la zona superior derecha, colocar un estanque natural de unas 4×5 celdas.
En la zona superior izquierda, colocar un tramo de muro de piedra conectado de forma razonable.
Mantener en el centro al menos una zona abierta de 7×5.
Entre el estanque, los muros y el borde del mapa debe quedar al menos una celda transitable.
El jugador debe poder llegar desde P a todos los caminos principales y zonas abiertas.
No permitir zonas cerradas de césped de una sola celda.
No permitir fragmentos de una sola celda sin sentido en caminos, agua o muros.
Las decoraciones no deben bloquear caminos principales.
Más decoración en bordes del mapa, menos en el centro.
Las flores solo van sobre césped.
Las grietas solo van sobre tierra o césped escaso.
Las hojas caídas van principalmente en esquinas y cerca de muros.
Mantener el conjunto natural, no perfectamente simétrico, pero estructuralmente claro.

Requisitos de salida:

Primera parte: solo la cuadrícula completa de 24×18 caracteres.
Cada fila debe contener exactamente 24 caracteres.
Debe haber exactamente 18 filas.
Segunda parte: listar coordenada de entrada, nodos de caminos, rango del estanque y rango del muro.
Tercera parte: comprobar si existen caminos cortados, zonas cerradas o zonas inaccesibles.
No generar imagen.

1
2
3
4
5
6
7
8
9

Revisa el mapa de caracteres anterior:
1. Si P puede llegar a todos los tiles R de camino;
2. Si existen tiles W de agua aislados;
3. Si existen tiles A de muro aislados;
4. Si alguna zona transitable queda encerrada por agua o muros;
5. Si cada fila contiene exactamente 24 caracteres;
6. Si el mapa tiene exactamente 18 filas.

Si encuentras problemas, entrega un mapa 24×18 corregido completo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

Este es un proyecto Godot 4.x. Necesito crear un mapa completo usando el TileSet existente.

Estructura de escena:

World: Node2D
├─ Ground: TileMapLayer
├─ Roads: TileMapLayer
├─ Water: TileMapLayer
├─ Walls: TileMapLayer
├─ Decorations: TileMapLayer
└─ PlayerSpawn: Marker2D

El atlas del tileset tiene 6 columnas × 5 filas. Las coordenadas son:

Primera fila:
(0,0) césped normal
(1,0) césped oscuro
(2,0) césped escaso
(3,0) suelo de tierra
(4,0) suelo de piedra
(5,0) suelo de arena

Segunda fila:
(0,1) camino horizontal
(1,1) camino vertical
(2,1) esquina superior izquierda de camino
(3,1) esquina superior derecha de camino
(4,1) esquina inferior izquierda de camino
(5,1) esquina inferior derecha de camino

Tercera fila:
(0,2) centro de agua
(1,2) borde superior de agua
(2,2) borde inferior de agua
(3,2) borde izquierdo de agua
(4,2) borde derecho de agua
(5,2) esquina exterior de agua

Cuarta fila:
(0,3) centro de muro de piedra
(1,3) parte superior de muro
(2,3) parte inferior de muro
(3,3) lado izquierdo de muro
(4,3) lado derecho de muro
(5,3) esquina de muro

Quinta fila:
(0,4) flor pequeña
(1,4) piedra pequeña
(2,4) arbusto
(3,4) tocón
(4,4) grieta del suelo
(5,4) hojas caídas

Tarea:

Crear un mapa de aldea forestal de 24×18.
Colocar la entrada del jugador en el centro inferior.
Crear un camino principal desde la entrada al centro y dividirlo allí en ramales izquierdo y derecho.
Crear un estanque pequeño conectado correctamente en la esquina superior derecha.
Crear un tramo de muro de piedra conectado correctamente en la esquina superior izquierda.
Mantener el centro abierto.
Todos los caminos deben estar conectados.
El agua y los muros no deben bloquear el paso.
Colocar decoraciones principalmente en bordes, cerca del estanque y en esquinas de muros.
No colocar decoraciones en el centro de los caminos.
No crear agua aislada, muros aislados ni esquinas en dirección incorrecta.
Usar @export para source_id.
Usar Godot 4 TileMapLayer.set_cell().
Usar tipos estáticos.
Separar datos de mapa y lógica de dibujo.
Añadir comprobación de tamaño de mapa y comprobación de alcanzabilidad.
Si al tileset existente le faltan tiles necesarios para alguna conexión, no adivinar ni sustituir con tiles incorrectos. Indicar claramente qué falta.

Primero lee el proyecto, la escena y el recurso TileSet actual. Confirma el source_id real y las coordenadas atlas antes de modificar código. No asumir que source_id es 0.

1

Primero lee el proyecto, la escena y el recurso TileSet actual. Confirma el source_id real y las coordenadas atlas antes de modificar código. No asumir que source_id es 0.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

Este es un proyecto Godot 4.x.

No modifiques ningún archivo todavía.

Realiza estas comprobaciones:

1. Leer la estructura actual de la escena;
2. Encontrar todos los nodos TileMapLayer;
3. Encontrar el TileSet usado por cada uno;
4. Confirmar el source_id real;
5. Listar qué tile corresponde a cada coordenada atlas;
6. Decidir si el tileset es suficiente para crear un mapa de aldea forestal de 24×18;
7. Si faltan tiles de conexión para caminos, agua o muros, listarlos claramente;
8. Proponer la estructura de datos del mapa;
9. Proponer el método de comprobación de alcanzabilidad;
10. No escribir código todavía.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

Ahora implementa el script de generación de mapa.

Requisitos:

1. Modificar solo el script de World;
2. No modificar el TileSet;
3. No renombrar nodos de escena;
4. Tamaño del mapa: 24×18;
5. Guardar los datos del mapa en arrays o diccionarios;
6. Dibujar con TileMapLayer.set_cell();
7. Usar @export para source_id y coordenadas atlas clave;
8. Añadir comprobación de tamaño del mapa;
9. Añadir comprobación de conectividad de caminos;
10. Añadir comprobación de alcanzabilidad desde PlayerSpawn a zonas principales;
11. Si una comprobación falla, usar push_error() con la causa;
12. Al terminar, explicar cómo probarlo en Godot.

1
2
3
4
5
6

Todos los caminos deben estar conectados entre sí y tener un propósito claro.
No crear tiles aislados de agua, muros o caminos.
Mantener legible el centro del mapa y aumentar la densidad de decoración en los bordes.
Cada zona principal debe ser alcanzable desde la entrada del jugador.
Las decoraciones no deben bloquear las rutas principales.
Diseñar primero la estructura del mapa y añadir decoración después.

1

Primero estructura, después decoración.