はじめに
今回は物の出し入れ設定する方法を紹介します。
この方法を使う事で物の出し入れができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_3-6.gif)
この記事は下記の2つを目標として作られてます。
・物の出し入れの方法を学ぶ
・Type – Button/Toggle – Boolの使い方を理解する
※この方法で衣装も切り替えできますが、処理が重くなるので完全な別衣装への切り替えはアバターを複数アップロードして切り替えを推奨します。(私個人として)
前提条件
下記の4つを使えることを前提に進めます。
・VRC Avator Descriptor
・Playable Layers
・パイメニュー(Expressions Menu)
・表情固定メニューテンプレート(FX Layerを差し替えた為)
使い方はこちらをご覧ください。
下記のようなVRC Avator Descriptorとパイメニューが設定された状態で始めます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-01-9.jpg)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-02-10.jpg)
これから作る物について
パイメニューからToggleとButtonを使ってアニメーションを再生する機構を作ります。
物の出し入れはアニメーションとして記録します。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-02-7.jpg)
・赤色=ラジアルメニューの表示
・緑と黄色=ラジアルメニューをアバターと同期
・オレンジ=入力をパラメーターに変換
・水色=Animatorによる入力受け皿
・白色=パラメーターによる挙動設定(条件分岐)
・藤色=アニメーションの再生
![](https://signyamo.blog/wp-content/uploads/2022/03/add-01-10.jpg)
文字潰れ対策、画像拡大用Twitter。
これで物の出し入れが制御できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_3-6.gif)
VRC Avator Descriptorとパイメニューが設定された状態から始めるのでこの部分だけを作ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-03-5.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を2回押してパラメーターを2つ追加。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-01-16.jpg)
Fx_Obj_ButtonとFx_Obj_Toggleに名前を変更。
TypeをBoolに変更。DefaultとSavedのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-02-17.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)
パイメニューの記事で設定したFx_Infoを開きます。
中にあるサブメニューをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-05-9.jpg)
Projectで強調表示されたサブメニューを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-06-8.jpg)
Inspectorを見ます。
パイメニューの記事で設定したButtonとToggleを開きます。
ButtonのParamaterをFx_Obj_Buttonに変更。
ToggleのParamaterをFx_Obj_Toggleに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-03-16.jpg)
これでメニューとパラメーターがつながりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-04-4.jpg)
Fx Layerの設定
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
VRC Avatar Descriptor → Playable Layersを開きます。
Fxに割り当てたコントローラーをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-01-9.jpg)
Projectで強調表示されたコントローラ―をダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-08-7.jpg)
Animatorを開きます。
Layers上で+ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-05-16.jpg)
名前をFx_Obj_Button/Toggleなどの分かりやすい名前に変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-74-4.jpg)
右側の歯車マークを押します。
Weightを1に変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-75-3.jpg)
Parametersを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-07-14.jpg)
右上の+ボタンを押します。
Boolを選択。
これを2回繰り返します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-08-12.jpg)
名前をFx_Obj_ButtontとFx_Obj_Toggleに変更
![](https://signyamo.blog/wp-content/uploads/2022/03/image-61-3.jpg)
ここの名前はパラメーターの名前と同じにする必要があります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-05-6.jpg)
これでパラメーターをレイヤーに接続+レイヤーに割り当てたコントローラーに接続できました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-06-6.jpg)
Fx Layerの設定が完了です。
出し入れしたい物の用意
今回はこちらのモデルを使います。
モデルは何でも大丈夫です。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/7476cb3ec573c150cb1e38703936b686.jpg)
ON/OFF切り替えしたい任意のモデルをUnity上に読み込み。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-17-12.jpg)
Hierarchyにkatanaのprefabをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-12-14.jpg)
右クリック → Unpack Prefabを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-13-14.jpg)
モデルのHipsに刀のモデルを入れます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-14-15.jpg)
刀を選択。
Ctrl+Dで複製。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-15-15.jpg)
複製した刀を右手(R)のボーンに入れます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-16-12.jpg)
これで出し入れしたい物の用意が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-10-13.jpg)
名前をObj_OFFとObj_ONに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-11-16.jpg)
再生ボタンを押してPlayモード。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-18-8.jpg)
Hierarchyの3Dモデルにアニメーションをドラッグ&ドロップ。
Hierarchyのモデルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-18-14.jpg)
Animationを開きます。
赤丸ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-19-13.jpg)
Hierarchy → 手の中に入れた刀のモデルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-20-11.jpg)
InspectorでKatana(1)横のチェックボタンを外します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-21-13.jpg)
腰に付けたKatana(刀全体)を選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-86-2.jpg)
チェックボタンを二回押します。
赤いボタン+チェックが入った状態にします。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-87-2.jpg)
腰に付けたKatana(鞘以外の方)を選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-22-11.jpg)
チェックボタンを二回押します。
赤いボタン+チェックが入った状態にします。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-23-10.jpg)
Animationを開きます。
暗い部分のキーフレームをクリック。
全ての記録されたキーフレームを選択します。
Ctrl+Cでコピー。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-88-1.jpg)
フレームを1ずらします。
Ctrl+Vでペースト。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-89-2.jpg)
再生ボタンを押してPlayモードを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-26-9.jpg)
制作したアニメーションを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-27-10.jpg)
Loop Timeにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-28-10.jpg)
製法上の関係でできたコントローラーを選択。
Deleteキーで削除。
これで鞘に収まった状態(刀全体表示有り、鞘の刀有り、手の刀無し)が完成です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-62-4.jpg)
再度、制作したアニメーションを選択。
Ctrl+Dで複製。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-64-4.jpg)
名前をObj_ONに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-63-5.jpg)
Animationを開きます。
現在の数値を確認。
1=オン、0=オフです。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-90-3.jpg)
0と1の数値を調節して下記の状態にます。
・刀全体表示有り
・鞘の刀有り → 鞘の刀無し
・手の刀無し → 手の刀有り
![](https://signyamo.blog/wp-content/uploads/2022/03/image-91-3.jpg)
キーフレームを全選択。
Ctrl+Cでコピー。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-92-2.jpg)
1フレーム移動。
Ctrl+Vでペースト。
これで抜刀状態が完成です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-93-2.jpg)
Obj_OFFのアニメーションファイルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-69-2.jpg)
Ctrl+Dで複製。
名前をObl_Full_OFFに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-70-2.jpg)
Animationを開きます。
現在の数値を確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-94-3.jpg)
すべてを0に編集します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-95-1.jpg)
キーフレームを全選択。
Ctrl+Cでコピー。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-96-1.jpg)
1フレーム移動。
Ctrl+Vでペースト。
これで刀の完全非表示が完成です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-97-1.jpg)
以上3つのアニメーションを用意できればモデルの出し入れの用意が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-76-3.jpg)
出し入れアニメーションの設定
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
VRC Avatar Descriptor → Playable Layersを開きます。
FXに割り当てたコントローラーをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-79-1.jpg)
Projectで強調表示されたコントローラ―をダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-08-7.jpg)
Animatorを見ます。
LayersがFx_Obj_Button/Toggleなのを確認。
右側のグリッドがある所にObj_Full_OFFのアニメーションをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-77-4.jpg)
続いてObj_OFFとOBj_ONのアニメーションをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-78-2.jpg)
Ani Stateを右クリック。
Make Transitionを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-79-2.jpg)
全ての読み込んだアニメーションに線を繋ぎます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-80-3.jpg)
Obj_Full_OFFを選択。
Inspectorを確認。
Write Defaultsのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-99-1.jpg)
Obj_OFFを選択。
Write Defaultsのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-100-1.jpg)
Obj_ONを選択。
Write Defaultsのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-101.jpg)
Any StateからObj_Full_OFFに伸びる線を選択。
Inspectorを確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-98-1.jpg)
Has Exit Timeのチェックを解除。
アニメーションの切り替わりタイミングを可能な限り0に設定。
Comditions右下の+ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-81-3.jpg)
これは条件分岐です。
FX_Obj_Toggle、falseに設定。
これで『Toggleが押されてない時』にObj_Full_OFFが再生されます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-82-3.jpg)
真ん中の線を選択。
Has Exit Timeのチェックを解除。
アニメーションの切り替わりタイミングを可能な限り0に設定。
Comditions右下の+ボタンを2回押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-83-2.jpg)
Fx_Obj_Toggle、true
Fx_Obj_Button、falseに設定。
これで『Toggleが押されたとき』+『Buttonが押されてない時』にObj_OFFが再生されます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-84-4.jpg)
下の線を選択。
Has Exit Timeのチェックを解除。
アニメーションの切り替わりタイミングを可能な限り0に設定。
Comditions右下の+ボタンを2回押し。
→ Fx_Obj_Toggle、true、Fx_Obj_Button、trueに設定。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-85-3.jpg)
これでToggleとButtonでアニメーションを制御できるようになりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07-4.jpg)
この状態でVRChatにアップロード。
するとToggleで刀全体の表示の切り替えができます。
Buttonを押すと押してる間だけ刀を表示できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_3-5.gif)
この挙動の違いがToggleとButtonの違いです。
以上が物の出し入れ設定方法です。
まとめ
今回はFxLayerとToggleとButtonを使って物の出し入れの方法を解説しました。
また、こちらで複数の表情の設定方法を解説。
ぜひこちらもご覧ください。
コメント