Immerger les joueurs avec Unity : des formes d'onde audio en direct, sans effort !

Avez-vous déjà pensé que ce serait sympa d’intégrer dans votre jeu la forme d’onde audio en direct d’un PNJ, tout en remettant ça à plus tard parce que ce serait trop compliqué ? En réalité, c’est incroyablement simple à faire dans Unity.

L’idée

Quand j’ai créé un podcast consacré à la gestion d’un petit studio indé, avec des interviews de quelques stars françaises de ce type de studios, c’était juste avant l’arrivée du Covid-19. Ce qui a poussé la majorité des joueurs à passer l’essentiel de leur temps en ligne m’a au contraire coupé du réseau, tant la connexion était mauvaise là où je vivais. Évidemment, je ne pouvais pas enregistrer un podcast avec à la fois l’audio et la vidéo à ce moment-là. Alors, pour élargir son audience, je me suis dit que ce serait sympa de créer une vidéo à partir de la seule partie audio, puis d’y intégrer un diaporama et d’y ajouter une sorte d’effet « en direct » en incluant la forme d’onde audio des interviews.

Le prototype

Je suis bien plus expert d’Unity que de n’importe quel logiciel de montage vidéo, il était donc plus simple pour moi d’étudier comment le faire dans Unity. Et j’ai vite découvert que créer une forme d’onde audio est une tâche plutôt facile. Voici les étapes par lesquelles je suis passé :

• utiliser l’audio listener pour obtenir la liste des valeurs par fréquence
• manipuler les valeurs de la liste pour obtenir des valeurs exploitables dans la forme d’onde
• créer ou mettre à jour une texture à partir de ces valeurs pour l’afficher

Vous pouvez en tirer quelque chose, mais ce n’est pas ce à quoi nous sommes habitués quand nous voyons une forme d’onde audio, puisque les fréquences augmentent de façon exponentielle et non linéaire. En ajustant certains des paramètres que l’on peut récupérer depuis l’audio listener, j’ai pu obtenir un assez bon résultat, comme vous pouvez le voir ci-dessous.

Dans l’image ci-dessus, comme dans le projet d’exemple, j’ai ajouté une image en miroir pour rendre le tout plus cool, mais ce que vous obtenez, c’est uniquement la partie supérieure lumineuse de l’image : à vous de lui donner l’apparence que vous voulez.

Configuration de l’onde audio

Téléchargez et importez le projet, ouvrez la scène d’exemple, appuyez sur Play et vous verrez la forme d’onde audio comme dans l’illustration en tête de cet article.

Certains paramètres sont disponibles directement depuis l’audio listener, d’autres ont été ajoutés par mes soins car ils manquaient pour obtenir un joli résultat. Voici leur explication :

• lerp speed : les valeurs peuvent changer très vite et vous ne verrez rien sans lerp. Selon votre projet, vous voudrez peut-être augmenter ou diminuer cette valeur. J’ai trouvé que 100 ms est une bonne moyenne.
• window type : j’expliquerai celui-ci en détail dans la partie suivante.
• ratio, offset et log scale : ils sont appliqués à la valeur obtenue depuis les audio listeners pour avoir quelque chose de visible.

Augmentez le ratio pour étendre la plage et pouvoir obtenir des images plus hautes. Cela fera passer la valeur sous 0, vous devrez donc augmenter l’offset en même temps.

Je vous conseille de toujours garder log scale coché pour obtenir quelque chose de visible et de joli, mais vous avez peut-être un projet particulier où ce n’est pas ce que vous voulez, c’est donc à vous de voir.

Configuration des visuels

Une fois l’onde audio configurée, vous pouvez vous concentrer sur la ramp texture. Je vous ai fourni quelques exemples : commencez donc par les assigner les uns après les autres pour voir ce que vous pouvez en faire : une ou plusieurs couleurs, avec ou sans dégradé. Vous pouvez aussi changer le mode de filtering de la texture, et choisir si vous voulez que les valeurs des fréquences soient lissées les unes avec les suivantes.

Toutes ces modifications doivent être faites en dehors du mode Play !

Si vous augmentez la taille de la texture, elle consommera plus de CPU, mais vous obtiendrez une forme d’onde audio plus détaillée. Je me suis généralement limité à 128x512 pour éviter d’avoir trop de zones vides (cela dépend du ratio et de l’offset).

Le dernier réglage que vous voudrez peut-être modifier est la liste d’images. Ce sont des images de canvas, et la même texture sera envoyée vers toutes les images. Dans la scène d’exemple, j’ai créé une deuxième image inversée sur l’axe Y, avec une couleur grise pour assombrir le résultat, j’aime bien ce rendu.

Window type

Pour faire simple, le window type est ce qui permet d’analyser les ondes audio à l’aide de la transformée de Fourier et de filtrer les fréquences détectées.

On parle de « fenêtre » parce qu’on filtre une partie de l’onde audio en se concentrant sur des portions précises de celle-ci. C’est nécessaire pour éviter certaines erreurs générées par la transformée de Fourier, connues sous le nom de fuites spectrales. Je n’entrerai pas plus dans les détails ici, mais vous trouverez beaucoup d’informations détaillées sur internet si vous voulez creuser le sujet.

Sachez simplement que la fenêtre de Hann (aussi appelée fenêtre de Hanning en raison de sa proximité avec la fenêtre de Hamming) suffit dans la plupart des cas.

Là encore, faites des essais sur votre projet pour vérifier le résultat et choisissez celui qui correspond à votre cas d’usage.

Conclusion

Je voulais partager cet asset que j’ai créé il y a quelques années, parce que c’est une façon sympa de visualiser l’audio, et je l’ai créé parce que je ne voyais personne d’autre rendre public ce genre d’outil simple.

Le projet est disponible ici : https://github.com/FredericRP/AudioWaveForm

Si vous avez appris quelque chose, si vous trouvez ça cool ou si vous voulez simplement dire que vous avez lu cet article jusqu’ici, applaudissez une ou deux fois, ça me fera plaisir !