Ajouter du son à un jeu : musique, bruitages …

L’ajout de sons n’est pas très difficile, mais il convient de respecter quelques règles pour éviter tout problème.

Choisir le bon format, et le bon navigateur

Première contrainte : le son est très dépendant du navigateur que vous utilisez. Il peut passer sur un navigateur, et pas sur l’autre. Le format du son est essentiel. Des problèmes ont été rencontrés par exemple sur le navigateur Safari, avec le format ogg.

 

Charger les sons et les ajouter au gestionnaire de sons

Une fois nos fichiers son au format ogg, nous les ajoutons tout d’abord dans le répertoire assets. Si l’on souhaite séparer sons et images, on peut organiser le répertoire assets avec un sous-répertoire pour regrouper l’ensemble des sons,

Le changement des sons est assez similaire à ce qui se faisait pour les images. Dans la partie preload()on va d’abord charger les sons, en leur attribuant un identifiant.

Supposons que l’on a placé deux fichiers guile.mp3 et gun.mp3 correspondants respectivement à une musique de fond et à un bruitage de coup de feu dans le répertoire assets.  Nous chargeons ces deux fichiers en leur associant comme identifiants musiquedefond et coupDeFeu avec les lignes suivantes dans preload() :

// on charge deux fichiers audio avec les identifiants coupDeFeu et background
   this.load.audio('coupDeFeu', 'assets/gun.mp3');
   this.load.audio('background', 'assets/guile.mp3');   

Une fois chargés, on va les ajouter dans le gestionnaire de sons. Dans la fonction create() on ajoute les instructions suivantes pour inclure  des sons dans le gestionnaire sound de phaser et récupérer alors une variable de type son pour chacun des sons. Ces variables permettront de manipuler les sons.

  var son_feu;
  var musique_de_fond;

// ajout des sons au gestionnaire sound
// recupération de variables pour manipuler le son
  son_feu = this.sound.add('coupDeFeu');
  musique_de_fond = this.sound.add('background'); 

Lire ou stopper un son

Il ne reste plus qu’à lancer le son avec la méthode play() de la variable en question. On peut lancer cette méthode où l’on souhaite :

  • soit au démarrage dans la fonction create(),
  • soit dans update() si un événement se produit.

Par exemple, pour lancer la musique associée à background dès le début, on écrira dans la fonction  create() l’instruction suivante:

// lancement du son background
 musique_de_fond.play();  

Et si on veut le stopper :

// arret du son background
 musique_de_fond.stop();  

Ce n’est pas plus difficile que ca.

Aller plus loin : manipuler les sons

La documentation complète du gestionnaire de sons est disponible sur :

https://photonstorm.github.io/phaser3-docs/Phaser.Sound.HTML5AudioSound.html

Cette documentation présente les principales méthodes disponibles mais également les options que l’on peut utiliser avec la méthode play(). On retrouve notamment les options suivantes :

mutebooléenfauxIndique si le son lancé doit être en mode silencieux ou pas
volumenombre1valeur du volume entre 0 (volume coupé) et 1 (max)
ratenombre1vitesse de lecture (1 est la norme)
detunenombre0désaccordage du son, en cents (unité musicale. Réserve aux ingénieurs du son)
seeknombre0position en secondes ou commencer le son.
loopbooléenfalseLe son doit-il être joué en boucle ou non.
delaynombre0Temps, en secondes, avant lancement du son.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

+ 28 = 38