Adicionar áudio 2D | Documentação - Central de Criadores Roblox

Áudio 2D é um som não direcional que não emite de nenhum local específico, permanecendo o mesmo independentemente da posição ou orientação de um ouvinte no espaço 3D. Isso significa que, à medida que os jogadores movem seus ouvintes pelo ambiente, eles podem ouvir consistentemente o áudio 2D de qualquer lugar que olhem.

Usando o arquivo Gingerbread House - Start .rbxl como ponto de partida e Gingerbread House - Complete Audio como referência, este tutorial mostra como adicionar áudio 2D tanto em loop quanto em um único golpe às suas experiências, incluindo orientações sobre:

Música de fundo em loop que toca assim que os jogadores se conectam ao servidor.
Acionar áudio para fornecer feedback instantâneo aos jogadores de acordo com seus objetivos de jogo.
Ativar vários sons para indicar diferentes interações da interface do usuário.

Se em algum momento você ficar preso no processo, pode usar Gingerbread House - Complete Audio como referência para comparar seu progresso.

Se você deseja adicionar áudio posicional à sua experiência, como ruídos ambientes dentro do ambiente, sons de interação com objetos ou diálogos de personagens não jogáveis, veja Adicionar áudio 3D.

Objetos de áudio 2D

Para criar áudio não direcional, é importante entender os objetos de áudio com os quais você trabalhará ao longo deste tutorial. Existem três tipos principais de objetos de áudio para áudio 2D:

O objeto AudioPlayer carrega e reproduz o arquivo de áudio.
O objeto AudioDeviceOutput é um dispositivo de hardware físico no mundo real, como um alto-falante ou fones de ouvido.
Wires transportam fluxos de áudio de um objeto para outro.

Todos esses objetos de áudio trabalham juntos para transportar som da reprodução do arquivo para o hardware de cada jogador. Vamos dar uma olhada em como isso funciona na prática usando um exemplo de um jogador usando um fone de ouvido enquanto joga uma experiência com seu laptop:

O AudioPlayer carrega o ID do ativo de áudio 127645268874265 na experiência para um som de compra de moeda.
Um Wire transporta o fluxo do AudioPlayer para o AudioDeviceOutput para que o fluxo saia do fone de ouvido do jogador.
O objeto AudioDeviceOutput transporta o som para o alto-falante físico do jogador ou, neste caso, seus fones de ouvido.

As seções a seguir se aprofundam e referenciam esses objetos à medida que você aprende a reproduzir tanto áudio 2D em loop quanto em um único golpe. Ao revisar esses objetos com as próximas técnicas, você pode prever com mais precisão como capturar e alimentar o som da experiência para o jogador.

Áudio em loop

Áudio 2D em loop, ou áudio não direcional que se repete sem costura assim que os jogadores se conectam ao servidor, é uma técnica comum de design de som para fornecer um pano de fundo auditivo coeso, independentemente do que os jogadores estão fazendo ou onde estão localizados dentro do espaço 3D. Além disso, o áudio 2D em loop garante que sua experiência nunca esteja completamente silenciosa, o que pode desorientar e distrair os jogadores de seus objetivos.

Para demonstrar esse conceito, veja como o seguinte áudio 2D melhora significativamente a qualidade do Hazardous Space Station amostra. Sem música de fundo, a estação espacial parece vazia e sem vida. No entanto, quando a estação espacial inclui música de fundo, ela se torna tanto ominosa quanto perigosa, aumentando a atmosfera assustadora geral.

Sem áudio 2D em loop

Com áudio 2D em loop

Para criar um loop contínuo, você deve combinar os pontos de fim e início de sua faixa de áudio com precisão para que os jogadores não consigam detectar sua repetição. Este processo requer software de edição de áudio de terceiros, como Reaper ou Audacity, para que você possa encontrar um cruzamento zero e fazer um corte com tempo cuidadoso. Para instruções passo a passo sobre esses métodos, veja Criando Loops de Áudio Perfeitos.

O áudio em loop é particularmente útil para estabelecer como você deseja que os jogadores se sintam assim que entrarem em sua experiência. Por exemplo, a amostra tem como objetivo proporcionar aos jogadores uma aventura alegre em um país das maravilhas de inverno, então usa uma faixa de áudio animada para influenciar positivamente seu humor no momento em que entram no ambiente. Para ver quão influente essa técnica pode ser, considere como a experiência do jogador mudaria se você substituísse o áudio em loop por uma faixa de metal.

Para recriar o áudio 2D em loop na amostra Gingerbread House - Complete Audio arquivo da colocação:

Ative um ouvinte padrão que esteja anexado ao seu personagem jogador.
1. Na janela Explorer, selecione o SoundService.
2. Na janela Properties, defina DefaultListenerLocation como Character. Quando você executar a experiência, o mecanismo criará automaticamente um AudioDeviceOutput sob SoundService.
Na janela Explorer, navegue até SoundService, então:
1. Insira um objeto AudioPlayer para criar uma fonte de áudio.
2. Insira um objeto AudioDeviceOutput para criar um alto-falante que toca durante toda a experiência.
3. Insira um objeto Wire para transportar o fluxo da fonte de áudio para o alto-falante.
Selecione o AudioPlayer, então na janela Properties,
1. Defina AssetID como rbxassetid://1841461968 para tocar uma faixa de áudio animada.
2. Ative Looping para que o áudio se repita sem costura.
3. Defina Volume como 0.2 para tocar o áudio em um volume baixo, de modo que você ainda possa ouvir as outras fontes de áudio na experiência.
Selecione o Wire, então na janela Properties,
1. Defina SourceInstance como seu novo AudioPlayer para especificar que você deseja que o fio transporte áudio deste player específico.
2. Defina TargetInstance como seu novo AudioDeviceOutput para especificar que você deseja que o fio transporte áudio para este alto-falante específico.
De volta à janela Explorer, insira um Script no AudioPlayer, renomeie-o para LoopBackgroundMusic, defina sua propriedade RunContext como Client e cole o seguinte código no script:
```
local audioPlayer = script.Parent
audioPlayer:Play()
```
Explicação do código
O script começa declarando uma variável para representar o pai do script AudioPlayer. O script então configura a fonte de áudio para tocar do momento em que o jogador entra na experiência até o momento em que eles saem da experiência.
Faça um teste na experiência para ouvir a música de fundo em loop.

Áudio de um único golpe

Áudio 2D de um único golpe, ou áudio não direcional que toca uma vez em um horário e posição específicos, a menos que um jogador o acione novamente, fornece aos jogadores um contexto importante sobre qualquer coisa que você não deseja que eles percam. Usar esse tipo de feedback auditivo em suas experiências é essencial porque fornece uma resposta instantânea e clara a funções de jogo cruciais e ações do jogador, como iniciar uma luta contra um chefe ou perder uma quantidade significativa de saúde.

As seções a seguir fornecem detalhes de implementação para cenários comuns de jogo nos quais os jogadores precisam de feedback não direcional e oportuno, incluindo feedback de gameplay, interações de elementos da UI e narração de voz para tutoriais.

Feedback de gameplay

À medida que os jogadores progridem em sua experiência, é importante que eles recebam feedback auditivo imediato sobre o status de qualquer coisa que impacte seu gameplay, como sua pontuação, saúde ou progresso no nível. Como esse tipo de áudio está diretamente conectado aos objetivos do jogador, é importante que esses sons sejam claros, audíveis e transmitam informações úteis e precisas.

Para demonstrar esse conceito, revisemos o seguinte áudio 2D de um único golpe do template Platformer que toca à medida que os jogadores pulam e coletam moedas:

Um som de whoosh arejado toca assim que o jogador pressiona a tecla de pulo em seu dispositivo.
Um ding agudo e um som de moedas se mexendo tocam assim que o personagem do jogador toca em uma moeda.

Ambos esses sons são instantaneamente reconhecíveis dentro do contexto do espaço 3D e ajudam os jogadores a entender o sucesso de suas ações sem depender apenas de pistas visuais.

Quando você toca vários sons ao mesmo tempo, certos sons podem ser mais importantes para os jogadores ouvirem do que outros. Neste caso, o som de coleta de moedas está transmitindo informações de gameplay mais valiosas do que o som de pulo, portanto, a experiência o toca em um volume ligeiramente mais alto. No entanto, não existem padrões ou regras para alcançar uma boa mistura, então ajuste os sons na sua experiência para refletir o que você considera mais importante.

Por exemplo, a amostra inclui vários gatilhos de áudio ao longo da experiência, mas eles não estão todos no mesmo nível de importância para entender o objetivo principal da experiência: coletar gomas de gengibre para abrir a casa de gengibre. Para garantir que os jogadores estejam cientes do que precisam fazer, a amostra triplica a amplitude do feedback auditivo sempre que o jogador coleta uma goma de gengibre.

Para recriar o feedback de áudio de estado de um único golpe na amostra Gingerbread House - Complete Audio arquivo da colocação:

Na janela Explorer, navegue até Workspace ⟩ Gumdrops ⟩ Gumdrop, então:
1. Insira um objeto AudioPlayer para criar uma fonte de áudio.
2. Insira um objeto AudioDeviceOutput para criar um alto-falante que toca durante toda a experiência.
3. Insira um objeto Wire para transportar o fluxo da fonte de áudio para o alto-falante.
Selecione o AudioPlayer, então na janela Properties,
1. Defina AssetID como rbxassetid://9113723699 para tocar uma faixa de áudio de mastigação suave.
2. Defina TimePosition como 0.15 para iniciar a faixa de áudio mais perto do som real de mastigação.
3. Defina Volume como 3 para tocar o áudio em um volume alto para que você ouça o som da goma de gengibre em relação a outras fontes de áudio na experiência.
Selecione o Wire, então na janela Properties,
1. Defina SourceInstance como seu novo AudioPlayer para especificar que você deseja que o fio transporte áudio deste player específico.
2. Defina TargetInstance como seu novo AudioDeviceOutput para especificar que você deseja que o fio transporte áudio para este alto-falante específico.
Duplique Gumdrop até que você tenha três gomas de gengibre e espalhe-as pelo ambiente.

De volta à janela Explorer, navegue até ServerScriptService, então insira um Script, renomeie-o para GumdropService, defina sua propriedade RunContext como Server e cole o seguinte código no script:


-- Inicializando serviços
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)

-- Variáveis
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)
   -- Atualiza a tabela de gomas de gengibre
   local newGumdropAmount = PlayerData.updateValue(player, GUMDROP_KEY_NAME, updateFunction)

   -- Atualiza o leaderboard de gomas de gengibre
   Leaderboard.setStat(player, GUMDROP_KEY_NAME, newGumdropAmount)
 
   -- Verifica se o jogador coletou três gomas de gengibre
   if newGumdropAmount >= 3 then
      -- Toca o áudio do evento da porta quando o jogador coleta três gomas de gengibre
      local audioPlayer = Workspace.Door.AudioPlayer
      audioPlayer:Play()
 	
      -- Anima a porta para se mover para baixo
      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

-- Definindo o manipulador de eventos
local function onGumdropTouched(otherPart, gumdrop)
   if gumdrop:GetAttribute("Active") then
      local character = otherPart.Parent
      local player = Players:GetPlayerFromCharacter(character)
      if player then
         -- O jogador tocou uma goma de gengibre
         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 ouvintes de eventos
for _, gumdrop in gumdrops do
   gumdrop:SetAttribute("Active", true)
   gumdrop.Touched:Connect(function(otherPart)
   onGumdropTouched(otherPart, gumdrop)
   end)
end

Explicação do código

Este script lida com funcionalidades adicionais fora do acionamento do áudio não posicional, como atualizar o leaderboard toda vez que um jogador coleta uma goma de gengibre e acionar um som posicional e uma animação para a porta da casa de gengibre quando um jogador coleta todas as três gomas de gengibre. Isso é importante para a jogabilidade da amostra, mas não é essencial para entender como implementar áudio 2D, então esta explicação manterá essas seções em um nível alto.

O script começa inicializando os serviços Workspace, Players, ServerStorage e TweenService para que ele possa referenciar seus filhos e funcionalidades. Em seguida, ele requer os módulos Leaderboard e PlayerData em ServerStorage; esses módulos são responsáveis por criar e atualizar um leaderboard no canto superior direito da tela que rastreia a quantidade de gomas de gengibre que um jogador coleta no ambiente.

A função updatePlayerGumdrops do script é amplamente responsável por atualizar o leaderboard toda vez que um jogador coleta uma goma de gengibre e esperar o momento em que eles coletam todas as três gomas de gengibre para que possa acionar um som posicional e uma animação para a porta da casa de gengibre. Para mais informações sobre essa parte do script, veja Adicionar áudio 3D - Feedback de eventos.

A função onGumdropTouched do script é onde ocorre a maior parte do trabalho para acionar o áudio 2D para feedback de gameplay, e ela leva dois argumentos:

otherPart - Uma parte que colide com a goma de gengibre.
gumdrop - Uma parte esférica que representa uma goma de gengibre.

Quando qualquer coisa colide com a parte da goma de gengibre, o script primeiro verifica se a goma de gengibre está ativa. Se sim, ele verifica se o objeto em colisão é um jogador. Se for, o script então:

Toca a faixa de áudio 2D do player de áudio.
Torna a goma de gengibre invisível.
Desativa a goma de gengibre para que os jogadores não possam interagir com a goma de gengibre invisível.
Atualiza o leaderboard para o jogador que tocou a goma de gengibre.

Finalmente, o script configura ouvintes de eventos para que, para cada goma de gengibre, ele conecte uma função ao evento Touched, que chama a função onGumdropTouched quando um jogador toca a goma de gengibre.

Faça um teste na experiência para ouvir o som de mastigação depois de coletar uma goma de gengibre.

Interação com a UI

Quando jogadores interagem com os elementos da sua interface do usuário (UI), como passar o mouse sobre uma caixa de seleção ou selecionar um botão de compra, é importante fornecer feedback instantâneo para que eles entendam intuitivamente como estão interagindo com sua UI. Por exemplo, muitos designers mudam as características visuais da UI quando os jogadores ativam ou desativam configurações para comunicar o status da configuração.

No entanto, para jogadores com deficiências visuais, em que mudanças de cor ou animações são mais difíceis de serem decifradas por conta própria, é útil fornecer múltiplas formas de feedback sensorial para suas interações de UI, para que elas permaneçam acessíveis e intuitivas para o maior número possível de jogadores. Para expandir esse conceito, consideremos os seguintes estados de UI que são importantes para os botões de compra do template UGC Homestore:

Em foco - Indica que o jogador está destacando um elemento da UI em preparação para selecioná-lo.
Ao passar o mouse - Indica que o jogador está passando o mouse sobre um elemento da UI com seu cursor.
Selecionado - Indica que o jogador selecionou um elemento da UI através de sua entrada.

Todas essas três interações são essenciais para o fluxo principal de usuários do template de jogadores que navegam, selecionam e compram roupas e acessórios para avatares, portanto, é de suma importância que ninguém fique confuso sobre como interagir com a UI. Para preparar os jogadores para o sucesso, o template fornece tanto feedback visual quanto auditivo para cada interação de UI.

Feedback Visual

Para dar um exemplo de como você pode configurar múltiplas formas de feedback sensorial, a amostra fornece tanto feedback visual quanto auditivo sempre que jogadores pressionam o botão de hortelã na tela. Quando os jogadores não estão interagindo com o botão, ele aparece como um típico doce de hortelã, mas quando eles pressionam o botão, a amostra:

Toca uma faixa de áudio de jingle encantadora.
Tinge o botão com um tom de verde água.
Move o botão ligeiramente para baixo na tela.

A partir daqui, você pode conectar essa interação a todo tipo de ações de gameplay úteis, como abrir um menu ou comprar um item.

Para recriar o áudio de interação de um único golpe na UI na amostra Gingerbread House - Complete Audio arquivo da colocação:

Na janela Explorer, navegue até StarterGui ⟩ 2DAudioButton, então:
1. Insira um objeto AudioPlayer para criar uma fonte de áudio.
2. Insira um objeto AudioDeviceOutput para criar um alto-falante que toca durante toda a experiência.
3. Insira um objeto Wire para transportar o fluxo da fonte de áudio para o alto-falante.
Selecione o AudioPlayer, então na janela Properties, defina AssetID como rbxassetid://3422389728 para tocar uma faixa de áudio de jingle retrô.
Selecione o Wire, então na janela Properties,
1. Defina SourceInstance como seu novo AudioPlayer para especificar que você deseja que o fio transporte áudio deste player específico.
2. Defina TargetInstance como seu novo AudioDeviceOutput para especificar que você deseja que o fio transporte áudio para este alto-falante específico.

De volta à janela Explorer, insira um LocalScript no 2DAudioButton, renomeie-o para PlayAudioWhenPressed, e cole o seguinte código no 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 = {
   -- Pressionado
   [true] = TweenService:Create(buttonImageButton, tweenInfo, {
      Position = buttonImageButton.Position + UDim2.fromScale(0, .1),
      ImageColor3 = Color3.fromRGB(117, 255, 255),
   }),

   -- Padrão
   [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)

Explicação do código

Este script lida com funcionalidades adicionais além de apenas tocar áudio 2D para interações de UI, como animar a cor e a posição do botão. Isso é importante para fornecer múltiplas fontes de feedback sensorial, mas os requisitos de design para seu caso de uso podem exigir apenas feedback auditivo. Se você apenas deseja tocar áudio quando os jogadores tocarem em elementos da UI, pode remover a funcionalidade de animação.

O script começa obtendo:

O TweenService para que possa animar elementos da UI.
O ScreenGui objeto pai do script 2DAudioButton.
O ImageButton doce de hortelã.
O player de áudio relevante com sua faixa de áudio de jingle.

O script então define:

Um objeto TweenInfo que especifica que a animação do botão será reproduzida com um estilo de animação exponencial.
Dois tweens que representam o estado pressionado ou não pressionado do botão.
- O estado true pressionado move o botão ligeiramente para baixo na tela e o tinge com um tom de verde água.
- O estado false não pressionado move o botão de volta para sua posição original na tela e remove a coloração anterior.

O restante do script é onde ocorre a maior parte do trabalho para acionar feedback de interação de UI 2D, então vamos revisar como a função onIsPlayingChanged e ouvintes de eventos trabalham juntos para o fluxo de usuários da UI:

buttonImageButton.Activated ouve um jogador clicar no botão, então chama a função Play() para começar a tocar o áudio associado do player de áudio. Esse processo altera a propriedade AudioPlayer.IsPlaying de false para true.
buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying") ouve a propriedade IsPlaying do player de áudio mudar, então chama a função onIsPlayingChanged.
A função onIsPlayingChanged usa essa informação para acionar a animação que muda a aparência visual na tela.
Para evitar que o jogador reinicie acidentalmente o áudio se ele clicar no botão em rápida sucessão, buttonAudioPlayer.Ended ouve o player de áudio terminar de tocar antes de chamar novamente a função onIsPlayingChanged.

É importante notar que o evento onIsPlayingChanged só é acionado quando muda de false para true, significando que não aciona quando muda de true para false. Essa é uma comportamento intencional devido a complicações com o tempo de replicação de propriedades do servidor para o cliente. Por causa disso, o evento Ended é fornecido e ouvido neste exemplo para cobrir ambos os casos.

Faça um teste na experiência para ouvir o jingle toda vez que pressionar o botão na tela.