はじめに
今回は呼吸の実装を通してVRChatアバターのPlayable Layers『Additive』使い方を解説します。
この記事を見る事でAdditive LayerとRadial Puppetでの%入力の方法が学べます。
下記の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/02/image-35-1.jpg)
これから作る物について
ラジアルメニューからアニメーションを再生する機構を作ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-05.jpg)
・赤色=ラジアルメニューの表示
・緑と黄色=ラジアルメニューをアバターと同期
・オレンジ=入力をパラメーターに変換
・水色=Animatorによる入力受け皿
・白色=パラメーターによる挙動設定(条件分岐)
・藤色=アニメーションの再生
![](https://signyamo.blog/wp-content/uploads/2022/03/add-04.jpg)
文字潰れ対策、画像拡大用Twitter。
これで円盤の表示で%を入力。
再生速度に変更を加えたアニメーションが再生できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_07.gif)
VRC Avator Descriptorとパイメニューが設定された状態から始めるのでこの部分だけを作ります。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-06.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/02/image-04-26.jpg)
名前をAd_Breathに変更。
※ここの名前は後々重要になります。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-05-23.jpg)
TypeをFloatに変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-06-32.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)
パイメニューの記事で設定したAdditiveのコントロールを開きます。
TypeをRadial Puppetに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-98.jpg)
Paramater RotationでAd_Breath,Floatを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-99.jpg)
メニューとパラメーターがつながりました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-09.jpg)
これでパラメーターの設定が完了です。
Additive Layerの設定
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
VRC Avatar Descriptor → Playable Layersを開きます。
Additiveに割り当てたコントローラーをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-12-13.jpg)
Projectで強調表示されたコントローラ―をダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-13-13.jpg)
Animatorを開きます。
Layers上で+ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-14-13.jpg)
名前をAd_Breathなどの分かりやすい名前に変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-15-14.jpg)
右上の歯車ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-18-13.jpg)
Weightを1に変更。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-19-12.jpg)
Parametersを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-10.jpg)
右上の+ボタンを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-11.jpg)
Floatを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-14.jpg)
名前をAd_Breathに変更
![](https://signyamo.blog/wp-content/uploads/2022/02/image-23-8.jpg)
ここの名前はパラメーターの名前と同じにする必要があります。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-24-8.jpg)
これでパラメーターをレイヤーに接続+レイヤーに割り当てたコントローラーに接続できました。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-12.jpg)
Additive Layerの設定が完了です。
呼吸アニメーションの用意
こちらより呼吸アニメーションをDL。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/d14a3087619c22cb91cd370f8219b283.jpg)
Test_Exなどの任意の場所に保存。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-13.jpg)
作り方はこちらで解説。
以上で呼吸アニメの用意が完了です。
呼吸アニメーション設定
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
VRC Avatar Descriptor → Playable Layersを開きます。
Additiveに割り当てたコントローラーをクリック。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-12-13.jpg)
Additive Layerに割り当てたコントローラーをダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-13-13.jpg)
Animatorを見ます。
LayersがAd_Breathなのを確認。
右側のグリッドがある所にアニメーションデータをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-89.jpg)
出て来たオレンジをクリック
Inspectorを確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-90.jpg)
Speed → Multiplier横のParameterにチェック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-91.jpg)
▼をクリック。
Ad_Breathに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-92.jpg)
これでパラメータ―の処理が再生速度に影響を与えるようになりました。
Multiplier=かけ算
![](https://signyamo.blog/wp-content/uploads/2022/03/image-93.jpg)
Speedを5に変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-94.jpg)
Speed×VRChatからの%入力=呼吸スピードになります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-95.jpg)
20%は×0.20で再生スピードが計算できます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-96.jpg)
すると下記のようになります。
・100%の時は5倍速。
・40%の時は2倍速。
・20%の時は1倍速。
・0%の時はオフ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-97.jpg)
これでパイメニューの入力で速度を変えてアニメーションを再生するパーツが完成です。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-15.jpg)
VRChatにアップロード。
呼吸アニメーションの実装が完了です。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_07.gif)
Projectでアバターに割り当てたExpression Parameterを選択。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-03-28.jpg)
Ad_BreathのDefaultを0.20
![](https://signyamo.blog/wp-content/uploads/2022/03/image-100.jpg)
これで最初から20%=1倍速の速度で再生されるようになりました。
以上で呼吸アニメーションの追加が完了です。
まとめ
今回はAdditive Layerを使ってアバターに呼吸を追加する方法を紹介しました。
他にも表情の追加やエモートの追加について解説しています。
ぜひこちらもご覧ください。
コメント
こんなに体系的にわかりやすく記事にして頂きありがとうございます。