Aggiungi audio 2D | Documentazione

Audio 2D è un suono non direzionale che non emette da un luogo particolare, rimanendo lo stesso indipendentemente dalla posizione o dall'orientamento dell'ascoltatore nello spazio 3D. Ciò significa che mentre i giocatori spostano i loro ascoltatori nell'ambiente, possono costantemente sentire l'audio 2D da qualsiasi parte si girino.

Utilizzando il file Gingerbread House - Start .rbxl come punto di partenza e Gingerbread House - Complete Audio come riferimento, questo tutorial ti mostra come aggiungere sia audio 2D loop che audio 2D one shot alle tue esperienze, inclusa la guida su:

Musica di sottofondo in loop che suona non appena i giocatori si connettono al server.
Attivazione di audio per fornire ai giocatori un feedback istantaneo secondo i loro obiettivi di gioco.
Attivazione di vari suoni per indicare diverse interazioni con l'interfaccia utente.

Se in qualsiasi momento ti senti bloccato nel processo, puoi utilizzare Gingerbread House - Complete Audio come riferimento per confrontare i tuoi progressi.

Se desideri aggiungere audio posizionale alla tua esperienza, come rumori ambientali all'interno dell'ambiente, suoni di interazione con oggetti o dialoghi di personaggi non giocabili, dai un'occhiata a Add 3D audio.

Oggetti audio 2D

Per creare audio non direzionale, è importante comprendere gli oggetti audio con cui lavorerai durante questo tutorial. Ci sono tre principali tipi di oggetti audio per l'audio 2D:

L'oggetto AudioPlayer carica e riproduce il file audio.
L'oggetto AudioDeviceOutput è un dispositivo hardware fisico nel mondo reale, come un altoparlante o delle cuffie.
Wires trasportano i flussi audio da un oggetto a un altro.

Tutti questi oggetti audio lavorano insieme per trasportare il suono dalla riproduzione del file all'hardware di ciascun giocatore. Esaminiamo come funziona questo in pratica usando un esempio di un giocatore che indossa un headset mentre gioca un'esperienza con il suo portatile:

Il AudioPlayer carica l'ID dell'asset audio 127645268874265 nell'esperienza per un suono di acquisto di valuta.
Un Wire trasporta il flusso dal AudioPlayer al AudioDeviceOutput in modo che il flusso esca dalle cuffie del giocatore.
L'oggetto AudioDeviceOutput trasporta il suono all'altoparlante fisico del giocatore, o in questo caso, alle sue cuffie.

Le sezioni seguenti esploreranno più in dettaglio e faranno riferimento a questi oggetti mentre impari a riprodurre sia audio 2D loop che audio 2D one shot. Man mano che esamini questi oggetti con le prossime tecniche, puoi prevedere più accuratamente come catturare e inviare suono dall'esperienza al giocatore.

Audio in loop

Audio 2D in loop, o audio non direzionale che si ripete senza interruzioni non appena i giocatori si connettono al server, è una comune tecnica di design sonoro per fornire uno sfondo uditivo coeso indipendentemente da ciò che i giocatori stanno facendo o dove si trovano nello spazio 3D. Inoltre, l'audio 2D in loop assicura che la tua esperienza non sia mai completamente silenziosa, il che può disorientare e distrarre i giocatori dai loro obiettivi.

Per dimostrare questo concetto, considera come il seguente audio 2D migliori significativamente la qualità del campione Hazardous Space Station. Senza musica di sottofondo, la stazione spaziale sembra vuota e priva di vita. Tuttavia, quando la stazione spaziale include musica di sottofondo, essa si percepisce sia sinistra che pericolosa, contribuendo all'atmosfera inquietante complessiva.

Senza audio 2D in loop

Con audio 2D in loop

Per creare un loop senza interruzioni, è necessario abbinare precisamente i punti di fine e di inizio della tua traccia audio in modo che i giocatori non possano rilevare la sua ripetizione. Questo processo richiede software di editing audio di terze parti come Reaper o Audacity in modo da poter trovare un incrocio zero e fare un taglio temporizzato con attenzione. Per istruzioni passo passo su questi metodi, consulta Creating Perfect Audio Loops.

L'audio in loop è particolarmente utile per stabilire come vuoi che i giocatori si sentano non appena entrano nella tua esperienza. Ad esempio, il campione mira a fornire ai giocatori un'avventura gioiosa in un paese delle meraviglie invernale, quindi utilizza una traccia audio vivace per influenzare positivamente il loro umore nel momento in cui entrano nell'ambiente. Per vedere quanto possa essere influente questa tecnica, considera come cambierebbe l'esperienza del giocatore se decidessi di sostituire l'audio in loop con una traccia metal.

Per ricreare l'audio 2D in loop nel file di esempio Gingerbread House - Complete Audio:

Abilita un listener predefinito attaccato al tuo personaggio giocatore.
1. Nella finestra Explorer, seleziona SoundService.
2. Nella finestra Properties, imposta DefaultListenerLocation su Character. Quando esegui l'esperienza, il motore crea automaticamente un AudioDeviceOutput sotto SoundService.
Nella finestra Explorer, vai su SoundService, quindi:
1. Inserisci un oggetto AudioPlayer per creare una sorgente audio.
2. Inserisci un oggetto AudioDeviceOutput per creare un altoparlante che suona durante l'esperienza.
3. Inserisci un oggetto Wire per trasportare il flusso dall'audio player all'altoparlante.
Seleziona il AudioPlayer, quindi nella finestra Properties,
1. Imposta AssetID su rbxassetid://1841461968 per riprodurre una traccia audio vivace.
2. Abilita Looping in modo che l'audio si ripeta senza interruzioni.
3. Imposta Volume su 0.2 per riprodurre l'audio a basso volume così che tu possa comunque sentire le altre sorgenti audio nell'esperienza.
Seleziona il Wire, quindi nella finestra Properties,
1. Imposta SourceInstance sul tuo nuovo AudioPlayer per specificare che desideri che il filo trasporti audio da questo specifico audio player.
2. Imposta TargetInstance sul tuo nuovo AudioDeviceOutput per specificare che desideri che il filo trasporti audio a questo specifico altoparlante.
Torna alla finestra Explorer, inserisci uno Script in AudioPlayer, rinominalo LoopBackgroundMusic, imposta la proprietà RunContext su Client, quindi incolla il seguente codice nello script:
```
local audioPlayer = script.Parent
audioPlayer:Play()
```
Spiegazione del codice
Lo script inizia dichiarando una variabile per rappresentare il genitore dello script AudioPlayer. Lo script quindi imposta la sorgente audio per riprodurre dal momento in cui il giocatore entra nell'esperienza fino al momento in cui esce dall'esperienza.
Esegui un test dell'esperienza per sentire la musica di sottofondo in loop.

Audio one shot

Audio 2D one shot, o audio non direzionale che viene riprodotto una sola volta in un momento e posizione specifici a meno che un giocatore non lo attivi di nuovo, fornisce ai giocatori un contesto importante su qualsiasi cosa non vuoi che manchino. Utilizzare questo tipo di feedback uditivo nelle tue esperienze è essenziale perché fornisce una risposta chiara e immediata a funzioni di gioco cruciali e azioni dei giocatori, come iniziare una lotta con un boss o perdere una quantità significativa di salute.

Le sezioni seguenti forniscono dettagli di implementazione per scenari di gioco comuni in cui i giocatori necessitano di feedback non direzionale tempestivo, inclusi feedback di gioco, interazioni con elementi dell'interfaccia utente, e narrazione vocale per tutorial.

Feedback di gioco

Man mano che i giocatori progrediscono nella tua esperienza, è importante che ricevano un feedback uditivo immediato sullo stato di qualsiasi cosa che impatti il loro gioco, come il punteggio, la salute o il progresso del livello. Poiché questo tipo di audio è direttamente collegato agli obiettivi del giocatore, è importante che questi suoni siano chiari, udibili e trasmettano informazioni utili e accurate.

Per dimostrare questo concetto, esaminiamo il seguente audio 2D one shot dal template Platformer che viene riprodotto mentre i giocatori saltano e raccolgono monete:

Un suono aereo di chiusura suona non appena il giocatore preme il tasto di salto sul proprio dispositivo.
Un ping acuto e il suono delle monete che si muovono suonano non appena il personaggio del giocatore tocca una moneta.

Entrambi questi suoni sono immediatamente riconoscibili nel contesto dello spazio 3D e aiutano i giocatori a comprendere il successo delle loro azioni senza fare affidamento esclusivamente su indizi visivi.

Quando riproduci più suoni contemporaneamente, alcuni suoni possono essere più importanti da sentire per i giocatori rispetto ad altri. In questo caso, il suono della raccolta della moneta sta trasmettendo informazioni di gioco più preziose rispetto al suono del salto, quindi l'esperienza lo riproduce a un volume leggermente più alto. Tuttavia, non ci sono standard o regole per ottenere un buon mix, quindi aggiusta i suoni nella tua esperienza per riflettere ciò che pensi sia più importante.

Ad esempio, il campione include vari trigger audio durante l'esperienza, ma non sono tutti allo stesso livello di importanza per comprendere l'obiettivo principale dell'esperienza: raccogliere caramelle per aprire la casa di pan di zenzero. Per garantire che i giocatori siano consapevoli di ciò che devono fare, il campione triplica l'ampiezza del feedback uditivo ogni volta che il giocatore raccoglie una caramella.

Per ricreare l'audio di feedback sullo stato one shot nel file di esempio Gingerbread House - Complete Audio:

Nella finestra Explorer, vai su Workspace ⟩ Gumdrops ⟩ Gumdrop, quindi:
1. Inserisci un oggetto AudioPlayer per creare una sorgente audio.
2. Inserisci un oggetto AudioDeviceOutput per creare un altoparlante che suona durante l'esperienza.
3. Inserisci un oggetto Wire per trasportare il flusso dall'audio player all'altoparlante.
Seleziona il AudioPlayer, quindi nella finestra Properties,
1. Imposta AssetID su rbxassetid://9113723699 per riprodurre una dolce traccia audio di masticazione.
2. Imposta TimePosition su 0.15 per avviare la traccia audio più vicino al suono reale della masticazione.
3. Imposta Volume su 3 per riprodurre l'audio a un volume elevato affinché tu possa sentire il suono della caramella sopra le altre sorgenti audio nell'esperienza.
Seleziona il Wire, quindi nella finestra Properties,
1. Imposta SourceInstance sul tuo nuovo AudioPlayer per specificare che desideri che il filo trasporti audio da questo specifico audio player.
2. Imposta TargetInstance sul tuo nuovo AudioDeviceOutput per specificare che desideri che il filo trasporti audio a questo specifico altoparlante.
Duplica Gumdrop fino a ottenere tre gumdrops, quindi disperdili nell'ambiente.

Torna alla finestra Explorer, vai su ServerScriptService, quindi inserisci uno Script, rinominalo GumdropService, imposta la proprietà RunContext su Server, quindi incolla il seguente codice nello script:


-- Inizializzazione dei servizi
local Workspace = game:GetService("Workspace")
local Players = game:GetService("Players")
local ServerStorage = game:GetService("ServerStorage")
local TweenService = game:GetService("TweenService")

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

-- Variabili
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)
   -- Aggiorna la tabella delle caramelle
   local newGumdropAmount = PlayerData.updateValue(player, GUMDROP_KEY_NAME, updateFunction)

   -- Aggiorna la leaderboard delle caramelle
   Leaderboard.setStat(player, GUMDROP_KEY_NAME, newGumdropAmount)
 
   -- Controlla se il giocatore ha raccolto tre caramelle
   if newGumdropAmount >= 3 then
      -- Riproduci l'audio dell'evento della porta quando il giocatore raccoglie tre caramelle
      local audioPlayer = Workspace.Door.AudioPlayer
      audioPlayer:Play()
 	
      -- Anima la porta per muoversi verso il basso
      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

-- Definizione del gestore di eventi
local function onGumdropTouched(otherPart, gumdrop)
   if gumdrop:GetAttribute("Active") then
      local character = otherPart.Parent
      local player = Players:GetPlayerFromCharacter(character)
      if player then
         -- Il giocatore ha toccato una caramella
         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

-- Configurazione dei listener di eventi
for _, gumdrop in gumdrops do
   gumdrop:SetAttribute("Active", true)
   gumdrop.Touched:Connect(function(otherPart)
   onGumdropTouched(otherPart, gumdrop)
   end)
end

Spiegazione del codice

Questo script gestisce funzionalità aggiuntive al di fuori della attivazione dell'audio non posizionale, come l'aggiornamento della leaderboard ogni volta che un giocatore raccoglie una caramella e attivare un suono posizionale e un'animazione per la porta della casa di pan di zenzero quando un giocatore raccoglie tutte e tre le caramelle. Questo è importante per il gameplay del campione, ma non è importante per comprendere come implementare l'audio 2D, quindi questa spiegazione terrà quelle sezioni a un livello elevato.

Questo script inizia inizializzando i servizi Workspace, Players, ServerStorage, e TweenService in modo da poter fare riferimento ai loro figli e funzionalità. Quindi, richiede i moduli Leaderboard e PlayerData in ServerStorage; questi moduli sono responsabili della creazione e aggiornamento di una leaderboard nell'angolo in alto a destra dello schermo che tiene traccia della quantità di gomme da masticare che un giocatore raccoglie nell'ambiente.

La funzione updatePlayerGumdrops dello script è principalmente responsabile sia dell'aggiornamento della leaderboard ogni volta che un giocatore raccoglie una caramella, sia dell'attesa del momento in cui raccolgono tutte e tre le caramelle in modo da poter attivare un suono posizionale e un'animazione per la porta della casa di pan di zenzero. Per ulteriori informazioni su questa parte dello script, consulta Add 3D audio - Event feedback.

La funzione onGumdropTouched dello script è dove avviene la maggior parte del lavoro per attivare l'audio 2D per il feedback di gioco e prende due argomenti:

otherPart - Un pezzo che collide con la caramella.
gumdrop - Un pezzo sferico che rappresenta una caramella.

Quando qualsiasi cosa collide con la parte della caramella, lo script controlla prima se la caramella è attiva. Se sì, verifica che l'oggetto in collisione sia un giocatore. Se sì, lo script quindi:

Riproduce la traccia audio 2D dall'audio player.
Rende la caramella invisibile.
Disattiva la caramella in modo che i giocatori non possano interagire con la caramella invisibile.
Aggiorna la leaderboard per il giocatore che ha toccato la caramella.

Infine, lo script crea listener di eventi in modo che per ogni caramella, collega una funzione all'evento Touched, che chiama la funzione onGumdropTouched quando un giocatore tocca la caramella.

Esegui un test dell'esperienza per sentire il suono della masticazione dopo aver raccolto una caramella.

Interazione UI

Quando i giocatori interagiscono con gli elementi della tua interfaccia utente (UI), come passare il mouse su una casella di controllo o selezionare un pulsante di acquisto, è importante fornire un feedback istantaneo in modo che capiscano intuitivamente come stanno interagendo con la tua UI. Ad esempio, molti designer cambiano le caratteristiche visive della UI quando i giocatori abilitano o disabilitano le impostazioni per comunicare lo stato dell'impostazione.

Tuttavia, per i giocatori con disabilità visive in cui i cambiamenti di colore o le animazioni sono più difficili da decifrare da soli, è utile fornire molteplici forme di feedback sensoriale per le tue interazioni UI in modo che rimangano accessibili e intuitive per quanti più giocatori possibile. Per espandere questo concetto, consideriamo i seguenti stati UI che sono importanti per i pulsanti di acquisto del template UGC Homestore:

In evidenza - Indica che il giocatore sta evidenziando un elemento della UI in preparazione per selezionarlo.
Sovrapposto - Indica che il giocatore sta passando il mouse su un elemento della UI con il cursore.
Selezionato - Indica che il giocatore ha selezionato un elemento della UI attraverso il proprio input.

Tutte e tre queste interazioni sono essenziali per il flusso principale degli utenti del template in cui i giocatori sfogliano, selezionano e acquistano abbigliamento e accessori per avatar, quindi è della massima importanza che nessuno sia confuso su come interagire con la UI. Per preparare i giocatori al successo, il template fornisce sia feedback visivi che uditivi per ogni interazione della UI.

Feedback Visivo

Per dare un esempio di come puoi configurare molteplici forme di feedback sensoriale, il campione fornisce sia feedback visivi che uditivi ogni volta che i giocatori premendo il pulsante di menta sullo schermo. Quando i giocatori non interagiscono con il pulsante, questo appare come una tipica caramella di menta, ma quando premono il pulsante, il campione:

Riproduce una deliziosa traccia audio.
Tinge il pulsante di un tono teal.
Muove leggermente il pulsante verso il basso nello schermo.

Da qui, puoi collegare questa interazione a tutti i tipi di azioni di gioco utili, come aprire un menu o acquistare un oggetto.

Per ricreare l'audio di interazione UI one shot nel file di esempio Gingerbread House - Complete Audio:

Nella finestra Explorer, vai su StarterGui ⟩ 2DAudioButton, quindi:
1. Inserisci un oggetto AudioPlayer per creare una sorgente audio.
2. Inserisci un oggetto AudioDeviceOutput per creare un altoparlante che suona durante l'esperienza.
3. Inserisci un oggetto Wire per trasportare il flusso dall'audio player all'altoparlante.
Seleziona il AudioPlayer, quindi nella finestra Properties, imposta AssetID su rbxassetid://3422389728 per riprodurre una traccia audio di jingle vintage.
Seleziona il Wire, quindi nella finestra Properties,
1. Imposta SourceInstance sul tuo nuovo AudioPlayer per specificare che desideri che il filo trasporti audio da questo specifico audio player.
2. Imposta TargetInstance sul tuo nuovo AudioDeviceOutput per specificare che desideri che il filo trasporti audio a questo specifico altoparlante.

Torna alla finestra Explorer, inserisci uno LocalScript in 2DAudioButton, rinominalo PlayAudioWhenPressed, quindi incolla il seguente codice nello 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 = {
   -- Premuto
   [true] = TweenService:Create(buttonImageButton, tweenInfo, {
      Position = buttonImageButton.Position + UDim2.fromScale(0, .1),
      ImageColor3 = Color3.fromRGB(117, 255, 255),
   }),

   -- Predefinito
   [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)

Spiegazione del codice

Questo script gestisce funzionalità aggiuntive al di fuori della semplice riproduzione audio 2D per interazioni UI, come animare il colore e la posizione del pulsante. Questo è importante per fornire molteplici fonti di feedback sensoriale, ma i requisiti di design per il tuo caso d'uso potrebbero richiedere solo un feedback uditivo. Se vuoi solo riprodurre audio quando i giocatori toccano elementi della UI, puoi rimuovere la funzionalità di animazione.

Lo script inizia ottenendo:

Il TweenService in modo da poter animare gli elementi dell'interfaccia utente.
L'oggetto genitore dello script 2DAudioButton ScreenGui.
Il ImageButton della caramella di menta.
Il relativo audio player con la tua traccia audio jingle.

Lo script definisce quindi:

Un oggetto TweenInfo che specifica che l'animazione del pulsante verrà eseguita con uno stile di animazione esponenziale.
Due tween che rappresentano lo stato premuto o non premuto del pulsante.
- Lo stato true premuto sposta il pulsante leggermente verso il basso nello schermo e lo tinge di un colore teal.
- Lo stato false non premuto riporta il pulsante alla sua posizione originale nello schermo e rimuove la tinta precedente.

Il resto dello script è dove avviene gran parte del lavoro per attivare il feedback dell'interazione 2D UI, quindi esaminiamo come funzionano insieme la funzione onIsPlayingChanged e i listener di eventi per il flusso utente dell'UI:

buttonImageButton.Activated ascolta un giocatore che fa clic sul pulsante, quindi chiama la funzione Play() per iniziare a riprodurre l'audio associato dall'audio player. Questo processo cambia la proprietà AudioPlayer.IsPlaying da false a true.
buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying") ascolta la proprietà IsPlaying dell'audio player per cambiare, quindi chiama la funzione onIsPlayingChanged.
La funzione onIsPlayingChanged utilizza queste informazioni per attivare l'animazione che cambia il suo aspetto visivo sullo schermo.
Per impedire al giocatore di riavviare accidentalmente l'audio se fa clic rapidamente sul pulsante, buttonAudioPlayer.Ended ascolta l'audio player per finire di suonare prima di richiamare di nuovo la funzione onIsPlayingChanged.

È importante notare che l'evento onIsPlayingChanged viene attivato solo quando cambia da false a true, il che significa che non viene attivato quando cambia da true a false. Questo è comportamento voluto a causa delle complicazioni con i tempi di replicare le proprietà dal server al client. A causa di questo, l'evento Ended è fornito e ascoltato in questo esempio per coprire entrambi i casi.

Esegui un test dell'esperienza per sentire il jingle ogni volta che premi il pulsante sullo schermo.