はじめに
今回はパイメニューを使ってピースサインを出す方法を紹介します。
Gesture Layerを使います。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation7.gif)
※紹介する内容を応用すれば下記のような事が可能です。
・ピース以外で手の形を作り再生する
・左右別々のボタンで制御
データ配布(追記)
ピースサインのデータを作成して無償配布しました。
こちらよりダウンロードできます。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/ca64e66e4fcc833700e54e40c89d0d47.jpg)
Bonus_Dataに最低限の設定項目を入れてます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-01-27.jpg)
Avatar3.0が設定されてない場合、これを下図のように差し替えれば動作します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-02-29.jpg)
ピースは右左で別れた状態です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-03-26.jpg)
Avatar3.0が既に設定されてた方、Avatar3.0の使い方を学びたい方は続きを見ながら自力で設定してください。
前提条件
下記の3つを使えることを前提に進めます。
・VRC Avator Descriptor
・Playable Layers
・パイメニュー(Expressions Menu)
使い方はこちらをご覧ください。
下記のようなVRC Avator Descriptorとパイメニューが設定された状態で始めます。
VRC Avator Descriptorの設定はこちら
![](https://signyamo.blog/wp-content/uploads/2022/02/image-00.jpg)
パイメニューの作り方はこちら。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-34-11.jpg)
これから作る物について
パイメニューからアニメーションを再生する機構を作ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-06-8.jpg)
・赤色=ラジアルメニューの表示
・緑と黄色=ラジアルメニューをアバターと同期
・オレンジ=入力をパラメーターに変換
・水色=Animatorによる入力受け皿
・白色=パラメーターによる挙動設定(条件分岐)
・藤色=アニメーションの再生
![](https://signyamo.blog/wp-content/uploads/2022/03/add-05-9.jpg)
文字潰れ対策、画像拡大用Twitter。
これで手の動きを制御できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation7.gif)
VRC Avator Descriptorとパイメニューが設定された状態から始めるのでこの部分だけを作ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07-6.jpg)
パラメーターの設定
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
Inspectorを確認。
Parametersの中のデータをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-08.jpg)
Projectでアバターに割り当てたExpression Parameterを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-03-28.jpg)
Inspectorを確認。
Addでパラメーターを追加。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-35-11.jpg)
名前をGes_Peace変更。
TypeをBoolに変更。DefaultとSavedのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-36-10.jpg)
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
Inspectorを確認。
Menuの中のデータをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-07-24.jpg)
Projectでアバターに割り当てたExpression Menuを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-08-20.jpg)
パイメニューの記事で設定したGestureを開きます。
TypeをToggleに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-37-13.jpg)
ParameterをGes_Peace, Boolに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-12-2.jpg)
これでメニューとパラメーターがつながりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-08-4.jpg)
Gesture Layerの設定
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
VRC Avatar Descriptor → Playable Layersを開きます。
Gestureに割り当てたコントローラーをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-01-21.jpg)
Projectで強調表示されたコントローラ―をダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-02-23.jpg)
Animatorを開きます。
VRChat公式が設定したハンドサインの設定があります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-42-9.jpg)
画面左上のParametersをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-44-9.jpg)
右上の+ボタンを押します。
Boolを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-45-8.jpg)
名前をGex_Peaceに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-46-7.jpg)
ここの名前はパラメーターの名前と同じにする必要があります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-13-2.jpg)
Layersをクリック。
表示を元に戻します。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-10-2.jpg)
これでパラメーター~コントローラーまで接続できました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-09-3.jpg)
Gesture Layerの設定が完了です。
ピースサインアニメーションの作成
私が幽狐さん向けに作成したピースサインでよければこちらよりDL。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/ca64e66e4fcc833700e54e40c89d0d47.jpg)
DLした方は『ピースアニメーションの設定』まで読み飛ばしてください。
自作したい方は下記の手順で自作してください。
ーーーーー
Peaceの箱を選択。
Motionの中のアニメーションをクリック。
※ピースサインの修正方法の内容を行った後なのでInspectorの表示が若干異なります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-33-11.jpg)
Projectで強調表示されたアニメーションを確認。
クリックで選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-19-15.jpg)
Ctrl+Dで複製。
名前に~~ 1が付いたことを確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-20-15.jpg)
複製したアニメーションを分かりやすい位置に移動。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-21-15.jpg)
Inspectorを確認。
名前の書かれた所のバーを選択。
すると現状のピースサインが確認できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-22-14.jpg)
Hierarchyよりアバターのデータをドラッグ&ドロップ。
これで見やすくなります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-23-13.jpg)
Animationを開きます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-24-12.jpg)
Left HandのIndexとMiddleの4つのフレームを操作して指の形を変えます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-25-11.jpg)
反対の手にも複製するので覚えやすい数字にします。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-26-12.jpg)
これでLeftのピースサインが完成です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-27-13.jpg)
Animationを下にスクロール。
RightのIndexとMiddleの4つのキーフレームを調整。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-28-13.jpg)
Leftと同じ数値を割り当てます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-29-12.jpg)
これでRightのピースサインが完成です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-30-12.jpg)
暗い部分のキーフレームを選択。
全選択状態でCtrl+C。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-40-9.jpg)
フレームを1つずらしてCtrl+Vでペースト。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-41-10.jpg)
Inspectorに戻りLoop Timeにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-39-11.jpg)
これでピースサインアニメーション作成が完了です。
ピースアニメーションの設定
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
VRC Avatar Descriptor → Playable Layersを開きます。
Gestureに割り当てたコントローラーをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-01-21.jpg)
Projectで強調表示されたコントローラ―をダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-02-23.jpg)
Left Handを開きます。
制作したピースサインのアニメーションをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-47-7.jpg)
Any Stateを右クリック。
Male Transitionを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-48-7.jpg)
ピースサインのアニメーションを2回クリック。
線をつなぎ、選択した状態にします。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-49-6.jpg)
Inspectorを確認。
Write Defaultsのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-50-6.jpg)
Add Behaviourを選択。
VRCAnimatorTrakingControlを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-01-12.jpg)
Left FingersのAnimationにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-02-9.jpg)
ピースサインのアニメーションに繋いだ線を選択。
Inspectorを確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-51-9.jpg)
Has Exit Timeのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-52-9.jpg)
右下の+ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-53-6.jpg)
Ges_Peace / tureを設定。
これでボタンの入力でアニメーションが再生されるようになりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-54-6.jpg)
しかし、この状態だとピースサイン以外の推移でエラーが起こります。
なので干渉対策を行う必要があります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-55-6.jpg)
干渉対策
まずIdleに伸びる線を選択。
Inspectorを確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-56-6.jpg)
右下の+ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-57-7.jpg)
Ges_Peace / falseを設定。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-58-7.jpg)
これを残りの線全てに行ってください。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-59-6.jpg)
次にIdle~Thumbs upの全てのボックスの干渉対策を行います。
まず、Idleのボックスを選択。
Add Behaviour → VRC Animataor Tracking Controlを追加
Left FingersのTrackingにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-14-2.jpg)
これをIdle~Thumbs upの全てのボックスで行います。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-15-2.jpg)
以上で干渉対策が完了です。
Right Handの設定
Right Handを開きます。
作成したアニメーションをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-60-4.jpg)
Ani Stateを右クリック → Male Transitionで線を繋ぎます。
そして、ピースサインのアニメーションを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-04-7.jpg)
Inspectorを確認。
Write Defaultのチェックを解除。
VRC Animator Tracking Controlを追加。
“Right Finger”のAnimationにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-03-7.jpg)
干渉対策を行います。
残りのIdle~Thumbs upボックスにVRC Animator Tracking Controlを追加。
“Right Finger”のTrackingにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-68-2.jpg)
ピースサインに伸びる線を選択。
InspectorとりHas Exit Timeのチェックを解除。
Conditionsで『Ges_Peace / ture』を追加
![](https://signyamo.blog/wp-content/uploads/2022/03/image-69-4.jpg)
干渉対策を行います。
Idle~Thumbs upの線を全てに『Ges_Peace / false』を追加。
※追加処理は線を1つ1つ選択して行ってください。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-62-5.jpg)
これでToggleで手の動きのアニメーションを制御できるようになりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-11-3.jpg)
この状態でVRChatにアップロード。
するとピースサインができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation7.gif)
トラッキングもピースサインの時だけ無効になってます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation6.gif)
これでボタンでのピースサイン設定が完了です。
左右でピースサインを分けたい時の対処法
メニューでToggleをLとR分作成。
パラメーターをLとR分作成。
コントローラーのパラメータもLとR分作成。
そして条件分岐でToggleのRとLを使い分ければ設定できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-63-6.jpg)
配線はこのようになります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-64-5.jpg)
文字潰れ対策Twitter。
これでLとRが分かれた処理ができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-03-26.jpg)
まとめ
今回はパイメニューのToggle入力でピースサインを出す方法を紹介しました。
他にもAvatar3.0の使い方についてこちらで解説してます。
ぜひこちらもご覧ください。
コメント