BUAT DUNIAMU
Obrolan

Menggunakan Fungsi Obrolan Suara

25min

Paket versi prapengguna Zepeto.Voice.Chat memungkinkan obrolan suara di Dunia.



Instal ZEPETO.Voice.Chat dan atur mode

1) Instal Window → Package Manager → ZEPETO.Voice.Chat.

  • Fitur ini tersedia di Dunia di mana elemen multiplayer diterapkan.
  • Pengujian hanya tersedia di pengujian seluler, bukan pengujian editor.
  • Karena kebijakan iOS, volume perangkat tidak turun menjadi nol ketika mikrofon dihidupkan di dunia dengan obrolan suara yang diaktifkan. Volume perangkat akan turun menjadi nol ketika mikrofon dimatikan.



Document image


2) Klik tombol [▼] di menu tengah layar proyek Unity yang sedang dikembangkan. Klik tombol [Buka Pengaturan Dunia] di menu pop-up yang muncul.

Document image




3) Jika paket ZEPETO.Voice.Chat terinstal dengan benar, Anda akan melihat opsi Mode Obrolan Suara ditambahkan.

Document image




4) Dalam Mode Obrolan Suara, silakan atur mode yang diinginkan.

  • Dasar: Gunakan fitur obrolan suara yang disediakan secara default.
  • Skrip: Gunakan fitur obrolan suara dengan menerapkan API obrolan suara.
    • Anda dapat memproses akses masuk/keluar ruangan untuk obrolan suara saat runtime.
    • Terapkan obrolan suara untuk tim yang berbeda (misalnya, obrolan suara tim merah dan obrolan suara tim biru)
    • Mendeteksi pengguna yang sedang berbicara saat ini



Mode Dasar: Menggunakan Fitur Obrolan Suara

Sebuah dunia dengan obrolan suara Mode Dasar terlihat seperti ini.

Anda juga dapat membuat obrolan suara yang lebih menghibur menggunakan fitur modifikasi suara.

Obrolan suara secara otomatis diaktifkan saat memasuki Dunia dengan fungsi obrolan suara.

👍 Saat pertama kali Anda menggunakan fitur obrolan suara di ZEPETO, pop-up mengenai akses mikrofon akan muncul. Anda harus mengizinkan akses untuk menggunakan fungsi obrolan suara.

Ketika Anda mengaktifkan fitur obrolan suara, sebuah tombol secara otomatis muncul di UI
Ketika Anda mengaktifkan fitur obrolan suara, sebuah tombol secara otomatis muncul di UI

Anda dapat menggunakannya dengan menyentuh tombol obrolan suara
Anda dapat menggunakannya dengan menyentuh tombol obrolan suara




  • Di aplikasi ZEPETO 3.26.000 dan yang lebih baru, ikon pembicara obrolan suara tidak muncul.
  • Jika Anda ingin membuat ikon pidato muncul, silakan ganti ke Mode Skrip dan ikuti panduan untuk menulis kode Anda sendiri.



Mode Skrip : Menggunakan API VoiceChat

Mode Skrip memungkinkan obrolan suara di saluran yang dipisahkan oleh tim.

Silakan merujuk ke deskripsi fungsi dan contoh di bawah ini untuk mengimplementasikan fitur tersebut.

API

Deskripsi

OnInitializedEvent

API obrolan suara tersedia setelah peristiwa True terjadi dalam peristiwa inisialisasi. Jika peristiwa ini True, obrolan suara tersedia, dan jika False, obrolan suara tidak tersedia.

EnterRoom(RoomProperty roomProperty)

Fungsi untuk masuk ke ruang obrolan suara - Setelah berhasil masuk ke ruang obrolan suara, tombol obrolan suara akan muncul

ExitRoom()

Fungsi untuk meninggalkan ruang obrolan suara

OnRoomConnectedEvent

Sebuah peristiwa untuk memeriksa status masuk ke ruang obrolan suara. Jika peristiwa ini benar, pengguna telah masuk ke ruang obrolan suara; jika salah, pengguna telah meninggalkan ruang obrolan suara.

OnSpeechDetectedEvent<string, boolean>

Peristiwa untuk mendeteksi pengguna yang sedang berbicara dalam obrolan suara. - string adalah userId dari pengguna yang berbicara - boolean adalah true ketika ucapan dimulai, false ketika ucapan berakhir

ChangeTeamID(number teamid)

Fungsi untuk mengubah TeamId yang digunakan dalam ruang obrolan suara - Hanya dapat diatur ke nilai int 1 atau lebih

Kelas RoomProperty

API

Deskripsi

SetAudioMode

Mode audio yang digunakan dalam obrolan suara - AudioMode.Omnidirectional: Mode obrolan suara tanpa pengurangan suara berdasarkan jarak (Anda dapat menggunakannya dengan atau tanpa karakter ZEPETO) - AudioMode.Directional: Mode obrolan suara dengan pengurangan suara berdasarkan jarak (Karakter ZEPETO harus ada di Scene, karena mode ini bekerja berdasarkan lokasi karakter ZEPETO)

SetTeamID

TeamId yang digunakan dalam obrolan suara untuk mengaktifkan obrolan suara antara pengguna dengan TeamId yang sama. - Hanya dapat diatur ke nilai int 1 atau lebih

Contoh implementasi obrolan suara spesifik tim

Berikut adalah beberapa contoh kode untuk mencoba API Obrolan Suara.

1) Tambahkan tombol dan catat teks ke kanvas seperti yang ditunjukkan pada gambar di bawah untuk masuk ke saluran tim Voice Chat dan menampilkan log status.

  • Tombol
    • Button_blueTeam : Tombol masuk voice chat tim biru
    • Button_redTeam : Tombol masuk voice chat tim merah
    • Button_exit : Tombol keluar dari voice chat
  • Teks
    • Text_log : Teks untuk menampilkan log chat
    • Text_team : Teks untuk menampilkan daftar anggota saluran tim voice chat yang sama
    • Text_currentSpeaking : Teks untuk menampilkan UserId yang sedang berbicara di voice chat.
Document image




2) Buat Proyek > Buat > ZEPETO > TypeScript dan ganti namanya menjadi VoiceChatTest.

3) Tulis skrip contoh seperti yang ditunjukkan di bawah ini.

VoiceChatTest




  • Deskripsi Kode
    • Ketika skrip dijalankan, itu akan mendaftarkan sebuah acara pada setiap tombol di fungsi Start() dan mendaftarkan acara OnInitialized, OnRoomConnected, dan OnSpeechDetected pada VoiceChatController.
    • Ketika tombol Tim Biru atau tombol Tim Merah diklik, fungsi EnterVoiceChatRoom() dieksekusi dan pengguna masuk ke ruang obrolan suara dengan memasukkan RoomProperty yang ditentukan. Properti ruangan dalam contoh adalah sebagai berikut.
      • roomProperty.SetAudioMode : AudioMode.Omnidirectional. Mode audio Omnidirectional adalah mode di mana volume terdengar sama terlepas dari posisi pemain. Sebaliknya, mode Directional adalah mode suara 3D, yang berarti bahwa volume akan terdengar berbeda tergantung pada posisi karakter, jadi semakin jauh karakter, semakin rendah volumenya.
      • roomProperty.SetTeamID : Saluran 2 untuk Tim Biru, Saluran 3 untuk Tim Merah. SetTeamID berfungsi seperti saluran dalam Obrolan Suara. Sebuah tim yang masuk ke saluran 2 hanya dapat obrolan suara dengan pemain di saluran 2, dan sebuah tim yang masuk ke saluran 3 hanya dapat obrolan suara dengan pemain di saluran 3.
    • ExitVoiceChatRoom() akan keluar dari saluran tim obrolan suara saat ini.
    • OnSpeechDetected() akan mengeluarkan ID pemain yang saat ini menggunakan obrolan suara di saluran tim ke teks log.



4) Setelah menyelesaikan skrip, tetapkan tombol dan teks yang dibuat di Langkah 1 di inspector.

Document image




5) Jalankan tes di ponsel melalui kode QR atau tautan tes, dan Anda dapat melihat bahwa tombol aktivasi obrolan suara dibuat ketika tombol Masuk Tim ditekan, dan setiap kali seorang pemain berbicara, log menunjukkan pemain mana yang sedang dalam obrolan suara, seperti yang ditunjukkan di layar berikut.

Document image




Contoh menampilkan gambar gelembung ucapan obrolan suara

Di Aplikasi ZEPETO versi 3.26.000 dan yang lebih baru, ikon ucapan obrolan suara tidak muncul. Jika Anda ingin menangani ikon ucapan agar muncul, silakan ikuti panduan dan tulis kode Anda sendiri.

1) Untuk menampilkan gelembung ucapan di atas kepala karakter ketika pemain berada dalam obrolan suara, Anda perlu membuat prefab yang menggunakan gambar gelembung ucapan. Impor gambar PNG gelembung ucapan yang ingin Anda gunakan seperti yang ditunjukkan di bawah ini dan ubah Tipe Teksturnya menjadi Sprite.

Document image




2) Proyek > Buat > Prefab dan ganti namanya menjadi ChatBubble.

Document image




3) Klik dua kali prefab ChatBubble untuk masuk ke mode pengeditan prefab. Pilih prefab ChatBubble dan pilih Transform > Posisi > Ubah nilai Y menjadi 0.35.

Document image




4) Buat Canvas di dalam objek prefab.

  • Klik dua kali pada prefab ChatBubble untuk masuk ke mode Edit Prefab, dan kemudian tambahkan Hierarchy > UI > Canvas.
  • Ubah nilai komponen RectTransform dari Canvas menjadi sebagai berikut
    • PosX: 0 , posY: 0
    • Lebar: 100, tinggi: 100
    • SkalaX: 0.005, SkalaY: 0.005, SkalaZ: 0.005
  • Ubah RenderMove dari komponen Canvas menjadi World Space.
Document image




5) Buat gambar gelembung ucapan di dalam Canvas.

  • Tambahkan Hierarchy > UI > Image sebagai anak dari Canvas, dan ganti namanya menjadi ChatBubbleImage.
  • Ubah nilai komponen RectTransform dari ChatBubbleImage menjadi sebagai berikut
    • Lebar 42, Tinggi:42
  • Daftarkan Sprite Gambar yang Anda impor di langkah 1 sebagai Gambar Sumber di Komponen Gambar.
Document image




👍 TIP

  • Anda juga dapat menganimasi sprite gambar gelembung bicara.
  • Anda juga dapat menggunakan gambar gelembung terpisah untuk tim yang berbeda.



6) Proyek > Buat > ZEPETO > Buat TypeScript dan ganti namanya menjadi VoiceChatBubbleController.

7) Tulis skrip contoh seperti yang ditunjukkan di bawah ini.

VoiceChatBubbleController




  • Deskripsi Kode
    • Ketika skrip dijalankan, itu akan mendaftarkan peristiwa pada setiap tombol di fungsi Start() dan peristiwa OnInitialized, OnRoomConnected, dan OnSpeechDetected di VoiceChatController.
    • Setelah OnInitialized(), tombol Voice Chat akan ditampilkan di layar pemain ketika mereka memasuki dunia, dan ketika mereka menekan tombol, EnterVoiceChatRoom() akan dijalankan untuk masuk ke ruang Voice Chat.
    • Setiap kali pemain mengaktifkan VoiceChat dan berbicara, OnSpeechDetected() dijalankan, dan jika speechDetected adalah true, objek BubbleChat diaktifkan, dan jika false, dinonaktifkan.
    • Pertama kali fungsi OnSpeechDetected() diaktifkan, CreateVoiceBubble() akan menginstansiasi GameObject voiceChatPrefab untuk mengapung di atas kepala pemain dan mendaftarkannya sebagai data peta di _voiceBubbleMap.
    • Kami menggunakan LateUpdate() untuk memperbarui rotasi gelembung obrolan suara setiap frame agar sesuai dengan CameraParent dari dunia ZEPETO. Ini memastikan bahwa gambar gelembung ucapan selalu menghadap kamera. Pertama, memeriksa apakah _voiceBubbleMap kosong, jika tidak, memperbarui rotasi gambar gelembung ucapan prefab.



8) Setelah selesai menulis skrip, tetapkan entri VoiceChatPrefab di inspector sebagai prefab gelembung ucapan yang Anda buat di LANGKAH 1.

Document image




9) Jalankan di perangkat mobile melalui kode QR atau tautan uji dan Anda harus melihat gambar gelembung ucapan muncul di atas kepala karakter setiap kali pemain menggunakan obrolan suara.



Modulasi Suara

Mulai dengan versi Voice Chat 0.2.1-preview, Anda dapat memodulasi suara Voice Chat dalam Mode Skrip.





Cobalah modifikasi suara menggunakan panduan API dan kode contoh.

TipeSuara (enum)

Nilai

Deskripsi

Tipe00

0

Asli

Tipe01

1

Chipmunk

Tipe02

2

Paman

Tipe03

3

Echo

Tipe04

4

Suara Dalam

Tipe05

5

Robot

Tipe06

6

Dialek

Tipe07

7

Megafon

Tipe08

8

Binatang

Tipe09

9

Mesin

Tipe10

10

Arus Kuat

Tipe11

11

Anak

Tipe12

12

Landak



Berikut adalah contoh skrip modifikasi suara.

JS

  • Deskripsi Kode:
    • Menambahkan pendengar onClick untuk setiap tombol untuk mengatur jenis modifikasi suara yang berbeda.
      • Elemen dengan indeks yang sama di dalam tombol array dan jenisSuara array dicocokkan.
    • Setelah memasuki dunia, VoiceChatController diinisialisasi, dan koneksi ruangan dibuat secara otomatis.
    • Jenis modifikasi suara awal diatur ke Tipe00, dan loopback diaktifkan untuk mendengar suara Anda sendiri.
      • Perhatikan bahwa untuk pemanggilan SetVoiceType dan EnableLoopback, koneksi ruangan diperlukan. Oleh karena itu, pengaturan awal ditangani dalam pendengar dariOnRoomConnectedEvent.



Document image




Ubah lokasi pemutaran audio pemain lokal



Anda dapat mengubah lokasi obrolan suara pemain lokal menggunakan VoiceChatController.SetLocalPlayerTransform().

Menggunakan ini, Anda dapat membuat berbagai skenario dengan mengatur lokasi Anda ke lokasi ruang atau objek tertentu saat berbicara di obrolan suara.



📘 tips Transform Obrolan Suara terhubung dengan Transform karakter ZEPETO pemain lokal.

Oleh karena itu, jika karakter ZEPETO pemain lokal belum dibuat di dunia, suara Anda mungkin tidak ditransmisikan.

Dalam hal ini, Anda dapat menggunakan obrolan suara dengan mengatur lokasi pemutaran suara di dalam adegan saat ini menggunakan SetLocalPlayerTransform().



API

Deskripsi

public static SetLocalPlayerTransform($transform: UnityEngine.Transform):void

Fungsi untuk mengubah posisi pemutaran audio pemain lokal



❗️ Peringatan SetLocalPlayerTransform() harus dipanggil setelah VoiceChatController.OnInitializedEvent(true) saat obrolan suara diinisialisasi.



1) Di bawah ini adalah contoh skrip untuk fungsi perubahan posisi suara.

VoiceTransformSample


Deskripsi Kode

  • Ketika adegan dimulai, buat objek permainan bernama voiceTransformObject di dalam Start() fungsi dan daftarkan Transform di voiceTransform.
  • Ketika pendengar voice chat OnInitialized dipanggil, silakan terapkan pengaturan berikut:
  • Atur voice chat ke mode audio spasial 3D melalui SetAudioMode(AudioMode.Directional).
  • Atur posisi voice chat pemain lokal ke voiceTransform melalui VoiceChatController.SetLocalPlayerTransform().
  • buttonCloserTransform mengatur posisi voiceTransform ke asal (0, 0, 0) ketika tombol diklik.
  • buttonFartherTransform Mengatur posisi voiceTransform ke (10, 0, 0) ketika tombol diklik.



2) Daftarkan tombol di Canvas dalam adegan ke buttonCloserTransform dan buttonFartherTransform dari komponen VoiceTransformSample.

Document image




3) Jika Anda menjalankannya di ponsel Anda menggunakan kode QR atau tautan uji, Anda dapat memeriksa hal-hal berikut.

  • Ketika Anda menekan tombol Closer, suara Anda akan terdengar lebih dekat dengan orang lain.
  • Ketika Anda menekan tombol Farther, suara Anda akan terdengar jauh dari orang lain.