Maquetación Web Dinámica / Del canvas al motor: videojuegos con Phaser
Por qué un motor: Phaser contra el canvas a mano
En el módulo 13 escribiste TODO a mano: el game loop, la gravedad, los rebotes, las colisiones, el input. Funcionó — y por eso ahora vas a apreciar de verdad lo que un MOTOR te regala. Phaser es a tus juegos lo que un framework es a una web: no hace nada que no pudieras hacer tú, pero te ahorra escribir la fontanería mil veces. Hoy ves la diferencia con tus propios ojos.
El taller equipado contra la mesa vacía
Lo que Phaser te da gratis
Cada una de estas cosas la sufriste a mano en el módulo 13:
| A mano (módulo 13) | Con Phaser |
|---|---|
Escribir el game loop con requestAnimationFrame | El loop ya existe: tú solo llenas update() |
vy += gravedad en cada objeto | gravity: { y: 500 } en la config |
Detectar rebotes y colisiones con if | this.physics.add.collider(a, b) |
Cargar imágenes con onload y control manual | this.load.image("nave", ...) |
Un objeto teclas con keydown/keyup | this.input.keyboard.createCursorKeys() |
| Cambiar entre menú/juego/fin con una variable | Escenas: clases independientes que Phaser orquesta |
No es magia: es código que alguien ya escribió y probó por ti — igual que no reescribes el motor de renderizado de React cada vez que haces una web.
Tu primer juego Phaser
Mira cuánta física obtienes con cuánto código. Esto es una caja que cae,
rebota con pérdida de energía y choca contra las paredes — lo mismo que en
el módulo 13 te tomó modelar vy, gravedad, restitución y reubicación al
borde:
Compara mentalmente con tu bola del módulo 13: allí escribiste el loop, la
suma de gravedad, la detección de suelo/paredes, la inversión de velocidad
y la reubicación en el borde. Aquí: gravity, setBounce,
setCollideWorldBounds. El motor hace la fontanería; tú diseñas el juego.
Después de dominar el canvas a mano, ¿cuál es la razón MÁS sólida para pasar a un motor como Phaser en un juego real?
Mini-reto
Toca la config del playground: sube la gravity.y a 1200 (la caja se
vuelve pesada) y luego bájala a 150 (flota como en la luna). Cambia
setBounce a 1 (rebota para siempre) y a 0.3 (muere rápido). Son los
mismos números que ajustaste a mano en el módulo 13 — pero ahora vives en
la config, no en el loop. Sentir que las perillas son las MISMAS te
confirma que Phaser no es otro mundo: es tu mundo, ordenado.
Qué sigue
Viste el resultado; ahora el mecanismo. La próxima lección desarma la
estructura de todo juego Phaser: el objeto config, y las tres funciones
que definen una escena — preload, create y update. El game loop que
ya conoces, con esteroides.