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, et il est préférable d’utiliser un autre navigateur, comme Firefox (ou Chrome si vous n’avez aucun respect pour votre vie privée).

au niveau du son, le format MP3 semblait poser quelques problèmes. Aussi nous recommandons d’utiliser le format ogg.

Pour convertir un son en ogg, utilisez un outil, par exemple l’outil en ligne suivant :

https://audio.online-convert.com/fr/convertir-en-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.ogg et gun.ogg 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.ogg');
   this.load.audio('background', 'assets/guile.ogg');    

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.

// ajout des sons au gestionnaire sound
// recupération de variables pour manipuler le son
  var son_feu = this.sound.add('coupDeFeu');
  var 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 :

 

 

mute booléen faux Indique si le son lancé doit être en mode silencieux ou pas
volume nombre 1 valeur du volume entre 0 (volume coupé) et 1 (max)
rate nombre 1 vitesse de lecture (1 est la norme)
detune nombre 0 désaccordage du son, en cents (unité musicale. Réserve aux ingénieurs du son)
seek nombre 0 position en secondes ou commencer le son.
loop booléen false Le son doit-il être joué en boucle ou non.
delay nombre 0 Temps, en secondes, avant lancement du son.

Laisser un commentaire

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