OSCを使って、スマホでVRCのアバターの色を変える(VRChatでOSC受信)

2022年2月21日 02:02

こちらではMax/MSPという老舗の開発環境を使って、VRChatにOSC経由でデータを送信しました。

テキストプログラミングより格段に簡単とはいえ、慣れが必要です。
音のアタックや音声認識、カメラやムービーからの画像認識などが簡単にできてVRCへのブリッジとして大変使いやすいのですが、習得に少し時間がかかります。そんなのは待ってられないよ!という方もいらっしゃると思うので、スマホのOSCアプリで簡単にVRCにデータを送れるようにします。

全体の流れ

1.OSCの入力を受け付けて再生させるアニメーションを設定する(Unity)
2.TouchOSCのスマホ版とPC版をダウンロード&インストールする
3.TouchOSCスマホ版のサンプルをPCに全部送る
4.3.を参照してTouchOSCPC版上でスマホ版TouchOSCの画面レイアウトをする
5.TouchOSCPC版で、VRChatに送るデータの設定をする
6.iCloudでTouchOSCスマホ版に5.のファイルを送る
7.送ったデータをTouchOSCスマホ版で読み込む
8.VRChatのOSCを有効化する
9.TouchOSCスマホ版の▶︎ボタンを押して、UIを操作する
10.VRChatにデータが送られ、対応したアニメーションが再生される

アニメーションを作成して設定する

下記の「実装 : アニメーションの設定をする1」「アニメーションを作る」
「実装 : アニメーションの設定をする2」を参考に、スマホの入力によってアバターの状態を変化させるアニメーションを作成して設定する。
おそらく簡単にできるツールがすでにあると思うのですが、私がAvatar3.0分からんウーマンなので見つけられていません…もしあればそちらをご使用ください。

TouchOSCの準備をする

今回はスライダーを動かすとアバターのリボンの色が変わるという、前の記事でMax/MSPが担っていた入力部分がiPhoneアプリになった感じです。
ただスマホ版TouchOSCがとにかく使いにくいので、スライダーやボタンなどのレイアウトをPC版で行い、スマホ版にインポートするという形で使用します。

1.まずスマホ版TouchOSCをダウンロード&インストールする

2.PC版TouchOSCをダウンロード&インストールする。iCloudを使えると便利なので、Macの方がいいかもしれません

3.スマホ版を立ち上げるとこのような画面になる

4.下記のアイコンをタップしてインスペクタ的なものを出す

5.本のようなアイコンをタップし、下記のようなサンプルリストを出す

6.とにかくスマホでレイアウトを作るのが難しいので、PCでレイアウトを調整するためサンプルを片っ端から保存していく。まずいちばん上の「Simple Mk2」をタップする

7.下記のアイコンをタップする

8.下記をタップして、必ずサンプルとは異なる名前を英語でつける

9.下記のチェックアイコンをタップして保存する

10.iPhoneをUSBで接続し、Macの場合はFinderにiPhoneのマークが出ているのでクリックする(Windowsの方すみません、ご自分の環境のものをお使いください)

11.そうすると「ファイル」の項目が出てくるので、TouchOSCを探してクリックする。先ほど9.で保存した.toscファイルがあるので、適当なところにドラッグ&ドロップしてコピーする

12.PC版Touchを立ち上げる。ちなみにVRChat本家もTouchOSCのファイルをアップロードしているので、こちらを使用することもできます(直接ダウンロード注意)。
本家からダウンロードした.toscファイルはIPアドレスとポート番号のみ変更することで使用できますが、レイアウトがスマホ対応になっていない場合があります。
その場合はPC版TouchOSCでファイルを開き、「Document」の値をお使いのスマホサイズに合わせることをオススメします。