Ajouter de l'audio 2D | Documentation

L'audio 2D est un son non directionnel qui ne provient d'aucun emplacement particulier, demeurant le même indépendamment de la position ou de l'orientation d'un auditeur dans l'espace 3D. Cela signifie qu'au fur et à mesure que les joueurs déplacent leurs auditeurs dans l'environnement, ils peuvent entendre de manière cohérente l'audio 2D de n'importe où.

En utilisant le fichier Gingerbread House - Start .rbxl comme point de départ et Gingerbread House - Complete Audio comme référence, ce tutoriel vous montre comment ajouter à la fois de l'audio 2D en boucle et des sons uniques à vos expériences, y compris des conseils sur :

La musique d'arrière-plan en boucle qui joue dès que les joueurs se connectent au serveur.
Le déclenchement de l'audio pour fournir aux joueurs un retour instantané selon leurs objectifs de jeu.
L'activation de divers sons pour indiquer différentes interactions avec l'interface utilisateur.

Si à un moment donné vous êtes bloqué dans le processus, vous pouvez utiliser Gingerbread House - Complete Audio comme référence pour comparer vos progrès.

Si vous souhaitez ajouter de l'audio spatial à votre expérience, tel que du bruit ambiant dans l'environnement, des sons d'interaction avec des objets, ou des dialogues de personnages non jouables, consultez Ajouter de l'audio 3D.

Objets audio 2D

Pour créer de l'audio non directionnel, il est important de comprendre les objets audio avec lesquels vous allez travailler tout au long de ce tutoriel. Il existe trois types principaux d'objets audio pour l'audio 2D :

L'objet AudioPlayer charge et joue le fichier audio.
L'objet AudioDeviceOutput est un dispositif matériel physique dans le monde réel, tel qu'un haut-parleur ou des écouteurs.
Wires transportent les flux audio d'un objet à un autre.

Tous ces objets audio travaillent ensemble pour transporter le son de la lecture de fichier vers le matériel de chaque joueur. Examinons comment cela fonctionne en pratique en utilisant l'exemple d'un joueur portant un casque tout en jouant une expérience avec son ordinateur portable :

L'objet AudioPlayer charge l'ID d'actif audio 127645268874265 pour un son d'achat de monnaie.
Un Wire transporte le flux de l'objet AudioPlayer à l'objet AudioDeviceOutput afin que le flux sorte du casque du joueur.
L'objet AudioDeviceOutput transporte le son au haut-parleur physique du joueur, ou dans ce cas, à ses écouteurs.

Les sections suivantes approfondissent et font référence à ces objets alors que vous apprenez à jouer à la fois de l'audio 2D en boucle et des sons uniques. En passant en revue ces objets avec les techniques à venir, vous pouvez prédire de manière plus précise comment capturer et transmettre le son de l'expérience au joueur.

Audio en boucle

L'audio 2D en boucle, ou l'audio non directionnel qui se répète sans interruption dès que les joueurs se connectent au serveur, est une technique de conception sonore courante pour fournir un fond auditif cohérent, peu importe ce que les joueurs font ou où ils se trouvent dans l'espace 3D. De plus, l'audio 2D en boucle garantit que votre expérience n'est jamais complètement silencieuse, ce qui peut désorienter et distraire les joueurs de leurs objectifs.

Pour démontrer ce concept, examinez comment le son suivant 2D améliore considérablement la qualité de l'échantillon Hazardous Space Station. Sans musique de fond, la station spatiale semble creuse et sans vie. Cependant, lorsque la station spatiale comprend de la musique de fond, elle semble à la fois sinistre et dangereuse, ajoutant à l'atmosphère globale terreur.

Sans audio 2D en boucle

Avec audio 2D en boucle

Pour créer une boucle sans interruption, vous devez bien faire correspondre les points de début et de fin de votre morceau audio afin que les joueurs ne puissent pas détecter sa répétition. Ce processus nécessite un logiciel de montage audio tiers comme Reaper ou Audacity afin que vous puissiez trouver une coupe de passage zéro et faire une coupe soigneusement chronométrée. Pour des instructions pas à pas sur ces méthodes, consultez Création de boucles audio parfaites.

L'audio en boucle est particulièrement utile pour établir comment vous voulez que les joueurs se sentent dès qu'ils rejoignent votre expérience. Par exemple, l'échantillon vise à fournir aux joueurs une aventure joyeuse dans un pays des merveilles d'hiver, il utilise donc une piste audio entraînante pour influencer positivement leur humeur dès qu'ils entrent dans l'environnement. Pour voir à quel point cette technique peut être influente, songez à comment l'expérience du joueur changerait si vous remplaciez l'audio en boucle par une piste de métal.

Pour recréer l'audio 2D en boucle de l'échantillon Gingerbread House - Complete Audio :

Activez un auditeur par défaut qui est attaché à votre personnage joueur.
1. Dans la fenêtre Explorer, sélectionnez SoundService.
2. Dans la fenêtre Properties, définissez DefaultListenerLocation sur Character. Lorsque vous exécutez l'expérience, le moteur crée automatiquement un AudioDeviceOutput sous SoundService.
Dans la fenêtre Explorer, naviguez jusqu'à SoundService, puis :
1. Insérez un objet AudioPlayer pour créer une source audio.
2. Insérez un objet AudioDeviceOutput pour créer un haut-parleur qui joue tout au long de l'expérience.
3. Insérez un objet Wire pour transporter le flux de l'audio player vers le haut-parleur.
Sélectionnez l'AudioPlayer, puis dans la fenêtre Properties,
1. Définissez AssetID sur rbxassetid://1841461968 pour jouer une piste audio entraînante.
2. Activez Looping afin que l'audio se répète sans interruption.
3. Définissez Volume sur 0.2 pour jouer l'audio à bas volume afin que vous puissiez encore entendre les autres sources audio dans l'expérience.
Sélectionnez le Wire, puis dans la fenêtre Properties,
1. Définissez SourceInstance sur votre nouvel AudioPlayer pour spécifier que vous voulez que le fil transporte l'audio de ce lecteur audio spécifique.
2. Définissez TargetInstance sur votre nouvel AudioDeviceOutput pour spécifier que vous voulez que le fil transporte l'audio vers ce haut-parleur spécifique.
Dans la fenêtre Explorer, insérez un Script dans AudioPlayer, renommez-le LoopBackgroundMusic, définissez sa propriété RunContext sur Client, puis collez le code suivant dans le script :
```
local audioPlayer = script.Parent
audioPlayer:Play()
```
Explication du code
Le script commence par déclarer une variable pour représenter le parent du script, AudioPlayer. Le script définit ensuite la source audio à jouer du moment où le joueur rejoint l'expérience jusqu'au moment où il quitte l'expérience.
Testez l'expérience pour entendre la musique d'arrière-plan en boucle.

Audio à un coup

L'audio 2D à un coup, ou l'audio non directionnel qui joue une fois à un moment et à un endroit précis, à moins qu'un joueur ne le déclenche à nouveau, fournit aux joueurs un contexte important sur toute information que vous voulez qu'ils ne manquent pas. Utiliser ce type de retour audio dans vos expériences est essentiel car cela fournit une réponse instantanée et claire aux fonctions de jeu cruciales et aux actions des joueurs, telles que le début d'un combat de boss ou la perte d'un montant important de santé.

Les sections suivantes fournissent des détails d'implémentation pour des scénarios de jeu courants dans lesquels les joueurs ont besoin de retours non directionnels opportuns, y compris des retours de jeu, des interactions avec des éléments de l'interface utilisateur et une narration en voix off pour des tutoriels.

Retour de jeu

Au fur et à mesure que les joueurs progressent dans votre expérience, il est important qu'ils reçoivent un retour audio immédiat concernant l'état de tout ce qui impacte leur gameplay, comme leur score, leur santé ou leur progression de niveau. Étant donné que ce type d'audio est directement lié aux objectifs du joueur, il est important que ces sons soient clairs, audibles et transmettent des informations utiles et précises.

Pour démontrer ce concept, examinons le l'audio 2D à un coup suivant de Platformer template qui joue lorsque les joueurs sautent et collectent des pièces :

Un son léger de souffle se fait entendre dès que le joueur appuie sur la touche de saut sur son appareil.
Un ding aigu et un son de pièces s'entrechoquant se font entendre dès que le personnage du joueur touche une pièce.

Ces deux sons sont instantanément reconnaissables dans le contexte de l'espace 3D, et ils aident les joueurs à comprendre le succès de leurs actions sans se fier uniquement aux indices visuels.

Lorsque vous jouez plusieurs sons à la fois, certains sons peuvent être plus importants à entendre pour les joueurs que d'autres. Dans ce cas précis, le son de la collecte de pièces transmet des informations de gameplay plus précieuses que le son de saut, donc l'expérience le joue à un volume légèrement plus élevé. Il n’existe cependant pas de normes ou de règles pour obtenir un excellent mélange, alors ajustez les sons dans votre expérience pour refléter ce que vous jugez le plus important.

Par exemple, l'échantillon comprend divers déclencheurs audio tout au long de l'expérience, mais ils ne sont pas tous au même niveau d'importance pour comprendre l'objectif principal de l'expérience : collecter des gommes à mâcher pour ouvrir la maison en pain d'épice. Pour s'assurer que les joueurs sont conscients de ce qu'ils doivent faire, l'échantillon triple l'amplitude du retour auditif à chaque fois que le joueur collecte une gomme à mâcher.

Pour recréer l'audio de retour d'état à un coup dans l'échantillon Gingerbread House - Complete Audio :

Dans la fenêtre Explorer, naviguez jusqu'à Workspace ⟩ Gumdrops ⟩ Gumdrop, puis :
1. Insérez un objet AudioPlayer pour créer une source audio.
2. Insérez un objet AudioDeviceOutput pour créer un haut-parleur qui joue tout au long de l'expérience.
3. Insérez un objet Wire pour transporter le flux de l'audio player vers le haut-parleur.
Sélectionnez l'AudioPlayer, puis dans la fenêtre Properties,
1. Définissez AssetID sur rbxassetid://9113723699 pour jouer une piste audio douce de mastication.
2. Définissez TimePosition sur 0.15 pour démarrer le morceau audio plus près du son réel de mastication.
3. Définissez Volume sur 3 pour jouer l'audio à un volume élevé afin que vous entendiez le son de la gomme à mâcher par rapport à d'autres sources audio dans l'expérience.
Sélectionnez le Wire, puis dans la fenêtre Properties,
1. Définissez SourceInstance sur votre nouvel AudioPlayer pour spécifier que vous voulez que le fil transporte l'audio de ce lecteur audio spécifique.
2. Définissez TargetInstance sur votre nouvel AudioDeviceOutput pour spécifier que vous voulez que le fil transporte l'audio vers ce haut-parleur spécifique.
Dupliquez Gumdrop jusqu'à ce que vous ayez trois gommes à mâcher, puis dispersez-les dans l'environnement.

Dans la fenêtre Explorer, naviguez jusqu'à ServerScriptService, puis insérez un Script, renommez-le GumdropService, définissez sa propriété RunContext sur Server, puis collez le code suivant dans le script :


-- Initialisation des services
local Workspace = game:GetService("Workspace")
local Players = game:GetService("Players")
local ServerStorage = game:GetService("ServerStorage")
local TweenService = game:GetService("TweenService")

-- Modules
local Leaderboard = require(ServerStorage.Leaderboard)
local PlayerData = require(ServerStorage.PlayerData)

-- Variables
local gumdropsFolder = Workspace.Gumdrops
local gumdrops = gumdropsFolder:GetChildren()

local GUMDROP_KEY_NAME = PlayerData.GUMDROP_KEY_NAME
local GUMDROP_AMOUNT_TO_ADD = 1

local function updatePlayerGumdrops(player, updateFunction)
   -- Met à jour le tableau de gommes à mâcher
   local newGumdropAmount = PlayerData.updateValue(player, GUMDROP_KEY_NAME, updateFunction)

   -- Met à jour le tableau des gommes à mâcher
   Leaderboard.setStat(player, GUMDROP_KEY_NAME, newGumdropAmount)
 
   -- Vérifie si le joueur a collecté trois gommes à mâcher
   if newGumdropAmount >= 3 then
      -- Joue l'audio de l'événement de porte lorsque le joueur collecte trois gommes à mâcher
      local audioPlayer = Workspace.Door.AudioPlayer
      audioPlayer:Play()
 	
      -- Anime la porte pour la faire descendre
      local doorPart = Workspace.Door
      local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Linear)
      local tween = TweenService:Create(doorPart, tweenInfo, {Position = doorPart.Position + Vector3.new(0, -15, 0)})
      tween:Play()
   end
end

-- Définition du gestionnaire d'événements
local function onGumdropTouched(otherPart, gumdrop)
   if gumdrop:GetAttribute("Active") then
      local character = otherPart.Parent
      local player = Players:GetPlayerFromCharacter(character)
      if player then
         -- Le joueur a touché une gomme à mâcher
         local audioPlayer = gumdrop.AudioPlayer
         audioPlayer:Play()
 		
         gumdrop.Transparency = 1
         gumdrop:SetAttribute("Active", false)
         updatePlayerGumdrops(player, function(oldGumdropAmount)
         oldGumdropAmount = oldGumdropAmount or 0
         return oldGumdropAmount + GUMDROP_AMOUNT_TO_ADD
         end)
      end
   end
end

-- Mise en place des écouteurs d'événements
for _, gumdrop in gumdrops do
   gumdrop:SetAttribute("Active", true)
   gumdrop.Touched:Connect(function(otherPart)
   onGumdropTouched(otherPart, gumdrop)
   end)
end

Explication du code

Ce script gère des fonctionnalités supplémentaires au-delà de la simple activation de l'audio non positionnel, telles que la mise à jour du tableau chaque fois qu'un joueur collecte une gomme à mâcher et déclenche un son positionnel et une animation pour la porte de la maison en pain d'épice lorsque le joueur collecte les trois gommes à mâcher. Ceci est important pour le gameplay de l'échantillon, mais ce n'est pas essentiel pour comprendre comment mettre en œuvre l'audio 2D, donc cette explication gardera ces sections à un niveau élevé.

Le script commence par initialiser les services Workspace, Players, ServerStorage et TweenService afin de pouvoir référencer leurs enfants et leurs fonctionnalités. Ensuite, il requiert les modules Leaderboard et PlayerData dans ServerStorage; ces modules sont responsables de la création et de la mise à jour d'un tableau dans le coin supérieur droit de l'écran qui suit le nombre de gommes à mâcher qu'un joueur collecte dans l'environnement.

La fonction updatePlayerGumdrops du script est principalement chargée de mettre à jour le tableau à chaque fois qu'un joueur collecte une gomme à mâcher et d'attendre le moment où ils collectent les trois gommes à mâcher afin de déclencher un son positionnel et une animation pour la porte de la maison en pain d'épice. Pour plus d'informations sur cette partie du script, voir Ajouter de l'audio 3D - Retour d'événement.

La fonction onGumdropTouched du script est là où se déroule la majeure partie du travail pour déclencher l'audio 2D pour le retour de jeu, et elle prend deux arguments :

otherPart - Une partie qui entre en collision avec la gomme à mâcher.
gumdrop - Une partie sphérique qui représente une gomme à mâcher.

Lorsque quoi que ce soit entre en collision avec la partie gomme à mâcher, le script vérifie d'abord si la gomme à mâcher est active. Si c'est le cas, il vérifie que l'objet en collision est un joueur. Si c'est le cas, le script exécute alors :

Joue la piste audio 2D du lecteur audio.
Rend la gomme à mâcher invisible.
Désactive la gomme à mâcher afin que les joueurs ne puissent pas interagir avec la gomme à mâcher invisible.
Met à jour le tableau pour le joueur qui a touché la gomme à mâcher.

Enfin, le script met en place des écouteurs d’événements de sorte que pour chaque gomme à mâcher, il connecte une fonction à l'événement Touched, ce qui appelle la fonction onGumdropTouched lorsque le joueur touche la gomme à mâcher.

Testez l'expérience pour entendre le son de mastication après avoir collecté une gomme à mâcher.

Interaction UI

Lorsque les joueurs interagissent avec vos éléments d'interface utilisateur (UI), tels que survoler une case à cocher ou sélectionner un bouton d'achat, il est important de fournir un retour instantané afin qu'ils comprennent intuitivement comment ils interagissent avec votre UI. Par exemple, de nombreux concepteurs changent les caractéristiques visuelles de l'UI lorsque les joueurs activent ou désactivent des paramètres pour communiquer l'état du paramètre.

Cependant, pour les joueurs ayant des déficiences visuelles pour lesquels les changements de couleur ou les animations sont plus difficiles à interpréter seuls, il est utile de fournir plusieurs formes de retour sensoriel pour vos interactions UI afin qu'elles restent accessibles et intuitives pour autant de joueurs que possible. Pour approfondir ce concept, considérons les états UI suivants qui sont importants pour les boutons d'achat du modèle UGC Homestore :

En focus - Indique que le joueur met en surbrillance un élément UI en préparation pour le sélectionner.
Survol - Indique que le joueur survole un élément UI avec son curseur.
Sélectionné - Indique que le joueur a sélectionné un élément UI par son entrée.

Ces trois interactions sont essentielles pour le flux utilisateur principal du modèle, les joueurs parcourant, sélectionnant et achetant des vêtements et accessoires d'avatar, il est donc primordial que personne ne soit confus sur la façon d'interagir avec l'UI. Pour préparer les joueurs au succès, le modèle fournit à la fois un retour visuel et auditif pour chaque interaction UI.

Retour visuel

Pour donner un exemple de la manière dont vous pouvez configurer plusieurs formes de retour sensoriel, l'échantillon fournit à la fois un retour visuel et auditif chaque fois que les joueurs appuient sur le bouton à la menthe à l'écran. Lorsque les joueurs n'interagissent pas avec le bouton, il apparaît comme une confiserie de menthe typique, mais quand ils appuient sur le bouton, l'échantillon :

Joue un morceau audio de jingle agréable.
Teinte le bouton d'une couleur teal.
Déplace légèrement le bouton vers le bas à l'écran.

À partir de là, vous pouvez relier cette interaction à toutes sortes d'actions de jeu utiles, comme ouvrir un menu ou acheter un article.

Pour recréer l'audio d'interaction UI à un coup dans l'échantillon Gingerbread House - Complete Audio :

Dans la fenêtre Explorer, naviguez jusqu'à StarterGui ⟩ 2DAudioButton, puis :
1. Insérez un objet AudioPlayer pour créer une source audio.
2. Insérez un objet AudioDeviceOutput pour créer un haut-parleur qui joue tout au long de l'expérience.
3. Insérez un objet Wire pour transporter le flux de l'audio player vers le haut-parleur.
Sélectionnez l'AudioPlayer, puis dans la fenêtre Properties, définissez AssetID sur rbxassetid://3422389728 pour jouer une piste audio de jingle rétro.
Sélectionnez le Wire, puis dans la fenêtre Properties,
1. Définissez SourceInstance sur votre nouvel AudioPlayer pour spécifier que vous voulez que le fil transporte l'audio de ce lecteur audio spécifique.
2. Définissez TargetInstance sur votre nouvel AudioDeviceOutput pour spécifier que vous voulez que le fil transporte l'audio vers ce haut-parleur spécifique.

Dans la fenêtre Explorer, insérez un LocalScript dans 2DAudioButton, renommez-le PlayAudioWhenPressed, puis collez le code suivant dans le script :


local TweenService = game:GetService("TweenService")

local buttonGui = script.Parent
local buttonImageButton = buttonGui.ButtonFrame.ButtonImageButton
local buttonAudioPlayer = buttonGui.AudioPlayer

local tweenInfo = TweenInfo.new(.2, Enum.EasingStyle.Exponential)

local buttonTweenByIsPressed = {
   -- Pressé
   [true] = TweenService:Create(buttonImageButton, tweenInfo, {
      Position = buttonImageButton.Position + UDim2.fromScale(0, .1),
      ImageColor3 = Color3.fromRGB(117, 255, 255),
   }),

   -- Défaut
   [false] = TweenService:Create(buttonImageButton, tweenInfo, {
      Position = buttonImageButton.Position,
      ImageColor3 = Color3.fromRGB(255, 255, 255),
   }),
}

local function onIsPlayingChanged()
   local isPlaying = buttonAudioPlayer.IsPlaying
   local tween = buttonTweenByIsPressed[isPlaying]
   tween:Play()
end
   
onIsPlayingChanged()
buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying"):Connect(onIsPlayingChanged)
buttonAudioPlayer.Ended:Connect(onIsPlayingChanged)

buttonImageButton.Activated:Connect(function(_hit)
   buttonAudioPlayer:Play()
end)

Explication du code

Ce script gère des fonctionnalités supplémentaires au-delà de la simple lecture de l'audio 2D pour les interactions UI, telles que le tweening de la couleur et de la position du bouton. Ceci est important pour fournir plusieurs sources de retour sensoriel, mais les exigences de conception de votre cas d'utilisation peuvent ne nécessiter qu'un retour auditif. Si vous souhaitez seulement jouer de l'audio lorsque les joueurs touchent des éléments UI, vous pouvez supprimer la fonctionnalité de tween.

Le script commence par obtenir :

Le TweenService afin de pouvoir animer les éléments de l'UI.
L'objet parent du script 2DAudioButton ScreenGui.
Le bonbon à la menthe ImageButton.
Le lecteur audio pertinent avec votre piste audio de jingle.

Le script définit ensuite :

Un objet TweenInfo qui spécifie que l'animation du bouton jouera avec un style d'animation exponentiel.
Deux tweens qui correspondent à l'état pressé ou non pressé du bouton.
- L'état pressé true déplace légèrement le bouton vers le bas à l'écran et le teint d'une couleur teal.
- L'état non pressé false remet le bouton à sa position d'origine à l'écran et enlève la teinte précédente.

Le reste du script est où se déroule la majeure partie du travail pour déclencher les retours d'interaction UI 2D, donc passons en revue comment la fonction onIsPlayingChanged et les écouteurs d'événements travaillent ensemble pour le flux utilisateur UI :

buttonImageButton.Activated écoute qu'un joueur clique sur le bouton, puis appelle la fonction Play() pour commencer à jouer l'audio associé à partir du lecteur audio. Ce processus change la propriété AudioPlayer.IsPlaying de false à true.
buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying") écoute le changement de la propriété IsPlaying du lecteur audio, puis appelle la fonction onIsPlayingChanged.
La fonction onIsPlayingChanged utilise cette information pour déclencher le tween qui change son apparence visuelle à l'écran.
Pour empêcher le joueur de redémarrer accidentellement l'audio s'il clique rapidement sur le bouton, buttonAudioPlayer.Ended écoute la fin de la lecture audio avant d'appeler à nouveau la fonction onIsPlayingChanged.

Il est important de noter que l'événement onIsPlayingChanged ne se déclenche que lors du passage de false à true, ce qui signifie qu'il ne se déclenche pas lors du passage de true à false. C'est le comportement prévu en raison des complications avec le timing de la réplication des propriétés du serveur au client. En conséquence, l'événement Ended est fourni et écouté dans cet exemple pour couvrir les deux cas.

Testez l'expérience pour entendre le jingle chaque fois que vous appuyez sur le bouton à l'écran.