Tambahkan audio 2D | Dokumentasi - Pusat Kreator Roblox

Audio 2D adalah suara non-arah yang tidak berasal dari lokasi tertentu, tetap sama terlepas dari posisi atau orientasi pendengar dalam ruang 3D. Ini berarti bahwa saat pemain memindahkan pendengar mereka di sekitar lingkungan, mereka dapat secara konsisten mendengar audio 2D dari mana saja mereka berbalik.

Menggunakan file Gingerbread House - Start .rbxl sebagai tempat awal dan Gingerbread House - Complete Audio sebagai referensi, tutorial ini menunjukkan cara menambahkan audio 2D baik yang berulang maupun satu kali ke pengalaman Anda, termasuk panduan tentang:

Musik latar belakang yang berulang yang diputar segera setelah pemain terhubung ke server.
Memicu audio untuk memberikan umpan balik instan kepada pemain sesuai dengan tujuan permainan mereka.
Mengaktifkan berbagai suara untuk menunjukkan interaksi antarmuka pengguna yang berbeda.

Jika di suatu titik Anda terjebak dalam prosesnya, Anda dapat menggunakan Gingerbread House - Complete Audio sebagai referensi untuk membandingkan kemajuan Anda.

Jika Anda ingin menambahkan audio posisional ke pengalaman Anda, seperti suara latar dalam lingkungan, suara interaksi objek, atau dialog karakter yang tidak dapat dimainkan, lihat Tambahkan audio 3D.

Objek audio 2D

Untuk menciptakan audio non-arah, penting untuk memahami objek audio yang akan Anda gunakan sepanjang tutorial ini. Ada tiga jenis utama objek audio untuk audio 2D:

Objek AudioPlayer memuat dan memutar file audio.
Objek AudioDeviceOutput adalah perangkat keras fisik dalam dunia nyata, seperti speaker atau headphone.
Wires membawa aliran audio dari satu objek ke objek lainnya.

Semua objek audio ini bekerja sama untuk membawa suara dari pemutaran file ke perangkat keras setiap pemain. Mari kita lihat bagaimana ini bekerja dalam praktik menggunakan contoh pemain yang memakai headset saat bermain pengalaman dengan laptop mereka:

Objek AudioPlayer memuat ID aset audio 127645268874265 ke dalam pengalaman untuk suara pembelian mata uang.
Sebuah Wire membawa aliran dari AudioPlayer ke AudioDeviceOutput sehingga aliran keluar dari headset pemain.
Objek AudioDeviceOutput membawa suara ke speaker fisik pemain, atau dalam hal ini, headphone mereka.

Bagian-bagian berikut mengupas lebih dalam dan merujuk pada objek-objek ini saat Anda belajar bagaimana memutar audio 2D baik yang berulang maupun satu kali. Saat Anda meninjau objek-objek ini dengan teknik yang akan datang, Anda dapat lebih akurat memprediksi bagaimana menangkap dan mengalirkan suara dari pengalaman ke pemain.

Audio berulang

Audio 2D berulang, atau audio non-arah yang berulang tanpa henti segera setelah pemain terhubung ke server, adalah teknik desain suara umum untuk memberikan latar suara yang kohesif terlepas dari apa yang dilakukan pemain atau di mana mereka berada dalam ruang 3D. Selain itu, audio 2D berulang memastikan bahwa pengalaman Anda tidak pernah sepenuhnya senyap, yang dapat membingungkan dan mengalihkan perhatian pemain dari tujuan mereka.

Untuk mendemonstrasikan konsep ini, tinjau bagaimana audio 2D berikut secara signifikan meningkatkan kualitas dari contoh Hazardous Space Station. Tanpa musik latar belakang, stasiun luar angkasa terasa kosong dan tidak hidup. Namun, ketika stasiun luar angkasa menyertakan musik latar belakang, stasiun luar angkasa terasa mengancam dan berbahaya, menambah suasana spooky secara keseluruhan.

Tanpa audio 2D berulang

Dengan audio 2D berulang

Untuk membuat loop yang mulus, Anda harus mencocokkan titik akhir dan awal trek audio Anda dengan tepat sehingga pemain tidak dapat mendeteksi repetisinya. Proses ini memerlukan perangkat lunak pengeditan audio pihak ketiga seperti Reaper atau Audacity sehingga Anda dapat menemukan titik nol dan membuat potongan yang cuidadosamente. Untuk instruksi langkah-demi-langkah tentang metode ini, lihat Membuat Audio Loop yang Sempurna.

Audio berulang sangat berguna untuk menentukan bagaimana Anda ingin pemain merasa begitu mereka bergabung dengan pengalaman Anda. Misalnya, contoh ini bertujuan untuk memberikan pemain petualangan ceria di negeri ajaib musim dingin, jadi ia menggunakan trek audio ceria untuk memengaruhi suasana hati mereka secara positif begitu mereka memasuki lingkungan. Untuk melihat seberapa berpengaruh teknik ini, pertimbangkan bagaimana pengalaman pemain akan berubah jika Anda menukar audio berulang dengan trek logam.

Untuk mereproduksi audio 2D berulang dalam file tempat contoh Gingerbread House - Complete Audio:

Aktifkan pendengar default yang terhubung ke karakter pemain Anda.
1. Di jendela Explorer, pilih SoundService.
2. Di jendela Properties, set DefaultListenerLocation ke Character. Ketika Anda menjalankan pengalaman, mesin secara otomatis membuat AudioDeviceOutput di bawah SoundService.
Di jendela Explorer, navigasikan ke SoundService, lalu:
1. Masukkan objek AudioPlayer untuk membuat sumber audio.
2. Masukkan objek AudioDeviceOutput untuk membuat speaker yang diputar sepanjang pengalaman.
3. Masukkan objek Wire untuk mengalirkan aliran dari pemutar audio ke speaker.
Pilih AudioPlayer, kemudian di jendela Properties,
1. Set AssetID ke rbxassetid://1841461968 untuk memutar trek audio ceria.
2. Aktifkan Looping agar audio berulang terus-menerus.
3. Set Volume ke 0.2 agar audio diputar pada volume rendah sehingga Anda masih dapat mendengar sumber audio lainnya dalam pengalaman tersebut.
Pilih Wire, kemudian di jendela Properties,
1. Set SourceInstance ke AudioPlayer baru Anda untuk menunjukkan bahwa Anda ingin kawat membawa audio dari pemutar audio spesifik ini.
2. Set TargetInstance ke AudioDeviceOutput baru Anda untuk menunjukkan bahwa Anda ingin kawat membawa audio ke speaker spesifik ini.
Kembali ke jendela Explorer, masukkan sebuah Script ke dalam AudioPlayer, ubah namanya menjadi LoopBackgroundMusic, atur properti RunContext menjadi Client, lalu tempelkan kode berikut ke dalam skrip:
```
local audioPlayer = script.Parent
audioPlayer:Play()
```
Penjelasan kode
Skrip ini dimulai dengan mendeklarasikan sebuah variabel untuk merepresentasikan induk dari skrip AudioPlayer. Skrip kemudian mengatur sumber audio untuk diputar mulai dari momen pemain bergabung dengan pengalaman hingga momen mereka keluar dari pengalaman.
Uji coba pengalaman untuk mendengar musik latar yang berulang.

Audio satu kali

Audio 2D satu kali, atau audio non-arah yang diputar sekali pada waktu dan posisi tertentu kecuali seorang pemain memicu lagi, memberikan konteks penting kepada pemain tentang hal-hal yang tidak ingin mereka lewatkan. Menggunakan jenis umpan balik auditori ini dalam pengalaman Anda sangat penting karena menyediakan respons yang jelas dan instan terhadap fungsi permainan dan tindakan pemain yang penting, seperti memulai pertarungan bos atau kehilangan sejumlah besar kesehatan.

Bagian berikut memberikan rincian implementasi untuk skenario permainan umum di mana pemain membutuhkan umpan balik non-arah yang tepat waktu, termasuk umpan balik permainan, interaksi elemen UI, dan narasi suara untuk tutorial.

Umpan balik permainan

Saat pemain maju melalui pengalaman Anda, penting bagi mereka untuk menerima umpan balik auditori segera tentang status apa pun yang mempengaruhi permainan mereka, seperti skor, kesehatan, atau kemajuan level. Karena jenis audio ini secara langsung terhubung dengan tujuan pemain, penting bahwa suara-suara ini jelas, terdengar, dan menyampaikan informasi berguna dan akurat.

Untuk mendemonstrasikan konsep ini, mari kita tinjau audio 2D satu kali berikut dari template Platformer yang diputar saat pemain melompat dan mengumpulkan koin:

Suara berdesir lembut diputar segera setelah pemain menekan tombol lompat di perangkat mereka.
Suara ding dan koin yang terguncang diputar segera setelah karakter pemain menyentuh koin.

Kedua suara ini langsung dikenali dalam konteks ruang 3D, dan mereka membantu pemain memahami keberhasilan tindakan mereka tanpa hanya mengandalkan petunjuk visual.

Saat Anda memutar beberapa suara sekaligus, suara tertentu mungkin lebih penting untuk didengarkan oleh pemain dibandingkan suara lainnya. Dalam hal ini, suara pengumpulan koin menyampaikan informasi gameplay yang lebih berharga daripada suara lompatan, jadi pengalaman memutarnya pada volume sedikit lebih tinggi. Namun, tidak ada standar atau aturan untuk mencapai campuran yang hebat, jadi sesuaikan suara dalam pengalaman Anda untuk mencerminkan apa yang Anda rasakan paling penting.

Misalnya, contoh ini mencakup berbagai pemicu audio di seluruh pengalaman, tetapi tidak semuanya memiliki tingkat kepentingan yang sama untuk memahami tujuan utama pengalaman: mengumpulkan gumdrops untuk membuka rumah jahe. Untuk memastikan bahwa pemain menyadari apa yang perlu mereka lakukan, contoh ini memperbesar amplitudo umpan balik auditori setiap kali pemain mengumpulkan gumdrop.

Untuk mereproduksi audio umpan balik status satu kali dalam file tempat contoh Gingerbread House - Complete Audio:

Di jendela Explorer, navigasikan ke Workspace ⟩ Gumdrops ⟩ Gumdrop, lalu:
1. Masukkan objek AudioPlayer untuk membuat sumber audio.
2. Masukkan objek AudioDeviceOutput untuk membuat speaker yang diputar sepanjang pengalaman.
3. Masukkan objek Wire untuk mengalirkan aliran dari pemutar audio ke speaker.
Pilih AudioPlayer, kemudian di jendela Properties,
1. Set AssetID ke rbxassetid://9113723699 untuk memutar trek audio mengunyah yang lembut.
2. Set TimePosition ke 0.15 untuk memulai trek audio lebih dekat ke suara mengunyah yang sebenarnya.
3. Set Volume ke 3 untuk memutar audio pada volume tinggi sehingga Anda mendengar suara gumdrop di atas sumber audio lainnya dalam pengalaman.
Pilih Wire, kemudian di jendela Properties,
1. Set SourceInstance ke AudioPlayer baru Anda untuk menunjukkan bahwa Anda ingin kawat membawa audio dari pemutar audio spesifik ini.
2. Set TargetInstance ke AudioDeviceOutput baru Anda untuk menunjukkan bahwa Anda ingin kawat membawa audio ke speaker spesifik ini.
Duplikat Gumdrop hingga Anda memiliki tiga gumdrops, kemudian sebarkan di seluruh lingkungan.

Kembali di jendela Explorer, navigasikan ke ServerScriptService, lalu masukkan Script, ubah namanya menjadi GumdropService, set properti RunContext menjadi Server, lalu tempelkan kode berikut ke dalam skrip:


-- Menginisialisasi layanan
local Workspace = game:GetService("Workspace")
local Players = game:GetService("Players")
local ServerStorage = game:GetService("ServerStorage")
local TweenService = game:GetService("TweenService")

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

-- Variabel
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)
   -- Memperbarui tabel gumdrop
   local newGumdropAmount = PlayerData.updateValue(player, GUMDROP_KEY_NAME, updateFunction)

   -- Memperbarui leaderboard gumdrop
   Leaderboard.setStat(player, GUMDROP_KEY_NAME, newGumdropAmount)
 
   -- Memeriksa apakah pemain telah mengumpulkan tiga gumdrops
   if newGumdropAmount >= 3 then
      -- Memutar audio acara pintu ketika pemain mengumpulkan tiga gumdrops
      local audioPlayer = Workspace.Door.AudioPlayer
      audioPlayer:Play()
 	
      -- Animasi pintu untuk bergerak ke bawah
      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

-- Mendefinisikan penangan acara
local function onGumdropTouched(otherPart, gumdrop)
   if gumdrop:GetAttribute("Active") then
      local character = otherPart.Parent
      local player = Players:GetPlayerFromCharacter(character)
      if player then
         -- Pemain menyentuh 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

-- Mengatur pendengar acara
for _, gumdrop in gumdrops do
   gumdrop:SetAttribute("Active", true)
   gumdrop.Touched:Connect(function(otherPart)
   onGumdropTouched(otherPart, gumdrop)
   end)
end

Penjelasan kode

Skrip ini menangani fungsionalitas tambahan di luar hanya memicu audio non-posisional, seperti memperbarui leaderboard setiap kali pemain mengumpulkan gumdrop dan memicu suara dan animasi posisional untuk pintu rumah jahe ketika pemain mengumpulkan semua tiga gumdrops. Ini penting untuk gameplay dari contoh ini, tetapi tidak penting untuk memahami cara mengimplementasikan audio 2D, jadi penjelasan ini akan menjaga bagian-bagian itu pada tingkat tinggi.

Skrip ini dimulai dengan menginisialisasi layanan Workspace, Players, ServerStorage, dan TweenService agar dapat merujuk anak-anak dan fungsionalitasnya. Kemudian, ia memerlukan modul Leaderboard dan PlayerData di ServerStorage; modul ini bertanggung jawab untuk membuat dan memperbarui leaderboard di sudut kanan atas layar yang melacak jumlah gumballs yang dikumpulkan pemain di lingkungan.

Fungsi updatePlayerGumdrops skrip ini sebagian besar bertanggung jawab untuk memperbarui leaderboard setiap kali pemain mengumpulkan gumdrop, dan menunggu saat mereka mengumpulkan semua tiga gumdrops sehingga dapat memicu suara dan animasi posisional untuk pintu rumah jahe. Untuk informasi lebih lanjut tentang bagian skrip ini, lihat Tambahkan audio 3D - Umpan balik acara.

Fungsi onGumdropTouched skrip ini adalah di mana sebagian besar pekerjaan terjadi untuk memicu audio 2D untuk umpan balik gameplay, dan mengambil dua argumen:

otherPart - Sebuah bagian yang bertabrakan dengan gumdrop.
gumdrop - Sebuah bagian berbentuk bola yang mewakili gumdrop.

Ketika apa pun bertabrakan dengan bagian gumdrop, skrip memeriksa terlebih dahulu untuk melihat apakah gumdrop tersebut aktif. Jika ya, ia memeriksa untuk memverifikasi bahwa objek yang bertabrakan adalah pemain. Jika ya, skrip kemudian:

Memutar trek audio 2D dari pemutar audio.
Mengubah gumdrop menjadi tidak terlihat.
Menonaktifkan gumdrop sehingga pemain tidak dapat berinteraksi dengan gumdrop yang tidak terlihat.
Memperbarui leaderboard untuk pemain yang menyentuh gumdrop.

Akhirnya, skrip ini mengatur pendengar acara sehingga untuk setiap gumdrop, ia menghubungkan fungsi ke acara Touched, yang memanggil fungsi onGumdropTouched ketika pemain menyentuh gumdrop.

Uji coba pengalaman untuk mendengar suara mengunyah setelah Anda mengumpulkan gumdrop.

Interaksi UI

Saat pemain berinteraksi dengan elemen antarmuka pengguna (UI) Anda, seperti mengarahkan kursor ke checkbox atau memilih tombol pembelian, penting untuk memberikan umpan balik instan sehingga mereka secara intuitif memahami bagaimana mereka berinteraksi dengan UI Anda. Misalnya, banyak desainer mengubah karakteristik visual UI ketika pemain mengaktifkan atau menonaktifkan pengaturan untuk mengomunikasikan status pengaturan tersebut.

Namun, untuk pemain dengan gangguan penglihatan di mana perubahan warna atau animasi lebih sulit dipahami secara mandiri, berguna untuk memberikan berbagai bentuk umpan balik sensorik untuk interaksi UI Anda sehingga tetap dapat diakses dan intuitif bagi sebanyak mungkin pemain. Untuk mengembangkan konsep ini, mari kita pertimbangkan keadaan UI berikut yang penting untuk tombol pembelian template UGC Homestore:

Fokus - Menunjukkan bahwa pemain menyoroti elemen UI untuk dipilih.
Saat mengarahkan kursor - Menunjukkan bahwa pemain mengarahkan kursor ke elemen UI.
Terpilih - Menunjukkan bahwa pemain telah memilih elemen UI melalui input mereka.

Ketiga interaksi ini sangat penting untuk alur pengguna utama template yang melibatkan pemain yang menjelajahi, memilih, dan membeli pakaian serta aksesori avatar, jadi sangat penting bahwa tidak ada yang bingung tentang cara berinteraksi dengan UI. Untuk mempersiapkan pemain untuk sukses, template ini menyediakan umpan balik visual dan auditori untuk setiap interaksi UI.

Umpan balik Visual

Untuk memberikan contoh bagaimana Anda dapat mengonfigurasi berbagai bentuk umpan balik sensorik, contoh ini menyediakan umpan balik visual dan auditori setiap kali pemain menekan tombol peppermint di layar. Saat pemain tidak berinteraksi dengan tombol, tampilannya seperti permen peppermint biasa, tetapi ketika mereka menekan tombol tersebut, contoh ini:

Memutar trek audio jingle yang menyenangkan.
Memberi warna teal pada tombol.
Menggerakkan tombol sedikit ke bawah pada layar.

Dari sini, Anda dapat menghubungkan interaksi ini ke berbagai tindakan gameplay yang berguna, seperti membuka menu atau membeli item.

Untuk mereproduksi audio interaksi UI satu kali dalam file tempat contoh Gingerbread House - Complete Audio:

Di jendela Explorer, navigasikan ke StarterGui ⟩ 2DAudioButton, lalu:
1. Masukkan objek AudioPlayer untuk membuat sumber audio.
2. Masukkan objek AudioDeviceOutput untuk membuat speaker yang diputar sepanjang pengalaman.
3. Masukkan objek Wire untuk mengalirkan aliran dari pemutar audio ke speaker.
Pilih AudioPlayer, kemudian di jendela Properties, set AssetID ke rbxassetid://3422389728 untuk memutar trek audio jingle retro.
Pilih Wire, kemudian di jendela Properties,
1. Set SourceInstance ke AudioPlayer baru Anda untuk menunjukkan bahwa Anda ingin kawat membawa audio dari pemutar audio spesifik ini.
2. Set TargetInstance ke AudioDeviceOutput baru Anda untuk menunjukkan bahwa Anda ingin kawat membawa audio ke speaker spesifik ini.

Kembali di jendela Explorer, masukkan sebuah LocalScript ke dalam 2DAudioButton, ubah namanya menjadi PlayAudioWhenPressed, lalu tempelkan kode berikut ke dalam skrip:


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 = {
   -- Tertekan
   [true] = TweenService:Create(buttonImageButton, tweenInfo, {
      Position = buttonImageButton.Position + UDim2.fromScale(0, .1),
      ImageColor3 = Color3.fromRGB(117, 255, 255),
   }),

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

Penjelasan kode

Skrip ini menangani fungsionalitas tambahan di luar hanya memutar audio 2D untuk interaksi UI, seperti tweening warna dan posisi tombol. Ini penting untuk memberikan berbagai sumber umpan balik sensorik, tetapi persyaratan desain untuk penggunaan Anda mungkin hanya memerlukan umpan balik auditori. Jika Anda hanya ingin memutar audio saat pemain menyentuh elemen UI, Anda dapat menghapus fungsionalitas tween.

Skrip ini dimulai dengan mendapatkan:

TweenService agar dapat menganimasikan elemen UI.
Induk skrip 2DAudioButton objek ScreenGui.
Permen peppermint ImageButton.
Pemutar audio yang relevan dengan trek audio jingle Anda.

Skrip ini kemudian mendefinisikan:

Objek TweenInfo yang menentukan bahwa animasi tombol akan diputar dengan gaya animasi eksponensial.
Dua tween yang mewakili keadaan tombol yang tertekan atau tidak tertekan.
- Keadaan true yang terekan menggerakkan tombol sedikit ke bawah pada layar dan memberinya warna teal.
- Keadaan false yang tidak terekan mengembalikan tombol ke posisi aslinya di layar dan menghapus warna sebelumnya.

Sisa skrip ini adalah di mana sebagian besar kerja terjadi untuk memicu umpan balik interaksi UI 2D, jadi mari kita tinjau bagaimana fungsi onIsPlayingChanged dan pendengar acara bekerja sama untuk alur pengguna UI:

buttonImageButton.Activated mendengarkan pemain yang mengklik tombol, kemudian memanggil fungsi Play() untuk mulai memainkan audio terkait dari pemutar audio. Proses ini mengganti properti AudioPlayer.IsPlaying dari false menjadi true.
buttonAudioPlayer:GetPropertyChangedSignal("IsPlaying") mendengarkan perubahan pada properti IsPlaying pemutar audio, kemudian memanggil fungsi onIsPlayingChanged.
Fungsi onIsPlayingChanged menggunakan informasi ini untuk memicu tween yang mengubah penampilan visual pada layar.
Untuk mencegah pemain secara tidak sengaja memulai ulang audio jika mereka mengklik tombol dengan cepat, buttonAudioPlayer.Ended mendengarkan pemutar audio untuk menyelesaikan pemutaran sebelum memanggil fungsi onIsPlayingChanged lagi.

Penting untuk dicatat bahwa event onIsPlayingChanged hanya dipicu ketika berubah dari false menjadi true, artinya tidak dipicu saat berubah dari true menjadi false. Ini adalah perilaku yang dimaksudkan karena komplikasi dengan waktu mereplikasi properti dari server ke klien. Karena itu, event Ended disediakan dan didengarkan dalam contoh ini untuk mencakup kedua kasus tersebut.

Uji coba pengalaman untuk mendengar jingle setiap kali Anda menekan tombol di layar.