📖

VRChatがOSCに対応したので、まずはNode.jsでアバターをジャンプさせてみた

2022/02/27に公開

Image from Gyazo

参考記事

OSCとは

  • OpenSound Control - Wikipedia https://ja.wikipedia.org/wiki/OpenSound_Control
  • UDPのSocket(ソケット)通信である(が一般的)
    • 一方通行
    • 常時接続
      • たくさんの数のメッセージのやりとりに向いている
      • 逆:ブラウザでWebページにアクセスする (HTTP通信)
  • UDP通信でやりとりするメッセージのルール
    • メッセージのトピックは /(スラッシュ) 区切り
    • トピックの後ろに ,(カンマ) でメッセージ内容
    • 見えないところでnullコードも入ってるっぽい
    • 例:/avatar/change,avatarId12345
    • 例:/avatar/add,aaaassss98765
  • 必要な情報はIPとPort(ポート)番号
    • IPアドレス:ポート番号 例 127.0.0.1:9000

TramontanaやZigSimもスマートフォンでOSC

以前に使ったアプリもOSCで通信できます

https://tramontana.xyz/

https://qiita.com/ono-honeycomb/items/7d960a613e3ac31047f4

https://tkyko13.github.io/p5diary/202004/27/

VRChat公式ドキュメント内では

つまり、OSCはいろんなところで使われていますよ

VRChatOSCのドキュメント

これを踏まえて読んでみる

--osc=9000:127.0.0.1:9001

メッセージは一方通行!
なので、VRChat側からは

  • 9001番ポートへ送っていて
  • 9000番ポートで待ち受けている

他のアプリからだと、

  • 9000番ポートへ送って
  • 9001番ポートで待ち受ける

127.0.0.1とlocalhostと0.0.0.0の違い - Qiita https://qiita.com/1ain2/items/194a9372798eaef6c5ab

手順

VRChat側

  • SteamでVRChatをダウンロード
  • SteamのVRChatの設定、プロパティから open-beta - Open Beta を選択
    • Windows限定っぽい
    • 02/27現在、ik-beta - IK-Beta に変わってますね Image from Gyazo
  • VRChatをアップデート
  • デスクトップモードで起動
  • VRChat内でOSCを有効化
    • デバッグメニューを出しておくといいかも
    • そこを見るとポート番号は9000番だということがわかります

Image from Gyazo

Node.jsで通信してみる

  • npm init -y
  • npm i node-osc
const osc = require('node-osc');

const client = new osc.Client('127.0.0.1', 9000);
let count = 0;

// 1秒間隔で0,1を交互に送る
// たぶん1がジャンプボタンを押して、0が離す動作っぽい
setInterval(() => {
  client.send('/input/Jump', count % 2);
  count++;
}, 1000);

const server = new osc.Server(9001, '0.0.0.0');
server.on('/avatar/change', (avatarId) => {
  console.log('アバターチェンジ! '+avatarId);
});

Image from Gyazo

Image from Gyazo

コメントでも書いてある通り、/input/Jump へ送るだけだとなぜかジャンプしなくて…
値を1と0交互に送ってあげるとできました

ドキュメント内を読むと、1がボタンを押し込む動作で、0が離す動作っぽかったでした(ちょっと躓いた…)

アバターの変更イベントも来ました!

次回予定

M5StackCore2で通信してみる!

しかもUIFlowで!

Discussion