Cómo hacer un tilemap: guía paso a paso con un editor gratis

Aprender a hacer un tilemap es, en gran medida, tomar cuatro decisiones en el orden correcto: el tamaño de celda, la disposición del tileset, la pila de capas y dónde viven las colisiones. Toma esas decisiones una vez y pintar el mapa se vuelve algo mecánico.

Los pasos siguientes siguen el orden que usamos cuando una descripción escrita se convierte en un mundo jugable en Neta Studio: elige o genera un tileset, fija la cuadrícula, bloquea el terreno antes que el detalle, divide las capas y deja que el autotiling resuelva los bordes. Nada de esto requiere instalar nada. El editor funciona en el navegador y cada número de aquí abajo puede cambiarse después sin volver a dibujar el mapa.

¿Qué es un tilemap? (Definición clara + diagrama)

Un tilemap es una cuadrícula de índices, no una cuadrícula de imágenes. Cada celda guarda un número entero que apunta a un tile dentro de un tileset, y el renderizador busca ese índice y dibuja el tile en la posición de la celda. Un mapa de 20 por 12 con celdas de 32 px son 240 enteros que cubren 640 por 384 píxeles.

Esa indirección es justamente el punto. Un tile de césped se guarda una sola vez en la hoja y cientos de celdas lo referencian, así que el archivo del mapa se mantiene pequeño y carga rápido. Como un tilemap son datos y no ilustración, puedes generarlo con una función de ruido, editarlo como texto, comparar dos versiones en Git o transmitirlo por fragmentos a medida que se mueve la cámara.

El diagrama de la parte superior de esta página está construido con nuestros propios tiles en una cuadrícula de 12 por 8 a 32 px. El césped llena el interior, la arena recorre los bordes izquierdo e inferior, y el agua ocupa la esquina inferior derecha donde termina la arena. Leído como datos: la celda de la columna 3, fila 0, contiene el índice de césped; la celda de la columna 0, fila 7, contiene el índice de la esquina de agua; y todas las demás celdas contienen un índice de arena simple. El origen está arriba a la izquierda, x aumenta hacia la derecha y y aumenta hacia abajo. Si tu motor usa un origen abajo a la izquierda, el mapa se dibuja al revés hasta que cambias el índice de fila a filas menos 1 menos y.

• La cuadrículaColumnas y filas, fijadas al crear el mapa. Un mapa de 20 por 12 y uno de 40 por 24 se comportan de forma muy distinta con el mismo zoom de cámara.
• El tamaño de celdaLa huella en píxeles de una celda: 16, 32, 48 o 64. Debe coincidir exactamente con el tamaño de tile del tileset, o el muestreo cae en medio del tile.
• El conjunto de tilesLa imagen a la que apuntan los índices, más una definición de cuántas columnas y filas tiene.
• La capa de índicesUn entero por celda y por capa. La capa de suelo es densa, la capa de detalle está casi vacía y la capa de colisiones guarda banderas en lugar de arte.

¿Qué es un tileset? (y en qué se diferencia)

El tileset es el libro de imágenes; el tilemap es la página de referencias a ese libro. Un tileset posee los píxeles: una hoja, más la regla que dice que la hoja tiene, por ejemplo, 8 columnas de tiles de 32 px. Un tilemap posee la colocación: qué índice va en cada celda de cada capa.

Las dos palabras se confunden todo el tiempo porque la mayoría de los editores las muestra juntas en el mismo panel, y porque un formato de archivo único puede ocultar la separación. En Tiled la separación es explícita, con un archivo de tileset aparte del archivo de mapa. En Unity, un recurso Tile contiene el sprite y un componente Tilemap contiene las celdas. En Godot, TileSet y la capa de tilemap son recursos separados.

La consecuencia práctica: cambiar el tileset cambia todos los mapas que lo referencian, mientras que cambiar un tilemap cambia un solo nivel. Cambia una hoja de 32 px por una de 48 px y cada índice seguirá resolviéndose, pero todos los mapas se dibujarán a una escala distinta y podrían muestrear tiles vecinos en los bordes. Trata el tileset como una interfaz publicada con un número de versión.

Paso 1: Elige o crea un tileset

Tienes dos caminos: usar una hoja existente o generar una. Una hoja existente es más rápida, pero heredas su paleta, su tamaño de celda y su licencia. Revisa la licencia antes de construir cuarenta mapas encima de ella, y comprueba que sea una hoja en cuadrícula y no un atlas empaquetado. Un atlas guarda coordenadas de rectángulo por tile en lugar de una celda uniforme, lo que dificulta el indexado y hace incómodo el autotiling.

Si el terreno tiene que coincidir con una paleta concreta, genéralo. Agent Sprite Forge produce una hoja de tiles a partir de una descripción escrita con un tamaño de celda uniforme, lo que elimina la causa más común de desalineación: una hoja en la que un tile mide 33 px de ancho porque el artista añadió un brillo fuera de la celda.

Elijas el camino que elijas, la primera pasada no consiste en dibujar, sino en medir. Abre la hoja al 100 % de zoom, cuenta las columnas y las filas, y anota el tamaño de celda donde el resto del equipo pueda encontrarlo.

• Un único tamaño de celdaTodos los tiles con el mismo ancho y alto, incluidos los que están casi vacíos. Un solo tile de 33 px en una hoja de 32 px desplaza todos los índices posteriores si el exportador empaqueta en orden de lectura.
• Transparencia realAlfa, no blanco. Una hoja con fondo blanco opaco dibuja cajas blancas sobre tu cielo en el navegador.
• Una cuadrícula documentadaAnota las columnas, las filas y si hay relleno. La fórmula del índice es fila por columnas más columna, empezando en cero, leyendo de izquierda a derecha y de arriba abajo.
• Una decisión sobre el espaciadoLas hojas con relleno añaden 1 o 2 px entre celdas para reducir el sangrado de texturas, a costa de un desplazamiento en tu cálculo de muestreo. Decide cuál vas a usar antes del primer trazo de pintura.

Paso 2: Define el tamaño de tile y la cuadrícula

El tamaño de celda lo determinan tres cosas: el zoom al que realmente juega el jugador, tu resolución de render objetivo y cuánto arte estás dispuesto a dibujar. Un tile de 16 px en una ventana de 1920 px de ancho da 120 celdas a lo ancho, lo que supone mucho nivel por pantalla y muy poco espacio para el detalle. Un tile de 64 px da 30 celdas y píxeles suficientes para dibujar un árbol legible.

La restricción dura es aritmética. El tamaño de celda debe dividir la hoja. Una hoja de 256 px de ancho a 32 px da exactamente 8 columnas; a 48 px da 5,33, así que la última columna es una fracción de tile y todos los índices posteriores se desvían. Las dimensiones de la hoja no son decisiones estéticas: son múltiplos del tamaño de celda.

Usa escalado entero. Si la ventana no es un múltiplo exacto de la cuadrícula, las celdas caen en medios píxeles, el filtrado muestrea dos tiles vecinos y aparece una costura de un píxel a lo largo de todo el mapa. Arréglalo desde ambos extremos: filtrado de vecino más cercano en el motor y un zoom de cámara que sea un número entero.

Paso 3: Pinta el suelo y luego los detalles

Pinta por pasadas y siempre el terreno primero. El terreno es lo que vas a cambiar; la decoración es lo que no querrás mover. Coloca sesenta árboles y luego desplaza la costa cuatro celdas a la izquierda, y de repente todos esos árboles quedan de pie dentro del agua.

Empieza con un solo tile. Bloquea todo el mapa con un único índice de césped, observa la silueta con el zoom de juego y solo entonces deja que el autotiling resuelva los bordes. Los detalles llegan después de fijar la forma, y las colisiones después de los detalles, porque descubrir que un prop es transitable es una edición de colisiones, no un repintado.

Pinta todo lo que el jugador puede ver. Las celdas vacías muestran por defecto lo que el renderizador dibuja detrás del mapa, que normalmente no es el fondo que pretendes. Un color de fondo definido en la cámara es más seguro que confiar en un lienzo limpio.

Paso 4: Añade capas, profundidad y colisiones

Un tilemap deja de ser plano en el momento en que lo divides en capas. La pila mínima útil es de tres: una capa de suelo densa, una capa de detalle dispersa y una capa de colisiones que no contiene nada de arte. Una capa de superposición por encima de los personajes vale la pena añadirla pronto si algo del mapa debe ocultar al jugador.

La profundidad proviene de la misma cuadrícula. En un mapa cenital, ordena por el borde inferior de cada objeto: lo que tiene los pies más abajo se dibuja al final. Para los tiles esto es gratis, porque la y de la celda ya codifica la posición. Para los personajes en movimiento necesitas un orden por objeto con un desempate determinista, normalmente la y del objeto más su desplazamiento fraccionario dentro de la celda. Sin uno, dos objetos en la misma fila parpadean entre fotogramas.

Las colisiones se corresponden con la cuadrícula como un arreglo paralelo de las mismas dimensiones. Asigna a cada tile una bandera de sólido en el tileset, de modo que pintar una pared también la marque como sólida, y usa la capa de colisiones para las excepciones de cada mapa. Las banderas por celda no pueden expresar pendientes, plataformas unidireccionales ni paredes finas dentro de una celda. Esas cosas pertenecen a objetos separados superpuestos a la cuadrícula, no al tilemap.

• Capa de sueloDensa: cada celda contiene un índice. Es la única capa que puedes autotilar sin riesgo.
• Capa de detalleDispersa y transparente donde está vacía. Árboles, rocas, calcomanías. Nada de aquí debería bloquear el movimiento por accidente.
• Capa de superposiciónSe dibuja por encima de los personajes: copas de árboles, puentes, tejados. Todo lo que deba ocultar al jugador.
• Capa de colisionesSin arte. Un arreglo booleano del mismo tamaño que el mapa, inicializado a partir de las banderas de sólido del tileset y editado a mano para las excepciones.

Paso 5: Autotiling y el conjunto de 47 tiles

El autotiling es la parte que falla en silencio. Un tile de terreno con ocho vecinos tiene 2^8, es decir 256, configuraciones de vecindad posibles. Las esquinas solo importan cuando ambos lados adyacentes están rellenos, y esa simetría reduce los 256 casos a 47 tiles únicos. Por eso la mayoría de los motores y editores usan un conjunto blob de 47 tiles por terreno, dispuesto en una distribución documentada.

También encontrarás un conjunto de 16 tiles, que lee los cuatro vecinos laterales e ignora las esquinas, y un conjunto de minitiles de 2x2, en el que cada celda se dibuja a partir de cuatro cuartos de tile, de modo que de 13 a 16 minitiles cubren todos los casos. El conjunto de 16 tiles es más fácil de dibujar, pero produce esquinas romas. El enfoque de minitiles necesita menos imágenes, pero te obliga a crear cada terreno en cuartos, lo que suaviza el pixel art.

Cómo hacer un tilemap que se autotila sin huecos

La máscara es todo el mecanismo. Para cada celda, construye un entero de 8 bits a partir de sus ocho vecinos: bit 0 para el norte, bit 1 para el noreste, bit 2 para el este, y así sucesivamente en sentido horario. Elige un orden, anótalo junto al código y no lo cambies nunca. Una máscara desviada en un bit sigue produciendo un terreno verosímil, y por eso las convenciones dispares sobreviven meses antes de que alguien note que las esquinas están mal.

Luego convierte la máscara en un índice de tile. Hay dos formas: una tabla de consulta completa de 256 entradas, que es trivial de generar y fácil de depurar porque puedes imprimir la fila, o una tabla de 47 entradas más una función de simetría. Usa la tabla completa a menos que el objetivo tenga memoria limitada. Elimina toda una clase de errores de esquinas.

Modos de fallo del autotile que conviene conocer antes de implementarlo

Las costuras en los bordes del mapa provienen de tratar las celdas fuera de los límites de forma inconsistente. Decide una vez si el mundo fuera del mapa está vacío o es el mismo terreno, y aplica esa regla a todos los terrenos.

El segundo fallo común es la sobrescritura. El autotiling reescribe las celdas que controla, así que cualquier tile que hayas pintado a mano para un aspecto concreto desaparece en la siguiente pasada. O bloqueas la capa de terreno después del autotiling, o guardas las excepciones manuales en una lista aparte que se ejecuta al final.

Ejemplos de tilemap que puedes abrir y jugar

Leer un mapa que funciona enseña más que leer la descripción de uno. La Isla del Cíclope es un mapa jugable construido sobre un único conjunto de terreno con una capa de colisiones aparte. Recorre la costa y fíjate en dónde la transición de arena a agua cambia de tile: esos son los 47 casos blob en uso.

Mini World es el ejemplo más pequeño. Ábrelo para ver la pila de capas —suelo, detalle y superposición— y para comprobar con cuántos pocos tiles de detalle basta para que un mapa se vea terminado y no vacío.

El creador de juegos 3D toma la misma cuadrícula y la extruye. Cada celda se convierte en un bloque, la capa de colisiones se convierte en paredes verticales y el orden por y se convierte en profundidad real en una escena de Three.js. Si tu mapa 2D es coherente, la versión 3D casi no te cuesta nada; si las capas están mezcladas, la extrusión lo deja al descubierto de inmediato.

• La Isla del CíclopeUn mapa transitable para estudiar los bordes de terreno con autotile a velocidad de juego en lugar de con el zoom del editor.
• Mini WorldUna cuadrícula pequeña para inspeccionar la pila de capas sin desplazarte.
• El creador de juegos 3DEl mismo tilemap extruido en bloques, donde la capa de colisiones se convierte en geometría y la profundidad en algo real.

Descarga de plantilla de tileset (cuadrícula para PS / Aseprite)

La plantilla es una ayuda de dibujo, no un requisito. Es un lienzo transparente con guías en cada celda, una marca de un píxel hacia dentro para la zona segura y números de índice a lo largo de la fila superior y la columna izquierda para que veas dónde cae cada índice mientras dibujas. Dibuja encima de ella y ocúltala antes de exportar.

Adapta la plantilla al proyecto. Un lienzo de 512 por 512 contiene una cuadrícula de 16 por 16 celdas de 32 px. Con celdas de 16 px, el mismo archivo contiene una cuadrícula de 32 por 32, y deberías bajar la opacidad de las guías, porque con esa densidad las guías tapan el arte.

Entra al mundo al que pertenece

Un sprite es un personaje sin un lugar donde pararse. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar: una isla pequeña, un planeta, una esquina de calle lluviosa. Todos los mundos de este sitio se crearon a partir de una descripción escrita y se publicaron como una página que puedes jugar.

FAQ