Maquetación Web Dinámica / Del canvas al motor: videojuegos con Phaser
El juice: audio, partículas y screen shake
Dos juegos con la MISMA mecánica pueden sentirse uno soso y el otro delicioso. La diferencia se llama "juice": el sonido al recoger, las chispas al golpear, el temblor de pantalla en un impacto. No cambia las reglas — cambia cómo se SIENTEN. Phaser hace el juice trivial, y hoy le das a tu juego ese jugo que hace difícil soltar el control.
El juice: la respuesta que premia cada acción
Partículas y screen shake
Phaser trae un emisor de partículas y una cámara que tiembla a pedido:
// un emisor que NO emite solo (emitting: false); lo disparamos a mano
this.chispas = this.add.particles(0, 0, "chispa", {
speed: { min: -220, max: 220 },
lifespan: 500,
scale: { start: 0.9, end: 0 }, // nacen grandes, mueren en nada
emitting: false,
});
// al recoger algo: explota un puñado de chispas EN ese punto
this.chispas.explode(24, x, y);
// y un golpecito de cámara (duración ms, intensidad)
this.cameras.main.shake(150, 0.012);explode(cantidad, x, y) lanza una ráfaga puntual — el sistema de
partículas del módulo 13, ahora en una línea. Y cameras.main.shake es el
temblor que en canvas puro tendrías que programar moviendo todo el
contexto.
Dale al mundo, siéntelo
Fíjate en el detalle de accesibilidad, tan válido en juegos como en webs:
el screen shake puede marear a personas con sensibilidad vestibular
(módulo 11), así que consultamos matchMedia("(prefers-reduced-motion)")
y lo OMITIMOS si el usuario lo pidió — sin quitar las partículas, que no
desplazan la pantalla. Reducir el movimiento incómodo sin amputar la
respuesta: la misma empatía de siempre.
Audio: el "ding" que lo completa
El sonido es la mitad del juice, y en Phaser son dos líneas — pero necesita archivos de audio reales:
function preload() {
this.load.audio("recoger", "recoger.mp3"); // un archivo de sonido
}
function create() {
this.input.on("pointerdown", () => {
this.sound.play("recoger", { volume: 0.5 });
});
}Nota honesta: el audio necesita assets (archivos .mp3/.ogg), por eso
no va en el playground autocontenido. Dónde conseguirlos gratis y legales:
freesound.org, o generadores de efectos retro como jsfxr/sfxr (haces
"bleeps" de 8 bits en el navegador y los descargas). Un detalle de UX/legal
importante: los navegadores BLOQUEAN el audio hasta la primera interacción
del usuario (un clic) — por eso el sonido de un juego arranca bien recién
cuando el jugador toca algo, nunca en la pantalla de carga.
Agregas un screen shake fuerte en cada golpe de tu juego. Un tester te dice que le da mareo. ¿La respuesta correcta?
Mini-reto
Vuelve al mini-plataformero de la lección 4 o 6 y dale juice a recoger una
moneda: en el callback del overlap, dispara una explosión de chispas en
la posición de la moneda y un shake corto y suave (shake(80, 0.006),
respetando reduced-motion). Compara jugarlo antes y después. Diez líneas de
juice cambian por completo la sensación — y ese instinto es oro como
desarrollador de juegos.
Qué sigue
Tienes mecánicas, mundo y juice. Falta la estructura que envuelve todo juego completo: las ESCENAS. La próxima lección arma el flujo menú → juego → game over como escenas independientes de Phaser, y guarda el récord en localStorage. La arquitectura final antes de los dos proyectos.