Tiled, el editor de mapas 2D compatible con Phaser.js

Tiled es quizá el programa editor de mapas más famoso que existe. Con Tiled podemos crear mapas en 2D y 2.5D que podrán ser usados por una gran cantidad de motores, entre ellos Phaser. Para diseñar los mapas necesitamos previamente un tileset, es decir un conjunto de gráficos que puedan ser usados en múltiples casillas para formar algo más complejo. Piensa en ello como bloques de Lego (¡o de Minecraft!). Tiled es gratuito, software libre, usa las librerías Qt y está disponible para Windows, Mac OS X y Linux.

Instalando Tiled

Visita la página oficial de Tiled

Primeros pasos con Tiled, un mapa ortogonal y un tileset gratuito

Para este tutorial vamos a usar un tileset gratuito, a mi modo de ver muy completo.
DawnLike - 16x16 Universal Rogue-like tileset v1.81 de DragonDePlatino. Lo encuentras en OpenGameArt bajo la licencia Creative Commons 3.0 Attribution-ShareAlike. Descárgatelo y descomprime el fichero ZIP.

Ahora abre Tiled y verás algo como esto.
Selecciona Archivo -> Nuevo
En el diálogo asegúrate de elegir ortogonal (nuestro tileset es ortogonal) y formato de capa de patrones escoge CSV. Ahora en el tamaño del mapa elige la dimensión del mapa, lo que te guste, yo elegí 20 y 20. Lo importante viene a la derecha, en el tamaño del patrón. Tenemos que indicar cuanto ocupa una casilla, una celda en nuestro tileset. El nuestro es de 16x16 así que pon 16 y 16.
Ahora abajo a la derecha busca la pestaña Conjunto de patrones. Dentro selecciona la hoja blanca que significa Nuevo conjunto de patrones. Selecciona un archivo cualquiera del tileset. Yo he elegido la imagen Walls.png que estaba dentro de Objects.
Ahora tendrás disponibles si todo va bien las piezas para montar el mapa.
Con esto ya puedes hacer click en la pieza e ir dibujando tu mapa. Usa el estampador para poner elementos de uno en uno, la cubeta para pintar todos los elementos que antes eran iguales con el mismo tile y usa la goma para borrar. Puedes añadir más imágenes del tileset añadiendo más Conjuntos de patrones.
En el siguiente tutorial de Tiled veremos más herramientas y utilidades de Tiled como las capas y los atributos.