あなたの世界を作りなさい
チャット

音声チャット機能の使用

22min

Zepeto.Voice.Chat プレビュー版パッケージは、ワールド内でのボイスチャットを可能にします。



ZEPETO.Voice.Chatをインストールしてモードを設定する

1) ウィンドウをインストール → パッケージマネージャー → ZEPETO.Voice.Chat。

  • この機能は、マルチプレイヤー要素が実装されたワールドで利用可能です。
  • テストはモバイルテストでのみ利用可能で、エディターテストでは利用できません。
  • iOSポリシーにより、ボイスチャットが有効なワールドでマイクがオンのとき、デバイスの音量はゼロにはなりません。 マイクがオフのとき、デバイスの音量はゼロになります。



Document image


2) 開発中のUnityプロジェクト画面の中央メニューにある[▼]ボタンをクリックします。 表示されるポップアップメニューで[ワールド設定を開く]ボタンをクリックします。

Document image




3) ZEPETO.Voice.Chatパッケージが正しくインストールされている場合、ボイスチャットモードオプションが追加されます。

Document image




4) ボイスチャットモードでは、希望するモードを設定してください。

  • 基本: デフォルトで提供されるボイスチャット機能を使用します。
  • スクリプト: ボイスチャットAPIを実装してボイスチャット機能を使用します。
    • ランタイムでボイスチャットのルームアクセスの入退室を処理できます。
    • 異なるチームのためにボイスチャットを実装します(例: 赤チームのボイスチャットと青チームのボイスチャット)
    • 現在話しているユーザーを検出する



基本モード:ボイスチャット機能の使用

基本モードのボイスチャットがある世界はこのようになります。

ボイスモジュレーション機能を使用して、より楽しいボイスチャットを作成することもできます。

ボイスチャット機能を持つワールドに入ると、ボイスチャットが自動的に有効になります。

👍 ZEPETOでボイスチャット機能を初めて使用する際、マイクのアクセスに関するポップアップが表示されます。 ボイスチャット機能を使用するには、アクセスを許可する必要があります。

ボイスチャット機能を有効にすると、UIにボタンが自動的に表示されます
ボイスチャット機能を有効にすると、UIにボタンが自動的に表示されます

ボイスチャットボタンをタッチすることで使用できます
ボイスチャットボタンをタッチすることで使用できます




  • ZEPETOアプリ3.26.000以上では、ボイスチャットスピーカーアイコンが表示されません。
  • スピーチアイコンを表示させたい場合は、スクリプトモードに切り替え、自分のコードを書くためのガイドに従ってください。



スクリプトモード : VoiceChat APIの使用

スクリプトモードは、チームによって分けられたチャンネルでのボイスチャットを有効にします。

機能の説明と以下の例を参照して、機能を実装してください。

API

説明

OnInitializedEvent

音声チャットAPIは、初期化イベントでTrueイベントが発生した後に利用可能です。 このイベントがTrueの場合、音声チャットが利用可能であり、Falseの場合は音声チャットが利用できません。

EnterRoom(RoomProperty roomProperty)

音声チャットルームに入るための関数 - 音声チャットルームに正常に入った後、音声チャットボタンが表示されます。

ExitRoom()

音声チャットルームを離れるための関数

OnRoomConnectedEvent

音声チャットルームに入る状態を確認するためのイベント。 このイベントがtrueの場合、ユーザーは音声チャットルームに入っています。falseの場合、ユーザーは音声チャットルームを離れています。

OnSpeechDetectedEvent<string, boolean>

音声チャットで現在話しているユーザーを検出するためのイベント。 - stringは話しているユーザーのuserId - booleanは発話が始まるとtrue、発話が終了するとfalseになります。

ChangeTeamID(number teamid)

音声チャットルームで使用するTeamIdを変更するための関数 - 1以上の整数値にのみ設定できます。

ルームプロパティクラス

API

説明

SetAudioMode

ボイスチャットで使用するオーディオモード - AudioMode.Omnidirectional: 距離に基づく音声減衰のないボイスチャットモード (このモードはZEPETOキャラクターがあってもなくても使用できます) - AudioMode.Directional: 距離に基づく音声減衰のあるボイスチャットモード (ZEPETOキャラクターの位置に基づいて動作するため、シーンにZEPETOキャラクターが存在する必要があります)

SetTeamID

ボイスチャットで同じTeamIdを持つユーザー間のボイスチャットを有効にするために使用されるTeamId。 - 整数値1以上に設定することができます

チーム特有のボイスチャット実装の例

ここにVoice Chat APIを試すためのサンプルコードがあります。

1) ボタンを追加し、以下の画像のようにテキストをキャンバスにログとして表示して、ボイスチャットチームチャンネルに入ります。ステータスログを表示します。

  • ボタン
    • Button_blueTeam : 青チームボイスチャット入場ボタン
    • Button_redTeam : 赤チームボイスチャット入場ボタン
    • Button_exit : ボイスチャット退出ボタン
  • テキスト
    • Text_log : チャットログを表示するテキスト
    • Text_team : 同じボイスチャットチームチャンネルのメンバーリストを表示するテキスト
    • Text_currentSpeaking : 現在ボイスチャットで話しているユーザーIDを表示するテキスト。
Document image




2) プロジェクトを作成 > 作成 > ZEPETO > TypeScript として、VoiceChatTest に名前を変更します。

3) 以下のようにサンプルスクリプトを書きます。

VoiceChatTest




  • コードの説明
    • スクリプトが実行されると、Start()関数内の各ボタンにイベントが登録され、VoiceChatControllerにOnInitialized、OnRoomConnected、OnSpeechDetectedイベントが登録されます。
    • 青チームボタンまたは赤チームボタンがクリックされると、EnterVoiceChatRoom()関数が実行され、ユーザーは指定されたRoomPropertyを入力することでボイスチャットルームに入ります。例のルームプロパティは以下の通りです。
      • roomProperty.SetAudioMode : AudioMode.Omnidirectional。オムニディレクショナルオーディオモードは、プレイヤーの位置に関係なく音量が同じになるモードです。対照的に、ディレクショナルモードは3Dサウンドモードであり、キャラクターの位置によって音量が異なるため、キャラクターが遠くなるほど音量が小さくなります。
      • roomProperty.SetTeamID : 青チームはチャンネル2、赤チームはチャンネル3。SetTeamIDはボイスチャットのチャンネルのように機能します。チャンネル2に入ったチームはチャンネル2のプレイヤーとしかボイスチャットできず、チャンネル3に入ったチームはチャンネル3のプレイヤーとしかボイスチャットできません。
    • ExitVoiceChatRoom()は現在のボイスチャットチームチャンネルから退出します。
    • OnSpeechDetected()は、現在ボイスチャットを使用しているプレイヤーIDをチームチャンネルのログテキストに出力します。



4) スクリプトを完成させた後、インスペクターでステップ1で作成したボタンとテキストを割り当てます。

Document image




5) QRコードまたはテストリンクを介してモバイルでテストを実行すると、チームに参加ボタンが押されたときにボイスチャットのアクティベーションボタンが作成され、プレイヤーが話すたびにログにどのプレイヤーがボイスチャットにいるかが表示されます。以下の画面に示されています。

Document image




ボイスチャットのスピーチバブル画像の表示例

ZEPETOアプリ3.26.000以降のバージョンでは、ボイスチャットの発話アイコンは表示されません。 発話アイコンを表示させたい場合は、ガイドに従って自分のコードを書く必要があります。

1) プレイヤーがボイスチャットにいるときにキャラクターの頭上にスピーチバブルを表示するには、スピーチバブル画像を使用するプレハブを作成する必要があります。以下のように使用したいスピーチバブルPNG画像をインポートし、そのテクスチャタイプをスプライトに変更します。

Document image




2) プロジェクト > 作成 > プレハブとし、名前をChatBubbleに変更します。

Document image




3) ChatBubbleプレハブをダブルクリックしてプレハブ編集モードに入ります。ChatBubbleプレハブを選択し、Transform > Position > Y値を0.35に変更します。

Document image




4) プレハブオブジェクト内にキャンバスを作成します。

  • ChatBubbleプレハブをダブルクリックしてプレハブ編集モードに入り、Hierarchy > UI > Canvasを追加します。
  • キャンバスのRectTransformコンポーネントの値を以下のように変更します。
    • PosX: 0 , posY: 0
    • 幅: 100, 高さ: 100
    • ScaleX: 0.005, ScaleY: 0.005, ScaleZ: 0.005
  • キャンバスコンポーネントのRenderMoveをワールドスペースに変更します。
Document image




5) キャンバス内にスピーチバブル画像を作成します。

  • Hierarchy > UI > Imageをキャンバスの子として追加し、ChatBubbleImageに名前を変更します。
  • ChatBubbleImageのRectTransformコンポーネントの値を以下のように変更します。
    • 幅 42, 高さ:42
  • ステップ1でインポートした画像スプライトを、イメージコンポーネントのソース画像として登録します。
Document image




👍 ヒント

  • スピーチバブルの画像スプライトをアニメーション化することもできます。
  • 異なるチームのために別々のバブル画像を使用することもできます。



6) プロジェクト > 作成 > ZEPETO > TypeScriptを作成し、VoiceChatBubbleControllerに名前を変更します。

7) 以下のようなサンプルスクリプトを書いてください。

VoiceChatBubbleController




  • コードの説明
    • スクリプトが実行されると、Start()関数内の各ボタンにイベントが登録され、VoiceChatControllerのOnInitialized、OnRoomConnected、OnSpeechDetectedイベントが登録されます。
    • OnInitialized()の後、プレイヤーがワールドに入るとVoice Chatボタンが画面に表示され、ボタンを押すとEnterVoiceChatRoom()が実行されてVoice Chatルームに入ります。
    • プレイヤーがVoiceChatをアクティブにして話すたびに、OnSpeechDetected()が実行され、speechDetectedがtrueの場合はBubbleChatオブジェクトが有効になり、falseの場合は無効になります。
    • OnSpeechDetected()関数が初めてアクティブになると、CreateVoiceBubble()がvoiceChatPrefab GameObjectをプレイヤーの頭上に浮かせるためにインスタンス化し、_voiceBubbleMapにマップデータとして登録します。
    • LateUpdate()を使用して、ZEPETOワールドのCameraParentに合わせて毎フレーム音声チャットバブルの回転を更新します。これにより、スピーチバブルの画像が常にカメラを向くようになります。最初に_voiceBubbleMapが空かどうかを確認し、そうでなければスピーチバブル画像のプレハブの回転を更新します。



8) スクリプトの記述が完了したら、インスペクタでVoiceChatPrefabエントリをSTEP 1で作成したスピーチバブルプレハブとして割り当てます。

Document image




9) QRコードまたはテストリンクを介してモバイルで実行すると、プレイヤーが音声チャットを使用するたびにキャラクターの頭上にスピーチバブル画像が表示されるはずです。



音声変調

ボイスチャットバージョン0.2.1-previewから、スクリプトモードでボイスチャットの声を変調できます。





APIガイドとサンプルコードを使用して音声変調を試してみてください。

音声タイプ (enum)

説明

タイプ00

0

オリジナル

タイプ01

1

チップマンク

タイプ02

2

おじ

タイプ03

3

エコー

タイプ04

4

深い声

タイプ05

5

ロボット

タイプ06

6

方言

タイプ07

7

メガホン

タイプ08

8

タイプ09

9

機械

タイプ10

10

強い流れ

タイプ11

11

子供

タイプ12

12

ハリネズミ



ここに声の変調のサンプルスクリプトがあります。

JS

  • コードの説明:
    • 各ボタンに異なる音声変調タイプを設定するためのonClickリスナーを追加します。
      • 同じインデックスの要素がボタン配列と音声タイプ配列が一致します。
    • ワールドに入ると、VoiceChatControllerが初期化され、ルーム接続が自動的に確立されます。
    • 初期の音声変調タイプはType00に設定され、ループバックが有効になり、自分の声を聞くことができます。
      • 呼び出しのために注意してください、SetVoiceTypeEnableLoopbackには、ルーム接続が必要です。したがって、初期設定はOnRoomConnectedEventのリスナー内で処理されます。



Document image




ローカルプレイヤーの音声再生位置を変更する



ローカルプレイヤーのボイスチャット位置を変更するには、VoiceChatController.SetLocalPlayerTransform()を使用します。

これを使用すると、ボイスチャットで話すときに特定の空間やオブジェクトの位置に設定することで、さまざまなシナリオを作成できます。



📘 ヒント ボイスチャットのトランスフォームは、ローカルプレイヤーのZEPETOキャラクターのトランスフォームにリンクしています。

したがって、ローカルプレイヤーのZEPETOキャラクターがワールド内に作成されていない場合、あなたの声は伝達されない可能性があります。

この場合、現在のシーン内で音声再生位置を設定することでボイスチャットを使用できます。SetLocalPlayerTransform().



API

説明

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

ローカルプレイヤーの音声再生位置を変更するための関数



❗️ 注意 SetLocalPlayerTransform() は、ボイスチャットが初期化された後に、VoiceChatController.OnInitializedEvent(true) を呼び出す必要があります。



1) 以下は、音声位置変更機能のサンプルスクリプトです。

VoiceTransformSample


コードの説明

  • シーンが始まるとき、Start()関数内にvoiceTransformObjectというゲームオブジェクトを作成し、voiceTransformにTransformを登録します。
  • ボイスチャットがOnInitializedリスナーが呼び出されるとき、次の設定を適用してください:
  • ボイスチャットを3D空間オーディオモードに設定します。SetAudioMode(AudioMode.Directional).
  • ローカルプレイヤーのボイスチャット位置をvoiceTransformに設定します。VoiceChatController.SetLocalPlayerTransform().
  • buttonCloserTransformは、ボタンがクリックされたときにvoiceTransformの位置を原点(0, 0, 0)に設定します。
  • buttonFartherTransformは、ボタンがクリックされたときにvoiceTransformの位置を(10, 0, 0)に設定します。



2) シーン内のCanvasにボタンを登録し、VoiceTransformSampleコンポーネントのbuttonCloserTransformとbuttonFartherTransformに接続します。

Document image




3) QRコードまたはテストリンクを使用してモバイルフォンで実行すると、次のことを確認できます。

  • クローザーボタンを押すと、あなたの声は他の人に近く聞こえます。
  • ファーザーボタンを押すと、あなたの声は他の人から遠く聞こえます。