Dibujar el mapa

Preparación del entorno

Lo primero que vamos a hacer, antes de hacer el mapa, es preparar un entorno de carpetas y archivos que nos permita tenerlo todo organizado. Para ello, crea una carpeta dentro de juegoknights llamada tiled, que contenga, a su vez, la siguientes subcarpetas:

mapas: para los archivos de mapas
img: para las imágenes que utilizaremos en los mapas
json: para los archivos exportados de mapas que luego utilizaremos en Phaser

Una vez hecho esto, copia dentro de la carpeta juegoknights/tiled/img los archivos descargados castle_tileset_part1.png, castle_tileset_part2.png y castle_tileset_part3.png y renómbralos como piedra.png, metal.png y madera.png, respectivamente.

Creación del mapa

Los tileset descargados están pensados para trabajar con un mapa de patrón de 16x16px, con lo que crearemos un mapa que tenga ese patrón, y cuyo tamaño sea múltiplo para que todo encaje perfectamente. Para ello, abre Tiled, y en Archivo -> Nuevo -> Nuevo mapa... (o en el botón Nuevo Mapa...), modifica los valores para que coincidan con los siguientes:

Orientación: Ortogonal
Formato de la capa de Patrones: CSV
Orden de pintado de patrones: Derecha Abajo
Tamaño del Mapa: 100x40 patrones
Tamaño del Patrón: 16x16 px

Esto nos creará un mapa de 1600x640px preparado para ser exportado en CSV o JSON. Haz clic en Guardar como..., pon el nombre mapaknights y selecciona la ruta juegoknights/tiled/mapas para guardar el archivo en esa carpeta. Si has hecho todo correctamente, deberías tener una pantalla similar a esta (si trabajas en Windows, es probable que sea algo diferente):

Creación de los conjuntos de patrones

Los conjuntos de patrones son mapas de Tiled creados a partir de archivos de imágenes que nos permiten separar dicha imagen en patrones más pequeños (de 16x16 px en este caso) para poder utilizarlos en nuestro mapa de forma independiente. Debemos crear un conjunto de patrones por cada imagen diferente, con lo que, en nuestro caso, crearemos 3 conjuntos de patrones (piedra, metal y madera). Para hacer el primero, haz clic en Archivo -> Nuevo -> Nuevo conjunto de patrones... y modifica los parámetros para que coincidan con los siguientes:

Nombre: piedra
Tipo: Basado en la Imagen del Conjunto de Patrones
Fuente: Haz clic en explorar y selecciona la ruta juegoknights/tiled/img/piedra.png
Ancho, alto: 16px, 16px
Margen, espaciado: 0px, 0px

Pincha en el botón Guardar como..., escribe piedra.tsx (si es que no sale por defecto), comprueba que la ruta es juegoknights/tiled/mapas y haz clic en Save. Repite el proceso anterior para crear los conjuntos de patrones metal.tsx y madera.tsx con sus imágenes correspondientes metal.png y madera.png.

Capas de patrones

Es necesario separar el mapa en varias capas, ya que luego nuestro juego tendrá elementos de fondo, elementos sólidos que no se pueden traspasar, elementos por los que el personaje se puede caer, etc. En este caso y para no complicarlo, solo vamos a crear 5 capas:

fondo: para los elementos del fondo, indiferentes para el personaje
adornos y lámparas: para los elementos de adorno y lámparas del fondo, indiferentes para el personaje
suelo: para los elementos de suelo sobre los cuales el personajes camina
paredes: para los elementos de pared en los que cuando el personaje los toque no podrá saltar (para evitar que "escale" por la pared)

MUY IMPORTANTE: para no complicar el proceso de programación, cada capa solo contendrá elementos de un conjunto de patrones. Si quieres obstáculos de diferentes conjuntos de patrones, crea una capa para cada uno de ellos. Para crear una capa, simplemente pincha a la derecha en el botón de capas y, con el botón derecho sobre el espacio en blanco destinado a las capas, haz clic en Nuevo -> Capa de patrones y llámala fondo. Repite el proceso para el resto de capas y cuando termines, elimina la capa original si no las has usado con el botón derecho. Al finalizar, deberías reordenarlas (pinchando y arrastrando), de modo que el fondo quede detrás de todo lo demás.

Capas de objetos

El objetivo de este juego de ejemplo es recoger una serie de objetos o gemas que permitan incrementar la potencia de salto del jugador. Además, al coger 8 gemas aparecerá una plataforma móvil que permitirá al jugador subir a la parte de arriba. Igualmente, el jugador dispone de 3 vidas que se van perdiendo al colisionar con alguna de las trampas. Tanto las trampas como las gemas las generaremos con capas de objetos. Para ello, haz clic en Nuevo -> Capa de objetos y llámala gemas y repite el proceso para la capa trampas. Tu listado de capas será ahora similar a éste:

Dentro de la capa gemas añadiremos una serie de objetos a nuestro mapa, que posteriormente mostrarán las gemas para pode recogerlas. Para ello, con la capa de gemas seleccionada, pulsa la tecla I o la herramienta Insertar punto y añade puntos en todas las ubicaciones del mapa donde quieras añadir gemas.

Por último, haz clic en la pestaña Objetos, despliega la capa gemas y renombra todos los puntos creados con el nombre gema. Deberías conseguir un resultado similar a éste:

Repite el proceso para la capa trampas, añadiendo trampas en las ubicaciones que desees y renombrando cada punto con el nombre trampa.

Ejercicio propuesto

Para dibujar el mapa, sigue las indicaciones del profesor en cuanto a las herramientas a utilizar. El objetivo es dibujar un mapa por capas similar al mostrado antes, pero que además, en alguna parte, incluya tu nombre en el fondo (con ladrillos más claros que los del fondo, por ejemplo). Esta actividad tiene un valor de 1 punto en la nota de la 3ª evaluación.