Agregar audio 2D | Documentación del Centro de creación de Roblox

El audio 2D es sonido no direccional que no emite desde ninguna ubicación particular, permaneciendo igual sin importar la posición o la orientación del oyente en el espacio 3D. Esto significa que a medida que los jugadores mueven sus oyentes por el entorno, pueden escuchar consistentemente audio 2D desde cualquier lugar al que se giren.

Usando el archivo .rbxl Gingerbread House - Start como punto de partida y Gingerbread House - Complete Audio como referencia, este tutorial te muestra cómo agregar tanto audio 2D de bucles como de un solo disparo a tus experiencias, incluyendo la guía sobre:

Música de fondo en bucle que se reproduce tan pronto como los jugadores se conectan al servidor.
Activar audio para proporcionar a los jugadores retroalimentación instantánea de acuerdo con sus objetivos de juego.
Activar varios sonidos para indicar diferentes interacciones de la interfaz de usuario.

Si en algún momento te quedas atascado en el proceso, puedes usar Gingerbread House - Complete Audio como referencia para comparar tu progreso.

Si deseas agregar audio posicional a tu experiencia, como ruido ambiental dentro del entorno, sonidos de interacción con objetos, o diálogo de personajes no jugables, consulta Agregar audio 3D.

Objetos de audio 2D

Para crear audio no direccional, es importante entender los objetos de audio con los que estarás trabajando a lo largo de este tutorial. Hay tres tipos principales de objetos de audio para audio 2D:

El objeto AudioPlayer carga y reproduce el archivo de audio.
El objeto AudioDeviceOutput es un dispositivo de hardware físico dentro del mundo real, como un altavoz o auriculares.
Wires transporta flujos de audio de un objeto a otro.

Todos estos objetos de audio trabajan juntos para llevar el sonido de la reproducción de archivos a cada hardware de jugador. Veamos cómo funciona esto en la práctica usando un ejemplo de un jugador usando auriculares mientras juega una experiencia con su portátil:

El AudioPlayer carga el ID de activo de audio 127645268874265 en la experiencia para el sonido de compra de moneda.
Un Wire transporta el flujo desde el AudioPlayer hasta el AudioDeviceOutput para que el flujo salga de los auriculares del jugador.
El objeto AudioDeviceOutput transporta el sonido al altavoz físico del jugador, o en este caso, a sus auriculares.

Las secciones siguientes profundizan más y hacen referencia a estos objetos mientras aprendes a reproducir tanto audio 2D en bucle como de un solo disparo. A medida que revises estos objetos con las próximas técnicas, podrás predecir con más precisión cómo capturar y alimentar sonido desde la experiencia hacia el jugador.

Audio en bucle

El audio 2D en bucle, o audio no direccional que se repite sin problemas tan pronto como los jugadores se conectan al servidor, es una técnica común de diseño de sonido para proporcionar un fondo auditivo cohesivo sin importar lo que los jugadores estén haciendo o dónde se encuentren dentro del espacio 3D. Además, el audio 2D en bucle asegura que tu experiencia nunca esté completamente en silencio, lo que puede desorientar y distraer a los jugadores de sus objetivos.

Para demostrar este concepto, revisa cómo el siguiente audio 2D mejora significativamente la calidad del Hazardous Space Station de muestra. Sin música de fondo, la estación espacial se siente vacía y sin vida. Sin embargo, cuando la estación espacial incluye música de fondo, la estación se siente ominosa y peligrosa, añadiendo a la atmósfera espeluznante en general.

Sin audio 2D en bucle

Con audio 2D en bucle

Para crear un bucle sin costuras, debes coincidir los puntos de finalización y de inicio de tu pista de audio precisamente para que los jugadores no puedan detectar su repetición. Este proceso requiere software de edición de audio de terceros como Reaper o Audacity para que puedas encontrar un cruce cero y hacer un corte cronometrado cuidadosamente. Para instrucciones paso a paso sobre estos métodos, consulta Creando bucles de audio perfectos.

El audio en bucle es particularmente útil para establecer cómo deseas que se sientan los jugadores tan pronto como ingresen a tu experiencia. Por ejemplo, la muestra busca proporcionar a los jugadores una aventura alegre en un país de las maravillas invernal, por lo que utiliza una pista de audio alegre para influir positivamente en su estado de ánimo tan pronto como entren en el entorno. Para ver cuán influyente puede ser esta técnica, considera cómo cambiaría la experiencia del jugador si cambiaras el audio en bucle por una pista de metal.

Para recrear el audio 2D en bucle en el archivo de lugar Gingerbread House - Complete Audio:

Habilita un oyente predeterminado que está adjunto a tu personaje jugador.
1. En la ventana de Explorer, selecciona SoundService.
2. En la ventana de Properties, establece DefaultListenerLocation a Character. Cuando ejecutas la experiencia, el motor crea automáticamente un AudioDeviceOutput bajo SoundService.
En la ventana de Explorer, navega a SoundService, luego:
1. Inserta un objeto AudioPlayer para crear una fuente de audio.
2. Inserta un objeto AudioDeviceOutput para crear un altavoz que suene a lo largo de la experiencia.
3. Inserta un objeto Wire para transportar el flujo desde el reproductor de audio hasta el altavoz.
Selecciona el AudioPlayer, luego en la ventana de Properties,
1. Establece AssetID a rbxassetid://1841461968 para reproducir una pista de audio alegre.
2. Habilita Looping para que el audio se repita sin problemas.
3. Establece Volume a 0.2 para reproducir el audio a un volumen bajo para que aún puedas escuchar otras fuentes de audio dentro de la experiencia.
Selecciona el Wire, luego en la ventana de Properties,
1. Establece SourceInstance a tu nuevo AudioPlayer para especificar que deseas que el cable transporte audio desde este reproductor de audio específico.
2. Establece TargetInstance a tu nuevo AudioDeviceOutput para especificar que deseas que el cable transporte audio a este altavoz específico.
De vuelta en la ventana de Explorer, inserta un Script en AudioPlayer, renómbralo a LoopBackgroundMusic, establece su propiedad RunContext a Client, luego pega el siguiente código en el script:
```
local audioPlayer = script.Parent
audioPlayer:Play()
```
Explicación del código
El script comienza declarando una variable para representar el padre del script AudioPlayer. El script luego establece la fuente de audio para reproducir desde el momento en que el jugador se une a la experiencia hasta el momento en que salen de la experiencia.
Realiza una prueba de juego de la experiencia para escuchar la música de fondo en bucle.

Audio de un solo disparo

El audio 2D de un solo disparo, o audio no direccional que se reproduce una vez en un momento y posición específicos a menos que un jugador lo active nuevamente, proporciona a los jugadores información importante sobre cualquier cosa que no quieres que se pierdan. Usar este tipo de retroalimentación auditiva en tus experiencias es esencial porque proporciona una respuesta clara e instantánea a funciones cruciales del juego y acciones de los jugadores, como comenzar una pelea contra un jefe o perder una cantidad significativa de salud.

Las secciones siguientes proporcionan detalles de implementación para escenarios comunes de juego en los que los jugadores necesitan retroalimentación no direccional en tiempo oportuno, incluyendo retroalimentación del juego, interacciones de elementos de la interfaz de usuario y narración de voz para tutoriales.

Retroalimentación del juego

A medida que los jugadores progresan a través de tu experiencia, es importante que reciban retroalimentación auditiva inmediata sobre el estado de cualquier cosa que impacte su jugabilidad, como su puntuación, salud o progreso de nivel. Debido a que este tipo de audio se conecta directamente a los objetivos del jugador, es importante que estos sonidos sean claros, audibles y transmitan información útil y precisa.

Para demostrar este concepto, revisemos el siguiente audio 2D de un solo disparo del template Platformer que se reproduce a medida que los jugadores saltan y recogen monedas:

Un sonido de whoosh aireado se reproduce tan pronto como el jugador presiona la tecla de salto en su dispositivo.
Un ding agudo y el sonido de monedas chocando se reproducen tan pronto como el personaje del jugador toca una moneda.

Ambos sonidos son instantáneamente reconocibles dentro del contexto del espacio 3D, y ayudan a los jugadores a entender el éxito de sus acciones sin depender únicamente de señales visuales.

Cuando reproduces múltiples sonidos a la vez, ciertos sonidos pueden ser más importantes para que los jugadores los escuchen que otros. En este caso, el sonido de la recolección de monedas está transmitiendo información de juego más valiosa que el sonido de salto, por lo que la experiencia lo reproduce a un volumen ligeramente más alto. Sin embargo, no hay estándares ni reglas para lograr una mezcla excelente, así que ajusta los sonidos en tu experiencia para reflejar lo que consideres más importante.

Por ejemplo, la muestra incluye varios disparadores de audio a lo largo de la experiencia, pero no todos están al mismo nivel de importancia para entender el objetivo principal de la experiencia: recolectar caramelos para abrir la casa de jengibre. Para asegurarse de que los jugadores sepan lo que deben hacer, la muestra triplica la amplitud de la retroalimentación auditiva cada vez que el jugador recoge un caramelo.

Para recrear el audio de retroalimentación de estado de un solo disparo en el archivo de lugar Gingerbread House - Complete Audio:

En la ventana de Explorer, navega a Workspace ⟩ Gumdrops ⟩ Gumdrop, luego:
1. Inserta un objeto AudioPlayer para crear una fuente de audio.
2. Inserta un objeto AudioDeviceOutput para crear un altavoz que suene a lo largo de la experiencia.
3. Inserta un objeto Wire para transportar el flujo desde el reproductor de audio hasta el altavoz.
Selecciona el AudioPlayer, luego en la ventana de Properties,
1. Establece AssetID a rbxassetid://9113723699 para reproducir una pista de audio de masticar suave.
2. Establece TimePosition a 0.15 para comenzar la pista de audio más cerca del sonido real de masticar.
3. Establece Volume a 3 para reproducir el audio a un volumen alto para que escuches el sonido de la goma de mascar sobre otras fuentes de audio dentro de la experiencia.
Selecciona el Wire, luego en la ventana de Properties,
1. Establece SourceInstance a tu nuevo AudioPlayer para especificar que deseas que el cable transporte audio desde este reproductor de audio específico.
2. Establece TargetInstance a tu nuevo AudioDeviceOutput para especificar que deseas que el cable transporte audio a este altavoz específico.
Duplica Gumdrop hasta que tengas tres caramelos, luego dispersalos por el entorno.

De vuelta en la ventana de Explorer, navega a ServerScriptService, luego inserta un Script, renómbralo a GumdropService, establece su propiedad RunContext a Server, luego pega el siguiente código en el script:


-- Inicializando servicios
local Workspace = game:GetService("Workspace")
local Players = game:GetService("Players")
local ServerStorage = game:GetService("ServerStorage")
local TweenService = game:GetService("TweenService")

-- Módulos
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)
   -- Actualizar la tabla de gumballs
   local newGumdropAmount = PlayerData.updateValue(player, GUMDROP_KEY_NAME, updateFunction)

   -- Actualizar el leaderboard de gumballs
   Leaderboard.setStat(player, GUMDROP_KEY_NAME, newGumdropAmount)
 
   -- Comprobar si el jugador ha recolectado tres gumballs
   if newGumdropAmount >= 3 then
      -- Reproducir el audio del evento de puerta cuando el jugador recolecta tres gumballs
      local audioPlayer = Workspace.Door.AudioPlayer
      audioPlayer:Play()
 	
      -- Animar la puerta para que se mueva hacia abajo
      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

-- Definiendo el manejador de eventos
local function onGumdropTouched(otherPart, gumdrop)
   if gumdrop:GetAttribute("Active") then
      local character = otherPart.Parent
      local player = Players:GetPlayerFromCharacter(character)
      if player then
         -- El jugador tocó un gumdrop
         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

-- Configurando oyentes de eventos
for _, gumdrop in gumdrops do
   gumdrop:SetAttribute("Active", true)
   gumdrop.Touched:Connect(function(otherPart)
   onGumdropTouched(otherPart, gumdrop)
   end)
end

Explicación del código

Este script maneja funcionalidad adicional fuera de la activación del audio no posicional, como actualizar el leaderboard cada vez que un jugador recolecta un gumdrop y activar un sonido y animación posicional para la puerta de la casa de jengibre cuando un jugador recolecta los tres gumballs. Esto es importante para la jugabilidad de la muestra, pero no es crucial para entender cómo implementar audio 2D, así que esta explicación mantendrá esas secciones a un alto nivel.

Este script comienza inicializando los servicios Workspace, Players, ServerStorage y TweenService para que pueda hacer referencia a sus hijos y funcionalidades. Luego, requiere los módulos Leaderboard y PlayerData en ServerStorage; estos módulos son responsables de crear y actualizar un leaderboard en la esquina superior derecha de la pantalla que rastrea la cantidad de gumballs que un jugador recolecta en el entorno.

La función updatePlayerGumdrops del script es principalmente responsable de actualizar el leaderboard cada vez que un jugador recolecta un gumdrop, y esperar el momento en que recolecten todos los tres gumballs para que pueda activar un sonido y animación posicional para la puerta de la casa de jengibre. Para más información sobre esta parte del script, consulta Agregar audio 3D - Retroalimentación de eventos.

La función onGumdropTouched del script es donde ocurre la mayor parte del trabajo para activar el audio 2D para retroalimentación del juego, y toma dos argumentos:

otherPart - Una parte que colisiona con el gumdrop.
gumdrop - Una parte esférica que representa un gumdrop.

Cuando algo colisiona con la parte del gumdrop, el script primero verifica si el gumdrop está activo. Si es así, verifica que el objeto colisionante sea un jugador. Si es así, el script luego:

Reproduce la pista de audio 2D desde el reproductor de audio.
Hace que el gumdrop sea invisible.
Desactiva el gumdrop para que los jugadores no puedan interactuar con el gumdrop invisible.
Actualiza el leaderboard para el jugador que tocó el gumdrop.

Finalmente, el script configura oyentes de eventos para que para cada gumdrop, conecte una función al evento Touched, que llama a la función onGumdropTouched cuando un jugador toca el gumdrop.

Realiza una prueba de juego de la experiencia para escuchar el sonido de masticar después de recolectar un gumdrop.

Interacción de la interfaz de usuario

Cuando los jugadores interactúan con tus elementos de interfaz de usuario (UI), como al pasar el cursor sobre una casilla de verificación o seleccionar un botón de compra, es importante proporcionar retroalimentación instantánea para que entiendan intuitivamente cómo están interactuando con tu UI. Por ejemplo, muchos diseñadores cambian las características visuales de la UI cuando los jugadores habilitan o deshabilitan configuraciones para comunicar el estado de la configuración.

Sin embargo, para jugadores con discapacidades visuales en las que los cambios de color o animaciones son más difíciles de descifrar por sí solos, es útil proporcionar múltiples formas de retroalimentación sensorial para tus interacciones de UI para que sigan siendo accesibles e intuitivas para tantos jugadores como sea posible. Para ampliar este concepto, consideremos los siguientes estados de UI que son importantes para los botones de compra del template UGC Homestore:

En foco - Indica que el jugador está resaltando un elemento de UI en preparación para seleccionarlo.
Sobre el hover - Indica que el jugador está pasando el cursor sobre un elemento de UI.
Seleccionado - Indica que el jugador ha seleccionado un elemento de UI a través de su entrada.

Los tres de estas interacciones son esenciales para el flujo principal de usuarios del template de jugadores navegando, seleccionando y comprando ropa y accesorios para avatares, así que es de suma importancia que nadie se confunda sobre cómo interactuar con la UI. Para preparar a los jugadores para el éxito, el template proporciona retroalimentación tanto visual como auditiva para cada interacción de la UI.

Retroalimentación Visual

Para dar un ejemplo de cómo puedes configurar múltiples formas de retroalimentación sensorial, la muestra proporciona tanto retroalimentación visual como auditiva cada vez que los jugadores presionan el botón de caramelo de menta en la pantalla. Cuando los jugadores no están interactuando con el botón, aparece como un típico caramelo de menta, pero cuando presionan el botón, la muestra:

Reproduce una pista de audio de melodía alegre.
Tiñe el botón con un tono azul verdoso.
Mueve el botón ligeramente hacia abajo en la pantalla.

Desde aquí, puedes conectar esta interacción a todo tipo de acciones útiles de juego, como abrir un menú o comprar un ítem.

Para recrear el audio de interacción de UI de un solo disparo en el archivo de lugar Gingerbread House - Complete Audio:

En la ventana de Explorer, navega a StarterGui ⟩ 2DAudioButton, luego:
1. Inserta un objeto AudioPlayer para crear una fuente de audio.
2. Inserta un objeto AudioDeviceOutput para crear un altavoz que suene a lo largo de la experiencia.
3. Inserta un objeto Wire para transportar el flujo desde el reproductor de audio hasta el altavoz.
Selecciona el AudioPlayer, luego en la ventana de Properties, establece AssetID a rbxassetid://3422389728 para reproducir una pista de audio de jingle retro.
Selecciona el Wire, luego en la ventana de Properties,
1. Establece SourceInstance a tu nuevo AudioPlayer para especificar que deseas que el cable transporte audio desde este reproductor de audio específico.
2. Establece TargetInstance a tu nuevo AudioDeviceOutput para especificar que deseas que el cable transporte audio a este altavoz específico.

De vuelta en la ventana de Explorer, inserta un LocalScript en 2DAudioButton, renómbralo a PlayAudioWhenPressed, luego pega el siguiente código en el 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 = {
   -- Presionado
   [true] = TweenService:Create(buttonImageButton, tweenInfo, {
      Position = buttonImageButton.Position + UDim2.fromScale(0, .1),
      ImageColor3 = Color3.fromRGB(117, 255, 255),
   }),

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

Explicación del código

Este script maneja funcionalidad adicional fuera de solo reproducir audio 2D para interacciones de UI, como la animación del color y la posición del botón. Esto es importante para proporcionar múltiples fuentes de retroalimentación sensorial, pero los requisitos de diseño para tu caso de uso pueden requerir solo retroalimentación auditiva. Si solo deseas reproducir audio cuando los jugadores toquen elementos de la UI, puedes eliminar la funcionalidad de animación.

El script comienza obteniendo:

El TweenService para que pueda animar elementos de la UI.
El objeto ScreenGui 2DAudioButton de padre del script.
El ImageButton de caramelo de menta.
El reproductor de audio relevante con tu pista de jingle.

El script entonces define:

Un objeto TweenInfo que especifica que la animación del botón se reproducirá con un estilo de animación exponencial.
Dos animaciones que representan el estado presionado o no presionado del botón.
- El estado presionado true mueve el botón ligeramente hacia abajo en la pantalla y tiñe con un tono azul verdoso.
- El estado no presionado false devuelve el botón a su posición original en la pantalla y elimina el tinte previo.

El resto del script es donde ocurre la mayor parte del trabajo para activar la retroalimentación de interacción de UI 2D, así que revisemos cómo funcionan juntos la función onIsPlayingChanged y los oyentes de eventos para el flujo de usuarios de UI:

buttonImageButton.Activated escucha para que un jugador haga clic en el botón, luego llama a la función Play() para comenzar a reproducir el audio asociado desde el reproductor de audio. Este proceso cambia la propiedad AudioPlayer.IsPlaying de false a true.
buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying") escucha a cambios en la propiedad IsPlaying del reproductor de audio, luego llama a la función onIsPlayingChanged.
La función onIsPlayingChanged utiliza esta información para activar la animación que cambia su apariencia visual en la pantalla.
Para evitar que el jugador reinicie accidentalmente el audio si hiciera clic en el botón de manera rápida, buttonAudioPlayer.Ended escucha a que el reproductor de audio termine de reproducir antes de llamar a la función onIsPlayingChanged nuevamente.

Es importante notar que el evento onIsPlayingChanged solo se dispara cuando cambia de false a true, lo que significa que no se dispara cuando cambia de true a false. Este es un comportamiento intencionado debido a complicaciones con la sincronización de replicar propiedades del servidor al cliente. Debido a esto, el evento Ended se proporciona y se escucha en este ejemplo para cubrir ambos casos.

Realiza una prueba de juego de la experiencia para escuchar el jingle cada vez que presiones el botón en la pantalla.