はじめに
今回はVRChatのパイメニューの追加方法を解説します。
VRChat SDK3が入ってる+VRChatにアバターをアップする知識がある事を前提に始めます。
パイメニューの作り方
Projectを右クリック。
Create → VRChat → Aavatars → Expressions Menuを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-01-32.jpg)
右クリック → Rename。
Add_Menuに名前を変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-02-28.jpg)
Add_Menuをクリックして選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-03-27.jpg)
Inspectorを見ます。
Active Avatarで使いたいアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-04-25.jpg)
Add Controlを押します。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-05-22.jpg)
すると新しいコントロールができます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-06-31.jpg)
これがパイメニューの1つの枠です。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-01-2.jpg)
コントロールはNameで名前を変更できます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-07-23.jpg)
メニューの最大数について
1つのメニューに対して8個までコントロールを追加できます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-08-19.jpg)
VRChatだとBackとResetの項目が増えるので10個にまります。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-12-12.jpg)
VRChatモデルへの割り当て
Hierarchyで割り当てたいモデルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-09-22.jpg)
Inspectorを見ます。
VRC Avatar Descriptor → Expressionsを開きます。
MenuにAdd_Menuを割り当てます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-10-20.jpg)
この状態でVRChatにアップロード。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-11-15.jpg)
VRChat上でメニューを開きます。
Expressionsを開きます。
すると追加したパイメニューが出てきます。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-02-2.jpg)
動作はしません。
何も割り当てて無いからです。
以上でVRChatモデルへの割り当てが完了です。
8個以上のメニューの作り方
メニューの中にもう1つメニューを入れる事で8個以上の処理を設定できます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-20-8.jpg)
Create → VRChat → Aavatars → Expressions Menuを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-13-12.jpg)
SubMenu-1に名前を変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-14-12.jpg)
SubMenu-1をクリックして選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-15-13.jpg)
Inspectorを確認。
Add Controlでコントロールを追加。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-16-11.jpg)
こちらも同様に8個まで作りれます。
名前はSub1~8としました。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-17-11.jpg)
最初に制作したメニューをクリックして選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-03-2.jpg)
Inspectorを確認。
任意のメニューを開きます。
TypeをSub Menuに変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-18-12.jpg)
Sub Menuの所に制作したメニューをドラッグ&ドロップで割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-19-11.jpg)
VRChatにアップロード。
すると8個以上のメニューを使うことができます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-20-8.jpg)
メニュー制作の実習
こちらのようなMenuを制作してください。
今後の講座の説明の為に必要になります。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-21-9.jpg)
構造はこのようなものになります。
Projecctで制作したMenuは3つです。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-22-8.jpg)
名前とサブメニューを適切に使えればできます。
テスト問題のような感覚で制作してください。
動作の割り当て
最初から意図した動作を割り当てるのは大変です。
これだけの項目の理解と設定が必要になります。
![](https://signyamo.blog/wp-content/uploads/2022/02/02.jpg)
なのでまず、VRChatのデフォルトのアクションを割り当てる方法を解説します。
動作を割り当てたいメニューを選択。(SubMenu_Dfを使用)
![](https://signyamo.blog/wp-content/uploads/2022/02/add-04-1.jpg)
Inspectorを確認。
Parameterの[None]を選択。
VRCEmote,Intを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-23-7.jpg)
Valueを対応するコントロールの数に設定。
これを1~8まで繰り返します。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-24-7.jpg)
これで動作の設定が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-25-8.jpg)
VRChatにアップロード。
これで動作の割り当てが完了です。
![](https://signyamo.blog/wp-content/uploads/2022/02/Animation_01.gif)
ボタンの形を合わせる
メニューの動作にはボタンの形のような違いがあります。
具体的にはこんなイメージです。
![](https://images-fe.ssl-images-amazon.com/images/I/41Nqp3mGEAL._SL160_.jpg)
![](https://images-fe.ssl-images-amazon.com/images/I/41PFHFXSIdL._SL160_.jpg)
![](https://images-fe.ssl-images-amazon.com/images/I/412M7Oz-o7L._SL160_.jpg)
![](https://images-fe.ssl-images-amazon.com/images/I/41Cs2862FJL._SL160_.jpg)
出典:amazon.com
これが適切に設定されてないと正しい動作になりません。
![](https://signyamo.blog/wp-content/uploads/2022/02/Animation_02.gif)
初期のメニューを比較してみると▶マークが無いことが確認できます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-27-7.jpg)
▶なしが左側のボタン。(押してる時だけ動作する=Button)
▶ありが右側のボタン。(押すたびにON/OFFの切り替え=Toggle)
なのでこの▶マークを付けます。
![](https://images-fe.ssl-images-amazon.com/images/I/41Nqp3mGEAL._SL160_.jpg)
![](https://images-fe.ssl-images-amazon.com/images/I/41PFHFXSIdL._SL160_.jpg)
出典:amazon.com
2,4,5,8のコントロールを開きます。
TypeをすべてToggleに変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-05-1-429x1024.jpg)
VRChatに再アップロード。
すると▶マークが付きます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-29-3.jpg)
デフォルトのメニューと同じ位置に▶が付いてます。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-30-3.jpg)
これで正しい動作になります。
![](https://signyamo.blog/wp-content/uploads/2022/02/Animation_03.gif)
ボタンの形(詳細)
動作に影響を与えるボタンは主に5種類あります。(SubMenuを除外)
![](https://signyamo.blog/wp-content/uploads/2022/02/add-06-2.jpg)
詳しく知りたい方はこちらをご覧ください。
ここからは5つのボタンの設定方法とVRChatでの挙動を紹介します。
SubMenu_5-Fxを使います。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-31-5.jpg)
Tpyeをコントローラー名に合わせたものに変更します。
2AxisにはTow Axis Puppetを設定。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-32-5.jpg)
4AxisにはFour Axis Puppetを設定。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-33-2.jpg)
するとボタンの形が変わります。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-07-1.jpg)
Buttonが一番左のボタン。
Toggleが左から2番目のボタン。
2と4Axisが左から3番目のボタン。
Radialが一番右のボタン。というイメージです。
![](https://images-fe.ssl-images-amazon.com/images/I/41Nqp3mGEAL._SL160_.jpg)
![](https://images-fe.ssl-images-amazon.com/images/I/41PFHFXSIdL._SL160_.jpg)
![](https://images-fe.ssl-images-amazon.com/images/I/412M7Oz-o7L._SL160_.jpg)
![](https://images-fe.ssl-images-amazon.com/images/I/41Cs2862FJL._SL160_.jpg)
出典:amazon.com
ButtonとToggleはオンとオフ等の瞬発的な変化を作るもの。
Radialがボリュームの方な滑らかな変形を作るもの。
この2つだけ覚えれば大丈夫です。
2と4Axisは少し複雑なので猛者向けです。
使用はおすすめしません。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-34-2.jpg)
基本はButton、Toggle、Radialの3つで十分です。
…が、使いたい方はこちらをご覧ください。
![](https://signyamo.blog/wp-content/uploads/2022/06/a11b4bb3ba448d1fa402ac3dc62cc91f-3.jpg)
アイコンの変更
説明用にSubMenu_5-Fxにコントロールを追加。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-08-1.jpg)
Icon横の◎ボタンをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-09-1.jpg)
Assetsの中にVRChat側が用意した素材が入ってます。
任意の画像素材を選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-10-1.jpg)
Iconに割り当てられたことを確認。
VRChatにアップロード。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-11-1.jpg)
これでアイコンの変更が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-12-1.jpg)
コントロールの削除
コントロール右上のDeleteを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-13-1.jpg)
これで削除が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/02/add-14-1.jpg)
今後の為の設定(Parameter)
今後パイメニューを動かすためにParameterが必要になります。
Parameterを制作して設定してください。
Projectを右クリック。
Create → VRChat → Aavatars → Expressions Parametersを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/add1.jpg)
Add_Parameterという名前に変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/add2.jpg)
Hierarchyで割り当てるモデルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-09-22.jpg)
Inspectorを確認。
VRC Avatar Descriptor → Expressionsを開きます。
ParametersにAdd_Parameterを割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/02/add3.jpg)
これでParameterの設定が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/02/add4.jpg)
まとめ
VRChatのパイメニューの作り方について解説しました。
今回の実習通り行えばこちらのようなパイメニューが制作されたと思います。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-35-1.jpg)
このパイメニューを使って”任意の動作を設定する方法”と”必要になる概念”はこちらで解説。
ぜひこちらもご覧ください。
ーーー必要になる概念ーーー
VRC AvatorDescriptorの使い方
Playable Layersの使い方
Layerの違いについて
パイメニューのTypeについて(ボタンの形)
ーーー任意の動作設定方法ーーー
呼吸アニメーションを設定(Additive Layer)
エモートの設定(Action Layer)
物の出し入れ(Fx Layer)
表情追加(Fx Layer)
ぜひこちらもご覧ください。
コメント