Editor de mapas de tiles en línea: una alternativa gratuita a Tiled en el navegador

Un editor de mapas de tiles es un programa que arma un nivel a partir de un conjunto pequeño de imágenes de tiles repetidas en lugar de un gran fondo pintado a mano. Tiled, la aplicación de escritorio de mapeditor.org, es la implementación de referencia de esa idea: gratis, sin conexión, flexible con los tipos de cuadrícula y lo bastante veterana como para que muchos proyectos ya publicados sigan llevando archivos .tmx. Esta página cubre el caso en el que quieres el mismo flujo de trabajo de pintado sin instalar nada, y quieres pulsar reproducir y caminar por dentro del mapa que acabas de pintar.

Neta Studio ejecuta el editor en una pestaña del navegador. Importas un tileset, ajustas el tamaño del tile, pintas una capa de suelo y una capa de detalle, marcas la colisión y luego juegas. La cuadrícula se convierte en un mundo 3D renderizado con Three.js, con un personaje controlable y colisión real. Nada que descargar, ninguna carpeta de proyecto que mantener sincronizada entre máquinas y un enlace que puedes pasarle a otra persona para que abra el mismo mapa.

Tiled frente a un editor de mapas de tiles en línea

Tiled, de mapeditor.org, hace muchas cosas bien. Es gratis y de código abierto, funciona sin conexión y lleva años soportando cuadrículas ortogonales, isométricas, escalonadas y hexagonales. Capas, capas de objetos con rectángulos, elipses, polígonos y polilíneas, propiedades personalizadas, plantillas, animaciones de tiles, formas de colisión y conjuntos de terreno/Wang están todos ahí. Lee y escribe XML de TMX/TSX, además de variantes en JSON, y el formato es lo bastante veterano como para que existan exportadores para casi todos los motores. Si tu flujo de trabajo ya consume .tmx, Tiled es el lugar más seguro para crearlo.

La fricción no está en la edición. Está en todo lo que la rodea. Tiled es una aplicación de escritorio, así que cada máquina que toque el proyecto necesita la instalación. Los tilesets suelen referenciarse como archivos .tsx externos con rutas relativas, y esas rutas se rompen en cuanto una carpeta se mueve o la copia local de un colaborador queda a otra profundidad. No hay botón de reproducir: exportas y luego abres un segundo programa para averiguar si el mapa funciona. Compartir significa comprimir un proyecto y cruzar los dedos para que las rutas coincidan en el otro extremo.

Un editor de mapas de tiles en línea cambia esas tres cosas y nada más. Sin instalación, porque el editor viene con la página. Sin malabares con archivos, porque el tileset y las capas viven en un solo proyecto que puedes reabrir. Y sin bucle de exportar para probar, porque el mapa es jugable en la misma pestaña en la que lo pintaste. Lo que sacrificas es real: nada de complementos nativos, nada de mapas con scripts, y los proyectos muy grandes pesan más en un navegador que en el escritorio. Para un mapa que tiene que verse y recorrerse en lugar de enviarse a un motor compilado, el intercambio merece la pena.

Qué es un mapa de tiles (y por qué el nombre confunde a todo el mundo)

La palabra cumple dos funciones y chocan entre sí. Tiled con mayúscula es el nombre de un producto. Un mapa de tiles, en minúscula, es cualquier mapa construido con tiles repetidos. Puedes hacer un mapa de tiles en Tiled, pero también puedes hacerlo con los nodos TileMap de Godot, en el sistema Tilemap de Unity, en Phaser, en un importador propio o aquí, sin abrir Tiled en ningún momento.

Esa división es la razón de que las búsquedas de un editor de mapas de tiles aterricen en dos sitios distintos. A la mitad de la gente le interesa la aplicación de escritorio concreta y sus formatos de archivo. A la otra mitad le da igual qué herramienta usar mientras sirva para construir un mapa basado en tiles. Ambas posturas son razonables. Si estás en el segundo grupo, la pregunta no es qué editor tiene la lista de funciones más larga, sino cuál te pone delante un resultado jugable más rápido.

Mecánicamente, un mapa de tiles son datos pequeños. Una imagen de tileset, un ancho y un alto de tile, un tamaño de cuadrícula en tiles y luego un array de IDs de tile por capa, donde cero significa vacío. Encima de eso: una capa de objetos opcional que contiene rectángulos y polilíneas, y una tabla de propiedades de cadenas clave/valor. Esa es toda la estructura. Un editor es una buena interfaz para editar esos arrays, que es la única razón por la que los formatos se mueven entre herramientas.

Dibuja tu primer mapa de tiles en línea

La primera pantalla tiene tres zonas: el panel del tileset a la izquierda, el lienzo del mapa en el centro y la lista de capas a la derecha. Empieza creando un mapa. Elige una cuadrícula ortogonal, ponla en 40 por 30 tiles y ajusta el tamaño del tile para que coincida exactamente con tu tileset. Con 32 por 32 píxeles, eso da un lienzo de 1280 por 960 píxeles, que es un tamaño de trabajo razonable y se mantiene ágil mientras pintas.

Luego importa la imagen del tileset. Los dos ajustes que rompen las importaciones son el margen y la separación. El margen es el borde vacío alrededor de toda la hoja; la separación es el hueco entre tiles. Si tu hoja se exportó con alguno de los dos, escribe el número. Si te lo saltas, cada columna se desplaza uno o dos píxeles y el mapa se ve sutilmente mal, de un modo desesperante. Después de eso, pintar es pintar: rellena la capa de suelo y luego añade detalle en una capa por encima.

Ejemplos de mapas de tiles: mapas que puedes abrir ahora mismo

Seis escenas vienen como mapas jugables, no como capturas de pantalla. Cada una se abre en el navegador y puedes recorrerla con un personaje, que es la única forma fiable de comprobar si un mapa de tiles funciona.

Tres de ellos son proyectos completos. Los otros son pequeños mapas de demostración dentro del editor que existen para mostrar una mecánica cada uno. Ábrelos cuando quieras ver cómo se configuraron las capas, la colisión y el tamaño del tile en lugar de leer sobre ello.

Importar un TMX o un tileset al navegador

La importación es un analizador, no un conversor. Leemos el elemento map para obtener la orientación, el ancho, el alto, el ancho y el alto del tile, y luego las entradas de tileset con su firstgid y una imagen incrustada o una referencia a un .tsx externo. Después, cada capa en orden, con sus datos de tiles. Las codificaciones que importan son CSV y base64, con o sin compresión gzip o zlib. Si el archivo usa una codificación que no descodificamos, la importación se detiene y la nombra en lugar de cargar una cuadrícula en blanco.

Lo que sobrevive es la parte estructural. La referencia del tileset se redirige a una imagen subida, así que la ruta externa al .tsx de tu proyecto de escritorio se sustituye en lugar de seguirse. El tamaño del tile, el margen y la separación se conservan. El orden de las capas, su visibilidad y su opacidad se conservan. Los IDs de tile mantienen sus posiciones relativas dentro de cada capa, que es lo que hace que un mapa se vea igual después de importarlo. Las capas de objetos llegan como rectángulos y polígonos con sus propiedades aplanadas a cadenas clave/valor. Las animaciones de tiles declaradas se mantienen.

Lo que no sobrevive es todo lo que era código. Tiled admite extensiones de JavaScript, clases de propiedades personalizadas y complementos de C++, y ninguno de ellos se ejecuta en una pestaña del navegador. Un mapa producido por un script aquí son solo sus tiles de salida. Los tipos de propiedades personalizadas se degradan a cadenas. Los mapas infinitos con almacenamiento por fragmentos se aplanan en una cuadrícula fija, lo que cambia el comportamiento de memoria en mapas muy grandes. Y un tileset de colección de imágenes, en el que cada tile es un PNG independiente, funciona pero cuesta una petición de imagen por tile. Si tu mapa depende de un complemento, sigue creándolo en Tiled.

Tiled gratis frente a Tiled de pago

Tiled es gratis. Es software de escritorio de código abierto y no hay un plan de pago con el que compararlo, así que una página que describa un Tiled gratis frente a uno de pago está describiendo otra cosa, normalmente un paquete comercial de tilesets o el editor incluido dentro de un motor. No estamos diciendo que Tiled cueste dinero, porque no es así.

La verdadera división es instalación frente a no instalación. Tiled exige una descarga en cada máquina, mantiene los tilesets como rutas relativas que se rompen cuando las carpetas se mueven y no ofrece ninguna prueba de juego integrada, así que exportas y abres otro programa. Un editor de navegador solo pide una pestaña, mantiene el proyecto en un mismo sitio y reproduce el mapa en la misma ventana. Ese es el intercambio, y no tiene nada que ver con el precio.

Hay cosas en las que gana el escritorio. Los complementos, los mapas con scripts, trabajar sin conexión de red por completo y los mapas muy grandes con muchas capas son ventajas del escritorio, y fingir lo contrario sería deshonesto. Si tu flujo de trabajo ya consume .tmx y tienes gente que lo mantiene, quédate en Tiled. Usa el editor de navegador cuando el mapa tenga que verse, compartirse por enlace o ser recorrido por alguien que nunca va a instalar un editor.

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