Using the Voice Chat Function
Zepeto.Voice.Chat preview version package enables voice chat in the World.
ďťż
1) Install Window â Package Manager â ZEPETO.Voice.Chat.
- This feature is available in a World where multiplayer elements are implemented.
- Testing is only available in the mobile test, not editor test.
- Due to iOS policy, the device volume does not drop to zero when the microphone is turned on in worlds with voice chat enabled. The device volume will drop to zero when the microphone is turned off.
ďťż
2) Click the [âź] button in the middle menu of the Unity project screen that's under development. Click the [Open World Settings] button in the pop-up menu that appears.
ďťż
3) If the ZEPETO.Voice.Chat package is installed correctly, you will see the Voice Chat Mode option added.
ďťż
4) In Voice Chat Mode, please set the desired mode.
- Basic: Use the voice chat feature provided by default.
- Script: Use the voice chat feature by implementing the voice chat API.
- You can process room access entry/exit for voice chat at runtime.
- Implement voice chat for distinct teams (e.g., red team voice chat and blue team voice chat)
- Detecting current speaking user
ďťż
A world with Basic Mode voice chat looks like this.
You can also create more entertaining voice chats using the voice modulation feature.
Voice chat is automatically enabled when entering the World with voice chat function.
đ The first time you use the voice chat feature in ZEPETO, a pop-up regarding microphone access will appear. You must allow access in order to use the voice chat function.
ďťż
- In ZEPETO app 3.26.000 and above, the voice chat speaker icon does not appear.
- If you want to make the speech icon appear, please change to Script Mode and follow the guide to write your own code.
ďťż
Script Mode enables voice chat in channels separated by teams.
Please refer to the function description and example below to implement the feature.
API | Description |
---|---|
OnInitializedEvent | The voice chat APIs are available after a True event occurs in the initialization event. If this event is True, voice chat is available, and if it is False, voice chat is not available. |
EnterRoom(RoomProperty roomProperty) | Functions to enter a voice chat room - After successfully entering the voice chat room, the voice chat button will appear |
ExitRoom() | Function to leave a voice chat room |
OnRoomConnectedEvent | An event to check the status of entering a voice chat room. If this event is true, the user has entered the voice chat room; if it is false, the user has left the voice chat room. |
OnSpeechDetectedEvent<string, boolean> | Event to detect the user who is currently speaking in the voice chat. - string is the userId of the speaking user - boolean is true when the utterance starts, false when the utterance ends |
ChangeTeamID(number teamid) | Function to change the TeamId used in the voice chat room - Can only be set to an int value of 1 or more |
API | Description |
---|---|
SetAudioMode | Audio mode to use in voice chat - AudioMode.Omnidirectional: Voice chat mode with no voice attenuation based on distance (You can use it with or without the ZEPETO character) - AudioMode.Directional: Voice chat mode with voice attenuation based on distance (The ZEPETO character must be present in the Scene, as this mode works based on the ZEPETO character's location) |
SetTeamID | TeamId to be used in voice chat to enable voice chat between users with the same TeamId. - Can only be set to an int value of 1 or higher |
Here is some example code to try out the Voice Chat API.
1) Add a button and log text to the canvas as shown in the image below to enter the Voice Chat team channel and display the status log.
- Button
- Button_blueTeam : Blue team voice chat entry button
- Button_redTeam : Red team voice chat entry button
- Button_exit : Exit voice chat button
- Text
- Text_log : Text to display the chat log
- Text_team : Text to display the list of members of the same voice chat team channel
- Text_currentSpeaking : Text to display the UserId who is currently speaking in the voice chat.
ďťż
2) Create Project > Create > ZEPETO > TypeScript and rename it to VoiceChatTest.
3) Write a sample script as shown below.
ďťż
- Code Description
- When the script runs, it will register an event on each button in the Start() function and register the OnInitialized, OnRoomConnected, and OnSpeechDetected events on the VoiceChatController.
- When the Blue Team button or Red Team button is clicked, the EnterVoiceChatRoom() function is executed and the user enters the voice chat room by entering the specified RoomProperty. The room properties in the example are as follows.
- roomProperty.SetAudioMode : AudioMode.Omnidirectional. The audio mode Omnidirectional is a mode where the volume sounds the same regardless of the player's position. In contrast, Directional mode is a 3D sound mode, which means that the volume will sound different depending on the character's position, so the farther away the character is, the lower the volume will be.
- roomProperty.SetTeamID : Channel 2 for Blue Team, Channel 3 for Red Team. SetTeamID acts like a channel in Voice Chat. A team that enters channel 2 can only voice chat with players in channel 2, and a team that enters channel 3 can only voice chat with players in channel 3.
- ExitVoiceChatRoom() will exit the current voice chat team channel.
- OnSpeechDetected() will output the player ID that is currently using voice chat in the team channel to the log text.
ďťż
4) After completing the script, assign the button and text created in Step1 in the inspector.
ďťż
5) Run the test on mobile via QR code or test link, and you can see that the voice chat activation button is created when the Enter Team button is pressed, and whenever a player speaks, the log shows which player is in voice chat, as shown in the following screen.
ďťż
In ZEPETO App 3.26.000 and later versions, the voice chat utterance icon does not appear. If you want to handle the utterance icon to appear, please follow the guide and write your own code.
1) To show a speech bubble above the character's head when the player is in voice chat, you will need to create a prefab that uses a speech bubble image. Import the speech bubble PNG image you want to use as shown below and change its Texture Type to Sprite.
ďťż
2) Project > Create > Prefab and rename it to ChatBubble.
ďťż
3) Double-click the ChatBubble prefab to enter the prefab editing mode. Select the ChatBubble prefab and choose Transform > Position > Change the Y value to 0.35.
ďťż
4) Create a Canvas inside the prefab object.
- Double-click the ChatBubble prefab to enter Prefab Edit mode, and then add Hierachy > UI > Canvas.
- Change the values of the RectTransform component of the Canvas to the following
- PosX: 0 , posY: 0
- Width: 100, height: 100
- ScaleX: 0.005, ScaleY: 0.005, ScaleZ: 0.005
- Change the RenderMove of the Canvas component to World Space.
ďťż
5) Create a speech bubble image inside the Canvas.
- Add Hierarchy > UI > Image as a child of Canvas, and rename it ChatBubbleImage.
- Change the values of the RectTrasform component of the ChatBubbleImage to the following
- Width 42, Height:42
- Register the Image Sprite you imported in step 1 as the Source Image in the Image Component.
ďťż
đ TIP
- You can also animate the speech bubble image sprite.
- You can also use separate bubble images for different teams.
ďťż
6) Project > Create > ZEPETO > Create a TypeScript and rename it to VoiceChatBubbleController.
7) Write a sample script as shown below.
ďťż
- Code Description
- When the script is executed, it will register events on each button in the Start() function and OnInitialized, OnRoomConnected, and OnSpeechDetected events on the VoiceChatController.
- After OnInitialized(), the Voice Chat button will be exposed on the player's screen when they enter the world, and when they press the button, EnterVoiceChatRoom() will be executed to enter the Voice Chat room.
- Whenever the player activates VoiceChat and speaks, OnSpeechDetected() is executed, and if speechDetected is tue, the BubbleChat object is enabled, and if false, it is disabled.
- The first time the OnSpeechDetected() function is activated, CreateVoiceBubble() will instantiate a voiceChatPrefab GameObject to float above the player's head and register it as map data in _voiceBubbleMap.
- We use LateUpdate() to update the rotation of the voice chat bubble every frame to match the CameraParent of the ZEPETO world. This ensures that the speech bubble image is always facing the camera. It first checks to see if _voiceBubbleMap is empty, otherwise it updates the rotation of the speech bubble image prefab.
ďťż
8) After finishing writing the script, assign the VoiceChatPrefab entry in the inspector as the speech bubble prefab you created in STEP 1.
ďťż
9) Run it on mobile via a QR code or test link and you should see the speech bubble image appear above the character's head whenever the player uses voice chat.
ďťż
Starting with Voice Chat version 0.2.1-preview, you can modulate the Voice Chat voice in Script Mode.
ďťż
Try voice modulation using the API guide and the sample code.
VoiceType (enum) | Value | Description |
---|---|---|
Type00 | 0 | Original |
Type01 | 1 | Chipmunk |
Type02 | 2 | Uncle |
Type03 | 3 | Echo |
Type04 | 4 | Deep Voice |
Type05 | 5 | Robot |
Type06 | 6 | Dialect |
Type07 | 7 | Megaphone |
Type08 | 8 | Beast |
Type09 | 9 | Machine |
Type10 | 10 | Strong Current |
Type11 | 11 | Kid |
Type12 | 12 | Hedgehog |
ďťż
Here is a sample script of voice modulation.
- Code Description:
- Adds an onClick listener for each button to set different voice modulation types.
- Elements of the same index in the buttons array and the voiceTypes array are matched.
- Upon entering the world, VoiceChatController is initialized, and the room connection is established automatically.
- The initial voice modulation type is set to Type00, and loopback is enabled to hear your own voice.
- Note that for the invocation of SetVoiceType and EnableLoopback, a room connection is necessary. Hence, the initial setup is handled within the listener of theOnRoomConnectedEvent.
ďťż
ďťż
ďťż
You can change the local player's voice chat location using VoiceChatController.SetLocalPlayerTransform().
Using this, you can create various scenarios by setting your location to a specific space or object location when speaking in voice chat.
ďťż
đ tips The Voice Chatâs Transform is linked to the local playerâs ZEPETO character Transform.
Therefore, if the local playerâs ZEPETO character hasnât been created in the world, your voice may not be transmitted.
In this case, you can use voice chat by setting the voice playback location within the current scene using SetLocalPlayerTransform().
ďťż
API | Description |
---|---|
public static SetLocalPlayerTransform($transform: UnityEngine.Transform):void | Function to change the local player's audio playback position |
ďťż
âď¸ Caution SetLocalPlayerTransform() must be called sometime after VoiceChatController.OnInitializedEvent(true) when voice chat is initialized.
ďťż
1) Below is a sample script for the voice position change function.
Code Description
- When the scene starts, create a game object called voiceTransformObject in the Start() function and register the Transform in voiceTransform.
- When the voice chat OnInitialized listener is called, please apply the following settings:
- Set voice chat to 3D spatial audio mode via SetAudioMode(AudioMode.Directional).
- Set the local player's voice chat position to voiceTransform through VoiceChatController.SetLocalPlayerTransform().
- buttonCloserTransform sets the position of voiceTransform to the origin (0, 0, 0) when the button is clicked.
- buttonFartherTransform Sets the position of the voiceTransform to (10, 0, 0) when the button is clicked.
ďťż
2) Register the button on the Canvas in the scene to the buttonCloserTransform and buttonFartherTransform of the VoiceTransformSample component.
ďťż
3) If you run it on your mobile phone using the QR code or test link, you can check the following.
- When you press the Closer button, your voice will sound closer to others.
- When you press the Farther button, your voice will be heard far away from others.
ďťż
ďťż