はじめに
ChatdollKitで作ったアバターと話せるシステムをwebGLでビルドする
ChatdollKit
ChatdollKitは、会話できるアバターを作成するためのフレームワークです
機能やオプションがたくさんあるので、Unityで話せるアバターを作りたい人におすすめです
※ChatdollKitを使った対話アバターの作り方はこちら
webGL
webGLとは、Unityで作ったプロジェクトをwebブラウザ上で動作させるための仕様のことです
ChatdollKitもwebGLに対応しているのですが、そのままwebGLでビルドしようとしたらエラーが出たので、この記事ではその解決方法を紹介します
今回の記事はChatdollKitのREADMEを参考にさせていただきました
開発環境
- Windows10
- Unity - 2021.3.6f1
- chatdollKit - v0.6.1
- uLipSyncWebGL - v0.2
※対話アバターの開発環境はこちら
エラーの原因
webGLでビルドしようとしたら、コンソールにエラーが表示されました
The name 'Microphone' does not exist in the current context
MicrophoneはuLipSyncで使用しているのですが、webGLでは使えないみたいです
解決方法
Microphoneの代わりにChatdollMicrophoneを使います
- uLipSyncWebGLのgithubから、uLipSyncWebGLEdition_2.2.0.unitypackageをダウンロードします
- ダウンロードしたuLipSyncWebGLEdition_2.2.0.unitypackageを開いてインポートします
- Assets > uLipSyncWebGL > Scripts のuLipSyncWebGL.unitypackageをChatdollKitVRMのInspectorにドラッグ＆ドロップで追加します
- uLipSyncにある下記の3つのファイルを消去します
- uLipSync > Runtime > uLipSyncMicrophone
- uLipSync > Runtime > Core > MicUtil
- uLipSync > Editor > uLipSyncMicrophoneEditor
- 公式READMEにはuLipSyncMicrophoneEditorと書いてありますが、uLipSync (v2.6.1)ではuLipSyncMicroputEditorというファイル名でした
- もしuLipSyncMicrophoneEditorがなければ、uLipSyncMicrophoneとMicUtilを消去して実行してみて、エラーに書いてあるファイルを消去すればいいと思います
- uLipSync > Editor > EditorUtilのファイルを開き、DrawMicSelectorメソッドをコメントアウトする
ファイルはダブルクリックで開けます
webGLでのビルド方法
ビルド方法は下記の記事が分かりやすいと思います
UnityでWebGLビルドする際の注意点
Unity：作ったゲームをWebGLビルドで公開する
設定
- UnityHubでwebGLでビルドするためのツールをインストールします
- webGLでビルドしたいプロジェクトをUnityで開いている場合は、一度閉じて開き直します
- File > Build Settings > webGL を選択し、SwitchPlatformをクリックします
- Player Settings...をクリック
- エラーが表示されている場合は、エラー内容に従って設定を変更します
ビルドしたものをローカル環境で動かしたい場合
詳しくはこちらを参考にしてください
webGLでビルドすると、ビルド完了時は自動的にwebブラウザにUnityで作ったものが表示されますが、次回webブラウザ上で表示できなくなります
それを回避するためにPlayer Settingsで設定を変更します
- Enable ExceptionsをNonenに変更
- Compression FormatをDisabledに変更
実行
- Build Settingsに戻り、Build And Runをクリックします
- ビルドしたものを保存するフォルダを選択すると、ビルドが開始されます
webGLのビルドにはかなり時間がかかります
PCのスペックにもよりますが、10分以上はかかると思います - ビルドが終わると自動的にwebブラウザが開きます
ローカル環境で起動する方法
詳しくはこちらを参考にしてください
- ターミナルかコマンドプロンプトを開き、ビルドしたファイルが保存されているフォルダに移動します
-
$ python3 -m http.server 8000と入力し、エンターを押します - http://localhost:8000/ にアクセスするとUnityで作ったプロジェクトを実行できます
まとめ
今回はCHatdollKitをで作成したものをwebGLでビルドし、ローカル環境で動作させる方法について説明しました