【知識０から】VRChatを別タブで操作できるアプリ自作してみた！【OSC / フォームアプリケーション】

はじめに

こんにちは。
ジョジョ好きなXRクリエイターの もふるね です。

VRChatで使えるOSCの便利なツールって色々あるじゃないですか。
あれ見てたら思ったんです。
してェ...　自作してェ～～～

結果

VRChatのキャラ操作できる自作アプリ作ってる。
前後左右・ジャンプボタン搭載！ pic.twitter.com/EcfeVR4nM6

— もふるね𓇶 (@mofurune_k) January 5, 2024

ブラボー！ おぉ...ブラボー!！

前置き

これを作った私がどれくらいの知識から始めたかと言うと...

OSCって何だ？
そもそもアプリってどうすりゃ作れるん？
Visual Studio、まともに使ったこと無いが？
ライブラリの導入方法なんて知らんが？

まぁ、こんな感じで知識０からのスタートです。

OSCが理解るまではこの記事「【OSC何も分からん人向け】OSCでVRChatを操作してみよう！」にまとめました。
ので、今回の記事はアプリを作るところから始めます。

参考資料

grinpeacemanさんの記事
【C#開発環境構築】Visual Studio 2019インストールからHello Worldまで
SIOSTechLabさんの記事
【Visual Studio】C#でWindowsフォームアプリを作成 ～ ボタンクリックでHello Worldを表示してみよう ～
n_kimuraさんの記事
C#でOSCをする
Visual Basic 中学校
C# 入門講座 第７回 ビルド

アプリを作る流れ

まずは作りたいアプリの設計を考えましょう。
ウィンドウがあって、そこにボタンが置いてあって、押したらVRChatに信号が送られ、キャラの操作ができる。
そういう物を作ります。

調べてみると、ウィンドウがあるアプリのことを「フォームアプリケーション」と呼ぶようで、Visual Studioで作成できるようです。
PythonやC++、C#で作れるようなので、Unityで用いられるC#で作ることに決めました。

OSCを扱うにはRug.Oscというライブラリを用いると良いようです。

環境構築

.Net SDKインストール

初めに、.Net SDKをインストールします。
.Netとは、どのOSでも同じようにソフトウェア開発できる便利な環境らしいです。

コマンドプロンプトでdotnet --versionと打って、バージョンが表示されたら成功です。

Visual Studioインストール

microsoftのページからインストールします。

インストーラーを起動し、インストールするコンポーネントを選択する画面で、「.NET デスクトップ開発」にチェックを付けてインストールします。

すでにインストール済みでVisual Studioを開いている場合は、上部にある[ツール]>[ツールと機能を取得] を選ぶと、Visual Studio インストーラーが開きます。
「.NET デスクトップ開発」にチェックを付け、インストールします。

プロジェクト作成

Visual Studioを起動し、「新しいプロジェクトの作成」をクリックします。
「Windowsフォームアプリケーション(.NET Framework)」をクリックし、「次へ」をクリックします。
プロジェクト名を入力し、「作成」をクリックします。

Rug.Oscライブラリを導入

Visual Studioで[ツール]>[NuGetパッケージマネージャー]>[ソリューションのNuGetパッケージの管理]をクリックします。
検索バーにRug.Oscを入力し、出てきたRug.Oscをクリックし、右の欄で入れたいプロジェクトにチェックを付け、インストールします。

「適用」をクリックします。

インストールが完了すると、プロジェクトのフォルダのpackagesの中にRug.Oscフォルダができます。

フォームアプリケーション作成

ボタンの作成

Visual Studioで「Form1.cs[デザイン]」をクリックします。
なにやらアプリのウィンドウ的なのが表示されます。
上部にある[表示]>[ツールボックス(X)]をクリックします。
ツールボックスの検索欄で「button」と入力します。
出てきた「Button」をウィンドウの所にドラッグ＆ドロップします。
ボタンは、ウィンドウ上で位置や大きさを変えることができます。

作ったボタンを右クリックして「プロパティ」をクリックします。
ボタンの見た目を変えたい場合、プロパティの表示欄を設定しましょう。
BackColorで背景色、Fontで文字の大きさとフォント、ForeColorで文字の色、Textで文字を変更できます。

ラベルの作成

ボタンを押したときにウィンドウ上に「押したよ！」と表示させたいのでラベルを設置しましょう。
ツールボックスの検索欄で「label」と入力します。
出てきた「label」をウィンドウの所にドラッグ＆ドロップします。
ラベルは、ウィンドウ上で位置を、プロパティの表示欄を設定することで文字を変更できます。

プログラミング

ウィンドウ上のボタンをダブルクリックします。
すると、Form1.csタブが開き、コードが書かれた場所に辿り着きます。
今回は、ボタンに「VRChatでジャンプするOSC信号を送る機能」を付けます。

IPアドレスと送信ポートの設定

コードの1行目付近を見てみましょう。
usingは、必要なライブラリを読み込む処理のことです。
ここにRug.Oscを読み込む処理を追加しましょう。

Form1.cs

using Rug.Osc;

次に、コードの18行目付近を見てみましょう。
「public partial class Form1: Form{}」の括弧の中に、追加したい変数や関数を書きます。
「public Form1(){}」は最初に発動します。

ここでは、OscSenderを定義し、送信先のポートとIPアドレスを設定します。
VRChatに情報を送るポート番号は9000です。
IPアドレスは人によって違うので、コマンドプロンプトでipconfigと打って調べましょう。

Form1.cs

private OscSender oscSender;

public Form1()
{
    InitializeComponent();

    // 送信先のIPアドレスを設定　例：192.168.123.456
    IPAddress address = IPAddress.Parse("192.168.123.456");
    // 送信先のポートを設定
    int sendPort = 9000;
    // OSCのセンダーをポート[sendport]で作る
    oscSender = new OscSender(address, sendPort);
    // 接続
    oscSender.Connect();
}

private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
    // アプリケーションが終了する前にOSCセンダーを閉じる
    oscSender.Close();
}

（追記2：2024/01/09）～～～～～～～～～～～～～～～～～～～～～～～～～
自分のIPアドレスを調べずに設定する方法が見つかりました。
127.0.0.1は自分自身を指すIPアドレスです。

IPAddress address = IPAddress.Parse("127.0.0.1");

そのため、このようにコードを変更しても正しく動作します。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

VRChatでジャンプするOSC信号

関数button1_Clickはボタンをクリックした時に発動します。
VRChatドキュメントのOSCのページを見ると、OSC信号で/input/Jump 1を送るとジャンプをするようです。
ただし、再度ジャンプするには、一度/input/Jump 0を送ってジャンプの情報をリセットする必要があるようです。

Form1.cs

private void button1_Click(object sender, EventArgs e)
{
    label1.Text = "入力：Jump";
    Console.WriteLine("入力：Jump");

    // OSC送信
    oscSender.Send(new OscMessage("/input/Jump", 1));
    System.Threading.Thread.Sleep(10);
    oscSender.Send(new OscMessage("/input/Jump", 0));
}

ここで、画面上部の「緑の三角マーク（開始）」を押してエラーがでないかつ、ボタンを押すとコンソールに「入力：Jump」が出力されてれば成功です。

ちなみに、Form1.cs[デザイン]のウィンドウ上でボタンをダブルクリックすることで「クリックしたときに発動する関数button1_Click」が作られたのですが、別の方法でも作れます。
Visual Studioの左側にあるソリューションエクスプローラーで、Form1.cs > Form1.Designer.csをダブルクリックしてForm1.Designer.csを開きます。
コードの39行目付近を見てみましょう。
button1の詳細を見ることができます。
ここにあるthis.button1.Click += new System.EventHandler(this.button1_Click);が、クリックされたときにイベントを発生させる処理です。
もし「クリックしたときに発動する関数button1_Click」が不要になったなら、この処理を消しましょう。

VRChatで動作確認

VRChatを起動し、ExplessionメニューからOptions > OSC > Enabledをオンにします。
これでVRChatはOSCを送受信できるようになります。
（３の画像のOSC Debugを押すと、VRChatに送られたOSC情報が見えるようになるので、確認に使うと良いですよ）

ここで先程作ったアプリを実行するために「緑の三角マーク（開始）」を押します。

...エラーが出ました。
VRChatを起動してない状態ではエラーが出ず、起動すると出るようです。
ポート9000はVRChatに占領されていて使えないという事でしょうか？
（よくわからないので、解決策を知っている方教えてください m(_ _)m ） → 解決策は追記1にて

対処法（情報として残してますが、先に追記1の解決策を読んだほうが良いです）

ただ、最良の策ではないかもしれませんが、対処法はあります。
OSC Routerを使います。
これは、複数のクライアントでoscを読みたいときに、間にOSC Routerを挟んで他のポートにルーティングさせるのに用いられます。
OSC Routerのダウンロードページから OSCRouter_Windows.zip をダウンロードして解凍して起動します。

左側のLabelは好きな文字を、Portはなんでも良いですが今回は9002にします。
右側のOutgoing IPは自分のIPアドレスを、Portは9000にします。
最後にApplyを押します。

次にVisual StudioでForm1.csの変数sendPortを9002に変更します。

Form1.cs

int sendPort = 9002;

これで「緑の三角マーク（開始）」を押してみると、エラーがでなくなりました。
自作アプリのボタンを押してみると、VRChatでキャラがジャンプします。
成功です！

（追記1：2024/01/09）～～～～～～～～～～～～～～～～～～～～～～～～～
「VRChatの起動中にポート9000に情報を送れない問題」の解決策が見つかりました。
oscSender = new OscSender(address, sendPort);
としていたところを
oscSender = new OscSender(address, 0, sendPort);
に変更すると、int sendPort = 9000;のままでもOSC Routerを介さずにVRChatにOSC信号を送ることができます！
これで「緑の三角マーク（開始）」を押し、自作アプリのボタンを押してみて、VRChatでキャラがジャンプしたなら成功です！
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

Visual Studioでプログラムを実行をすると、自動的にビルドが行われています。
出来上がったアプリはbinフォルダに保存されます。
binフォルダ下部にはDebugフォルダとReleaseフォルダがあり、今回はDebugビルドで実行したので、Debugフォルダ内にアプリが出来ています。
.dllファイルが作成したプログラムそのものです。
それを起動するのが.exeファイルです。
dllとexeの２つのファイルがあれば、作成したアプリを起動することができます。
（ちなみに、objフォルダーとbinフォルダーは必要になるたびに自動的に中身が生成されたり書き換えられるフォルダーなので、一時的な存在です。）
なので、dllとexeファイルは別の場所に退避させておくと安心です。

応用：VRChatで前後左右に動かす信号

仕組みはジャンプのときと同じですが、クリックした瞬間に1の信号を、離した瞬間に0の信号を送るように変えています。

Form1.cs[デザイン]にボタンを４つ追加し、名前をそれぞれbuttonLeft, buttonRight, buttonUp, buttonDownとします。

Form1.Designer.csにクリックした瞬間と離した瞬間にイベントを発生させる処理を追加します。
Form1.csにVRChatで前後左右に動かすOSC信号を送る処理を追加します。

コード

以下のコードを4つのボタン分作ります。

Form1.Designer.cs

this.buttonLeft.MouseDown += new System.Windows.Forms.MouseEventHandler(this.buttonLeft_MouseDown);
this.buttonLeft.MouseUp += new System.Windows.Forms.MouseEventHandler(this.buttonLeft_MouseUp);

以下のコードを追加します。

Form1.cs

private void buttonLeft_MouseDown(object sender, EventArgs e)
{
    label1.Text = "入力：←";
    Console.WriteLine("入力：←");

    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveLeft", 1));
}

private void buttonLeft_MouseUp(object sender, EventArgs e)
{
    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveLeft", 0));
}

private void buttonRight_MouseDown(object sender, EventArgs e)
{
    label1.Text = "入力：→";
    Console.WriteLine("入力：→");

    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveRight", 1));
}

private void buttonRight_MouseUp(object sender, EventArgs e)
{
    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveRight", 0));
}

private void buttonUp_MouseDown(object sender, EventArgs e)
{
    label1.Text = "入力：↑";
    Console.WriteLine("入力：↑");

    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveForward", 1));
}

private void buttonUp_MouseUp(object sender, EventArgs e)
{
    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveForward", 0));
}

private void buttonDown_MouseDown(object sender, EventArgs e)
{
    label1.Text = "入力：↓";
    Console.WriteLine("入力：↓");

    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveBackward", 1));
}

private void buttonDown_MouseUp(object sender, EventArgs e)
{
    // OSC送信
    oscSender.Send(new OscMessage("/input/MoveBackward", 0));
}

振り返り

神は１～６日で世界を創造し、７日目に休息をとったらしい。
私は２日で自作アプリを開発できたので、あと５日間は休めちゃうね。

OSC記事まとめ

OSC解説記事
【OSC何も分からん人向け】OSCでVRChatを操作してみよう！

OSCアプリを自作した記事1
【知識０から】VRChatを別タブで操作できるアプリ自作してみた！【OSC / フォームアプリケーション】

OSCアプリを自作した記事2
OSCでVRChatのキャラを回転操作するアプリを自作してみた！【OSC / フォームアプリケーション】

OSCアプリを自作した記事3
CPU使用率をOSC通信でVRChatに送って、アバターの色を変化させてみた

OSCアプリを自作した記事4
GPU使用率の取得方法【C#】