CodeForge

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

El juice: audio, partículas y screen shake

Teoría20 min20 XP

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:

juice.js
// 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:

audio.js
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.