A lo largo de los artículos anteriores del Manual de Phaser hemos aprendido muchas de sus características principales, a la vez que íbamos desarrollando un juego de romper ladrillos (breakout / Arkanoid). El juego va quedando bastante bien, pero lo cierto es que, sin unos efectos de audio, resulta un poco soso.

Phaser 3 pone muy sencillo el uso de audio, aportando métodos simples para la carga de sonidos y luego su reproducción. Por tanto, la práctica del presente artículo será bastante rápida.

El trabajo con audio es muy similar al que realizamos anteriormente con las imágenes, con su precarga, incorporación a la escena y todo eso. Solamente que los sonidos además habrá que ponerlos a reproducir en el momento que sea necesario. Lo iremos viendo todo de manera práctica.

Incorporación de los archivos de audio

Lo ideal es usar archivos de audio comprimido, tipo ogg o mp3, para evitar que la incorporación de sonido acabe con un juego muy pesado. Phaser 3 soporta en realidad los formatos que soporte el navegador.

Crearemos una carpeta nueva para ir incorporando todos los archivos de audio que queramos agregar al juego. En nuestro caso la hemos llamado "sounds". Allí hemos colocado de entrada varios archivos en formato ogg.

Precarga del audio

Ahora vamos a realizar la precarga de los archivos de audio, para que estén en la memoria del ordenador y disponibles para usar. Esto se hace de manera muy similar a las imágenes, indicando el identificador único que tendrá este recurso.

this.load.audio('platformimpactsample', 'sounds/platform-impact.ogg');
this.load.audio('brickimpactsample', 'sounds/brick-impact.ogg');
this.load.audio('gameoversample', 'sounds/gameover.ogg');
this.load.audio('winsample', 'sounds/you_win.ogg');
this.load.audio('startgamesample', 'sounds/start-game.ogg');

Hemos precargado audio para unas cuantas situaciones. Creo que los identificadores son bastante descriptivos como para que los puedas entender.

Recuerda que, una vez precargado el audio está disponible a lo largo de todo el juego.

Añadir el audio a una escena

El siguiente paso es añadir el audio a la escena donde lo pretendamos usar. Se hace también de manera similar, al menos conceptualmente, a como hacíamos con las imágenes. Solo que los audios una vez añadidos no suenan directamente, sino que se tendrán que reproducir en el momento adecuado.

this.platformImpactSample = this.sound.add('platformimpactsample');
this.brickImpactSample = this.sound.add('brickimpactsample');
this.gameOverSample = this.sound.add('gameoversample');
this.winSample = this.sound.add('winsample');
this.startGameSample = this.sound.add('startgamesample');

Es importante almacenar en una propiedad de la escena el audio agregado, porque ese objeto es el que vamos a tener que usar para reproducir el sonido.

Reproducir un sonido

El último paso es invocar el método play() del sonido agregado a la escena, con eso se reproducirá el sonido. Tan sencillo como eso!.

Solamente toca buscar los momentos donde asociar cada sonido. Por ejemplo, teníamos un método para gestionar las colisiones de la bola contra la plataforma.

platformImpact(ball, platform) {
    this.platformImpactSample.play();
    // resto del código de este método…
}

Teníamos un método para gestionar ei impacto de la bola contra un ladrillo.

brickImpact(ball, brick) {
    this.brickImpactSample.play();
    // resto del código de este método...
}

El sonido de Game over lo tocamos en el momento en el que la bola se pierde por la parte de abajo de la pantalla.

if (this.ball.y > 500 && this.ball.active) {
      this.endGame();
      this.gameOverSample.play();
}

El sonido de victoria lo reproducimos cuando se detecta que ya no hay más ladrillos en el juego.

if (this.bricks.countActive() === 0) {
    this.endGame(true);
    this.winSample.play();
}

Por último, el sonido de inicio del juego lo tocamos cuando la bola se despega de la plataforma.

if (this.cursors.up.isDown) {
  if (this.ball.getData('glue')) {
    this.startGameSample.play();
    this.ball.setVelocity(-60, -300);
    this.ball.setData('glue', false);
  }
}

Eso es todo!! realmente esta parte de la práctica es la más sencilla de todas, pero sin embargo, el cambio en nuestro juego hace una gran diferencia.

Ahora que tenemos sonidos estamos bastante satisfechos con el resultado. Creo que es un buen momento para enseñar el juego del breakout a nuestros amigos!!

El código completo, tal como se ha quedado después de esta práctica de inserción de sonidos, lo podemos ver aquí. https://github.com/deswebcom/ball-game-phaser/tree/sounds

Sin embargo, mostrando el juego a mis hijos me he dado cuenta que les resulta un poco difícil. Enseguida pierden la bola!! He llegado a la conclusión de que sería ideal crear un sistema para disfrutar de varias vidas antes de que aparezca el game over. Veremos esta mejora en el próximo artículo.

Vídeo del proceso de añadir sonidos a juegos Phaser

Para acabar os dejamos con este vídeo en el que podrás aprender de manera visual el proceso de incluir sonidos en los juegos desarrollados con Phaser.