viernes, 26 de mayo de 2017

Usando mapas de Tiled en Phaser

Retomamos el tutorial de Tiled. Deberíamos tener ya un mapa de Tiled con dos capas (Paredes y Suelo), una con el atributo pasable en desactivado y en otro no.

Vamos a Tiled y exportamos el archivo en formato JSON (CSV también nos valdría pero no lo he probado).

Cargando el tilemap y el tileset

En la función preload cargamos el JSON con la descripción del mapa (tilemap) y las imágenes que usa el mapa (tileset). Es muy parecido a como vimos en Iniciar Phaser.js.

function preload(){
    game.load.tilemap("Mapa","Mapa.json",null,Phaser.Tilemap.TILED_JSON);
    game.load.image("Tileset-1","Wall.png");
Ahora creamos los objetos en pantalla dentro de la función create.

var map, paredes, suelo;

function create(){
    map = game.add.tilemap("Mapa");
    map.addTilesetImage("Wall","Tileset-1"); // El nombre Wall hace referencia a como se llama el tileset en Tiled
    suelo = map.createLayer("Suelo"); // El nombre hace referencia a como se llama la capa en Tiled
    paredes = map.createLayer("Paredes");
}
Es importante usar los nombres que hemos usado en Tiled previamente. Además, el orden en que llamemos a createLayer importa, ya que no tiene en cuenta el orden de las capas que hubiese en Tiled.

Colisiones

Vamos ahora a hacer que las paredes sean objetos no atravesables, mientras que el suelo sí lo sea. Para gestionar las físicas vamos a usar Arcade Physics aunque con P2 es parecido.

var map, suelo, paredes, player;

function create(){
    game.physics.startSystem(Phaser.Physics.ARCADE);

    map = game.add.tilemap("Mapa");
    map.addTilesetImage("Wall","Mapa-TileImage");
    suelo = map.createLayer("Suelo");
    paredes = map.createLayer("Paredes");

    console.log("Paredes es pasable?: "+paredes.layer.properties.pasable);
    
    map.setCollisionBetween(1,10000,true,paredes);

    suelo.resizeWorld();
    paredes.resizeWorld();
  
    ... crear player y activar arcade physics en él...
    player = game.add.sprite(100,100,"player");
    game.physics.arcade.enable(player);
}

function update(){
    game.physics.arcade.collide(paredes,player);
}


En la función create he usado la propiedad que definimos en Tiled como pasable. En realidad lo pongo como ejemplo para que se vea como es posible definir atributos arbitrarios en Tiled y acceder a ellos desde Phaser.

La función setCollisionBetween se encarga de que todos cuadrados de la capa paredes se vuelvan infranqueables. Posteriormente en update hacemos la comprobación de física con cada cuerpos ajeno al tilemap que lo necesite, habitualmente el jugador.



Desplegar un juego con Phaser en Netlify

Una vez tengamos acabado el juego necesitamos publicarlo y hacerlo accesible a los demás. Existen varias opciones, desde convertir el juego en app para Android hasta publicarlo en Steam usando Electron. ¿Y si quiero dejar mi juego en una web? Es una opción perfectamente válida que explicaremos ahora.

La búsqueda del hosting

Si has hecho una página web con anterioridad quizá sepas como va. Hay muchos tipos de hosting y un amplio rango de precios. El más simple es el hosting compartido, normalmente con PHP, aunque no lo necesitaremos usar si nuestro juego Phaser no tiene funcionalidades multijugador. También existen máquinas virtuales en cloud, existen los VPS, hay distintos PaaS,... Es un tema bastante complicado. ¿Pero qué necesitamos realmente?

En realidad un juego en Phaser suele ser una página web estática, es decir, un fichero HTML, con JavaScript y los recursos multimedia como imágenes en carpetas próximas al HTML. Salvo que hayas añadido multijugador, tu juego también será así.

Para alojar un sitio web estático existe un hosting muy potente y gratuito llamado Netlify. Netlify solo admite webs estáticos pero es muy rápido (dispone de CDNs repartidos por varios continentes) y seguro (puede generarnos certificados SSL de forma gratuita). No dispone de publicidad ni ninguna otra trampa.



Veamos como funciona Netlify.

Instalando Netlify

El primer paso es registrarse en Netlify, para lo cual no hace falta tarjeta de crédito. Si ves la sección de precios, verás una gran variedad de ellos.
Nosotros vamos a usar Netlify Pages, que son totalmente gratuitas e igual de rápidas. Sinceramente, para alojar juegos de Phaser no vamos a necesitar el resto de cosas que ofrecen los planes de pago.

A continuación vamos a instalar la herramienta de línea de comandos de Netlify, muy útil y que servirá para subir el juego a Netlify. Para ello necesitas tener Node.js instalado y npm (se instala con Node.js). Una vez lo tengas, instalamos netlify-cli con npm.

npm install netlify-cli -g


Veremos algo como esto si todo ha ido bien. Escribe lo siguiente para comprobar que la instalación ha ido bien:

netlify -h

Desplegando en Netlify

Ya tenemos todo listo. Nos desplazamos a la carpeta que contiene el fichero HTML de nuestro juego Phaser (nos desplazamos entre carpetas usando el comando cd). Una vez estes allí ejecuta:

netlify deploy

Se nos abrirá el navegador para que iniciemos sesión y el programa nos hará varias preguntas. Cuando esté todo listo subirá el juego a Netlify.

Si ahora entramos en la web de Netlify podremos ver que efectivamente se ha subido.

Podemos ver la URL donde está alojada la web.


Podemos cambiarle el nombre siempre que esté disponible bajo .netlify.com. También es posible usar nuestro propio dominio, comprado en GoDaddy, 1&1 u otro proveedor. Simplemente tienes que hacer click en Set up domain.

Conclusión

Después de probar varios servicios Netlify es el hosting estático que más me convence. El plan gratuito es muy potente y nos aseguramos una velocidad en la carga del juego envidiable. Por supuesto, con Phaser gozas de libertad y puedes usar cualquier otro hosting. Usa lo que mejor se adapte a ti y a tus usuarios.