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

# はじめに

こんにちは。
ジョジョ好きなXRクリエイターの [もふるね](https://twitter.com/mofurune_k) です。

今回は[【知識０から】VRChatを別タブで操作できるアプリ自作してみた！【OSC / フォームアプリケーション】](https://qiita.com/mofurune/items/451c88c080692fec97c7)の続きです。
アプリを自作して楽しくなっちゃったので、回転機能も付けたくなっちゃった。


# 結果

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">VRChatのキャラ操作できる自作アプリ<br>ボタンorスライダーで回転できるようになった！ <a href="https://t.co/IdivgqatoE">pic.twitter.com/IdivgqatoE</a></p>&mdash; もふるね𓇶 (@mofurune_k) <a href="https://twitter.com/mofurune_k/status/1744758057304048076?ref_src=twsrc%5Etfw">January 9, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


# ボタンで回転

[VRChatドキュメントのOSCのページ](https://docs.vrchat.com/docs/osc-as-input-controller)を見てみます。
``/input/LookLeft 1``で左回転、``/input/LookRight 1``で右回転するようです。
ただし、これを送っただけでは回転し続けてしまいます。
回転を止めるためには、それぞれ``/input/LookLeft 0``、``/input/LookRight 0``を送ります。

それでは、左回転するボタンの制作に入っていきましょう。
ボタンを押す瞬間に1を、離した瞬間に0を送るように作ります。
Form1.cs[デザイン]にボタンを追加し、名前を「buttonUpperLeft」とします。
Form1.Designer.csにクリックした瞬間と離した瞬間にイベントを発生させる処理を追加します。
Form1.csにVRChatで左回転するOSC信号を送る処理を追加します。

```cs:Form1.Designer.cs
this.buttonUpperLeft.MouseDown += new System.Windows.Forms.MouseEventHandler(this.buttonUpperLeft_MouseDown);
this.buttonUpperLeft.MouseUp += new System.Windows.Forms.MouseEventHandler(this.buttonUpperLeft_MouseUp);
```

```cs:Form1.cs
private void buttonUpperLeft_MouseDown(object sender, MouseEventArgs e)
{
    label1.Text = "入力：⟲";
    Console.WriteLine("入力：⟲左回り");

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

private void buttonUpperLeft_MouseUp(object sender, MouseEventArgs e)
{
    // OSC送信
    oscSender.Send(new OscMessage("/input/LookLeft", 0));
}
```

右回転も同様にして作れます。


# トラックバーで回転

ボタンで回転するのはデメリットがあります。
・信号の強度を変えれない（ゆっくり回転できない）
・右回転左回転のボタンをそれぞれ押さないといけないので面倒（一つのボタンで右左どっちも回転したいなぁ）

ドラえも～ん！ボタンより使いやすいUIを出してー！
なんだいのび太くん、それならこれを使いなさい。 「 **トラックバー** 」

<img width="400" alt="oscRotate02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518924/7620d0a9-1857-2a50-344c-56114ad8fe32.jpeg">

トラックバーは、チャネル内のスライダー (サムとも呼ばれることもあります) とオプションの目盛りを含むウィンドウです。

ここで[VRChatドキュメントのOSCのページ](https://docs.vrchat.com/docs/osc-as-input-controller)を見てみます。
``/input/LookHorizontal``で回転ができるようです。
後ろにfloat型で-1をつけると左回転、1は右回転、0で無回転になります。

それでは、制作に入っていきましょう。
トラックバーでスライダーの位置が真ん中を基準0として、右に動かすほど1に、左に動かすほど-1に近い数値を送るようにします。
また、スライダーを離したら、スライダーが真ん中の位置に戻るようにします。
Form1.cs[デザイン]にトラックバーを追加し、名前を「trackBarLook」とします。
Form1.Designer.csにクリックしてる間と離した瞬間にイベントを発生させる処理を追加します。
Form1.csにVRChatで回転するOSC信号を送る処理を追加します。

```cs:Form1.Designer.cs
this.trackBarLook.Scroll += new System.EventHandler(this.trackBarLook_Scroll);
this.trackBarLook.MouseUp += new System.Windows.Forms.MouseEventHandler(this.trackBarLook_MouseUp);
```

```cs:Form1.cs
//初期値50, min0, max100のスライダー
private void trackBarLook_Scroll(object sender, EventArgs e)
{
    //0から100の値が入る
    int sliderValue = trackBarLook.Value; 
    //0から100の値を-1から1の値になるように変換する
    float vrcSliderValue = ((float)sliderValue - 50) / 50;
    label1.Text = $"Value: {vrcSliderValue}";
    Console.WriteLine($"Value: {vrcSliderValue}");

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

//スライダーを離すと値が50に戻る
private void trackBarLook_MouseUp(object sender, MouseEventArgs e)
{
    trackBarLook.Value = 50;
    label1.Text = "Value: 0";
    Console.WriteLine("Value: 0");

    // OSC送信
    oscSender.Send(new OscMessage("/input/LookHorizontal", (float)0));
}
```


# 振り返り

動作確認で回りすぎて酔った。

## OSC記事まとめ

OSC解説記事
[【OSC何も分からん人向け】OSCでVRChatを操作してみよう！](https://qiita.com/mofurune/items/eab78dee10ace5735a9a)

OSCアプリを自作した記事1
[【知識０から】VRChatを別タブで操作できるアプリ自作してみた！【OSC / フォームアプリケーション】](https://qiita.com/mofurune/items/451c88c080692fec97c7)

OSCアプリを自作した記事2
[OSCでVRChatのキャラを回転操作するアプリを自作してみた！【OSC / フォームアプリケーション】](https://qiita.com/mofurune/items/f3879545d6972bd28f11)

OSCアプリを自作した記事3
[CPU使用率をOSC通信でVRChatに送って、アバターの色を変化させてみた](https://qiita.com/mofurune/items/a401f7f16454551c8591)

OSCアプリを自作した記事4
[GPU使用率の取得方法【C#】](https://qiita.com/mofurune/items/38daa7bb61babbe46740)