Jairo García Rincón
Contenido

Programar el mapa

Exportar a JSON

Una vez que tenemos creado nuestro mapa y antes de añadirlo a Phaser, debemos exportarlo usando el formato JSON. No obstante, antes de hacerlo debemos llevar a cabo una sencilla operación en cada uno de los 3 conjuntos de patrones de Tiled (madera, piedra y metal): Dicha operación consiste en "empotrar" (embed) el conjunto de patrones en nuestro mapa JSON, de modo que al exportarlo, vaya toda la información en un único archivo. Para realizarla, selecciona en la parte inferior derecha cada conjunto de patrones y en cada uno de ellos haz clic en el icono Empotrar Conjunto de Patrones que muestra la figura siguiente:
Una vez realizada esta operación, guarda el mapa y haz clic en Archivo -> Exportar como..., selecciona el formato Archivos de mapa JSON (*.json) y guárdalo en la carpeta juegoknights/maps con el nombre mapaknights.json (acuérdate de poner la extensión porque no la guarda por defecto). Ya puedes cerrar (de momento) Tiled Map Editor.

Copiar ficheros a las carpetas del juego

Copia las 3 imágenes madera.png, metal.png y piedra.png (o las que hayas usado en el mapa) de la carpeta juegoknights/tiled/img a la carpeta juegoknights/img.

Añadir el mapa en Estado Jugar

Puesto que el mapa que hemos creado está pensado para ser parte de nuestro juego, tiene sentido incluirlo dentro del estado estadoJugar, ya que es donde querremos que se muestre el mapa del juego. Modifica el archivo juegoknights/js/estadoJugar.js para que quede como sigue (y fíjate en los comentarios explicativos): 

MiJuego.EstadoJugar = function (juego) {

};

MiJuego.EstadoJugar.prototype = {

    preload: function () {

        //Imágenes para los mapas
        this.load.image('piedra', 'img/piedra.png');
        this.load.image('metal', 'img/metal.png');
        this.load.image('madera', 'img/madera.png');

        //Archivo JSON de mapa
        this.load.tilemap('mapa', 'maps/mapaknights.json', null, Phaser.Tilemap.TILED_JSON);

    },

    create: function () {

        //Establezco los límites del juego (el tamaño de los mapas en este caso)
        juego.world.setBounds(0, 0, 1600, 640);

        //Habilitamos el sistema de física Arcade de Phaser (velocidad, movimientos, colisiones, etc)
        juego.physics.startSystem(Phaser.Physics.ARCADE);

        //Mapa
        this.mapa = this.add.tilemap('mapa');

        //Tilesets para el mapa
        this.mapa.addTilesetImage('piedra');
        this.mapa.addTilesetImage('madera');
        this.mapa.addTilesetImage('metal');

        //Capas
        this.fondo = this.mapa.createLayer('fondo');
        this.adornos = this.mapa.createLayer('adornos');
        this.lamparas = this.mapa.createLayer('lamparas');
        this.suelo = this.mapa.createLayer('suelo');
        this.paredes = this.mapa.createLayer('paredes');

        //Menú Botones
        crearMenu();

    },

};
Como ves y al igual que en ejemplos anteriores, hemos pre-cargado las imágenes correspondientes a los mapas, así como el archivo del mapa, dentro de la función preload. Seguidamente, dentro de la función create:
  • Hemos establecido los límites del mundo de nuestro juego para adaptarlos al mapa (aunque la ventana que veamos en el navegador siga siendo de 800x600px)
  • Hemos iniciado la física del juego par apoder establecer elementos sólidos, gravedad, velocidad, etc.
  • Hemos añadido el mapa y le hemos asociado las imágenes a sus tilesets o conjuntos de patrones.
  • Hemos añadido las capas del mapa. Recuerda: la primera capa en añadirse quedará al fondo y la última en añadirse quedará al frente.
  • Por último, hemos borrado el color de fondo y el texto pero hemos mantenido los botones del menú para poder cambiar de estados, aunque claramente habría que reubicarlos.
Ahora el objetivo es conseguir que todas nuestras capas se muestren correctamente. No te preocupes porque el mapa salga cortado, esto es debido a que es más grande que la ventana de juego. Cuando añadamos el personaje y el seguimiento de cámara en la próxima clase, podrás verlo completo y probablemente tengas que hacer modificaciones sobre él.

Las capas de objetos

A la hora de crear el mapa, vimos que las capas de las gemas y de las trampas eran diferentes a las demás, ya que eran de tipo capa de objetos. Es por ello que también ahora debemos añadirla de forma diferente. Para ello, lo primero que necesitamos es una imagen para las gemas, que puedes encontrar al inicio en los enlaces de la página de presentación de esta clase, así como otra para las trampas. No obstante, te facilito unas ya preparadas que puedes descargar AQUÍ y que incluye además una imagen para una plataforma móvil que utilizaremos más adelante. Descomprime el archivo descargado y copia las tres imágenes dentro de la carpeta juegoknights/img. Una vez hecho esto, debemos modificar el código de la función preloadpara que incluya la carga de las imágenes anteriores: 

    preload: function () {

        //Resto de código

        //Imágenes adicionales
        juego.load.spritesheet('gema', 'img/gemas.png', 16, 15);
        this.load.image('trampa', 'img/trampa.png');
        this.load.image('plataforma', 'img/plataforma.png');

    },
Y el de la función create para añadir las capas de objetos (y sus animaciones en el caso de las gemas): 

    create: function () {

        //Resto de código

        //Gemas
        this.gemas = juego.add.group();
        this.gemas.enableBody = true;
        this.mapa.createFromObjects('gemas', 'gema', 'gema', 0, true, false, this.gemas);
        this.gemas.callAll('animations.add', 'animations', 'girar', [0, 1, 2, 3, 4, 5, 6], 10, true);
        this.gemas.callAll('animations.play', 'animations', 'girar');

        //Trampas
        this.trampas = juego.add.group();
        this.trampas.enableBody = true;
        this.mapa.createFromObjects('trampas', 'trampa', 'trampa', 0, true, false, this.trampas);

    },
Como ves, en ambos casos hemos añadido un grupo para las gemas y las trampas - similar al del juego sencillo - que además tendrán body o cuerpo para poder detectar que el jugador pasa (overlap) por encima. Seguidamente, hemos añadido las gemas y las trampas como objetos al mapa, utilizando para cada una de las posiciones marcadas en la capa gemas de Tiled el spritesheet gema, y la imagen trampa para cada una de las posiciones marcadas de la capa de objetos trampas. Finalmente, hemos añadido las animaciones que hacen que las gemas cambien de color. Si ahora lanzas el juego en el navegador y accedes al Estado jugar, deberías encontrar una pantalla similar a la siguiente (aunque con tu mapa y sin el jugador, claro):