Tilemaps: niveles hechos de piezas

Los niveles de Mario, Zelda o Celeste no se dibujan pieza por pieza a mano: se arman con TILES — bloques cuadrados que se repiten en una cuadrícula, como baldosas. Un nivel entero cabe en una tabla de números. Esta lección te enseña a pensar en tiles, a construir un nivel jugable desde una cuadrícula de datos, y el flujo profesional con el editor Tiled.

Un nivel es una hoja de cálculo

Un nivel jugable desde una cuadrícula

Aquí un nivel completo definido con TEXTO (cada carácter es una casilla) y convertido en un mundo físico jugable — bloques sólidos y monedas, todo generado por un bucle:

Edita la tabla NIVEL — agrega una x, mueve una o — y el mundo cambia al instante. Ese es el poder de los tilemaps: el nivel es DATOS, separados del código que los dibuja.

El flujo profesional: Tiled

Para niveles grandes no escribes la tabla a mano: la DIBUJAS en un editor visual. El estándar gratuito es Tiled (mapeditor.org): pintas el nivel con el mouse como en Paint, y exporta un JSON que Phaser carga directo:

function preload() {
this.load.image("tiles", "tileset.png");           // la hoja de piezas
this.load.tilemapTiledJSON("mapa", "nivel1.json"); // el plano exportado de Tiled
}
function create() {
const map = this.make.tilemap({ key: "mapa" });
const tileset = map.addTilesetImage("mi-tileset", "tiles");
const capa = map.createLayer("Suelo", tileset, 0, 0);
capa.setCollisionByProperty({ colisiona: true });   // qué tiles frenan
this.physics.add.collider(this.jugador, capa);       // el jugador se para en ellos
}

Nota honesta: Tiled es un programa aparte que instalas en tu computador, y este flujo necesita archivos reales (el PNG del tileset y el JSON) — por eso el playground de arriba usa la versión de tabla en texto, que enseña el MISMO concepto sin salir del navegador. Cuando hagas un juego grande, Tiled es la herramienta; la idea de "el nivel es una cuadrícula de piezas" es idéntica.

Mini-reto

Diseña tu propio nivel editando la tabla NIVEL: crea una "escalera" de bloques que suba de izquierda a derecha, con monedas premiando cada salto difícil, y un hueco que obligue a saltar con precisión. Pruébalo. Acabas de hacer diseño de niveles — y notaste que el buen diseño (dónde va el hueco, dónde la recompensa) es tan importante como el código.

Qué sigue

Tu mundo funciona, pero se siente plano. La próxima lección le añade el "JUICE": sonido, partículas al recoger, y el temblor de pantalla que hace que un golpe se SIENTA. Los detalles que separan un juego que funciona de uno que da gusto jugar.