Editor de mapas de tiles: creador de tilemaps y editor de niveles en línea gratis

Un editor de mapas de tiles es una cuadrícula, un tileset y un pincel. Importas un PNG o generas un conjunto a partir de un prompt, defines un tamaño de celda, pintas celdas en varias capas, marcas las sólidas para la colisión y exportas. El editor de mapas de tiles de esta página funciona en el navegador: sin descargas, sin cuenta, sin pasos de compilación, y el editor es lo primero que ves en vez de una captura de pantalla.

Todo lo que sigue describe lo que la herramienta realmente hace y dónde falla. Por qué una hoja con un margen de 1 px se importa mal si solo introduces el tamaño del tile. Por qué una regla de autotile de dos estados por borde necesita 47 variantes en lugar de 16. Qué lleva un TMX que un PNG no puede. Y por qué poder pulsar reproducir y recorrer el mapa que acabas de pintar cambia la rapidez con la que puedes corregirlo.

El editor de mapas de tiles (herramienta en vivo)

La herramienta en vivo es lo primero de esta página. El lienzo es una cuadrícula, el tileset está a su lado y la lista de capas es una pila de cuadrículas independientes que puedes ocultar y bloquear una a una. Pintar una celda es un clic. Arrastrar pinta una secuencia de celdas. Una herramienta de rectángulo rellena un área, un relleno por inundación cubre el suelo abierto y un borrador limpia hasta la capa inferior.

Cuatro capacidades hacen el trabajo. La cuadrícula fija un único número para todo el documento, el tamaño de celda en píxeles, y cada pincel, capa y exportación se mide en esa unidad. Los pinceles deciden qué escribe un clic: un solo tile, un bloque rectangular, un relleno por inundación, una línea o un borrado. Las capas apilan cuadrículas separadas para que el terreno, la decoración y la colisión se mantengan editables de forma independiente. La colisión marca una celda como sólida y la guarda como datos en lugar de pintarla en el arte, de modo que repintar una pared nunca obliga a rehacer su volumen de bloqueo.

No hay diálogo de guardado ni paso de compilación entre pintar y jugar. El documento que escribe el editor es el documento que lee el runtime, lo que elimina toda esa clase de errores en los que un mapa se ve correcto en un programa y se desplaza medio tile en cuanto se carga en otro.

Importa un tileset o genera uno

Hay dos vías de entrada. Importa un PNG que ya tengas o genera un conjunto a partir de un prompt de texto y pinta con él. Ambas terminan en el mismo sitio: una hoja de tiles alineada junto al lienzo.

Si prefieres no dibujar ninguna de las dos, la biblioteca de tilesets gratis es un catálogo de hojas listas en tamaños de celda habituales. Agent Sprite Forge se encarga de la otra mitad del problema, personajes y accesorios, que siguen reglas distintas a las del terreno y normalmente quieren más fotogramas por acción.

El editor pide el tamaño del tile antes de cargar nada, y ese número tiene que coincidir exactamente con el arte. Una hoja de 256 por 256 de tiles de 16 px son 16 columnas por 16 filas. Si la hoja tiene un margen de 1 px alrededor del borde y 1 px de separación entre tiles, un valor predeterminado habitual en las herramientas de sprites, la aritmética directa da un número de columnas incorrecto, así que introduce también el margen y la separación, o recorta la hoja. Si te equivocas, la cuadrícula se distorsiona: la primera columna se ve bien y cada tile posterior queda desplazado por un error que crece a lo ancho de la hoja.

Otras tres cosas rompen la importación de un tileset. Tiles que miden 15 o 33 px porque el arte se escaló por un factor no entero. Arte dibujado 1 px dentro de la celda de su vecino, que aparece como una línea fina del tile adyacente a lo largo de cada unión y empeora cuando el motor muestrea con el filtrado activado. Y un canal alfa en el que la región transparente es en realidad negra, lo que convierte cada celda vacía en un bloque sólido en cuanto se renderiza el mapa.

Describe el conjunto en su lugar: tamaño de celda, vista, paleta y los roles de tile que necesitas, como suelo, pared, esquina de pared, puerta y borde de agua. El generador de tilesets con IA devuelve una hoja ya alineada al tamaño de celda solicitado, así que se importa sin la aritmética de márgenes.

Trata el resultado como un punto de partida. Los conjuntos generados son fuertes en superficie y débiles en continuidad: el decimosexto tile de suelo rara vez se une sin costuras al primero, y los tiles de borde normalmente necesitan repintarse antes de que el autotiling los acepte como un terreno conectado.

Pinta tiles, añade capas y colisiones

Un mapa que sigue siendo fácil de editar son tres capas, no una. El suelo contiene el terreno sobre el que camina el jugador. El detalle contiene todo lo que se dibuja encima, como paredes, árboles, cajas y calcomanías, para que puedas reestilizarlo u ocultarlo sin tocar el suelo. La colisión no contiene nada visible: es una máscara de celdas en las que el jugador no puede entrar.

Mantén la colisión como datos en su propia capa, no como tiles oscuros incrustados en el terreno. Si los volúmenes de bloqueo se pintan en el arte del suelo, editar el arte cambia el diseño del nivel y editar el diseño del nivel cambia el arte. Con una capa separada puedes repintar el suelo tantas veces como quieras y las paredes se quedan donde estaban.

El modo de fallo al que hay que prestar atención es una celda sin marcar en una hilera de paredes. Una sola celda de colisión que falta en una pared de cuarenta tiles es un hueco por el que el jugador se cuela, y es invisible con el zoom normal. La rutina que lo detecta: oculta todas las capas excepto la de colisión, mira el mapa como una silueta y comprueba que el contorno no tenga roturas.

Autotiling y el conjunto de 47 tiles explicado

El autotiling es la parte de un editor de mapas de tiles que elige qué tile dibujar según lo que lo rodea. En lugar de elegir a mano una esquina de pared, pintas cualquier tile de pared y el editor inspecciona las celdas vecinas, construye una máscara de bits y cambia a la variante que coincide. Pinta una segunda pared junto a la primera y ambas celdas se actualizan.

La versión simple de la regla mira cuatro vecinos, norte, este, sur y oeste, lo que da dos elevado a cuatro, o 16 combinaciones. Ese conjunto es fácil de dibujar y falla en un punto concreto: la esquina interior. Toma una celda de suelo con una pared al norte y una pared al este, y nada más. No es un caso exótico, es el aspecto que tiene el interior de una habitación en forma de L en todas partes. Un conjunto de 16 tiles no tiene ninguna variante que dibuje un borde a lo largo de los lados norte y este de una misma celda, así que obtienes un píxel de suelo suelto, un borde duplicado o un hueco visible.

El conjunto de 47 tiles, también llamado blob tileset, añade las cuatro esquinas. Seguir los ocho vecinos de forma ingenua da dos elevado a ocho, o 256 combinaciones, y la mayoría de ellas son redundantes: una esquina solo cambia la imagen cuando los dos bordes que la tocan están rellenos. Una esquina situada entre dos bordes vacíos se ve idéntica en sus cuatro estados. Aplicar esa única reducción colapsa 256 casos en 47 distintos, que es de donde sale el número.

Los editores suelen guardar un blob set como una tabla de búsqueda indexada por una máscara de 8 bits: 1, 2, 4 y 8 para los bordes, 16, 32, 64 y 128 para las esquinas. Cuando pintas, el editor recalcula la máscara de la celda pintada y de cada vecino que también esté en autotiling, así que un clic puede reescribir hasta nueve celdas. La consecuencia práctica es que el autotiling quiere su propia capa de terreno. Mezcla accesorios colocados a mano en esa capa y cada actualización de autotile tendrá que decidir si sobrescribirlos es aceptable.

Mapa de Tiled vs mapa de tiles: ¿a cuál te refieres?

Dos búsquedas distintas llegan aquí y quieren cosas diferentes. Un editor de mapas de tiles es la categoría: cualquier herramienta que pinta una cuadrícula de tiles y produce un mapa. Tiled es un programa concreto dentro de esa categoría, el editor de escritorio publicado en mapeditor.org, y la gente suele escribir «tiled map editor» cuando se refiere a ese programa por su nombre.

Si te referías a la categoría, la herramienta en vivo de esta página es un editor de mapas de tiles y no necesita instalación. Si te referías a la marca, lo que probablemente quieres es algo que abra los archivos que ya tienes, los proyectos TMX y los tilesets TSX que produce un flujo de trabajo de escritorio, y que te deje seguir trabajando sin instalar nada en la máquina en la que estás. La página de alternativa a Tiled cubre eso directamente: qué archivos se conservan, qué ajustes no y cómo se corresponden los formatos de exportación entre los dos.

Mecánicamente la diferencia está en dónde vive el documento. Un editor de escritorio escribe los proyectos en el disco local y depende de que esa máquina tenga el programa instalado para volver a abrirlos. Un editor de navegador mantiene el documento en la sesión y en el almacenamiento del navegador, y depende de que la exportación sea lo bastante completa como para reconstruir el mapa en cualquier otro sitio. Eso convierte los formatos de exportación en el verdadero puente entre los dos, que es de lo que trata la sección siguiente.

Exporta tu mapa (PNG / TMX / JSON)

Tres formatos, tres funciones. Elige según lo que vaya a leer el archivo, no según cuál suene más oficial.

PNG es una imagen plana. El exportador renderiza el mapa al tamaño de celda multiplicado por el tamaño del mapa, así que un mapa de 40 por 25 de celdas de 32 px se convierte en 1280 por 800 píxeles, con las capas aplanadas en una sola imagen o escritas en un archivo por capa. Úsalo para maquetas, miniaturas, fondos de menú o una conversación con un artista. No lo uses como entrega a un motor: un PNG no lleva cuadrícula, ni identidad de tile, ni colisión, así que nada posterior puede distinguir una pared de un suelo salvo por el color.

TMX es el formato de intercambio XML de Tiled y lo más parecido que tiene el ecosistema de herramientas de tiles a una lengua franca. Lleva capas, referencias de tileset, propiedades por tile, capas de objetos y propiedades personalizadas, y la mayoría de los motores y conversores pueden leerlo. Un detalle causa la mayoría de los errores: los IDs de tile en TMX son globales en todos los tilesets del mapa, con un desplazamiento por un firstgid por tileset. Combina dos hojas y equivócate con ese desplazamiento, y cada celda que usaba la segunda hoja se carga con un tile de la hoja equivocada. Nada da error. Simplemente se ve mal.

JSON es lo que la mayoría de los motores y runtimes web ingieren directamente. Normalmente es una lista de capas, cada una con un array plano de índices de tile más el tamaño de celda, con la colisión como un array aparte. Como el consumidor construye el mapa en tiempo de ejecución, la convención del orden de las filas importa: inviértela y todo el mapa se refleja verticalmente, lo que es evidente en un mapa con una costa e invisible en una mazmorra simétrica. Las celdas vacías también necesitan un valor definido, ya que algunos formatos usan 0 y otros usan -1, y elegir el incorrecto coloca un tile real en cada hueco.

Entra en tu mapa (demo jugable)

La demo jugable de esta página es La Isla del Cíclope, un juego isométrico de pixel art construido a partir de un mapa de tiles pintado en el mismo editor. Pulsa reproducir y la cámara se mete en el mapa. La capa de colisión se convierte en paredes, la capa de suelo se convierte en el piso sobre el que camina el personaje y la capa de detalle se dibuja detrás o delante del personaje según dónde esté.

Este es el paso que se saltan la mayoría de las páginas de herramientas. Pintar un mapa y exportarlo significa que la primera vez que ves el nivel a escala de jugador es en otro programa, con otra cámara, después de una compilación. Jugarlo en el sitio convierte el diseño de niveles en un bucle que puedes ejecutar diez veces por minuto: pinta un pasillo, recórrelo, fíjate en que es un tile demasiado ancho y vuelve a pintarlo.

Las proyecciones isométricas añaden una cosa en la que un mapa ortogonal nunca tiene que pensar: el orden de dibujo. Un tile más abajo en pantalla está más cerca de la cámara, así que el renderizador ordena por profundidad, más o menos por fila y luego por capa, o un personaje se dibuja por encima de una pared que debería ocluirlo. El síntoma es un sprite que asoma por la parte superior de una pared al caminar por detrás. Cuando ves eso en una demo, la causa es el orden de profundidad, no la máscara de colisión.

A partir de ahí el mapa puede ir en dos direcciones. Si lo mantienes en 2D, sigue siendo un mapa de tiles con un controlador de jugador encima. Si lo llevas al creador de juegos 3D, la misma cuadrícula se convierte en geometría, con cada celda extruida en una losa de suelo o una pared, que es el enfoque que hay detrás de Mini World. Agent Sprite Forge cubre la parte de los personajes. La cuadrícula que pintaste no cambia en ninguno de los dos casos.

Entra al mundo al que pertenece

Un sprite es un personaje sin ningún sitio donde estar de pie. El último paso es el que no ofrece nadie más: coge la hoja que acabas de crear y ponla en un mundo por el que alguien pueda pasear: una isla pequeña, un planeta, una esquina de calle lluviosa. Cada mundo de este sitio se hizo a partir de una descripción escrita y se publicó como una página que puedes jugar.

FAQ