はじめに
今回はVRChatで『Fx Laye』と『表情固定メニューテンプレート』を使って複数の表情を実装する方法を紹介します。
注意点
またこの記事は既存のVRChatのFx Layerを理解するための記事です。
この記事ではFX Layerを一から設定する方法は解説しません。
1から実装する方法はこちらで紹介しています。
・仕組みが分からなくてもいいから複数の表情を使いたい。
・表情固定メニューテンプレート使い方を知りたい。
という方のみご覧ください。
Fx Layerについて
FxレイヤーはHumanoidボーンのTransform=ボーンの動き変形を記録できません。
しかし、非Humanoidボーンなら動きが記録できます。
そして、gestureレイヤーでは非Humanoidボーンなら動きが記録できません。
これは公式のドキュメントと矛盾します。
何故矛盾するかについてはこちらをご覧ください。
前提条件
下記の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/cocoon-resources/blog-card-cache/e94a75f1e2e30f731e70f93bd270e1eb.jpg)
DLした.zipを展開。
.unitypackageをProjectにドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-35-2.jpg)
Importを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-36-2.jpg)
Assets → ADDSequence → FaceFixControllerにアクセス。
ここにメニューの素材が入ってます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-37-2.jpg)
Controllerのファイルを開きます。
コントローラーが2つあります。
2つの違いがバージョン差である事と片側に_v1.1という表記がある事を確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-38-2.jpg)
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
VRC Avatar Descriptor → Playable Layersを開きます。
FXに『FaceFixController_v1.1』を割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-39-4.jpg)
Parameterの中のデータを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-40-2.jpg)
Projectで強調表示されたパラメーターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-41-3.jpg)
Inspectorを見ます。
Addを押します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-42-3.jpg)
名前をFaceFixに変更。(この名前は重要です)
TypeをIntに変更。
Defaultを0に設定。
Saveのチェックを解除。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-43-2.jpg)
ここの名前はコントローラーのAnimatorを合わせる必要があります。
なのでFaceFixに設定してください。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-44-2.jpg)
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
InspectorでMenuのデータを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-57-3.jpg)
Projectで表示されたメニューを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-45-2.jpg)
Inspectorを見ます。
パイメニューのチュートリアルで作ったFx_Faceを選択。
TypeをSub Menuに変更。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-46-2.jpg)
Assets → ADDSequence → FaceFixControllerにアクセス。
FaceFix_00_SubMenu_Faces.assetがある事を確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-47-2.jpg)
さきほどのアバターに割りたほうのメニューのInspectorを確認。
Fx_FaceのSub Menuに『FaceFix_00_SubMenu_Faces.asset』を割り当てます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-48-2.jpg)
ProjectでFaceFix_00_SubMenu_Faces.assetを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-49-2.jpg)
Inspectorを見ます。
すると1段目にリセットのToggle。
2~8段目にサブメニューが割り当てられてる事を確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-50-2.jpg)
割り当てられたSubMenu1つには8個の表情を割り当てる枠があります。
サブメニューは7個あるので8×7=56この表情を割り当てることができます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-51-4.jpg)
これで表情固定メニューテンプレートの導入が完了です。
表情アニメーションの用意
必要なアニメーションは2つです。
・初期状態の表情
・変更したい表情
幽狐さんのモデルに既にあるアニメーションを使います。
ファイルのAnimationを開くと出てきます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-19-2.jpg)
再生ボタンを押します。
Playモードにします。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-16-2.jpg)
Hierarchyで幽狐さんのモデルにアニメーションをドラッグ&ドロップ。
表情を確認。
変更したい表情を決めます。(今回はThumbsUpを使います)
![](https://signyamo.blog/wp-content/uploads/2022/03/image-17-1.jpg)
Default Faceをドラッグ&ドロップ。
初期状態の表情がDefault Faceな事を確認。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-32-4.jpg)
表情確認ができればもう一度再生ボタンを押します。
Playモードを解除します。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-18-2.jpg)
製法上できたコントローラーを削除します。
※先ほどHierarchyで割り当てたモデルと同じ名前です。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-19-1.jpg)
これで表情アニメーションの用意が完了です。
表情アニメーションの自作したい方はこちらをご覧ください。
表情の割り当て
Hierarchyでアバターを選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/add-07.jpg)
FXに割り当てたコントローラ―を選択。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-58-2.jpg)
Projectで強調表示されたコントローラーをダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-59-2.jpg)
LayerでFaceFixControlを選択。
すると7×8個の表情を入れる場所があります。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-52-5.jpg)
01_に任意の表情を入れます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-53-2.jpg)
02_にも別の表情を入れました。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-56-2.jpg)
FixOffにDefaultFaceを入れます。
![](https://signyamo.blog/wp-content/uploads/2022/03/image-55-2.jpg)
これでパイメニューを使って2個以上の表情を切り替えることができました。
![](https://signyamo.blog/wp-content/uploads/2022/03/Animation_3.gif)
まとめ
今回はFx Layerを使って表情を追加する方法を紹介しました。
またFloatを使って徐々に動作を切り替える方法についてはこちらで解説。
ぜひこちらもご覧ください。
コメント