はじめに
今回は尻尾にIdleモーションを追加する方法を紹介します。
Floatを使うので徐々に再生速度を変えるなどの動作が設定できます。
この記事は下記の3つを目標として作られてます。
・非HumanoidボーンIdleアニメーションを設定する方法を学ぶ
・Type – Radial – Floatの使い方を理解する
・Float入力によるアニメーションのSpeed制御を学ぶ
もし尻尾を意図した方向に動かしたい方はこちらをご覧ください。
前提条件
下記の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)
※記事の性質上どうしてもわかってる方向けになります。
初めてFxレイヤーを使う方はパイメニューで複数の表情を設定する方法(FX)などでFXレイヤーの操作に慣れてから始めることをおすすめします。
これから作る物について
パイメニューからRadial Puppetを使ってアニメーションを再生する機構を作ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-05-3.jpg)
・赤色=ラジアルメニューの表示
・緑と黄色=ラジアルメニューをアバターと同期
・オレンジ=入力をパラメーターに変換
・水色=Animatorによる入力受け皿
・白色=パラメーターによる挙動設定(条件分岐)
・藤色=アニメーションの再生
![](https://signyamo.blog/wp-content/uploads/2022/03/add-05-4.jpg)
文字潰れ対策、画像拡大用Twitter。
これで円盤の表示で%を入力。
再生速度に変更を加えたアニメーションが再生できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_1-4.gif)
VRC Avator Descriptorとパイメニューが設定された状態から始めるのでこの部分だけを作ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-06-4.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-03-8.jpg)
名前をFx_Tailに変更(※ここの名前は後々重要になります。)
TypeをFloat変更。
Defaultの値を0.2に設定。
Saveにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-04-11.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を見ます。
パイメニューの記事で設定したRadialを開きます。
Paramater RotationをFx_Tail, Floatに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-07-7.jpg)
これでメニューとパラメーターがつながりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07-2.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-09-7.jpg)
名前をFx_Tailなどの分かりやすい名前に変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-10-8.jpg)
右側の歯車マークを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-11-8.jpg)
Weightを1に変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-12-9.jpg)
Parametersを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-13-9.jpg)
右上の+ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-14-10.jpg)
Floatを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-15-10.jpg)
名前をAd_Breathに変更
![](https://signyamo.blog/wp-content/uploads/2022/03/image-16-6.jpg)
ここの名前はパラメーターの名前と同じにする必要があります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-17-7.jpg)
これでパラメーターをレイヤーに接続+レイヤーに割り当てたコントローラーに接続できました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-08-2.jpg)
これでFx Layerの設定が完了です。
尻尾アニメーションの用意
⚠今回紹介する方法はDynamic Bone(1つ前の世代の揺れ物ボーン)では動作しなくなります。
しかしPhysBoneではIs Animatedという項目があります。
なので、アニメーションが入っていても揺れ物ボーンが動かせます。
Projectを右クリック。
Create → Animationを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-01-7.jpg)
名前をTail-Moveに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-02-5.jpg)
再生ボタンを押してPlayモード。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-18-8.jpg)
Hierarchyの3Dモデルにアニメーションをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-19-8.jpg)
Animationを表示。
赤い丸ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-20-6.jpg)
Hierarchyで動かしたいボーンを選択。
Eキーで回転コントローラーを表示。
Tail1、Tail2を動かします。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-21-4.jpg)
時間軸をずらしながら動かします。
これでアニメーションができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-22-4.jpg)
00:00のキーフレームをコピー。
終了地点にペースト。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-23-5.jpg)
これでループで動きます。
しかし、カクカクです。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_01-2.gif)
かくかくした動きの治し方
アニメーションファイルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-32-5.jpg)
Loop Time
![](https://signyamo.blog/wp-content/uploads/2022/03/image-33-4.jpg)
Animationを開きます。
下のCurvesを選択。
キーフレームが無い所の処理がどのようになってるかという表示が出てきます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-4.jpg)
カーブのプレビュー操作方法は下記の通りです。
・Shift+中ホイールで縦方向に拡大縮小
・Ctrl+中ホイールで横方向に拡大縮小
・Alt+中ホイールでマウス位置を基準に縦と横方向に拡大縮小
修正したいボーンを選択。
カーブをできるだけ自然で綺麗な形になるように修正。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-24-4.jpg)
Dopesheetに戻ります。
終了フレームを一度削除。
そして00:00のフレームをコピー。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-25-4.jpg)
もう一度00:00のフレームを終了地点にペースト。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-26-5.jpg)
カーブに戻って繋がり方を確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-27-6.jpg)
あとはカーブを見ながら微調整。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_2-4-1024x288.gif)
もう一つのボーンを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-28-5.jpg)
こちらも同様にカーブを調整します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-29-5.jpg)
すると尻尾の動きが綺麗になります。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_02-1.gif)
再生ボタンを押してPlayモード解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-30-5.jpg)
製法上の関係できてしまったコントローラーを選択。
Deleteキーで削除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-31-4.jpg)
これで尻尾アニメの用意が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-32-5.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_Tailなのを確認。
右側のグリッドがある所にTail-Moveアニメーションをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-34-4.jpg)
黄色い箱を押します。
Inspectorを確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-35-3.jpg)
Speedを5に設定。
MultiplierのParameterにチェック。
MultiplierでFx_Tailを選択。
Write Defaultsのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-36-3.jpg)
これでスピードの値×VRChatでの%入力で尻尾のスピードが調節できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-37-4.jpg)
計算式はこちらの通り。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-38-3.jpg)
これでパイメニューから%入力でアニメーションを制御できるようになりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-09-1.jpg)
VRChatにアップロード。
これで、非HumanoidボーンIdleアニメーションの実装が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_1-4.gif)
デスクトップで尻尾を動かした場合は後ろが見えません。
なのでこちらのワールドをお使いください。
まとめ
非HumanoidボーンIdleアニメーションの設定方法を紹介しました。
今回はRadialを使ってFloatで動かしました。
Fxレイヤーには他にも、ボタンを押してON/OFFの切り替えやジョイスティックでの入力といった様々な動作の設定方法があります。詳細はこちらで解説。
ぜひこちらもご覧ください。
コメント