El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El sonido es un componente esencial en el desarrollo de juegos, ya que mejora la inmersión y la experiencia del jugador. En esta sección aprenderás cómo cargar, reproducir y controlar efectos de sonido y música en tus juegos usando Phaser.

Conceptos Clave

Efectos de sonido (SFX): Son sonidos cortos que se reproducen en respuesta a acciones específicas (saltos, disparos, colisiones, etc.).
Música de fondo (BGM): Es una pista de audio que se reproduce durante el juego para ambientar.
Control de audio: Incluye reproducir, pausar, detener, ajustar volumen y hacer loops.

Cargando Archivos de Audio

Antes de poder usar sonidos, debes cargarlos en la escena. Phaser soporta varios formatos de audio como .mp3, .ogg y .wav.

Ejemplo de carga de audio

// En el método preload de tu escena
preload() {
  this.load.audio('jump', 'assets/sounds/jump.wav');
  this.load.audio('bgm', [
    'assets/music/background.mp3',
    'assets/music/background.ogg'
  ]);
}

Explicación:

this.load.audio('clave', 'ruta'): Carga un archivo de audio y lo asocia a una clave.
Puedes pasar un array de rutas para soportar diferentes navegadores.

Reproduciendo Sonidos y Música

Una vez cargados, puedes reproducir sonidos y música en cualquier parte de tu escena.

Ejemplo básico de reproducción

// En el método create de tu escena
create() {
  // Efecto de sonido
  this.jumpSound = this.sound.add('jump');
  
  // Música de fondo
  this.bgm = this.sound.add('bgm', { loop: true, volume: 0.5 });
  this.bgm.play();
}

// Reproducir efecto de sonido cuando el jugador salta
playerJump() {
  this.jumpSound.play();
}

Explicación:

this.sound.add('clave', opciones): Crea una instancia de sonido.
{ loop: true }: Hace que la música se repita automáticamente.
{ volume: 0.5 }: Ajusta el volumen (0.0 a 1.0).
.play(): Inicia la reproducción del sonido.

Controlando el Audio

Puedes pausar, detener y ajustar el volumen de cualquier sonido o música.

Acción	Método	Ejemplo
Pausar	`.pause()`	`this.bgm.pause();`
Reanudar	`.resume()`	`this.bgm.resume();`
Detener	`.stop()`	`this.bgm.stop();`
Cambiar volumen	`.setVolume(valor)`	`this.bgm.setVolume(0.2);`
Verificar si suena	`.isPlaying`	`if (this.bgm.isPlaying) { ... }`

Ejemplo Completo

class MyGameScene extends Phaser.Scene {
  preload() {
    this.load.audio('jump', 'assets/sounds/jump.wav');
    this.load.audio('bgm', [
      'assets/music/background.mp3',
      'assets/music/background.ogg'
    ]);
  }

  create() {
    this.jumpSound = this.sound.add('jump');
    this.bgm = this.sound.add('bgm', { loop: true, volume: 0.5 });
    this.bgm.play();

    // Simular salto al presionar espacio
    this.input.keyboard.on('keydown-SPACE', () => {
      this.jumpSound.play();
    });

    // Botón para pausar/reanudar música
    this.input.keyboard.on('keydown-P', () => {
      if (this.bgm.isPlaying) {
        this.bgm.pause();
      } else {
        this.bgm.resume();
      }
    });
  }
}

Explicación:

Se reproducen efectos de sonido al presionar la barra espaciadora.
Se puede pausar o reanudar la música de fondo con la tecla "P".

Ejercicios Prácticos

Ejercicio 1: Añade un efecto de sonido al recoger un objeto

Instrucciones:

Descarga un sonido corto (por ejemplo, collect.wav) y colócalo en tu carpeta de sonidos.
Cárgalo en el método preload.
Haz que se reproduzca cuando el jugador recoja un objeto.

Solución:

// En preload
this.load.audio('collect', 'assets/sounds/collect.wav');

// En create
this.collectSound = this.sound.add('collect');

// Cuando el jugador recoge el objeto
collectItem(player, item) {
  this.collectSound.play();
  item.destroy();
}

Ejercicio 2: Control de volumen con teclas

Instrucciones:

Permite que el jugador suba o baje el volumen de la música con las teclas de flecha arriba y abajo.

Solución:

// En create
this.input.keyboard.on('keydown-UP', () => {
  let newVolume = Phaser.Math.Clamp(this.bgm.volume + 0.1, 0, 1);
  this.bgm.setVolume(newVolume);
});

this.input.keyboard.on('keydown-DOWN', () => {
  let newVolume = Phaser.Math.Clamp(this.bgm.volume - 0.1, 0, 1);
  this.bgm.setVolume(newVolume);
});

Consejo:
Asegúrate de que el volumen nunca supere 1 ni sea menor que 0 usando Phaser.Math.Clamp.

Errores Comunes y Consejos

No se escucha el sonido: Verifica la ruta del archivo y el formato. Algunos navegadores requieren interacción del usuario antes de reproducir audio.
El sonido se superpone demasiado: Usa la opción { detune: valor } o limita la reproducción si es necesario.
Volumen muy alto o bajo: Ajusta el volumen inicial y permite al usuario modificarlo.

Conclusión

En esta sección aprendiste a:

Cargar y reproducir efectos de sonido y música de fondo en Phaser.
Controlar la reproducción, el volumen y el looping de los sonidos.
Implementar controles de audio interactivos.

El dominio del audio en tus juegos hará que sean mucho más atractivos y profesionales. En la próxima sección, aprenderás a crear botones y menús para mejorar la interfaz de usuario de tu juego.

Añadiendo Efectos de Sonido y Música

Conceptos Clave

Cargando Archivos de Audio

Ejemplo de carga de audio

Reproduciendo Sonidos y Música

Ejemplo básico de reproducción

Controlando el Audio

Ejemplo Completo

Ejercicios Prácticos

Ejercicio 1: Añade un efecto de sonido al recoger un objeto

Ejercicio 2: Control de volumen con teclas

Errores Comunes y Consejos

Conclusión

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final