【VRChat】Modular Avaterを用いて髪型やアクセサリーをモジュール化！簡単に管理する方法を紹介します！

前置き

Boothではあまりにたくさんの魅力的な髪型が販売されているのに、せっかく購入したとしても付け替えがあまりに面倒で、結局は同じ髪型を使い続けてしまっている！そういうことはないでしょうか？

このNoteではModularAvatarを用いて髪型やアクセサリをモジュール化、簡単に管理するための方法を紹介します。複数の髪型を1アバターに導入して、Expression Menuで簡単に変更できるようになります。
動画で実際の動きを見てほしいのですが、Prefabを出し入れするだけで複数の髪型の変更がわずかな時間で完了しています。
基本的なUnityの動作に対する理解も深まり、今後の改変で応用が効くようになるかもしれません。

前提準備

ModularAvatarの事前導入が必要です

モジュラーアバター | Modular Avatar

やっていること

やっていることは非常に簡単です。
INT型Parameterを１つ用意します（この説明ではhair_changeとしています、この記事でParameterと言えばこれやこれの状態を示していると考えてください）
アバター側のFXレイヤーにhair_change=0のときデフォルトの髪型を表示、それ以外だと非表示とするAnimationを設定します。

追加する髪型に対してModular Avatarで追加されるコンポーネントであるMerge AnimerterとMenu Installerで表示のOnOffギミックを追加・モジュール化することで髪型のPrefabを出し入れするだけで髪型の追加・除去が非破壊で行えるようになるという仕組みです。
Boothで販売されているModular Avaterで簡単導入系のアセットを自ら作る手順を説明しているとも言えます。
最初に1回だけ必要な手順と、その後髪型を追加する度に繰り返していただく手順で分かれています。以下でそれぞれ説明させていただきます。

アバター側で行う準備（最初のみ必要な手順）

アバターにInt型のパラメーターを追加、FXレイヤーにパラメータの変化に応じてデフォルトとなる髪型の OnOffを制御するレイヤーを作成します。
（この手順すらModular Avaterを用いて行うことで元々のアバターに一切手を加えずに導入が可能ですが、今回はアバターのファイルを直接編集します）

アバターにパラメーターを登録しよう！

ここではParameterを管理するファイルに今回使用するParameterを追加する手順を説明しています。アバターのRootに存在するコンポーネントであるAvater Discripterからパラメーターを管理するファイルを見つけ、中身を編集しています。
④で指定しているSavedはワールド移動したり、アバターを変更して戻した時などに値が保存されるかを指定していて、Syncedは他人から見ても有効になるかを指定しています。

FXのコントローラーに髪型を操作するレイヤーを追加しよう！

これはFXを編集しています。FXはアバターの機能面（着替え機能やおっぱいの大きさ調整など）を動かすためのAnimationやその流れを規定し、保存している領域です。複数のレイヤーで管理されています。
⑥でデフォルトの髪型を OnOffするAnimationを保存するレイヤーを作成し、デフォルトではWeightが0（無効化）のため1（有効）にしました。

注：この画像は設定済みのものとなっています。
本来この時点では緑のEntryState、水色のAnyStateのみ存在するはずです。

FXのコントローラーにもパラメーターを追加しよう！

今編集しているファイルはAnimetion controllerという種類のものですが、これは必ずAnimationとParameterで成り立っています。「さっきもやったじゃん」と思いますが、コントローラー君はここで登録されているものしか扱うことができないので、controllerを編集するときは毎回パラメーターを追加する手順が必要になります。

実際にアニメーションを作成しよう！

実際のAnimationを作成していきます。①で真っ新なAnimationを作成します。②でD＆DすることでAnimationをそのオブジェクトの関連付けをしています。
（Animationの同一ディレクトリにAnimation controllerが自動生成され、ヒエラルキー上のオブジェクトにはAnimator controllerを取り扱うコンポーネントが生成され、自動生成されたAnimation controllerが登録されるかと思います）

Animationファイルの中身はAnimation windowを開いた状態でAnimationファイルと関連づけられたオブジェクトを選択することで編集可能となります。グレーアウトしていた録画ボタンが赤くなり、押すことで録画が可能です。

Animationファイルに実際に録画を行う工程です。録画ボタンを押すと録画開始、点灯中にオブジェクトに行った変更がAnimation Windowに記録されていきます。
今回はオブジェクトの表示非表示チェックボックスを2回クリックすることでオブジェクトを表示する、という動作を記録しました。
その後録画ボタンを再度押して、録画終了です。

注：アバターに直接関連づけられたAnimationに録画を行う際、アバターがTポーズから前屈姿勢に変わってしまう事象がよく見られます。
CTRL +Zでも戻せませんし、そのままシーンを保存してしまうと回復不可能になってしまうのでAnimationの録画前は意識してシーンファイルを複製したりしてシーンを保護するよう気をつけてください。

先ほど作成したAnimationはあくまでオブジェクトを表示する物です。実際運用するためにはその逆のオブジェクトを非表示にするAnimationも同様に必要となります。複製したファイルには髪型のオブジェクトを1にする、つまり表示するという動作が記録されていますので、これを0にすることで非表示にするAnimationが作成できました。

アニメーションをアニメーションコントローラーに設定していこう！

作成したAnimationをAnimation Controllerに登録していく工程です。
その後④で往復する矢印（Transition）を作成しました。
例えるならばすごろくの様に、緑色のEntryを始点に矢印に沿って今いる場所が移動（遷移）し、そこに存在するAnimationが再生される仕組みです。
特別な条件付けをしなければ自動でTransitionの先に遷移していくので遷移に条件をつけていきましょう。

遷移の条件としてhair_changeのパラメーターを活用しましょう。
画像上ではhair_changeがnot equal 0の場合、状態はoff側に遷移する様に設定しています。
こうすることで、後に追加する他の髪型を表示するためhair_changeの値を0以外にしたとき、追加した髪型の邪魔にならないようデフォルトの髪型の表示がoffになります。
また、その逆も然りで、他の髪型を非表示にした際にアバターが禿げてしまわないようoff→onの矢印も設定しました。

ここまでが事前準備としてアバター本体に組み込む作業です、お疲れ様でした。ここから先は実際に髪型を増やしていくために毎回行なっていただく作業になります。慣れればほんの数分で1つの髪型が追加できるようになりますよ。

髪型毎に適応が必要な作業

新しい髪型を配置してコンポーネントを追加しよう！

Boothで購入した髪型を導入していきましょう。
今回は4o4o様のMessy low ponytailという髪型を購入させていただき、説明に活用させていただきます
https://booth.pm/ja/items/5808286

Messy low ponytail - 4o4o - BOOTH

追加髪型のPrefabをシーン上に配置、その髪オブジェクトにおける最も上の階層に各種コンポーネントを追加していきましょう。

それぞれのコンポーネントが何をやってくれるのかざっくり説明すると
①Bone Proxy
→髪型を頭部に追従させてくれる
②Merge Animator
→アバターをアップロードする際に、アバターのFxレイヤーに登録したレイヤーを結合してくれる
③Menu Installer
→アバターをアップロードする際に、髪型を操作するためのメニューをExpression Menuに追加してくれる

コンポーネントに登録する中身（Expression Menu）を用意しよう！

Menu instalerで追加髪型を操作するためのToggleボタンを追加します。中身となるExpressionMenuを用意しなければならないのでここで作成しましょう。
Parameterの設定はMenu installerのコンポーネントで行うのでここでは必要ありません。

コンポーネントに登録する中身（Animator）を用意しよう！

追加髪型をOnOffするためのanimationを作成します。デフォルトの髪型をOnOffするために行った作業と全く同じなので一部説明を省略させていただきます。

原則的にAnimationというものは、そのAnimationが関連づけられたオブジェクト以下の階層に存在するオブジェクトしか操作することができません。
この場合、さらに上位にあるアバターそのものや別の髪型を操作するような指示は録画できません（インタラクトした時点で録画が停止します）
また、コンポーネントを追加したオブジェクトそのものを非表示（無効化）することはおすすめできませんので、それよりひとつ下位の階層に存在するオブジェクトをすべて（Armatureごと）非表示にする、というのが良いでしょう。

遷移条件はデフォルトの髪型を設定した時とは逆になります。hair_change=0のときはOff（デフォルトの髪型が表示され、追加髪型はOff）
追加髪型に設定した通し番号（今回は32）を指定し、hair_change=32のとき追加髪型が表示されるよう設定しました。

完成した中身をコンポーネントに設定していこう！

ここで、出来上がったAnimation ControllerとExpression Menuをコンポーネントに突っ込んでいきます。
③はMenu Installerで追加するExpression  Menuのトグルスイッチを押した時、hair_chengeをどの数字に変化させるかを指定しています。今回は32になっています。

作業完了です、お疲れ様でした。
作成したPrefabは最初の動画のように別シーンの同一アバターに出し入れして簡単に脱着が可能です。
（Menu Installerで挿入されるメニューの入れ子としてExpression Menuに空の領域を用意して指定すると、より纏まって便利ですよ！）

非表示の髪型のBoneやPhysboneは非表示のとき無効化されているので動作を重くすることはありませんが、マテリアルスロットやテクスチャメモリには影響し、描画負担をかけているはずです。
沢山の髪型を実装する際には適切に取り込み画質を制限するなど工夫をすると良いでしょう（lil Avatar Utilsを活用するのがおすすめです！）

ではみなさま、よいVRCライフをお過ごしください！