CodeForge

Maquetación Web Dinámica / Del canvas al motor: videojuegos con Phaser

Física arcade: colisiones y overlaps declarativos

Teoría22 min20 XP

Aquí es donde el motor brilla más fuerte. En el módulo 13 escribiste a mano cada if de colisión, cada rebote, cada "¿recogió la moneda?". La física arcade de Phaser lo vuelve DECLARATIVO: le dices "estos dos chocan" o "cuando estos se toquen, llama a esta función", y el motor se encarga. Es el salto de calidad de vida más grande del módulo.

Chocar vs atravesar: las dos preguntas de todo juego

fisica.js
// COLLIDER: el jugador se para sobre el suelo (se topan y frenan)
this.physics.add.collider(this.jugador, this.plataformas);

// OVERLAP: al tocar una moneda, se llama a recoger() (se atraviesan + avisan)
this.physics.add.overlap(this.jugador, this.monedas, recoger, null, this);

function recoger(jugador, moneda) {
moneda.destroy();          // quita la moneda
this.puntos += 1;          // suma al marcador
}

Compara con el módulo 13: allí, para cada moneda, escribías el chequeo AABB, el if, el splice. Aquí declaras UNA vez "jugador vs monedas = overlap → recoger" y el motor revisa todas las parejas cada fotograma.

Un mini-plataformero físico

Gravedad, un suelo sólido, una plataforma flotante y monedas que se recogen — todo con física declarativa:

Todo lo que en el módulo 13 fue física manual está aquí en declaraciones: gravity en la config, collider para pararse, overlap para recoger, body.blocked.down para saber si puede saltar. Escribiste la LÓGICA del juego, no su fontanería.

Quieres que el jugador RECOJA una llave al tocarla (la llave desaparece y él sigue caminando). Usaste this.physics.add.collider(jugador, llave) y el jugador rebota contra la llave como si fuera un muro. ¿Qué debiste usar?

Mini-reto

Agrega un "enemigo" (otra textura, roja) como un sprite físico que patrulla una plataforma (dale setVelocityX y hazlo rebotar con setCollideWorldBounds(true) + setBounce(1)). Luego un overlap entre el jugador y el enemigo que, al tocarse, reinicie la escena (this.scene.restart()). Acabas de sembrar la mecánica de "morir con el enemigo" de todo plataformero — y viste qué fácil es con overlaps.

Qué sigue

Ya mueves al jugador con las flechas, pero un juego serio se juega con teclado, mouse, touch en el celular y hasta gamepad. La próxima lección cubre el sistema de input multiplataforma de Phaser — para que tu juego se juegue en cualquier dispositivo sin reescribir el control.