はじめに
今回はVRchat向けの呼吸ループアニメーションの作り方を解説します。
呼吸スクリプトで動かしてキャプチャーでアニメーション化する方法を解説します。
完成したデータはこちらよりDLできます。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/d14a3087619c22cb91cd370f8219b283.jpg)
制作したデータより細かく呼吸の形を設定したい方、
UnityやVRChatを学びたいという方はご覧ください。
呼吸スクリプト
こちらのページにアクセス。
ダウンロードのリンクをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-26.jpg)
最新版をクリックしDL。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-27.jpg)
DLした.unitypackageをProjectにドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-28.jpg)
Importを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-29.jpg)
BreathControllerの中にあるスクリプトを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-31.jpg)
Hierarchyに呼吸させたいモデルを読み込み。
モデルにスクリプトをドラッグ&ドロップで割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-32-1.jpg)
Projectを右クリック。
Create → Animator Controllerを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-33.jpg)
HierarchyのモデルにAnimator Controllerを割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-34.jpg)
再生ボタンを押してPlayモード。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-35.jpg)
すると呼吸します。
これで呼吸スクリプトの設定が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_01.gif)
必要な方はBreathControllerのパラメータを操作して動作を調整。
※私はそのまま進めます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-37.jpg)
この呼吸はスクリプト(プログラミング)による動作です
スクリプトが入ってるとVRChatにモデルをアップロードできません。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-38.jpg)
そこでここからは動作をアニメーションに変換する方法を紹介します。
動作をキャプチャーする
こちらのページにアクセス。
使い方の中にあるリンクを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-39.jpg)
最新版の.unitypackageリンクを選択しDL。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-40.jpg)
Projectに.unitypackageをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-41.jpg)
Importを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-42.jpg)
Assets → EasyMotionRecorder → Prefabsにアクセス。
中に.prefabデータがある事を確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-43.jpg)
Hierarchyにドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-44.jpg)
読み込んだprefabを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-45.jpg)
Inspectorを確認。
上2つのAnimatorにHierarchyのモデルをドラッグ&ドロップで割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-46.jpg)
再生ボタンを押してPlayモード。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-35.jpg)
Gameの画面でRキーを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-47.jpg)
左下にMotion_FPS=の表示が出ていれば成功です。
8秒ぐらい経ったらXキーを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-48.jpg)
再生ボタンを押してPlay状態を解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-01.jpg)
Assets → Resourcesにアクセス。
中にある.assetデータを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-50.jpg)
Inspectorを確認。
バー上側の明るい色所を右クリック。
Export as Humanoidの方をクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-51-1.jpg)
アニメーションデータが生成されます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-52.jpg)
アニメーションデータを任意の名前に変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-53.jpg)
これでキャプチャーでのアニメーション化が完了です。
アニメーションの最適化
.animファイルをダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-55.jpg)
Animationを確認。
/(^o^)\なキーフレームが打たれてます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-56.jpg)
こちらを綺麗にしていきます。
不要ボーンの削減
呼吸スクリプトのページを見ると使われてるボーンが確認できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-57.jpg)
現在は足や手などのボーンもキーフレームが打たれてるので削除します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-58.jpg)
Animator.****の名前を確認。
下記の名前の物を残して他の全てを削除。
・Chest
・Head
・Left Arm
・Left Shoulder
・Neck
・Right Arm
・Right Shoulder
・Spine
・UpperChest
![](https://signyamo.blog/wp-content/uploads/2022/03/image-59.jpg)
これでボーンの削減が完了です。
不要フレームの削除
Hierarchyで呼吸スクリプトを入れたモデルを選択
![](https://signyamo.blog/wp-content/uploads/2022/03/add-02.jpg)
Breath Controllerを確認。
3.8sec / cycleという一文を確認します。
分かりやすく描くと1周期=3.8秒です。 → ①
![](https://signyamo.blog/wp-content/uploads/2022/03/image-60.jpg)
アニメーションのタイムラインを見ます。
単位は秒数です。
が、3.8秒の”0.8″の扱いに困ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-61.jpg)
そこでフレームを使います。
時間を1秒(1:00)に移動。
この時のフレームを確認。(30フレーム)
1秒=30フレームという事が分かります。 → ②
![](https://signyamo.blog/wp-content/uploads/2022/03/image-62.jpg)
①と②の2つの情報を合わせます。
すると1周期114フレームという事が分かります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-63-1.jpg)
Animation下のCurvesを押します。
Shift+中ホイール、Alt+中ホイールでカーブが見える状態にします。
ループの切れ目に良さそうな所に時間軸を移動。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-64-1.jpg)
Dopesheetに戻りフレームを確認。
3です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-65-1.jpg)
3より前のフレームを選択。
Deleteキーで削除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-66.jpg)
残ったキーフレームをすべて選択。
0:00にドラッグ&ドロップで移動。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-67.jpg)
1周期のフレーム(114)を入力。
115~全てのキーフレームを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-68.jpg)
Deleteキーで削除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-69.jpg)
これで不要フレームの削除が完了です。
不要フレームの削除
キーフレームが多すぎるので間引きます。
これを手動でやります。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_05.gif)
0をスタートに4つのフレームを選択 → 削除を繰り返します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-70.jpg)
最後の所111~114の所も気にせず削除します。
(次の記録フレームが115の為)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-71.jpg)
0フレーム目のキーフレームをコピー。
115フレーム目にペースト。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-72.jpg)
Inspectorの再生ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-76.jpg)
0~115の接続の動作を見ます。
綺麗に動いたのでこれで完成です。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_06.gif)
【フレーム被りの解消】
もし綺麗に動かない方は0と115のフレーム被りを修正してください。
フレームを114に移動。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-73.jpg)
キーフレームを追加ボタンをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-74.jpg)
115フレームを削除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-75.jpg)
これでフレーム被りが解消されました。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-77.jpg)
これで呼吸アニメーション最適化が完了です。
データ整理
ここからは仕上げ作業です。
データの整理します。
Inspector設定
.animファイルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-55.jpg)
Loop Timeにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-80.jpg)
これでInspectorの設定が完了です。
アバターのスクリプト削除
Hierarchyでアバターのモデルを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-02.jpg)
VRChat SDKを開きます。
赤い!のエラー横のAuto Fixを押します。
無くなるまで押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-81.jpg)
Inspectorでスクリプトが消えたことを確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-82.jpg)
これでアバターのスクリプト削除が完了です。
不要データ削除+アニメーションの保存
HierarchyからEasyMotionRecorderを削除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-84.jpg)
制作した呼吸アニメーションを分かりやすい位置に移動。
(ここでは、他講座の繋がりの関係上Test_Exに移動)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-85.jpg)
呼吸アニメーションを移動してから追加した呼吸関係のファイルを削除。
BreathController、EasyMotionRecorder、Resourcesの3つです。
アニメーションを移動してからじゃないとデータが消えます。
私は一度消しました。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-86.jpg)
アニメーションを分かりやすい名前に変更。(Ad_Breath)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-87.jpg)
以上で呼吸アニメーションの作成が完了です。
まとめ
今回はUnityで呼吸アニメーションを作る方法を紹介しました。
こちらをVRChatに設定する方法はこちらで解説。
![](https://signyamo.blog/wp-content/uploads/2022/03/f9fd259376f1bb114dea573e096635c6-160x90.jpg)
ぜひこちらもご覧ください。
コメント