Agregar audio 2D

*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.

El audio 2D es sonido no direccional que no emite desde ninguna ubicación particular, permaneciendo igual independientemente de 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 el audio 2D desde cualquier lugar al que se giren.

Usando el archivo Gingerbread House - Start .rbxl como punto de partida y Gingerbread House - Complete Audio como referencia, este tutorial te muestra cómo agregar tanto audio 2D en bucle como de un solo uso a tus juegos, incluyendo orientación 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.

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 en el mundo real, como un altavoz o auriculares.
  • Wires transportan flujos de audio de un objeto a otro.

Todos estos objetos de audio trabajan juntos para llevar el sonido desde la reproducción del archivo hasta el hardware de cada jugador. Veamos cómo funciona esto en la práctica usando un ejemplo de un jugador que usa un auricular mientras juega en su computadora portátil:

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

Las siguientes secciones profundizan más y hacen referencia a estos objetos mientras aprendes a reproducir tanto audio 2D en bucle como de un solo uso. A medida que revises estos objetos con las técnicas que se presentarán, podrás predecir con mayor precisión cómo capturar y alimentar el sonido del juego al jugador.

Audio en bucle

El audio 2D en bucle, o audio no direccional que se repite sin interrupciones 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 independientemente de 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 juego 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 ejemplo de la Estación Espacial Peligrosa. 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, se siente tanto ominosa como peligrosa, añadiendo a la atmósfera espeluznante en general.

Sin audio 2D en bucle
Con audio 2D en bucle

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

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

  1. Habilita un oyente predeterminado que esté adjunto a tu personaje jugador.

    1. En la ventana Explorer, selecciona SoundService.
    2. En la ventana Properties, establece DefaultListenerLocation en Character. Cuando ejecutes el juego, el motor crea automáticamente un AudioDeviceOutput bajo SoundService.

  2. En la ventana 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 reproduzca durante todo el juego.
    3. Inserta un objeto Wire para transportar el flujo desde el reproductor de audio hasta el altavoz.

  3. Selecciona el AudioPlayer, luego en la ventana Properties,

    1. Establece AssetID en rbxassetid://1841461968 para reproducir una pista de audio animada.
    2. Habilita Looping para que el audio se repita sin interrupciones.
    3. Establece Volume en 0.2 para reproducir el audio a un volumen bajo para que aún puedas escuchar otras fuentes de audio dentro del juego.

  4. Selecciona el Wire, luego en la ventana Properties,

    1. Establece SourceInstance en tu nuevo AudioPlayer para especificar que deseas que el cable transporte audio desde este reproductor de audio específico.
    2. Establece TargetInstance en tu nuevo AudioDeviceOutput para especificar que deseas que el cable transporte audio a este altavoz específico.

  5. De vuelta en la ventana Explorer, inserta un Script en AudioPlayer, renómbralo a LoopBackgroundMusic, establece su propiedad RunContext en Client, luego pega el siguiente código en el script:

    local audioPlayer = script.Parent

    audioPlayer:Play()

    El script comienza declarando una variable para representar el padre del script AudioPlayer. Luego, el script establece la fuente de audio para que se reproduzca desde el momento en que el jugador se une al juego hasta el momento en que sale del juego.

  6. Prueba el juego para escuchar la música de fondo en bucle.

Audio de un solo uso

El audio 2D de un solo uso, 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 un contexto importante sobre cualquier cosa que no quieras que se pierdan. Usar este tipo de retroalimentación auditiva en tus juegos es esencial porque proporciona una respuesta instantánea y clara a funciones cruciales del juego y acciones del jugador, como iniciar una pelea contra un jefe o perder una cantidad significativa de salud.

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

Retroalimentación de juego

A medida que los jugadores avanzan en tu juego, es importante que reciban retroalimentación auditiva inmediata sobre el estado de cualquier cosa que impacte su juego, 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 uso del template Platformer que se reproduce cuando 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 un 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 recolección de monedas está transmitiendo información de juego más valiosa que el sonido de salto, por lo que el juego lo reproduce a un volumen ligeramente más alto. Sin embargo, no hay estándares o reglas para lograr una gran mezcla, así que ajusta los sonidos en tu juego para reflejar lo que consideres más importante.

Por ejemplo, el ejemplo incluye varios disparadores de audio a lo largo del juego, pero no todos están al mismo nivel de importancia para entender el objetivo principal del juego: recoger galletas de jengibre para abrir la casa de jengibre. Para asegurarse de que los jugadores sean conscientes de lo que necesitan hacer, el ejemplo triplica la amplitud de la retroalimentación auditiva cada vez que el jugador recoge una galleta de jengibre.

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

  1. En la ventana 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 reproduzca durante todo el juego.
    3. Inserta un objeto Wire para transportar el flujo desde el reproductor de audio hasta el altavoz.

  2. Selecciona el AudioPlayer, luego en la ventana Properties,

    1. Establece AssetID en rbxassetid://9113723699 para reproducir una pista de audio de masticar suave.
    2. Establece TimePosition en 0.15 para comenzar la pista de audio más cerca del sonido real de masticar.
    3. Establece Volume en 3 para reproducir el audio a un volumen alto para que escuches el sonido de la galleta de jengibre sobre otras fuentes de audio dentro del juego.

  3. Selecciona el Wire, luego en la ventana Properties,

    1. Establece SourceInstance en tu nuevo AudioPlayer para especificar que deseas que el cable transporte audio desde este reproductor de audio específico.
    2. Establece TargetInstance en tu nuevo AudioDeviceOutput para especificar que deseas que el cable transporte audio a este altavoz específico.

  4. Duplica Gumdrop hasta que tengas tres galletas de jengibre, luego dispersalas por el entorno.

  5. De vuelta en la ventana Explorer, navega a ServerScriptService, luego inserta un Script, renómbralo a GumdropService, establece su propiedad RunContext en 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 galletas de jengibre

       local newGumdropAmount = PlayerData.updateValue(player, GUMDROP_KEY_NAME, updateFunction)

    

       -- Actualizar el leaderboard de galletas de jengibre

       Leaderboard.setStat(player, GUMDROP_KEY_NAME, newGumdropAmount)

     

       -- Verificar si el jugador ha recolectado tres galletas de jengibre

       if newGumdropAmount >= 3 then

          -- Reproducir el audio del evento de la puerta cuando el jugador recolecta tres galletas de jengibre

          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ó una galleta de jengibre

             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

    Este script comienza inicializando los servicios Workspace, Players, ServerStorage, y TweenService para que pueda hacer referencia a sus hijos y funcionalidad. 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 galletas de jengibre que un jugador recolecta en el entorno.

    La función updatePlayerGumdrops del script es en gran parte responsable de actualizar el leaderboard cada vez que un jugador recolecta una galleta de jengibre, y esperar el momento en que recolectan las tres galletas de jengibre para que pueda activar un sonido posicional y una animación 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 la retroalimentación de juego, y toma dos argumentos:

    • otherPart - Una parte que colisiona con la galleta de jengibre.
    • gumdrop - Una parte esférica que representa una galleta de jengibre.

    Cuando cualquier cosa colisiona con la parte de la galleta de jengibre, el script primero verifica si la galleta de jengibre está activa. Si es así, verifica que el objeto en colisión sea un jugador. Si es así, el script entonces:

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

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

  6. Prueba el juego para escuchar el sonido de masticar después de que recojas una galleta de jengibre.

Interacción de la interfaz de usuario

Cuando los jugadores interactúan con los elementos de tu interfaz de usuario (UI), como 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 comprendan 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 los 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 de la plantilla UGC Homestore:

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

Las tres interacciones son esenciales para el flujo principal de usuarios de la plantilla de jugadores navegando, seleccionando y comprando ropa y accesorios para avatares, por lo que es de suma importancia que nadie esté confundido sobre cómo interactuar con la UI. Para preparar a los jugadores para el éxito, la plantilla proporciona tanto retroalimentación visual como auditiva para cada interacción de la UI.

Retroalimentación Visual
Vista predeterminada
Estado en foco
Estado al pasar el cursor
Estado seleccionado

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

  • Reproduce una pista de audio de jingle encantadora.
  • Tintea el botón con un tono de color teal.
  • Mueve el botón ligeramente hacia abajo en la pantalla.

A partir de aquí, puedes conectar esta interacción a todo tipo de acciones útiles en el juego, como abrir un menú o comprar un artículo.

Vista predeterminada
Estado presionado

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

  1. En la ventana 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 reproduzca durante todo el juego.
    3. Inserta un objeto Wire para transportar el flujo desde el reproductor de audio hasta el altavoz.

  2. Selecciona el AudioPlayer, luego en la ventana Properties, establece AssetID en rbxassetid://3422389728 para reproducir una pista de audio de jingle retro.

  3. Selecciona el Wire, luego en la ventana Properties,

    1. Establece SourceInstance en tu nuevo AudioPlayer para especificar que deseas que el cable transporte audio desde este reproductor de audio específico.
    2. Establece TargetInstance en tu nuevo AudioDeviceOutput para especificar que deseas que el cable transporte audio a este altavoz específico.

  4. De vuelta en la ventana 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)

    El script comienza obteniendo:

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

    El script luego 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 lo tiñe con un tono de color teal.
      • El estado no presionado false mueve el botón de regreso a su posición original en la pantalla y elimina el tinte anterior.

    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 la función onIsPlayingChanged y los oyentes de eventos trabajan juntos para el flujo de usuarios de la UI:

    1. buttonImageButton.Activated escucha a un jugador que 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.
    2. buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying") escucha el cambio de la propiedad IsPlaying del reproductor de audio, luego llama a la función onIsPlayingChanged.
    3. La función onIsPlayingChanged utiliza esta información para activar la animación que cambia su apariencia visual en la pantalla.
    4. Para evitar que el jugador reinicie accidentalmente el audio si hace clic en el botón en rápida sucesión, buttonAudioPlayer.Ended escucha cuando el reproductor de audio termina de reproducir antes de llamar nuevamente a la función onIsPlayingChanged.

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

  5. Prueba el juego para escuchar el jingle cada vez que presiones el botón en la pantalla.

©2026 Roblox Corporation. Roblox, el logotipo de Roblox y "Powering Imagination" son algunas de nuestras marcas registradas y no registradas en los Estados Unidos y otros países.
Términos·Privacidad·Accesibilidad·Soporte
Español