Construcción de niveles 2D con TileMap y organización de escenas

Capítulo 7

Tiempo estimado de lectura: 8 minutos

+ Ejercicio

Qué es un TileMap y por qué se usa para niveles

Un TileMap es un nodo que dibuja y gestiona un mapa 2D a partir de piezas repetibles llamadas tiles. En lugar de colocar cientos de sprites uno por uno, pintas el nivel como si fuera un editor de mosaicos. Esto facilita: construir escenarios rápido, mantener consistencia visual, definir colisiones por tile y optimizar el rendimiento al agrupar el dibujo en “chunks”.

Preparación del nivel: escena “Nivel” y estructura recomendada

Para mantener el proyecto ordenado, conviene separar responsabilidades en escenas y sub-escenas. Una organización típica para un nivel jugable:

  • Nivel.tscn (raíz del nivel): contiene el TileMap, límites, spawners y referencias.
  • Jugador.tscn: el personaje controlable.
  • HUD.tscn: interfaz (vida, monedas, objetivo, etc.).
  • Enemigo.tscn (y variantes): lógica y colisiones del enemigo.

Ejemplo de árbol de nodos dentro de Nivel.tscn:

Nivel (Node2D o CharacterBody2D/Node2D según tu caso)  TileMap (TileMap)  Limites (Node2D)    LeftWall (StaticBody2D)      CollisionShape2D    RightWall (StaticBody2D)      CollisionShape2D    TopWall (StaticBody2D)      CollisionShape2D    BottomWall (StaticBody2D)      CollisionShape2D  Spawns (Node2D)    PlayerSpawn (Marker2D)    EnemySpawn1 (Marker2D)  Jugador (instancia de Jugador.tscn)  Enemigos (Node2D)    (instancias de Enemigo.tscn)  HUD (CanvasLayer, instancia de HUD.tscn)

Así, el TileMap se encarga del “suelo y paredes”, el jugador y enemigos son instancias reutilizables, y el HUD queda desacoplado del mundo (en CanvasLayer).

Creación del TileSet: configuración práctica

1) Crear el TileSet desde una textura

Pasos en Godot (TileMap seleccionado):

Continúa en nuestra aplicación.
  • Escuche el audio con la pantalla apagada.
  • Obtenga un certificado al finalizar.
  • ¡Más de 5000 cursos para que explores!
O continúa leyendo más abajo...
Download App

Descargar la aplicación

  • En el inspector, en Tile Set, crea un recurso nuevo (New TileSet).
  • Abre el editor de TileSet (panel inferior o botón de edición).
  • Añade tu atlas/spritesheet: Add Atlas Source y selecciona la textura.
  • Configura el tamaño de celda del atlas (por ejemplo 16x16, 32x32) para que el recorte sea correcto.

2) Definir tiles y variantes

Selecciona regiones del atlas para crear tiles. Si tu arte tiene bordes, esquinas y centro, crea tiles separados para cada uno. Si usas autotiling (terrenos), define un Terrain Set y asigna a cada tile su tipo (suelo, pared, etc.) para pintar bordes automáticamente.

3) Colisiones por tile (lo esencial)

Para que el jugador no atraviese el suelo, cada tile sólido debe tener una forma de colisión:

  • En el editor de TileSet, selecciona un tile.
  • Ve a la sección de Physics (colisión) y añade una forma (rectángulo suele bastar para plataformas).
  • Ajusta la forma para que coincida con la parte sólida del tile (por ejemplo, un tile de plataforma puede tener colisión solo en la parte superior si estás diseñando plataformas “one-way”, aunque eso requiere configuración adicional).

Recomendación: mantén colisiones simples (rectángulos) para rendimiento y estabilidad.

4) Capas del TileMap: visual vs colisión

Una práctica útil es separar en capas dentro del mismo TileMap:

  • Capa Suelo: tiles con colisión (plataformas, paredes).
  • Capa Decoración: tiles sin colisión (fondo, detalles).

Esto evita colisiones accidentales en elementos decorativos y hace más claro el diseño.

Pintar el nivel: colocación de tiles y reglas prácticas

1) Ajustes del TileMap

  • Define el tamaño de celda coherente con tu TileSet.
  • Activa el snap a la cuadrícula para pintar con precisión.
  • Usa la herramienta de rectángulo para rellenar áreas grandes (suelo) y la de línea para bordes.

2) Diseño jugable: guía rápida

  • Empieza con un “suelo base” continuo para probar movimiento.
  • Añade plataformas a distintas alturas con distancias alcanzables por el salto del jugador.
  • Coloca paredes o bloques para guiar al jugador y evitar salidas del área.
  • Reserva espacios para obstáculos y un objetivo final.

Integración con el jugador: spawn, colisiones y límites del escenario

1) Colocar el jugador en un punto de inicio

En Nivel.tscn, crea un Marker2D llamado PlayerSpawn. Al iniciar el nivel, posiciona al jugador allí. Ejemplo de script en Nivel:

extends Node2D @onready var player := $Jugador @onready var player_spawn := $Spawns/PlayerSpawn func _ready():  player.global_position = player_spawn.global_position

Si prefieres instanciar al jugador (en vez de tenerlo ya en la escena), puedes cargar la escena del jugador y añadirla como hijo del nivel.

2) Asegurar que el TileMap colisiona correctamente

Si ya definiste colisiones en el TileSet, el TileMap generará colisiones automáticamente. Verifica:

  • Que los tiles sólidos tienen forma de colisión.
  • Que el jugador tiene su capa/máscara de colisión configurada para chocar con el mundo.
  • Que la capa del TileMap (o sus colisiones) está en la capa adecuada (por ejemplo “World”).

Consejo de depuración: activa la visualización de colisiones desde el menú de depuración para confirmar que el suelo tiene shapes donde esperas.

3) Límites del escenario (paredes invisibles)

Aunque el TileMap puede formar paredes, es común añadir límites invisibles para evitar que el jugador salga del área por arriba/abajo o por los lados. Crea cuatro StaticBody2D con CollisionShape2D (rectángulos largos) en los bordes del nivel. Colócalos bajo un nodo Limites para tenerlos agrupados.

Alternativa: si usas cámara con límites, puedes combinar límites físicos (para no caer fuera) con límites de cámara (para no mostrar fuera del mapa).

Optimización básica del TileMap (sin complicarse)

1) Mantén el número de capas bajo control

Cada capa extra puede aumentar el coste de dibujo. Usa las capas necesarias (suelo/colisión y decoración) y evita duplicar capas sin motivo.

2) Colisiones simples y consistentes

Las colisiones por tile deben ser lo más simples posible. Evita polígonos complejos si no aportan jugabilidad. Para suelos rectos, un rectángulo por tile suele ser suficiente.

3) Reutiliza TileSets y evita texturas gigantes innecesarias

Un TileSet reutilizable por varios niveles reduce trabajo y mantiene coherencia. Si tu atlas es enorme, considera dividirlo por temática (interior/exterior) para no cargar más de lo necesario.

4) No “pintes” decoración como colisión

Separar decoración sin colisión evita cálculos físicos extra y problemas de jugabilidad (engancharse en detalles).

Dividir el nivel en escenas: patrón de trabajo recomendado

Escena Jugador

Debe contener: nodo principal del jugador, su colisión, animación y script. El nivel solo debería decidir dónde aparece y, si aplica, reiniciarlo.

Escena Enemigo

Define un enemigo base con su comportamiento. En el nivel, crea un nodo Enemigos y coloca instancias. Para posicionarlos con precisión, usa Marker2D como spawns.

Escena HUD

Colócala como CanvasLayer para que no se mueva con la cámara. El HUD debe recibir datos (vida, tiempo, objetivos) mediante señales o referencias controladas, evitando que el HUD “busque” nodos del mundo sin necesidad.

Escena Nivel

Actúa como “orquestador”: contiene TileMap, límites, spawns, instancias y conexiones. Mantén aquí la lógica de flujo del nivel (reinicio, victoria, checkpoint) y deja la lógica específica en cada escena (jugador/enemigo).

Ejercicio guiado: diseña una sección con plataformas, obstáculo y objetivo

Objetivo del ejercicio

Construir una sección jugable pequeña que incluya: un tramo de plataformas, un obstáculo que obligue a saltar o rodear, y un objetivo alcanzable (por ejemplo, una meta o coleccionable).

Paso a paso

  1. Crea/abre Nivel.tscn y asegúrate de tener: TileMap, Limites, Spawns con PlayerSpawn, y el jugador instanciado o instanciable.

  2. Configura el TileSet: define al menos 3 tiles: suelo (con colisión), bloque (con colisión) y decoración (sin colisión).

  3. Pinta el suelo base: crea una plataforma larga (por ejemplo, 30 tiles de ancho) para que el jugador pueda correr y probar.

  4. Añade plataformas escalonadas: coloca 3 plataformas a distintas alturas, separadas por huecos. Regla práctica: deja huecos que requieran salto, pero que sean consistentes con el alcance del jugador (prueba y ajusta).

  5. Coloca un obstáculo: opciones simples:

    • Un “pincho” o bloque peligroso (si ya tienes un sistema de daño, colócalo como escena Area2D de obstáculo).
    • Un hueco más ancho que obligue a usar una plataforma intermedia.
    • Una pared de bloques que obligue a subir por plataformas.

    Si el obstáculo es un tile decorativo, recuerda: la colisión debe estar solo donde sea sólido o donde haga falta para la mecánica.

  6. Define el objetivo: crea una escena simple Objetivo.tscn (por ejemplo Area2D + CollisionShape2D) y colócala al final de la sección, en una plataforma elevada. Conecta su señal body_entered para detectar al jugador y emitir una señal de “nivel completado”.

  7. Prueba de jugabilidad: ejecuta la escena y verifica:

    • El jugador aparece en PlayerSpawn.
    • Las colisiones del suelo funcionan (no atraviesa tiles sólidos).
    • Los límites impiden salir del área.
    • El obstáculo obliga a una acción clara (saltar/rodear/subir).
    • El objetivo es alcanzable sin trucos.

Checklist de evaluación del ejercicio

ElementoDebe cumplirse
TileSetTiles sólidos con colisión; decoración sin colisión
TileMapSuelo continuo + plataformas con huecos razonables
ObstáculoObliga a cambiar el movimiento (salto/altura/ruta)
ObjetivoEstá al final y se puede alcanzar jugando
OrganizaciónNivel/HUD/Jugador/Enemigos separados en escenas

Ahora responde el ejercicio sobre el contenido:

¿Cuál es una práctica recomendada para evitar colisiones accidentales y mejorar la claridad al diseñar un nivel con TileMap?

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Separar el TileMap en una capa de suelo con colisión y otra de decoración sin colisión evita colisiones no deseadas en elementos decorativos y facilita el diseño del nivel.

Siguiente capítulo

Animaciones 2D y sincronización con el estado del jugador

Arrow Right Icon
Portada de libro electrónico gratuitaGodot desde Cero: Crea tu Primer Juego 2D con GDScript
58%

Godot desde Cero: Crea tu Primer Juego 2D con GDScript

Nuevo curso

12 páginas

Descarga la aplicación para obtener una certificación gratuita y escuchar cursos en segundo plano, incluso con la pantalla apagada.