Plataformas con tilemaps de verdad

Mientras tus niveles quepan en veinte rectángulos, ponerlos a mano funciona. El problema llega cuando quieres cambiar uno: mover una plataforma tres píxeles implica editar código, recargar, mirar, repetir. Con un tilemap mueves el tile, guardas, recargas. Se acabó.

Este ejercicio es el cambio de una cosa a la otra.

Qué tienes que construir

Un nivel de plataformas hecho en Tiled —gratis, multiplataforma— y cargado en Phaser, con:

• Una capa de fondo que no colisiona.
• Una capa de suelo que sí.
• Plataformas de un solo sentido: se atraviesan saltando desde abajo, pero te paras encima al caer.
• Al menos una zona de pinchos que te regresa al inicio.
• Puntos de aparición marcados en el mapa, no en el código.

Criterios de aceptación

1. No hay una sola coordenada de plataforma escrita en tu JavaScript.
2. Mover un tile en Tiled y recargar el navegador cambia el nivel, sin tocar código.
3. Saltar desde abajo de una plataforma de un solo sentido la atraviesa; caer sobre ella te detiene.
4. Caminar sobre esa misma plataforma no te deja caer por las juntas entre tiles.
5. Los pinchos te regresan al punto de aparición leído del mapa.
6. Cambiar el punto de aparición en Tiled cambia dónde empiezas.

El criterio 4 es el que separa este ejercicio de un tutorial. Casi siempre falla la primera vez.

Pistas

Colisión por propiedad, no por índice. En Tiled, selecciona los tiles sólidos y ponles una propiedad personalizada colisiona = true. Luego:

const suelo = mapa.createLayer('suelo', tileset, 0, 0)
suelo.setCollisionByProperty({ colisiona: true })

Si en vez de eso usas setCollisionBetween(1, 40), el día que agregues un tile al tileset se te recorren todos los índices y el nivel se rompe entero.

Las plataformas de un solo sentido llevan una segunda propiedad y se resuelven apagando las tres caras que no son la de arriba:

suelo.forEachTile(tile => {
  if (tile.properties.unSentido) {
    tile.setCollision(false, false, true, false)  // izq, der, arriba, abajo
  }
})

El criterio 4 — atorarse en las juntas. El cuerpo del jugador roza el borde vertical de los tiles y se traba. Dos arreglos, y conviene entender los dos:

• Ponle al cuerpo del jugador un ancho un poco menor que el sprite (body.setSize), para que las esquinas no alcancen los bordes.
• Activa tileBias en el mundo de física si el personaje va rápido. Por defecto es 16; si tus tiles son de 32, súbelo.

El punto de aparición va en una capa de objetos de Tiled. Se lee con mapa.findObject('objetos', o => o.name === 'inicio').

Cuando ya te salió

Agrega tiles que se rompen: al pisarlos tiemblan medio segundo y desaparecen, y vuelven a los tres segundos.

Ahora tienes que quitar y volver a poner colisión sobre un tile individual en tiempo real, mientras el jugador puede estar parado encima. Decide qué pasa si está sobre el tile cuando reaparece — y date cuenta de que acabas de tomar una decisión de diseño, no de programación.