Editor de mapas

El editor de mapas pinta mapas de tiles: una rejilla en la que cada celda lleva un tile, un cuadrado de una imagen del proyecto, el tileset. Cada celda puede llevar además un valor de celda: un número que no se ve y que dice qué es esa celda (suelo, pared, pinchos…).

Edita los ficheros .map de la carpeta Maps. Al compilar, el IDE los convierte en los .gmap que lee el módulo GridMap. El editor de escenas los usa para las capas de tiles de una sala y para su mapa de colisión.

Se abre de cuatro maneras:

New TileMap, en el menú del explorador (clic derecho) o en su barra de botones. Pide el nombre, crea el .map y lo abre. Lo crea en Maps, o en la carpeta que tengas elegida en el explorador.
Doble clic en un .map del explorador.
Edit tilemap..., en una capa de tiles del editor de escenas: abre el mapa de esa capa.
Home › View › TileMap, en la cinta: enseña el editor. Si no tiene ningún mapa abierto, te deja uno sin fichero; al guardarlo, te pide el nombre y lo crea en Maps.

El editor tiene un solo mapa abierto. Si abres otro y hay cambios sin guardar, primero te pregunta si los guardas.

El editor de mapas con el mapa del mundo de JaruQuest y sus valores de celda a la vista

Un recorrido

Un mapa con suelo y paredes que choca en una sala.

Crea el mapa. En el explorador, clic derecho en Maps › New TileMap. Escribe el nombre, por ejemplo Nivel1, y acepta: el IDE crea Maps/Nivel1.map y lo abre. Un mapa nuevo mide 20 × 15 tiles de 16 × 16 píxeles, es de tipo Tiles Only y no tiene tileset. Si el editor tenía otro mapa abierto, el nuevo sale con el tamaño, el tile, el tipo y el tileset de ese.
Elige el tileset. En el panel Tileset, despliega Image y elige la imagen de los tiles. En Tile Size, pon el ancho y el alto de un tile, en píxeles. La Tile Palette de la izquierda enseña la imagen cortada en tiles.
Pinta. Haz clic en un tile de la paleta (sale con un marco amarillo) y pinta en el mapa con Brush, a clics o arrastrando. Con el botón derecho borras. Para una fila de suelo, usa Line; para un bloque, Rect.
Marca lo sólido. En el panel Mode, cambia Tilemap Type a Tiles + Cell Values y Active Layer a Cell Values. En Defined Values, haz clic en 1: Wall y pinta encima del suelo y de las paredes: esas celdas salen rayadas en rojo, con un 1.
Guarda con Save. Mientras hay cambios sin guardar, el botón dice Save ●.
Pruébalo en una sala. En el editor de escenas, pon el mapa en una capa de tiles de la sala. En la pestaña Room, elígelo como Collision map. Solid values ya trae un 1: las celdas con el valor 1 son sólidas. Pulsa Play. Lo cuentan Capas y La sala y el juego. Si tu juego es de código, mira «Con el código», más abajo.

Herramientas

Las herramientas pintan en la capa activa (Active Layer): el tile elegido en la paleta o el valor elegido en Defined Values. No tienen tecla.

Botón	Con el botón izquierdo	Con el derecho
Brush	Pinta cada celda que pisas, a clics o arrastrando.	Borra, igual.
Eraser	Borra: la celda se queda sin tile, o con el valor 0.	Borra.
Fill	Rellena la zona de la celda pulsada: todas las celdas unidas a ella por un lado, no en diagonal, que tienen su mismo tile (o su mismo valor).	Borra la celda pulsada.
Rect	Arrastra de una esquina a la otra y suelta: pinta el rectángulo, lleno.	Borra el rectángulo.
Line	Arrastra de un extremo al otro y suelta: pinta la línea de celdas.	Borra la línea.

Mientras arrastras Rect o Line, las celdas que van a cambiar salen con un marco: amarillo si van a pintarse, rojo si van a borrarse. Fill en una celda vacía rellena todas las vacías que se tocan: sirve para pintar el fondo de una vez.

El resto de la barra:

Undo y Redo deshacen y rehacen. Cada trazo, de pulsar a soltar, es un paso; cambiar el tamaño del mapa, otro. Guardan hasta 100 pasos y empiezan de cero al abrir otro mapa. Solo deshacen lo pintado y el tamaño: no el tileset, el tamaño del tile, el tipo de mapa ni los valores definidos.
Resize Map aplica el tamaño de Size (panel Map).
Extract Tiles saca a un tileset nuevo los tiles sueltos de una imagen (panel Tileset).
- y + alejan y acercan el mapa, de 25 % a 400 %. Entre los dos sale el zoom.
Save guarda el .map.
Generate Tileset guarda una imagen del mapa entero (panel Tileset).
Close cierra el mapa y esconde el editor. Si hay cambios sin guardar, te pregunta antes.

Paneles y opciones

Tileset

El tileset es una imagen del proyecto, de cualquier carpeta: impórtala con Import Image del explorador o dibújala en el editor de imágenes.

Image: la imagen del tileset. El mapa guarda cuál es, y el editor de escenas usa esa misma en la capa de tiles.
Tile Size: el ancho y el alto de un tile, en píxeles, de 8 a 128.

La Tile Palette, a la izquierda, enseña la imagen cortada en tiles. Haz clic en un tile para elegirlo. Si la imagen no mide un número exacto de tiles, lo que sobra a la derecha o abajo sale rayado en naranja y no se puede elegir. Al elegir la imagen, la paleta se amplía en pasos enteros, hasta ×4, para llenar el ancho del panel; con Ctrl + rueda del ratón la amplías o la reduces.

Los tiles se numeran desde 0, de izquierda a derecha y de arriba abajo. En una imagen de 8 tiles de ancho, el 0 es el de arriba a la izquierda y el 8, el primero de la segunda fila. Cada celda guarda ese número: si cambias Tile Size o la imagen con el mapa ya pintado, los números no cambian, pero apuntan a otros trozos de la imagen.

255 tiles como mucho

En el juego, cada celda es un byte y el 255 quiere decir «vacía»: un mapa solo puede usar los tiles 0 a 254. El editor deja pintar los que pasan de ahí, pero al compilar el IDE se para con el error «tiles have index > 254».

Para que el tileset llegue al juego, su imagen tiene que tener Include in Build encendida en el editor de imágenes. Al compilar, el IDE la exporta como las demás imágenes, en Build/flash, con la misma ruta y en BMP: Images/Tiles.png acaba en Build/flash/Images/Tiles.bmp.

Extract Tiles

Saca a un tileset nuevo los tiles de una imagen en la que están sueltos, separados por un color de fondo (por ejemplo, una hoja con un margen entre tile y tile).

Elige la imagen en Image y pon en Tile Size el tamaño de un tile.
Elige el color de fondo: haz clic en el cuadro de color del final del panel Visualization y después en un píxel del fondo, en la paleta. Con el botón derecho en la paleta, lo dejas como estaba. Mientras no elijas otro, es negro.
Pulsa Extract Tiles.

El editor busca cada mancha de píxeles que no son del color de fondo y se queda con las que miden justo un tile. Las pone en filas de 16, en el orden en que están en la imagen (de arriba abajo y de izquierda a derecha), y las guarda en Images/<imagen>_extracted_<ancho>x<alto>.png. La imagen nueva entra en el proyecto y pasa a ser el tileset del mapa.

Un tile que tiene un borde del color de fondo, o dos tiles pegados, no miden justo un tile: no salen.
La imagen nueva entra con Include in Build encendida: al compilar, llega al juego.
Hazlo antes de pintar: en el tileset nuevo, cada número es otro tile.

Generate Tileset

A pesar del nombre, no hace un tileset: guarda en PNG una imagen del mapa entero, con cada celda pintada con su tile y transparente donde no hay tile. Mide lo mismo que el mapa en píxeles: un mapa de 20 × 15 tiles de 16 × 16 da una imagen de 320 × 240. Te pregunta dónde guardarla y no la añade al proyecto; si la quieres en él, impórtala con Import Image.

Map

Size (tiles x tiles) es el ancho y el alto del mapa en tiles, de 1 a 256. Se aplica al pulsar Resize Map o al salir de la casilla. El mapa crece o encoge por la derecha y por abajo: lo de arriba a la izquierda se queda donde está. Si al encoger se pierde algo pintado, te pregunta antes, y Undo lo devuelve.

Mode

Un mapa tiene dos capas del mismo tamaño: la de tiles, que es lo que se ve, y la de valores de celda, que dice qué es cada celda. Tilemap Type dice cuáles usa:

Tiles Only: solo tiles. El panel Cell Values y Show Cell Values se apagan.
Tiles + Cell Values: las dos capas.
Cell Values Only: solo valores de celda. El mapa no pinta los tiles.

Active Layer dice en qué capa pintan las herramientas: Tiles o Cell Values. Solo se puede cambiar con Tiles + Cell Values; con los otros dos tipos, la capa es la única que hay.

Cambiar el tipo deja fuera una capa al guardar

El .map solo guarda las capas de su tipo. Si pasas un mapa a Tiles Only y lo guardas, el fichero se queda sin sus valores de celda; con Cell Values Only, sin sus tiles. Para recuperarlos, vuelve al tipo de antes y guarda otra vez antes de cerrar el mapa.

Cell Values

Un valor de celda es un número de 0 a 255 que lleva cada celda, aparte de su tile. No se ve en el juego: lo leen tu código o la colisión de la sala. El 0 es «nada»: el editor no lo pinta, y Eraser deja las celdas en 0.

Defined Values: los valores con nombre de este mapa, como ID: nombre. Haz clic en uno para pintar con él: Painting dice cuál pinta Brush.
ID, Name y Color: el número, el nombre y el color del valor que editas. Al hacer clic en el cuadro de Color, sale el selector de color. Al elegir un valor de la lista, sus datos pasan a estas casillas.
Add/Edit: si el ID ya está en la lista, le cambia el nombre y el color; si no, lo añade y lo elige para pintar.
Remove: quita de la lista el valor elegido. Las celdas que lo llevan se quedan con su número. El 0 no se puede quitar.

Un mapa nuevo trae definidos el 0 Empty, el 1 Wall, el 2 Water, el 3 Grass, el 4 Lava y el 5 Spawn. Los nombres y los colores solo sirven en el editor: el juego solo ve el número. Que el 1 sea una pared lo decides tú, en la sala o en el código.

Los valores de celda y la colisión:

En una sala, la pestaña Room del editor de escenas elige un mapa como Collision map y dice qué valores son sólidos (Solid values) y cuáles son plataformas que se atraviesan desde abajo (One-way values). Ese mapa tiene que llevar valores de celda: tipo Tiles + Cell Values o Cell Values Only. Con Tile numbers encendido, la sala choca con los números de tile y no con los valores de celda. Lo cuenta La sala y el juego.
En tu código, cargas la capa de valores con GridMap y le dices qué valores son sólidos (solids) y cuáles plataformas (platforms): hits resuelve el choque de un sprite con el mapa. Mira «Con el código», más abajo.

Los valores también sirven para marcar sitios: dónde aparece un enemigo, una puerta, una zona que hace daño… Tu código los busca con find.

Visualization

Show Map Grid: la rejilla del mapa. Encendida de serie.
Show Palette Grid: la rejilla de la paleta. Encendida de serie.
Show Cell Values: pinta los valores de celda sobre el mapa, rayados de su color y con su número. Encendida de serie.
Show Tile Numbers: escribe en amarillo el número de tile de cada celda. Sirve cuando la sala choca por número de tile (Tile numbers en el editor de escenas). Apagada de serie.
Include map in build: si está apagada, al compilar el IDE se salta el mapa y no exporta sus .gmap. Encendida de serie; se guarda en el .map.
El cuadro de color, sin nombre, del final: el color de fondo de Extract Tiles.

Los números, de valor y de tile, solo salen con el zoom al 75 % o más y el tile a 16 píxeles o más en pantalla.

La barra de estado

Abajo, la barra de estado dice la herramienta, la capa activa y el tile o el valor elegido, por ejemplo Tool: Brush | Layer: Tiles | Selected tile: 0, con un * al final si hay cambios sin guardar. A la derecha, Tile: x, y es la celda que tiene el ratón debajo: columna y fila, contadas desde 0, las mismas que usa get(x, y) en GridMap.

Lo que guarda y lo que genera

Save guarda el mapa en su .map, un fichero JSON. Home › Project › Save, en la cinta, también lo guarda si ya tiene fichero. Al guardar, el editor de escenas, si está abierto, vuelve a pintar la sala con el mapa nuevo.

Campo del `.map`	Qué es
`mode`	El tipo: `tiles` (Tiles Only), `tiles_cellvalues` (Tiles + Cell Values) o `cellvalues_only` (Cell Values Only).
`mapWidth`, `mapHeight`	El tamaño del mapa, en tiles.
`tileWidth`, `tileHeight`	El tamaño de un tile, en píxeles.
`tilesetNodeID`	El tileset: el número de su imagen dentro del proyecto.
`saveToData`	Include map in build.
`tiles`	Un número por celda, fila a fila: el tile, o `65535` si la celda está vacía.
`cellValues`	Un número por celda, fila a fila: el valor de celda.
`valueDefinitions`	Los valores definidos, con su `id`, `name`, `color` y `description`.

El tileset va por el número de su imagen en el proyecto: un .map copiado de otro proyecto apunta a la imagen que tenga ese número en este, o a ninguna. Vuelve a elegirla en Image.

Al compilar (Build › Compile, y también el Play del editor de escenas), el IDE convierte cada .map en uno o dos .gmap, en Build/flash y con la misma ruta que el .map dentro del proyecto:

Fichero	Qué lleva	Cuándo
`Build/flash/Maps/<mapa>_tiles.gmap`	Los tiles, un byte por celda; el 255 es una celda vacía.	Con Tiles Only o Tiles + Cell Values.
`Build/flash/Maps/<mapa>_cells.gmap`	Los valores de celda, un byte por celda.	Con Tiles + Cell Values o Cell Values Only.

Un .gmap empieza con una cabecera de 12 bytes (GMAP, la versión, el ancho y el alto del mapa y el ancho y el alto del tile) y sigue con un byte por celda, fila a fila.

En el Output sale lo que se exporta y lo que no:

Con Include map in build apagada, el mapa no se exporta: «Skipping tilemap (saveToData is false)».
Un mapa recién creado con New TileMap está vacío hasta el primer Save. Hasta entonces se salta con un aviso: «The map is empty (it was never saved in the Tilemap Editor)».
Si tu juego carga las salas como datos (El código que genera), de los mapas que usan las salas no se exporta la capa que no carga ninguna sala ni nombra tu código: «Not exported, no room loads it».
Un tile por encima del 254 para la compilación: «tiles have index > 254».

Guarda antes de compilar

Al compilar, el IDE lee el .map del disco: ni Compile ni Play guardan el editor de mapas. Lo que no has guardado no llega al juego.

Atajos

Atajo	Qué hace
`Ctrl+Z`	Deshace.
`Ctrl+Y` o `Ctrl+Shift+Z`	Rehace.
`Ctrl` + rueda, sobre el mapa	Acerca o aleja el mapa.
`Ctrl` + rueda, sobre la paleta	Amplía o reduce la paleta.
Botón derecho, sobre el mapa	Borra, con cualquier herramienta.
Botón derecho, sobre la paleta	Deja de elegir el color de fondo de Extract Tiles.

Las teclas funcionan con el editor de mapas activo.

Con el código

Con salas no escribes nada: el código que genera el editor de escenas carga los .gmap de sus capas y de su mapa de colisión (El código que genera).

En un juego de código, carga con GridMap.load lo que exporta el IDE al compilar. Si arrastras el .map del explorador al editor de código, un menú te deja elegir Load tiles map o Load cells map y escribe la llamada por ti. El tamaño del tile va dentro del .gmap; el tileset se lo das tú:

use Display, GridMap, Bitmap

var draw = Display.draw
Display.open(320, 240)
Display.fps = 30

// Lo que exporta Maps/Nivel1.map, de tipo Tiles + Cell Values
var nivel = GridMap.load("Maps/Nivel1_tiles.gmap")
nivel.tileset = Bitmap.load("Images/Tiles.bmp")
var celdas = GridMap.load("Maps/Nivel1_cells.gmap")
celdas.solids = [1]               // el valor 1 (Wall) es sólido

println(celdas.get(3, 2))         // el valor de la columna 3, fila 2

while (true)
    draw.cls()
    draw.tilemap(nivel)
    Display.update()
end

draw.tilemap pinta los tiles y se salta las celdas vacías.
Para que un sprite choque con las paredes, llama a celdas.hits(sprite) en cada fotograma.
celdas.find(10) te da dónde están las celdas con el valor 10, por ejemplo para poner los enemigos.

Pide solo las capas que lleva el tipo del mapa: con Tiles Only, el IDE no exporta el _cells.gmap. Todo lo demás está en GridMap.

Problemas conocidos

Un mapa sin fichero no cambia de tamaño. En el mapa sin fichero que deja Home › View › TileMap, Resize Map y Size no hacen nada. Guárdalo primero, o crea el mapa con New TileMap.
Los .gmap viejos se quedan. Al compilar no se borra lo que ya había en Build/flash/Maps. Si apagas Include map in build, cambias el tipo de un mapa, lo renombras o lo borras, el .gmap de la compilación anterior sigue ahí. Bórralo a mano si no lo quieres.
Tiles por encima del 254. El editor deja pintarlos sin avisar, y el error sale al compilar (panel Tileset).

Todos los problemas conocidos de JARU, juntos, están en Problemas conocidos.

Un recorrido​

Herramientas​

Paneles y opciones​

Tileset​

Extract Tiles​

Generate Tileset​

Map​

Mode​

Cell Values​

Visualization​

La barra de estado​

Lo que guarda y lo que genera​

Atajos​

Con el código​

Problemas conocidos​