VRChatを始めて3ヶ月、改変を始めて2ヶ月が経ちました。
だいたい自分の中でのアバター管理と着せ替え方法が固まってきたので、いつもやってる対応衣装を着せるまでの流れを洗いざらい公開してみようかなと思い書いてみます。
体系的にまとめるのではなく、アバターを準備してから実際にアバターに衣装を着せる流れを追体験できるようそのまま書いてみました。
始めて2,3ヶ月なため、VRChatもUnityも完全に理解できていません。
こうするともっと楽だぞとか、この使い方は間違ってるとかあれば教えてもらえると嬉しいです。
注意
目次を見ていただけたら分かる通り、初心者向けに大体全部書いたのでとても長いです。適宜読み飛ばしてください。
Prefab VariantやModular Avatarについてはそれぞれ記事を分割する予定です。
記事メンテ日：2024/3/25
書くこと
- Prefab Variantを使うと便利
- マテリアルの変更方法
- アニメーションの設定方法
- Modular Avatarを使った対応衣装の着せ方
- Modular Avatarを使ったExメニューの作り方
- Exメニューから衣装の色変え/ONOFF
対象読者
- 着せ替えやってみたいけどよくわからない人
- Prefab Variantどうやってつかうかよくわからない人
- Modular Avatar使ってみたいけどよくわからない人
前提条件
- なんらかのアバターはすでにアップロードしたことある
- VCCやUnityはインストールされてる前提で…
- シェーダーはliltoonが使われているとして説明します
- Modular Avatar バージョン1.7.7
- Unity 2019.4.3f1
- 注意
- 書くこと
- 対象読者
- 前提条件
- おおまかな流れ
- 必要なツールをインストールする
- アバターを準備する
- Modular Avatarで衣装を着せる
- 色変え用のマテリアルを準備する
- 衣装の色変えやONOFFのアニメーションをつくる
- 色変え用のExメニューを作る
- Gesture Managerで確認する
- アップロード
- 別の服を着たいとき
- まとめ
- おまけ
- 番外編
- 衣装代
おおまかな流れ
対応衣装の着せ替えは以下の流れでやっていきます。
この流れの中でPrefab VariantやModular Avatarを使うととっても便利になります。
- 必要なツールをインストールする
- アバターを準備する
- Prefab Variant
- 衣装を着せる
- MA Merge Armature
- MA Mesh Settings
- 色変え用のマテリアルを準備する
- 衣装の色変えやONOFFのアニメーションをつくる
- MA Merge Animator
- MA Parameters
- 色変え用のExメニューを作る
- MA Menu Installer
- MA Menu Group
- MA Menu Item
- Gesture Managerで確認する
- アップロード
Exメニューからポチポチして色を変えたり、衣装のONOFFをやるには、Exメニューをポチると同時に対応するパラメーターを変更させ、マテリアルやメッシュの表示非表示を変更するアニメーションを実行させて実現します。
なので、それに必要なものをちまちまつくっていきます。
VRChatのアバター改変に必要な知識
VRChatのアバター改変においては最低限のUnityの知識とVRChatのAvatar3.0という枠組みを知る必要があります。
特に、Avatar3.0とは何かを知ることは非常に大切です。
これを知っているか知っていないかで理解度が大きく変わってくるため、見様見真似でいじったあとはこのあたりを学ぶようにしましょう。
めかにゃんこさんの動画や記事をおすすめしています。
そもそもUnityがわかんない…という場合はきくじんさんの記事に目を通してから望むのがよいです。
必要なツールをインストールする
Modular Avatar
リンク先のここからVCCに追加します。
リポジトリを追加しましょう。
リポジトリ追加後、プロジェクトにModular Avatarを追加するには以下の場所から追加します。
ここでは初めての方向けに新規プロジェクトを立ち上げてみます。
※余談ですが、VPMリポジトリがあるのであれば、liltoonなどこういったツール群はVPMリポジトリ経由でVCCで管理・インストールするようにしましょう。
ライブラリのアップデート等がすぐに行えるためメリットしかないです。
プロジェクトの準備
プロジェクト作成
- Select template
- Avatar Projectを選択
- Project Name
- わかりやすい名前を適当に
- Project Location
- 自分はデフォルトのままにしてます
設定できたら「Create Project」をクリック
必要なツールの追加
+ボタンをクリックして必要なツールを追加します。
- Gesture Manager
- Modular Avatar
追加するとこのようになるはずです。
追加できたら右上の「Open Project」をクリックしてプロジェクトを開きます。
アバターを準備する
私はサフィーちゃんを使っているので、サフィーちゃんのunitypackageを追加します。
自分はなにかを追加したときに追加したAsset直下に「_Custom」というフォルダを追加して、変更したものに関してはすべてこのフォルダに入れるようにしています。
あと、自分でいじったものに関してはすべて「_」を頭につけるようにしてます。あとで見たときにこれは自分でいじったもの、これは標準のものって分かりやすいので、この命名方法を取っています。
フォルダ追加は右クリック→Create→Folderで追加できます。
Prefab Variantを準備する
Prefab Variantというコピーのようなものを使うと、変更の管理だったり適用だったりがめちゃくちゃ楽になるので必ずPrefab Variantを作ってそれを使うようにしています。
自分の場合
自分のサフィーちゃんの場合4パターン種類を作って、着たい服に合わせて使うPrefabを変えています。
- 素のサフィーちゃんから髪の毛や目など自分好みに改変したもの（ベースアバター）
- 改変ベースとなるアバターでこれを使うことはまぁない
- ベースアバターから服のみをEditOnlyにして省き、チョーカーなど小物をつけたアバター（アバター2）
- 手袋はめたり、ニーソ履いたり、アウター羽織ったり、服は別のもの着るけど小物とかは使いたいときに使用（水着とかが多い）
- アバター2からニーソ、靴以外をEditOnlyにして省いたアバター（アバター3）
- 靴とか靴下は付いてこなかった服を着るときに使用
- アバター3から下着以外をEditOnlyにして省いたアバター（アバター4）
- 靴や靴下も服に付いてくるので素体だけ使いたいときに使用
こんな感じ…。
このようにしてると何が便利かというと、
- アバターに更新入ったとき
- アバターのprefabの上に自分の変更が乗っかるので更新しても改変した内容は維持される（内容によっては壊れるときもあります…）
- 素体に新しい改変を加えたくなったとき
- Prefab自体をいじるのではなくPrefab Variantをいじって更新すると全アバターに適用される
自分の場合、あとから猫耳入れたくなったのでVariantの方に猫耳を入れて適用ってやっただけで全アバターに反映されて、ちまちま1アバターずつ猫耳追加とかいう苦行をやらなくてすみました。
あとから改変したくなったときにめちゃくちゃ重宝しています。
ここでは「自分好みの改変を施したもの」「素のアバターから服を着るのにいらないもの消したもの」の2つを作ってみます。
Prefab Variantを作る
アバターのPrefabを右クリック→Create→Prefab Variantを選択して作成します。
できました。
あとで複数のVariantを作成するので_CustomフォルダにPrefabsフォルダを作成してそこに移しておきます。
名前もいい感じに分かりやすくしておきます。
追記：※今回のようにただのPrefab（Original Prefab）からPrefab Variantを作るのはあまりおすすめしていません。
Original Prefabは元となるFBXからの接続が切れているため、元のFBXに変更が入った際、全部壊れる可能性が高いです。
そのため、Original PrefabからではなくFBXからPrefab Variantを自分で作成するほうがよいです。
正直なところ、衣装製作者様等はFBXからPrefabを作成する際、Original Prefabとするのではなく必ずVariantとして作成していただきたい…。
Variantになってるのを見るとめちゃくちゃ嬉しくなります。ありがとうございますありがとうございます。
詳しくは別の記事でフォローする予定です。
追記ここまで
ここからPrefab Variantに対し、自分好みの改変を入れていきます。
とりあえず髪の毛の色を変えたいので、テクスチャやマテリアルを準備します。
マテリアルをいじっても色は変えられますが、テクスチャの色を直接変えるほうがきれいに仕上がるのでできればテクスチャから変えるほうがいいかなと思っています。
テクスチャを準備
アバターに付属してきたPSDファイルをいじってテクスチャを準備しました。
準備したファイルをAssetsにドラッグ&ドロップで追加できます。
マテリアルを準備
マテリアルはアバターのものをコピーして持ってきます。
※この説明はliltoonの場合です。UTS2やPoiyomiなどは別途ググってください。
追記：Unity2022からMaterial VariantというPrefab Variantのマテリアル版の機能が実装されました。
Unity2022へアップデートされている方は複製のかわりにVariantを作成してもらえるといいと思います！
追記ここまで
サフィーちゃんは髪の毛のマテリアルが3つあるので、3つ選択した状態でCtrl+Dで複製します。
名前を変えてフォルダも移しておきます。
マテリアルを選択してInspectorを見てみるとサフィーちゃんの場合、3箇所に髪のテクスチャが設定されているのがわかります。
それらを準備したテクスチャに置き換えます。
ドラッグ&ドロップで設定できます。
設定できたらサフィーちゃんに準備したマテリアルを設定してみます。
さっき作ったアバターのPrefab VariantをHierarchyにドラッグ&ドロップします。
髪の毛のメッシュを選択して、マテリアルを準備したものに入れ替えます。
こうすると髪の毛の色を変えることができますが、このままだとサフィーちゃんに設定されていた影色や輪郭線がそのままなので、あんまりきれいではないです。
影色や輪郭線もいい感じになるように思い思いの設定をマテリアルに施します。
こまかな設定は慣れと気合です。
渾身の設定をするとこんな感じになりました。かわいい。
Prefab Variantに適用する
まずはHierarchy上に配置したPrefab Variantを選択してInspectorを見てみます。
右上のOrverridesをクリックすると元のPrefabから変更した箇所が列挙され、変更した設定はすべて太字で表示されます。
この変更をPrefab Variantに適用してみましょう。
適用がわかりやすいように同じPrefab Variantをもう1つHierarchy上に配置してみました。
ひとつはまだ変更が適用されていないので元のサフィーちゃんのままです。
Apply Allをクリックすると、
このように同じPrefab Variant同士で変更が適用されました。
この変更の一部だけ適用したいな～ってときは変更したいコンポーネントを選択（この場合Skinned Mesh Renderer）して、右クリック→Apply as Override～を選択すると一部だけ適用することも可能です。
このように前髪は変更されずそのまま残りました。
また、変更を取り消したい場合は反対にRevert Allまたは個別にRevertすると取り消すことができます。
色々いじってやっぱやーめたってときに便利です。
素体用Prefab Variantも作ってみる
同じようにして素体用のPrefab Variantも作ってみます。
最初に作ったPrefab Variantを右クリック→Create→Prefab Variantを選択して作成します。
フォルダーを移動させて、適当にいい感じの名前をつけて分かりやすくしておきます。
これも一旦Hierarchy上にドラッグ&ドロップします。
Prefab Variantをダブルクリックして編集することもできるのですが、Hierarchy上でいじるほうがわかりやすいです。
別途服を着るので必要のないものは非表示にしていきます。
今回はグローブ、アウター、靴、スカート、上着、靴下を非表示にします。
まとめて選択してInspector上でチェックを外し、EditorOnlyに変更します。
EditorOnlyにすることでVRChat上にアップロードするときに含まれなくなり、アバターが軽くなります。
今回はメッシュのみ非表示にしましたが、可能であれば非表示にしたメッシュでしか使っていないPhysBoneやBoneも消しておきたいところです。
このツールを使うと楽に消すことができるのでよかったら見てみてください。
narazaka.booth.pm
追記：こちらのツールはAvatar Optimizerに統合されたので、基本的にはAvatar Optimizerを利用してください。
変更しおわったらPrefab Variantに変更を適用します。
先程と同様にPrefab Variantを選択してInspector右上のOverridesをクリック→Apply Allをクリックすると変更が適用されます。
これで2つのPrefab Variantを作ることができました。
ベースとなるPrefab Variantをいじってみる
あとからベースとなるアバターに変更を加えたくなることは往々にしてあると思います。
ちょっとやってみましょう。
あとからヘアピンとヘッドホンを消したくなったとします。
この場合、ベースとなるPrefab Variantをいじらなくても変更が適用できます。
素体用に作ったPrefab Variantから変更を適用してみます。
さっきやったようにEarphoneとHairPinを非表示にしてEditorOnlyにしました。
これをベースとなるPrefab Variantの方に適用します。
先程と同様にPrefab Variantを選択してInspector右上のOverridesをクリック→適用したいコンポーネントをクリック（今回はEarphone）→Apply▼をクリック→Apply As Override in Prefab 'ベースとなるPrefab Variant'をクリック
そうすると、ベースとなるPrefab Variantにも適用されます。
衣装を着せたアバターをいじってて、うわーめちゃくちゃいい改変ができた！他のアバターにも適用したい！ってなったときに、同じようにベースのPrefab Variantに直接変更を加えられるのでとっても便利です。
今回は髪の毛の色を変えただけですが、チョーカーを入れてみたり、イヤリングつけてみたり、目とか肌のテクスチャも変えたのを適用したりできるので、色々やってみましょう。
その他運用について
サフィーちゃんの場合、素体用のマテリアルとテクスチャ、BlendShapesが設定されているので、ちゃんと使う場合はもう少し設定が必要です。
サフィーちゃんには最初から素体用のPrefabが付属しているので、それと合わせるように設定することになります。
このようにアバターによっては最初から設定された素体用のPrefabが付属しているので、素体用のPrefabとにらめっこして元のアバターのPrefabを設定してPrefab Variantを作るか、潔く素体用PrefabからPrefab Variantを作るかどっちかですね。
サフィーちゃんの場合、素体用のPrefabにはメガネが含まれてなく…それを使いたいのでちまちま自分で素体用のPrefab Variantを作って運用しています。
説明を省くため、以降の素体は素体用PrefabからVariantを作ったものを使って説明していきます。
Modular Avatarで衣装を着せる
前置きでめちゃくちゃ長くなってしまいましたが、いよいよ着せ替えをやっていきます。
Modular Avatar対応の衣装でなくても、だいたい着ることができます。
今回はかぷちやのぶーすさんのRe:セーラーロリを着せてみます。 capettiya.booth.pm
ダウンロードしてunitypackageをダブルクリックしAssetsに追加します。
サフィーちゃん用Prefabを探して、
Prefab Variantを作ったりフォルダを作って移動させたりします。
Hierarchy上に素体用のPrefab Variantと作った衣装のPrefab Variantをドラッグ&ドロップし、画像のように配置します。
配置した衣装を右クリック→ModularAvatar→Setup Outfitをクリック
問題なければこれで終わりです。
色変えとかしないのであればこのままアップロードするだけで動きます。
ボーンの名前を確認する
Modular Avatarはプレイモードに入った瞬間やビルド時に衣装のボーンを自動的に元のアバターに統合させることで着せ替えを実現しています。
そのため、ボーンの名前がアバターのArmarureと一致しない場合、うまく動きません。
Setup Outfitしたときにいい感じに頑張って名前も揃えてくれますが、それでも一致しないやつがでてきます。
ボーンの名前を一致させましょう。
BreastやLeft shoulderなど絶妙に一致しないボーンがある衣装があります。
これをSetup Outfitすると、
頑張ってくれるんですがそれでも一部一致しません。
ちまちま名前を変更して一致させるとうまく動くようになります。
※Modular Avatar バージョン1.7.6以降のボーンの扱いについて
Modular Avatar バージョン1.7.6から「元アバターと完全に一致する衣装ボーンを非推奨です」とのことです。
【重要：Setup Outfitの仕様変更・推奨変更】
— bd_ (@bd_j) September 14, 2023
Humanoid Boneの名前が重複すると、Unityのボーン認識が予期せぬ動きをすることが発覚したので、**元アバターと完全に一致する衣装ボーンを非推奨です**。
これは誤解しやすいのですが、衣装製作者やユーザーは衣装のボーン名をわざわざ変えなきゃいけないかというとそうではなく、今まで通りアバターのボーンと名前を合わせて基本的に問題ありません。
Setup Outfitをする際に自動的に重複しないように、必要に応じてボーン名を調整し後置詞をつけてくれるため、特別なにかする必要はないようになっています。
アバターのAvatar（Humanoid設定）のボーンの構造に服のボーンの構造のほうが十分似ている場合、服をHumanoid本体だと認識し使われてしまうことがあるというUnityのバグのような仕様が発見されたため、今回このような対応となったそうです。
（解説いただいたanatawa12さん、ありがとうございます！）
簡単に言ってしまえば、衣装製作側もユーザーも基本的にいままで通りで問題なく、Setup Outfitでいい感じに後置詞をつけていい感じに解決してくれるので、難しく考える必要はないということです。
MA Mesh Settings
Modular Avatar1.6.0から増えたイケてるやつです。
Setup Outfitを実行すると衣装のPrefabのルートに自動で追加されます。
身体と衣装の明るさが一致しなかったり、衣装が視界の端で消えたりするのをいい感じにしてくれます。
追記：MA Mesh Settingsはアバターのルートにつけてしまうのがおすすめです。
Anchor Override
身体は暗いけど衣装は明るかったりするときはこれが原因かもしれません。
明るさを決める基準点をアバターと衣装で合わせることで防ぐことができます。
Anchor Overrideの設定は様々な宗派があるようですが、サフィーちゃん自身はHipsに設定されているため、衣装もHipsに合わせておきます。
アバターに何が設定されているかは適当にアバターのメッシュを選択して、Skinned Mesh RendererのProbes > Anchor Overrideから確認できます。
Bounds
衣装が視界の端で消えたりするときはこれが原因かもしれません。
オブジェクトが見えるかどうかを判定する境界で、いい感じに設定してあげる必要があります。
サフィーちゃん自身はこちらもHipsに設定されているため、衣装もHipsに合わせておきます。大きさはそのまま1,1,1で良いと思います。
大きすぎるのは駄目です。
アバターに何が設定されているかは適当にアバターのメッシュを選択して、Skinned Mesh RendererのRoot Boneから確認できます。
色変え用のマテリアルを準備する
Exメニューでの色変えもやりたいのでマテリアルを準備します。
色変えはテクスチャや設定を変えたマテリアルをアニメーションを使って変更することで実現します。
Re:セーラーロリはなんと14種類もテクスチャが付属しています。
14種全部はちょっと大変なので、ここでは2種類（青、黒）だけ色変えをやってみます。
衣装に色変え用のマテリアルが付属している場合、この工程は不要ですが、付属マテリアルをいじる場合は複製したものをいじるようにしましょう。
あとで衣装等アップデートが入ってunitypackageをよく考えずにimportすると、マテリアルが上書きされて改変したものがなくなる悲劇が起こってしまいます。
追記：Unity2022からMaterial VariantというPrefab Variantのマテリアル版の機能が実装されました。
Unity2022へアップデートされている方は複製のかわりにVariantを作成してもらえるといいと思います！
複製してテクスチャなどを適用していく
最初から水色のマテリアルが準備されているので、Ctrl+Dで複製して、
名前を変えてフォルダも移動しておきます。
青色のテクスチャが設定されていたのでblueとしています。
変えたい色分、さらに複製します。
今回は青に加えて黒にも変更したいのでそれぞれ1つ複製して作成しました。
青はデフォルトで用意してくれているものなので、黒用の設定をしていきます。
青色のテクスチャが設定されているメインカラーと輪郭線のテクスチャを黒のものに変更します。
自分の場合、いじらないのであればテクスチャは複製せずそのまま使っています。あとから上書きされたとしても痛くないので。
こだわる場合、黒用に影色や輪郭線など変更しましょう。
Tranceparentの方も同様にテクスチャを変更して、マテリアルの準備は終わりです。
ちなみに14種作ってみるとこんな感じです。
衣装の色変えやONOFFのアニメーションをつくる
色変え用のマテリアルが準備できたので、色変えやONOFFをやるアニメーションを作っていきます。
AnimatorControllerを作る
まずはAnimatorControllerを作って、アバターにセットします。
AnimatorControllerはアニメーションを制御、管理するものです。
右クリック→Create→Animator Controllerを選択して作成します。
Animationsフォルダを作って、そこに_SailorLoliReControllerとして作ってみました。
自分の場合、_服の名前+Controllerにしちゃうことが多いです。命名で悩むのがめんどいので決めています。
作ったControllerをアバターにセットします。
衣装のONOFFでアバターのBlendShapeを同時にいじりたくなる事が多いので、アバターにセットしています。
色変えアニメーションを作る
色変え用のアニメーションを作っていきます。
アバターを選択した状態で、アニメーションタブからCreateをクリックし、アニメーションを作成します。
タブがない場合はCtrl+6で開きます。
青に変更するアニメーションを作りたいので、_SailorLoliRe_toBlueとして、上で作ったAnimationsフォルダに保存しました。
保存したらこのようになるはずなので、右上の鍵マークをクリックしてAnimationを固定します。
衣装にAnimatorが設定されている場合、うまく設定できなくなってしまうので固定しておきます。
固定したら左上の赤い録画ボタンを押して、衣装のマテリアルを変更していきます。
まあこうなるんですけど気にせず…。
それぞれ対応しているマテリアルを適用していきます。
Re:セーラーロリは2種類のマテリアルが使用されているので、まずはTranceparentのマテリアルが設定されているもの以外を選択して、ドラッグ&ドロップで設定します。
残りのTranceparentのマテリアルが設定されているOnepieceのメッシュも同様に設定します。
するとこのように録画ができるので、もう一度録画ボタンを押して停止します。
左上からCreate New Clipを選択して、黒用のアニメーションも同様に作成します。
AnimatorControllerを設定する
作ったアニメーションを再生できるようにAnimatorControllerを設定していきます。
「AnimatorControllerを作る」で作ったControllerをダブルクリックして開くとこのようになっているはずです。
まずは衣装の色の状態を保持するためのパラメーターを追加します。
Parametersタブをクリックして+ボタンからIntを選択します。
いつも色のパラメーターはColorって決めてるのでColorという名前で追加しました。
このColorのパラメーターの値をExメニューから変更することで色変えなどを実現していきます。
どこでもいいので右クリックしてCreate State→Emptyで空のStateを追加します。
追加した空のStateを右クリックしてSet as Layer Default Stateをクリックします。
そうするとオレンジになるはずです。
オレンジのものは一番初めに評価されるStateになります。
作ったアニメーションと空のStateを選択してWrite DefaultsをOFFにしておきます。
なんかよくないらしいです。
こんな感じに位置をいい感じに動かしたら、
Any Stateを右クリック→Make Transitionをクリックして空のStateに繋げます。
繋げた線をクリックしてConditionsを設定します。
作ったColorパラメーターを設定してLess 0としておきます。
Colorが0より小さい値になった場合この遷移が実行されるのですが、実際0より小さく設定されることはないようにするので実行されることはないです。
さっきやったようにAny Stateから2つのアニメーションに対してTransitionを繋げます。
Any Stateはなんかあったときに実行してくれるいい感じのやつです。
Blackに繋げた方を選択して、条件などを画像のように設定します。
こんな感じに設定すると、Colorのパラメーターが0になった瞬間、衣装を黒色に変えるアニメーションが発動して即時で色が変わるようになります。
- Has Exit Time
- チェックが入っていれば外す
- Any Stateから生やす場合特にいじらなくてもいいような気はしている
- チェックが入っていれば外す
- Transition Duration
- 0
- 即座にアニメーションが実行されるようになる
- 0
- Conditions
- Color Equals 0
- Colorのパラメーターが0のとき黒に変更するアニメーションが実行される
- Color Equals 0
同じように青色に変えるほうも設定するのですが、まあめんどくさいのでちょっとだけコピペして抗います。
Blackに繋げたTransitionを選択した状態で、InspectorのTransitionsのところを右クリック→Copy transition Parametersを選択
Blackに繋げたTransitionを選択した状態で、InspectorのTransitionsのところを右クリック→Paste Bothを選択
あとはColorの値を1に変えるだけで終わりです。ちょっとだけ楽ができます…。
これで、Colorのパラメーターが0になったら黒色に、1になったら青色になるアニメーションが組めました。
ちなみに14種の色変えを実装するとこんな感じです。
Colorのパラメーターは0～13を設定して、それぞれの色に割り当てています。
ちなみにこのようにたくさんのマテリアルを使う場合、テクスチャの容量に気をつけないといけません。
最適化方法についても書きたいですが、lilさんが書いた記事を見ていただくのが手っ取り早いです。
衣装ONOFFアニメーションを作る
同様に衣装ONOFFのアニメーションも作っていきます。
AnimatorControllerの組み方がちょっと違うだけでだいたい一緒です。
さっきやったように衣装をONOFFするアニメーションを録画します。
カーディガンに対してやってみます。
Create New Clipで作って、
録画ボタンを押して、衣装の非表示を切り替えます。
ONにするときは2回クリックする必要があります。
同様にOFFのときのアニメーションも作成します。
できたらAnimatorControllerをダブルクリックして開きます。
AnimatorControllerを設定する
開くとこうなっていると思うので、カーディガンのアニメーションは一旦消しちゃいます。
ONOFFのアニメーション2つを選択してdeleteキーで削除
カーディガン用のパラメーターを作るのですが、今回はboolで作ります。
衣装ONOFFするときはboolを使います。
カーディガン変更用に別レイヤーを作成します。
Layersタブの+ボタンから作成できます。
作成したら忘れずにWeightを1にします。
動かなかったらまずはこれを疑うくらいには忘れます。
歯車のマークから設定できます。
レイヤーができたら先程作ったONOFF用アニメーションをドラッグ&ドロップで入れます。
デフォルトの状態を着ている状態としたいので、ONにするアニメーションをデフォルトとして設定します。
右クリックしてSet as Layer Default Stateでデフォルトにします。
この2つに関してもWrite DefaultsをOFFにしておきます。
こんな感じでTransitionを繋げます。
さっきやったのと同じように条件を設定していきます。
ON→OFFにするほう
OFF→ONにするほう
これでisCardiganの値でカーディガンのONOFFができるようになりました。
ここまでできたら、アバターに設定したAnimatorControllerはRevertして消しておきます。
MA Merge Animatorを設定する
アニメーションが準備できたのでアバターに統合していきます。
衣装のVariantを選択してAdd Component→MA Merge Animatorを選択して追加します。
画像のように設定します。
- 統合されるアニメーター
- 「AnimatorControllerを作る」で作ったControllerをセット
- パスモード
- 絶対的
- AnimatorControllerをアバターに設定してアニメーションを記録したため絶対的を選択します
- もし衣装に対してAnimatorControllerを設定して記録した場合は相対的とします。Modular Avatar対応の小物などを作成したい場合はこちらを選ぶのがよいです
- 絶対的
- アバターのWrite Defaults設定に合わせる
- チェックを入れる
これでアニメーションの設定は完了です。
MA Parametersを設定する
アニメーションさせるために必要なパラメーターを設定していきます。
MA Parametersを使うことで設定したパラメーターもアバター側に統合できます。
MA Merge Animatorを追加したときと同様、衣装のVariantを選択してAdd Component→MA Parametersを選択して追加します。
プレハブ開発者向けの設定を表示にチェックを入れると、
このように表示されるはずです。
MA Parametersコンポーネントを追加すると、追加時点でMA Merge Animatorに設定されているControllerのパラメーターがこのように入ってきます。
内部値にチェックを入れ、パラメーター型にそれぞれのパラメーターの型を設定します。
ColorはInt, IsCardiganはboolで設定します。
内部値にチェックを入れることで、統合するMA Merge AnimatorのControllerに対する内部用の値として使用されるため、アバターなど他のAnimator Controllerに設定されているパラメーターと名前が被っても問題なく動きます。
逆に、内部値にチェックを入れないことで、同じパラメーターを参照することができるため、アバターなど他のAnimatorと協調するような制御も可能になります。
また、「同期する」にもチェックが入っていることを確認します。
チェックが入っていないとうまく動きません。
この他のパラメーターとして、
- 保存する
- チェックを入れると、アバターを変更したりワールドを移動したときも状態を保存することができます
- パブリックに出れないような変更が発生する場合はオフにしておくのをおすすめします。裸のままパブリックに行く悲劇は起こしたくないです
- チェックを入れると、アバターを変更したりワールドを移動したときも状態を保存することができます
- 初期値
- 文字通り初期値です。変更することで最初の色や衣装のONOFFの状態を変更できます
今回は最初は青色、カーディガンは着た状態としてみます。
その場合こんな感じです。
これでパラメーターの準備は終わりです。
MA Parametersコンポーネントを使用する場合、あとからAnimator Controllerにパラメーターを追加すると自動ではついてこないので、適宜こちらも設定する必要があるので気をつけてください。
色変え用のExメニューを作る
設定したパラメーターを変化させるためのExメニューを作成します。
こちらもModular Avatarを使って作成できます。
Modular Avatarでメニューを作ると何が嬉しいかというと、衣装側にメニューが組み込めるだけでなく、Hierarchy上でコピペしてきて作ったり、Inspector上で一覧で見やすくパラメーターの設定ができるのが嬉しいところです。
衣装用のExメニューを差し込む場所を作る
その前に、衣装に関する項目を追加する場所としてExメニューを整理しておきます。
Modular Avatarでのメニュー作成は、特に何もしなければExメニューの一番上の階層にメニューが追加されます。
アバターによってはそもそも空きがない場合があるため、あらかじめ場所を確保しておきます。
ちなみにサフィーちゃんは空きがありません。
あらかじめ衣装に関するメニューを追加する場所を決めておくといろんな小物をMAで導入したときに全部そこに入れてしまえるのも便利です。
自分の場合、猫耳ONOFF用のメニューと衣装に関するメニューを同じところに入れています。
既存のメニューを確認する
まずは、アバターに設定されているメニューを確認します。
Hierarchy上のアバターを選択し、Inspectorの下の方のMenuから確認できます。
これをクリックして、メニューをCtrl+Dで複製します。
適当にフォルダを作って移動しておきます。
メニューを選択してInspectorを確認してみるとこのようになっているのが確認できます。
これがExメニューと一致するはずです。このメニューを整理します。
メニューを整理する
今回はあんまり使わない3つをサブメニューとして1つに押し込みます。
今回は既存のメニューを流用して作ります。
「既存のメニューを確認する」で複製したメニューを更にCtrl+Dで複製します。
その他のサブメニューということでこんな感じの名前にしてみました。
この3つ以外はいらないので消しちゃいます。
▶をクリックして展開してDeleteで削除します。
これでその他サブメニューとして押し込む先のメニューができました。
これをサブメニューとして開けるように設定します。
サブメニューとして押し込む項目はさっきやったように消してしまいます。
Add Controlをクリックして準備したサブメニューを追加します。
画像のようにTypeはSub Menuにし、Sub Menuとして準備したサブメニューを設定します。
いい感じに名前を変えたりIconを設定したりしました。
これでExメニューの整理ができました。
衣装用に差し込むメニューを作る
整理ができたので、同じようにして衣装用のExメニューを差し込む場所を作ります。
右クリック→VRChat→Avatars→Expressions Menuでメニューを作成します。
名前はこんな感じにしました。
Modular Avatarにて衣装周りのメニューを追加するだけなので、Controlは空のままで大丈夫です。
これをサブメニューとしてExメニューに追加します。
Add Controlで追加して、TypeをSub Menu、Sub Menuに作ったメニューを設定します。
ついでに名前やアイコンも設定しておきます。
衣装によってはアイコンも付属してくれていることがあるので気に入ったものを使いましょう。
これでModular Avatarで衣装用メニューを差し込む場所ができました。
アバターに変更したメニューを設定する
改変したExメニューをアバターに設定します。
Hierarchy上のアバターを選択し、Inspectorの下の方のMenuのところに、改変したExメニューを設定します。
ついでにPrefab Variantに適用しちゃいましょう。
Hierarchy上のアバターを選択し、Overrides→VRC Avatar Descriptor→Applyで素体用Prefab Variantを選択
これで次に別の衣装を着たいとき、この素体用のPrefab Variantを使えば整理されたメニューが設定された状態になり、面倒な作業はやらなくてすみます。
Modular AvatarでExメニューを作る
色々準備が整ったので、いよいよModular AvatarでExメニューを作っていきます。
最終的なイメージはこのような感じです。
Hierarchy上で右クリックしてCreate Emptyでメニュー用のオブジェクトを作ります。
わかりやすいように名前を変更し、衣装と同階層に配置します。
作成したメニュー用のオブジェクトを選択し、InspectorからAdd Component→MA Menu Installerを選択して追加します。
メニューのインストール先を変更することでどのメニューに組み込まれるかを変更することができます。
今回は衣装用に用意したサブメニュー内に組み込みたいので、メニューを選択をクリックして設定します。
次に、MA Menu Groupコンポーネントを追加します。
Menu Groupコンポーネントを利用することで、衣装毎にサブメニューとしてまとまらず、このように展開された状態でメニューに組み込むことができます。
個々のメニュー項目を作る
メニュー追加用の枠ができたので個々のメニューを追加していきます。
まずは色変え用のメニューをサブメニューとしてつくってみます。
このようなイメージです。
色変え用のメニューを作る
メニューアイテムを追加をクリックして画像のように設定します。
- 表示名
- メニューでの表示名なのでColorとします
- タイプ
- サブメニューとしたいのでSub Menuを選択
- サブメニュー引用元
- オブジェクトから生成したいので、子オブジェクトから生成を選択
サブメニューの中を作っていきます。
メニュー内容を表示を選択して展開後、メニューアイテムを追加をクリックします。
これが実際に衣装の色を変更するためのメニューの設定になります。
- 表示名
- 黒に変更するようのメニューとしたいのでBlackとしました
- タイプ
- Toggle
- パラメーター値
- 黒色になるように設定したアニメーションのパラメーターは0なので0を設定
- パラメーター名
- 衣装の色変えをやるパラメーターであるColorを設定
Hierarchyを見てみるとメニューオブジェクトの下に作成してきたColorのサブメニュー、黒用のメニューが並んでいることがわかります。
ここまでできたら色数分複製してしまうのが手っ取り早いです。
この状態でColorのオブジェクトを選択してInspectorを見てみるとズラッと並んでいるのがわかります。
ここから淡々と表示名とパラメーター値を変更するだけでメニューが出来上がります。
今回は黒と青に色変えするだけなので、2つにしておきます。
ここから消しちゃえばOKです。
このようになりました。
衣装をONOFFするメニューを作る
次は衣装をONOFFするメニューを作ってみます。
上でやったようにInspectorからちまちま作ってもいいのですが、オブジェクトを複製して作るのが早いです。
MA Menu Itemコンポーネントが設定されているオブジェクトを複製して、
このような位置に配置して、
MA Menu Itemコンポーネントをこのように設定します。
注意なのですが、パラメーターがboolの場合、パラメーター値は1のままにします。
1以外にすると動きません。
これでONOFF用のメニューができました。
他にもメニューがほしい場合はコピペして生やしちゃいましょう。
最終的にこのようになりました。
これを毎回やるのはまあ面倒なので、メニューをつくるときは他の衣装用に作ったメニューをコピーしてきて作っています。
だいたいやってることは一緒なので。
Gesture Managerで確認する
ここまでできたらGesture Managerで確認してみます。
Tools→Gesture Manager EmulatorからGesture Managerを追加します。
Enter Play-Modeで動かせるようになります。
うまくいっていると、Clothesメニューの中にModular Avatarで設定したメニューが生えているはずです。
カーディガンのON/OFFや、
衣装の色変えもできるようになりました。
動くことが確認できたら衣装のPrefab Variantに変更を適用しちゃいましょう。
これでこの衣装はHierarchy上にぽんと置くだけで衣装の色変え、ONOFFのメニューが組み込まれた状態になりました。
素体のPrefab Variantに衣装のPrefab Variantをぽんと置くだけで動きます。
ぽんと置くだけで動くようになりましたが、この状態で気をつけることは、AnimaterControllerをアバタールートから設定したか、衣装から設定したかということです。
衣装から設定した場合、MA Merge Animatorのパスモードを相対的とすることで配布可能な状態（衣装単体で完結している状態）になりますが、アバタールートから設定した場合、そうではないことがあります。
Modular Avatarを用いた衣装配布を考えている場合は気をつけましょう。
アップロード
動作確認ができたらアップロードしておしまいです。
おつかれさまでした！
別の服を着たいとき
自分の場合、別の服を着たいときは素体用Prefab Variantを使って、
- マテリアルの準備
- アニメーションの準備
- MA Merge Animatorの設定
- MA Parametersの設定
- Exメニューの作成
- 他の衣装に作ったものをコピペしてきてちょっといじって終わり
って流れでやっています。
慣れてしまえば15分でだいたい色変えまでやれます。
正直マテリアルとアニメーションを作るのに9割くらいの時間がかかっています。
もう少し楽にできると嬉しいのですが…。
まとめ
Prefab VariantやModular Avatarは最初は面倒ですが、一度やってしまえば別の衣装を着たいときにとても楽に実装できます。
衣装をそのまま着たいときはSetup Outfitってやるだけで終わるので最高です。
Modular Avatarは非破壊で実装できるためPrefab Variantと非常に相性がよいです。
Prefab Variantを活用して、変更に強い運用を頑張っていきましょう。
また、改変に慣れてきたらAvatar Optimizerなどを使って、アバターの軽量化にも挑戦していけるといいですね。
おまけ
ちょっと分かるようになったら分かるようになってると思うので簡単に書いておきます…。
アバター変更時に一瞬服が脱げたようにみえてしまう
結論としては、服を着た状態（デフォルトであってほしい状態）にオブジェクトのオンオフをしっかり合わせてアップロードしよう！ということです。
アバターを変更した際、アバターアップロード時の状態が一番最初に表示されます。
その後パラメーターの同期が行われ、服を着せるアニメーションなどが発火し、服などの状態が同期されます。
そのため、服を着せていない状態でアップロードすると一瞬服が脱げた状態に見えることがあります。
同様に、セーフティによるアニメーションブロックや同期ズレ等で服を着せるアニメーションが再生されずに脱げたままになってしまうことがあります。
これを防ぐには以下のようにします。
- 服を着た状態（デフォルトであってほしい状態）にオブジェクトのオンオフをしっかり合わせてアップロードする
- 服をオン・オフするアニメーションを組む際、服を着た状態（デフォルトであってほしい状態）を最初の遷移とし、その後服を脱ぐアニメーションに遷移するようにコントローラーを組む
- パラメーターの状態によらないように空のアニメーションを挟みコントローラーを組む
くわしくはPochoさんの一連のツイートを参考にしてみてください。
空のAnimationを再生する初期状態INITを経由することで、アップロード時の状態から直接現在状態に遷移する作りはこう。
— Pocho (@Pocho36599162) 2023年12月26日
例えば初期状態をDISABLEにしてしまうと、アップロード時の状態と今のパラメータに関わらず一瞬OFFになってしまう。 pic.twitter.com/Fl9akahN9U
アバターのExpressionMenuもModular Avatarで管理する
アバターに設定されているExMenuもModular Avatarで管理しちゃうのがおすすめです。
こちらの方法でアバターのExMenuを展開し、これをPrefab VariantのルートにApplyしちゃえばよいです。
使わないときはEditorOnlyにしてしまえばメニューに表示されなくなります。
アニメーション組むのがめんどくさい！
基本が理解できたら楽をしましょう。
奈良阪さんのAvatarMenuCreater for Modular Avatarがおすすめです。
使い方にクセはありますが、とても簡単にオブジェクトのオンオフやシェイプキーの変更、マテリアルの変更などが実装できてしまいます。
筆者も自分で組むのはめんどくさいので、もうこれしかつかってないです。
購入した衣装を自分でPrefab Variantにしたい
購入した衣装がOriginal Prefabになっちゃってるから自分でPrefab Variantを作りたい。
そんなときはCopyComponentsByRegexがおすすめです。
元の衣装からVRCコンポーネントをコピーして移植したい衣装にペーストしましょう。
簡単に移植できます。
番外編
余裕があれば追記します。とりあえず力尽きました。
追記：それぞれ書きました！
MA Bone Proxy便利
チョーカーとか帽子とかをMAでポン付けできるようになるぞ
lilAvatarUtils便利
明るさ確認したりテクスチャのサイズ確認したりできて便利
テクスチャのサイズに気をつけよう
VRAMに優しくなろう
マテリアルの明るさを合わせよう
身体と衣装で明るさが違って集合写真で恥をかかないようにしよう
衣装代
はてブにも投げ銭機能が増えていたので試してみます。
役に立ったと思ったら投げ銭してくれると嬉しいです…！
えっちな衣装代に充てます。
