Alternativa a Tilesetter · en el navegador, gratis

Alternativa a Tilesetter — Generador de tilesets y editor de mapas gratis en línea

Crea tu propia alternativa a Tilesetter

Tilesetter genera tilesets y exporta niveles a Unity y Godot, pero es una aplicación de escritorio que se paga. Aquí tienes una alternativa gratis, basada en el navegador, que además te deja jugar lo que creas.

✦Juego
Genera un tileset a partir de una imagen base de praderas

Tilesetter construye un tileset a partir de una sola imagen base y exporta el nivel que armas a Unity, Godot y GameMaker Studio 2. Ese es el argumento de venta, y es bueno. Lo que detiene a la gente es el formato de escritorio: una aplicación que instalas, con licencia por máquina y que no puedes ejecutar en una pestaña del navegador. Si buscas una alternativa a Tilesetter, las dos preguntas que importan son si la generación de tilesets sigue funcionando y si puedes ver el resultado moverse sin abrir un motor.

Neta Studio es la alternativa basada en el navegador. El mismo punto de partida —una imagen base se convierte en un tileset alineado a la cuadrícula con el que pintas de inmediato—, pero el nivel se ejecuta como una escena de Three.js jugable cuando pulsas play. Sin instalador, sin idas y vueltas de archivos de proyecto, sin esperar a una compilación del motor para descubrir si el salto de un plataformas supera un hueco de tres tiles.

Lo que Tilesetter hace bien

La función central de Tilesetter es la generación de terreno a partir de una pequeña imagen base. Dibujas de tres a cinco tiles representativos —normalmente un relleno central, un borde recto y una esquina exterior— y el generador deriva el resto del set: esquinas interiores, variantes de borde y piezas de relleno. Crear a mano un set de terreno completo de 47 piezas es tedioso e inconsistente; derivarlo de una imagen base mantiene las esquinas alineadas. Esta es la función por la que la gente cambia de herramienta, y funciona.

La segunda mitad es la construcción de niveles. El set generado alimenta un editor de cuadrícula con comportamiento de autotile, así que arrastrar una línea de terreno produce bordes conectados en lugar de una fila de cuadrados idénticos. Eso es autotiling hecho a nivel de herramienta y no en el código del motor.

La tercera pieza es la exportación. Tilesetter escribe directamente en los formatos de proyecto de Unity, Godot y GameMaker Studio 2, así que los datos del nivel llegan como tilemaps nativos del motor en lugar de un PNG que tienes que volver a cortar a mano. En un flujo de trabajo con Tilesetter, este es de verdad el camino más corto de una imagen a una escena de motor jugable.

Dónde se queda corto Tilesetter para la mayoría

Es una aplicación de escritorio que instalas y pagas. Sus términos de licencia y su precio los fija su proveedor y cambian con el tiempo, así que consúltalos en la fuente en lugar de confiar en una página de comparación. La limitación práctica es más estrecha que el precio: si trabajas en un Chromebook, en un portátil de empresa gestionado o en cualquier máquina donde no puedas instalar software, no puedes ejecutarla. El proveedor no describe ninguna versión para navegador.

No hay salida jugable. Tilesetter te da un nivel; no te da uno que se ejecute. Para saber si tu arco de salto supera un hueco, o si el borde de un tile se lee a la distancia de cámara con la que piensas publicar, exportas, abres el motor, conectas el tilemap a una escena, pulsas play y miras. Cada pregunta de diseño cuesta una ida y vuelta.

La exportación también es el final del recorrido. Cambia el diseño de un tile y las dimensiones de la hoja cambian con él; el motor reimporta, el atlas se vuelve a enlazar y cualquier referencia de tile basada en desplazamientos de píxeles hay que revisarla. El ciclo es: regenerar, reexportar, reimportar, reverificar. Es viable, pero el ciclo de retroalimentación se mide en minutos, no en segundos.

Tilesetter vs Neta Studio — Tabla comparativa completa

Cada fila de Tilesetter a continuación está escrita a partir de su propia descripción pública del producto. Cuando no conozco un dato —precio, requisitos de plataforma—, describo el mecanismo en lugar de adivinar.

CapacidadTilesetterNeta Studio
EntradaUna imagen base que contiene unos pocos tiles representativos; el generador deriva de ella el set de terreno completoUna imagen base, o una hoja de sprites generada en Agent Sprite Forge; la herramienta de cuadrícula la corta en tiles
SalidaRecursos de tileset más los datos de nivel escritos en un formato de proyecto de motorUn nivel en el navegador que puedes jugar de inmediato, además de un PNG de tileset descargable con un manifiesto de índices de tiles
Generación de tilesetsDeriva variantes de terreno —bordes, esquinas, rellenos— a partir de una pequeña imagen baseCorta una imagen base en una hoja alineada a la cuadrícula, genera variantes de terreno e informa cualquier resto cuando el tamaño de celda no divide la imagen
Construcción de nivelesPintura sobre cuadrícula con comportamiento de autotile en un editor de escritorioPintura sobre cuadrícula en el navegador sobre la misma hoja, con capas, indicadores de colisión y colocación de objetos
ExportacionesSalida de proyecto para Unity, Godot y GameMaker Studio 2Atlas de tiles en PNG más un índice de tiles en JSON, importado en Unity, Godot o GameMaker con tu propia configuración
Resultado jugableNinguno dentro de Tilesetter: el nivel se juega una vez que lo construyes en el motorPulsa play en el navegador; el nivel se ejecuta como una escena 3D en el 3D Game Builder
PrecioLicencia de escritorio de pago fijada por su proveedorGratis para construir y jugar en el navegador
Agent Sprite Forge — genera una hoja completa a partir de una imagen base, en el navegador.

Genera un tileset completo a partir de una sola imagen base (demo en vivo)

El generador de esta sección hace lo que mejor se conoce de Tilesetter: toma una imagen base y devuelve un tileset alineado a la cuadrícula con el que puedes pintar de inmediato. Suelta un PNG, ajusta el tamaño de celda a 16, 32 o 48 píxeles, y la herramienta lo corta en una hoja más un índice de tiles. Sin instalación, sin licencia, sin crear antes un proyecto de motor.

Lo primero que falla es un tamaño de celda que no divide la imagen. Una hoja de 1023 píxeles de ancho a la que se piden celdas de 32 píxeles da 31 columnas completas y una columna de 31 píxeles; esa última columna se renderiza con una costura porque la GPU muestrea el tile vecino. Comprueba que el ancho y el alto dividan de forma exacta antes de pintar nada. La herramienta informa el resto en lugar de redondear en silencio, que es justo el objetivo.

El segundo fallo es el filtrado. Muestrea la hoja con filtrado lineal y los tiles adyacentes se promedian entre sí, dejando un halo de un píxel en cada borde. Dos soluciones: ajusta el filtro de textura a nearest en el motor, o extruye cada tile 2 píxeles al exportar para que los píxeles del límite se repitan hacia fuera. La extrusión es más segura porque sobrevive a un proyecto en el que alguien olvida el ajuste del filtro.

Una vez que la cuadrícula está limpia, pintar es inmediato. Las capas, los indicadores de colisión y la colocación de objetos viven todos en la misma cuadrícula, y el modo de juego ejecuta el resultado como una escena de Three.js. Los mundos de ejemplo The Cyclops' Island y Mini World están construidos así si quieres ver la escala de nivel que admite la cuadrícula.

  • Corte exacto de la cuadrículaEl ancho y el alto se dividen entre el tamaño de celda. Cualquier resto se informa en lugar de absorberse en una última columna rota.
  • Extrusión de bordesSangrado opcional de 2 píxeles alrededor de cada tile para que el muestreo con filtro nearest nunca tome los píxeles de un tile vecino.
  • Manifiesto de índices de tilesUn mapa JSON de coordenada de celda a ID numérico de tile, para que el código del motor direccione los tiles por índice en lugar de por desplazamiento de píxeles.
  • Generación de variantes de terrenoVariantes de borde, esquina y relleno derivadas de un pequeño conjunto de tiles dibujados a mano, con las esquinas exteriores mantenidas coherentes.
  • Origen de sprites en la misma cuadrículaAgent Sprite Forge emite sprites alineados al mismo tamaño de celda, así que el arte de personajes y objetos entra en la cuadrícula sin reescalar.
Un set generado alineado a la cuadrícula — una celda por tile
Salida: un set con el que puedes pintar de inmediato

Exporta a Unity, Godot y GameMaker — lado a lado

La importación al motor es donde el trabajo con tilesets suele perderse. La hoja está bien; los ajustes están mal. Cada motor quiere un conjunto de números distinto, y los fallos se ven distintos en cada uno.

Unity

Ajusta Texture Type a Sprite (2D and UI), Sprite Mode a Multiple, Filter Mode a Point y desactiva Generate Mip Maps. Para pixel art, Compression debe ser None. Luego abre el Sprite Editor y usa Slice, Grid By Cell Size, con el tamaño de celda que coincida con tus tiles: 16, 32 o 48 píxeles.

El fallo clásico es Pixels Per Unit. Déjalo en el valor predeterminado de 100 con tiles de 32 píxeles y cada tile se vuelve 0,32 unidades de mundo de ancho; si tu cuadrícula de tilemap asume 1 unidad por celda, tendrás un hueco o un solapamiento visible en cada límite de fila. Ajusta Pixels Per Unit igual al tamaño en píxeles del tile, o ajusta el tamaño de celda del tilemap al recíproco. El otro ajuste que la gente equivoca es el pivot: Center para mapas cenitales, Bottom Left para desplazamiento lateral donde los tiles se alinean con la línea del suelo.

Godot

Crea un recurso TileSet con Tile Size que coincida con tus celdas, añade un TileSetAtlasSource que apunte a la hoja y define Margin y Separation de forma explícita si la hoja tiene relleno, en lugar de confiar en la detección. En Godot 4, la opción de rellenar los tiles a partir de la región no transparente de la textura ahorra una pasada manual lenta. La pintura se hace en un nodo TileMapLayer.

Una nota de migración que pilla a la gente: Godot 4 reemplazó el sistema de máscara de bits de autotile de Godot 3 por conjuntos de terreno construidos sobre bits de conexión. Una hoja generada para autotiles de Godot 3 se importa como tiles simples en Godot 4: los píxeles están bien, el cableado del terreno no. Vuelves a construir el conjunto de terreno, no reexportas la imagen. Revisa también Rendering > Textures > Canvas Textures > Default Texture Filter; si está en Linear, tu pixel art tiene halos sin importar lo que contenga la hoja.

GameMaker Studio 2

GameMaker quiere un sprite cuyo tamaño de fotograma sea igual al tamaño de tu tile, y luego un recurso Tile Set creado a partir de ese sprite. La restricción dura es la divisibilidad: si el sprite mide 130 píxeles de ancho y el tamaño de tile es 32, el tile set se rechaza. Recorta o extruye la hoja hasta que las dimensiones sean múltiplos exactos. El origen es la esquina superior izquierda para los tile sets, y la pintura se hace en una capa de tiles en el editor de salas, así que el orden de las capas importa más aquí que en los otros dos motores.

Si tu hoja tiene relleno entre tiles, GameMaker no lo inferirá a partir del sprite. O exportas una hoja sin relleno para este destino, o divides la hoja con relleno en fotogramas individuales antes de crear el tile set.

Y el nivel que pintas con ella se puede jugar sin abrir un motor.

Cómo cambiar desde Tilesetter en 5 minutos

No tienes que volver a dibujar nada. Un tileset es un PNG y un nivel es una cuadrícula de índices dentro de ese PNG. Ambos sobreviven al cambio. Lo único que no sobrevive es la exportación en formato de proyecto, porque en el flujo de trabajo no hay un formato de intercambio neutro: cuenta con repintar el nivel, no con convertirlo.

Para una sala de una sola pantalla son unos minutos de arrastrar. Para un mapa grande con varias capas es una tarde, y aun así es menos tiempo que reconstruir una hoja desde cero.

1

01

Conserva cada PNG de tileset que ya hayas exportado desde Tilesetter. Nada necesita regenerarse: la imagen es el recurso.

2

02

Mide el paso de los tiles. Divide el ancho de la hoja entre el número de columnas que cuentes; si el resultado no es un número entero, la hoja tiene relleno y debes introducir margin y separation por separado en lugar de un único tamaño de celda.

3

03

Carga el PNG en la cuadrícula del navegador y define el tamaño de celda y el relleno. Confirma que las guías de corte caen en los bordes de los tiles antes de pintar una sola celda: un píxel de deriva se acumula a lo ancho de un mapa grande.

4

04

Reconstruye el nivel en la cuadrícula del navegador. Repinta capa por capa y luego define los indicadores de colisión. Si el mapa es grande, bloquea primero la disposición con un tile de relleno y añade el detalle después.

5

05

Pulsa play en el navegador. Corrige aquí los problemas de disposición, donde el ciclo es de segundos, en lugar de después de una compilación del motor.

6

06

Exporta el atlas y el índice de tiles, y luego reutiliza los ajustes de importación del motor que ya conoces: Pixels Per Unit y Grid By Cell Size en Unity, Tile Size y el origen del atlas en Godot, el tamaño de fotograma del sprite y el tile set en GameMaker.

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 colócala 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 sola descripción escrita y se publicaron como una página que puedes jugar.

FAQ

¿Tilesetter es gratis? +

No. Es una aplicación de escritorio de pago y sus términos de licencia los fija su proveedor, así que consulta el precio actual en la fuente en lugar de en una página de comparación. Las herramientas de navegador de Neta Studio son gratis para construir y jugar.

¿Existe una versión de Tilesetter para navegador? +

El proveedor describe Tilesetter como una aplicación de escritorio que se instala, y ninguna versión para navegador forma parte de esa descripción. La alternativa basada en el navegador es el generador de tilesets y el editor de cuadrícula de esta página, que funcionan en una pestaña sin instalación.

¿Puedo exportar a Unity? +

Exportas un atlas PNG y un índice de tiles en JSON, y luego importas en Unity con Texture Type Sprite, Sprite Mode Multiple, Filter Mode Point, Slice By Cell Size y Pixels Per Unit igual al tamaño en píxeles de tu tile. Es la misma ruta de importación que usaría una hoja de Tilesetter, menos el paso del formato de proyecto.

¿Necesito instalar algo? +

No. El corte, la generación de terreno y la pintura sobre cuadrícula se ejecutan en el navegador. El modo de juego necesita un navegador con WebGL2; la mitad de edición funciona sin él.

¿Puedo usar mi propia imagen base? +

Sí. Cualquier PNG sirve siempre que su ancho y su alto se dividan de forma exacta entre el tamaño de celda que elijas. Si no es así, la herramienta informa el resto para que puedas recortar o añadir relleno antes de pintar, en lugar de descubrir más tarde una columna desalineada.

¿Y mis niveles existentes? +

Tilesetter escribe los datos del nivel en formatos de proyecto de motor, así que no hay un archivo neutro desde el que convertir. En la práctica conservas el PNG del tileset y repintas el nivel en la cuadrícula del navegador: rápido para una sola sala, una tarde para un mapa grande con varias capas.

Volver al 3D Game Builder

Los 31 mundos, juegos y escenas 3D terminados están en una sola página: todos ellos jugables.

Plataforma: Neta StudioPágina: Alternativa a TilesetterLee a continuación: /explore/tool/ai-tileset-generator · /explore/tool/tile-map-editor · /app/free-tilesets
×