VRChatを始めて3ヶ月、改変を始めて2ヶ月が経ちました。
だいたい自分の中でのアバター管理と着せ替え方法が固まってきたので、いつもやってる対応衣装を着せるまでの流れを洗いざらい公開してみようかなと思い書いてみます。
体系的にまとめるのではなく、アバターを準備してから実際にアバターに衣装を着せる流れを追体験できるようそのまま書いてみました。
始めて2〜3ヶ月なため、VRChatもUnityも完全に理解できていません。
こうするともっと楽だぞとか、この使い方は間違ってるとかあれば教えてもらえると嬉しいです。
ℹ️この記事について
初心者向けに大体全部書いたのでとても長いです。適宜読み飛ばしてください。
Prefab Variantの概念的なところはこちらの記事を参照してください。本記事では実際にやっていくところがメインになります。
記事メンテ日：2026/01/19
書くこと
- Prefab Variantを使うと便利
- マテリアルの変更方法
- アニメーションの設定方法
- Modular Avatarを使った対応衣装の着せ方
- Modular Avatarを使ったExメニューの作り方
- Exメニューから衣装の色変え/ONOFF
書かないこと
- Unityの説明
- lilToon等マテリアルの設定内容
- 今どきの簡単なきせかえ方法
📝本記事の方針
今はもっと楽に改変できる時代になりましたが、本記事はMAにまつわる基礎を理解してもらうことに重点を置いています。泥臭く手を動かして、Avatars3.0とMAの関係性を理解しましょう。
対象読者と前提条件
完全なる改変初心者向けというより、ある程度できるようになってきたけど、もう少し踏み込んでみたいと思う人向けです。
- 着せ替えやってみたいけどアニメーションの組み方がよくわからない人
- Prefab Variantどうやってつかうかよくわからない人
- Modular Avatar使ってみたいけどよくわからない人（MAの基礎を知りたい人）
前提条件
- なんらかのアバターはすでにアップロードしたことある（VCCやUnityはインストール済み）
- 基本的なUnity操作や用語、マテリアル、テクスチャについて理解している
- シェーダーはlilToonが使われているとして説明します
動作確認時の各種バージョン
- VRChat SDK 3.7.0
- Modular Avatar 1.9.15
- Unity 2022.3.22f1
※当記事作成時はUnity2019だったため画面キャプチャの見た目が少しだけ違います
- 書くこと
- 書かないこと
- 対象読者と前提条件
- 事前知識
- おおまかな流れ
- ツールの準備
- アバターの準備
- 衣装を着せる（Setup Outfit）
- 色変え・ONOFFの実装
- Exメニューの作成
- 動作確認とアップロード
- 別の服を着たいとき
- まとめ
- おまけ
- 衣装代
事前知識
VRChatのアバター改変に必要な知識
VRChatのアバター改変においては最低限のUnityの知識とVRChatのAvatars3.0という枠組みを知る必要があります。
特に、Avatars3.0とは何かを知ることは非常に大切です。
これを知っているか知っていないかで理解度が大きく変わってくるため、見様見真似でいじったあとは必ずこのあたりを学ぶようにしましょう。
めかにゃんこさんの動画や記事をおすすめしています。
そもそもUnityがわかんない…という場合はきくじんさんの記事に目を通してから臨むのがよいです。
ざっくりとAvatars3.0はこういう関係性で成り立ってるよという雑図も描いてみたので理解の助けになれば幸いです。
着せ替えの仕組み
Exメニューからポチポチして色を変えたり、衣装のONOFFをやるには、
- Exメニューをポチることでメニューに対応するパラメーターを変更させる
- そのパラメーター変更を契機にマテリアルやメッシュの表示非表示を変更するアニメーションを実行する
という流れで実現します。なので、それに必要なものをちまちまつくっていきます。
おおまかな流れ
対応衣装の着せ替えは以下の流れでやっていきます。
- 必要なツールをインストールする
- アバターを準備する（Prefab Variant）
- 衣装を着せる（MA Merge Armature / MA Mesh Settings）
- いわゆるSetup Outfit
- （必要があれば）色変え用のマテリアルを準備する
- （必要があれば）衣装の色変えやONOFFのアニメーションをつくる
- MA Merge Animator / MA Parameters
- （必要があれば）色変え用のExメニューを作る
- MA Menu Installer / MA Menu Group / MA Menu Item
- Gesture Managerで確認する
- アップロード
ツールの準備
Modular Avatarのインストール
リンク先のここからVCCに追加します。
リポジトリを追加しましょう。
リポジトリ追加後、プロジェクトにModular Avatarを追加するには以下の場所から追加します。
💡VPMリポジトリ経由でインストールしよう
VPMリポジトリがあるのであれば、lilToonなどこういったツール群はVPMリポジトリ経由でVCCで管理・インストールするようにしましょう。ライブラリのアップデート等がすぐに行えるためメリットしかないです。
アバターのシェーダーがliltoonの場合はこちらから同じようにリポジトリを追加しましょう。
PoiyomiやUnlitWFなどもVPMリポジトリを用意してくれているので、追加しておきましょう。
プロジェクトの作成
ここでは初めての方向けに新規プロジェクトを立ち上げてみます。
Select template
Avatar Projectを選択（使用するUnityのバージョンの方を選びましょう）
Project Name
わかりやすい名前を適当に付けます。
🚫プロジェクト名は英語のみで
トラブルの元なので日本語は使わず必ず英語のみで命名しましょう。ちなみにWindowsのPC名も日本語にしているとUnityアップデート時などで詰むときがあります。そういった場所に日本語を使うクセをなくしましょう。
Project Location
自分はデフォルトのままにしてますが、Windows再インストール時に消えるおそれがあるので出来ればDドライブや別のフォルダを指定したほうがよいです。
設定できたら「Create Project」をクリック
必要なツールの追加
+ボタンをクリックして必要なツールを追加します。
- Gesture Manager
- Modular Avatar
- アバターのシェーダーがliltoonの場合はliltoonも追加
追加するとこのようになるはずです。
追加できたら右上の「Open Project」をクリックしてプロジェクトを開きます。
アバターの準備
自分はサフィーちゃんを使っているので、サフィーちゃんのunitypackageを追加します。
💡フォルダ整理のコツ
自分はなにかを追加したときに追加したアセットのフォルダ直下に「_Custom」というフォルダを追加して、変更したものに関してはすべてこのフォルダに入れるようにしています（最近は_Editってフォルダ名をつけることが多いです）。
あと、自分でいじったものに関してはすべて「_」を頭につけるようにしてます。あとで見たときにこれは自分でいじったもの、これは標準のものって分かりやすいので、この命名方法を取っています。
フォルダ追加は右クリック→Create→Folderで追加できます。
Prefab Variantを準備する
Prefab Variantというコピーのようなものを使うと、変更の管理だったり適用だったりがめちゃくちゃ楽になるので必ずPrefab Variantを作ってそれを使うようにしています。
まず、FBX、ただのPrefab（Original Prefab）、Prefab Variantの違いについて理解しましょう。
画像でまとめてみました。
もう少し詳しく知りたい場合はこちらを参照してください。
Prefab Variantの運用例
自分のサフィーちゃんの場合4パターン種類を作って、着たい服に合わせて使うPrefabを変えています。
- 素のサフィーちゃんから髪の毛や目など自分好みに改変したもの（ベースアバター）
- 改変ベースとなるアバターでこれを使うことはまぁない
- ベースアバターから服のみをEditorOnlyにして省き、チョーカーなど小物をつけたアバター（アバター2）
- 手袋はめたり、ニーソ履いたり、アウター羽織ったり、服は別のもの着るけど小物とかは使いたいときに使用（水着とかが多い）
- アバター2からニーソ、靴以外をEditorOnlyにして省いたアバター（アバター3）
- 靴とか靴下は付いてこなかった服を着るときに使用
- アバター3から下着以外をEditorOnlyにして省いたアバター（アバター4）
- 靴や靴下も服に付いてくるので素体だけ使いたいときに使用
こんな感じ…。
ただし、数珠つなぎにしていると上で変更した内容が余計に下まで伝播してしまい、下のVariantでも調整しなければならないことが発生して面倒になることがあります。
そのため、現在は素体用の下に特定用途用のものをそれぞれ生やす構造で運用しています。
このようにしてると何が便利かというと、
アバターに更新入ったとき
アバターのPrefabの上に自分の変更が乗っかるので更新しても改変した内容は維持されます。
（内容によっては壊れるときもあります…壊れる代表的なものとしてはシェイプキーの順番変更です）
素体に新しい改変を加えたくなったとき
Prefab自体をいじるのではなくPrefab Variantをいじって更新すると全アバターに適用されます。
自分の場合、あとから猫耳入れたくなったのでVariantの方に猫耳を入れて適用ってやっただけで全アバターに反映されて、ちまちま1アバターずつ猫耳追加とかいう苦行をやらなくてすみました。
あとから改変したくなったときにめちゃくちゃ重宝しています。
ここでは「自分好みの改変を施したもの」「素のアバターから服を着るのにいらないもの消したもの」の2つを作ってみます。
Prefab Variantを作る
アバターのPrefabを右クリック→Create→Prefab Variantを選択して作成します。
できました。
あとで複数のVariantを作成するので_CustomフォルダにPrefabsフォルダを作成してそこに移しておきます。
名前もいい感じに分かりやすくしておきます。
⚠️Original PrefabからのVariant作成について
今回のようにただのPrefab（Original Prefab）からPrefab Variantを作るのはあまりおすすめしていません。
Original Prefabは元となるFBXからの接続が切れているため、元のFBXに変更が入った際、全部壊れる可能性が高いです。アバターのような共通で使用するものに関してはFBXからPrefab Variantを自分で作成するほうが変更に強く圧倒的に良いです。
ただ、FBXからPrefab Variantをこしらえるのは正直初心者の方にはきついので、一旦あきらめて、再度作り直す機会が出たときにやるといいでしょう。
Prefabに関してはもう少し詳しく知りたい方はこちらを参照してみてください。
自分好みの改変を施す
ここからPrefab Variantに対し、自分好みの改変を入れていきます。
とりあえず髪の毛の色を変えたいので、テクスチャやマテリアルを準備します。
マテリアルをいじっても色は変えられますが、テクスチャの色を直接変えるほうがきれいに仕上がるのでできればテクスチャから変えるほうがいいかなと思っています。
テクスチャを準備
アバターに付属してきたPSDファイルをいじってテクスチャを準備しました。 準備したファイルをAssetsにドラッグ&ドロップで追加できます。
マテリアルを準備
マテリアルはアバターのものをコピーして持ってきます。 ※この説明はliltoonの場合です。UTS2やPoiyomiなどは別途ググってください。
Unity2022以降を使用している場合、Ctrl+Dでの複製のかわりにMaterial Variantを作成するのもおすすめです。 Material VariantはPrefab Variantのマテリアル版で、元マテリアルとの関係を維持したまま変更を加えられます。
サフィーちゃんは髪の毛のマテリアルが3つあるので、3つ選択した状態でCtrl+Dで複製します（またはMaterial Variantを作成）。
名前を変えてフォルダも移しておきます。
マテリアルを選択して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タグとは
EditorOnlyタグを設定することでVRChat上にアップロードするときに含まれなくなり、アバターが軽くなります。
ちなみに、EditorOnlyタグの切り替えを楽にするエディタ拡張も作っているので、よかったら使ってみてください。
今回はメッシュのみ非表示にしましたが、可能であれば非表示にしたメッシュでしか使っていないPhysBoneやBoneも消しておきたいところです。
Avatar OptimizerのTrace & Optimizeを使うと、不要なPhysBoneやBoneを自動的に削除してくれるので便利です。
変更しおわったら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を作り込んでいくとよいでしょう。
特にFXレイヤーが異なる場合が多いです。
アバターを販売する時は正直なところ通常のアバターPrefabからVariantとして素体用Prefabを作成してほしいものですが…。
最初からデフォルト服のオンオフ機能が入っているアバターで素体用のFXレイヤーやメニューなどが用意されていない場合、デフォルト服をEditorOnlyにして消すだけでなく、FXレイヤーやExメニュー周りから服のオンオフに関するものを抜いていく必要があります。
よくあるのが、ニーソックスをEditorOnlyにして消したけど、FXレイヤーでオンオフするアニメーションが残っているので太ももの食い込みシェイプキーが適用されて、食い込んだままになっているとかですね。
サフィーちゃんの場合、素体用のPrefabにはメガネが含まれてなく…それを使いたいのでちまちま自分で素体用のPrefab Variantを作って運用しています。
慣れてくるとアバターを買った時に一番はじめにすることは、デフォルトのギミックなどを全部FXレイヤーやパラメーターから引っ剥がして自分が使いやすいようにすっぴんにすることになりますね。
説明を省くため、以降の素体は素体用PrefabからそのままVariantとして作ったものを雑に使って説明していきます。
衣装を着せる（Setup Outfit）
前置きでめちゃくちゃ長くなってしまいましたが、いよいよ着せ替えをやっていきます。
Modular Avatar対応の衣装でなくても、だいたい着ることができます。
今回はかぷちやのぶーすさんのRe:セーラーロリを着せてみます。 capettiya.booth.pm
ダウンロードしてunitypackageをダブルクリックしAssetsに追加します。
サフィーちゃん用Prefabを探して、
Prefab Variantを作ったりフォルダを作って移動させたりします。
Hierarchy上に素体用のPrefab Variantと作った衣装のPrefab Variantをドラッグ&ドロップし、画像のように配置します。
配置した衣装を右クリック→ModularAvatar→Setup Outfitをクリック
問題なければこれで終わりです。
色変えとかしないのであればこのままアップロードするだけで動きます。
仕組みについて
そもそもの着替えの仕組みについてはこはろぐさんが解説してくださっているので、そちらを参照してもらえるとより理解が進むと思います。
Modular Avatarはプレイモードに入った瞬間やビルド時に衣装のボーンを自動的に元のアバターに統合させることで着せ替えを実現しています。
ボーンの名前を確認する
衣装ボーンの名前がアバターのArmatureと一致しない場合、うまく動きません。
Setup Outfitしたときにいい感じに頑張って名前も揃えてくれますが、それでも一致しないやつがでてきます。
ボーンの名前を一致させましょう。
BreastやLeft shoulderなど絶妙に一致しないボーンがある衣装があります。
これをSetup Outfitすると、
頑張ってくれるんですがそれでも一部一致しません。
ちまちま名前を変更して一致させるとうまく動くようになります。
ボーンの後置詞について（MA 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
Setup Outfitを実行すると衣装のPrefabのルートに自動で追加されます。
身体と衣装の明るさが一致しなかったり、衣装が視界の端で消えたりするのをいい感じにしてくれます。
アバターと衣装の明るさ問題についてより詳しく知りたい場合はこちらも参照してください。
MA Mesh Settingsはアバターのルートにつけてしまうのがおすすめです。
ちなみに、服などに付ける場合、設定モードを「親が継承された時は継承、または設定」にすることをおすすめしています。
こうすることでアバターのルートに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から確認できます。
色変え・ONOFFの実装
ここからは色変えやONOFFをやりたい人向けの内容です。
単に衣装を着せるだけでよければ、この章は飛ばしてアップロードしてOKです。
色変え用のマテリアルを準備する
Exメニューでの色変えもやりたいのでマテリアルを準備します。
色変えはテクスチャや設定を変えたマテリアルをアニメーションを使って変更することで実現します。
Re:セーラーロリはなんと14種類もテクスチャが付属しています。
14種全部はちょっと大変なので、ここでは2種類（青、黒）だけ色変えをやってみます。
⚠️付属マテリアルは複製してから編集しよう
衣装に色変え用のマテリアルが付属している場合、この工程は不要です。ただし、付属マテリアルをいじる場合は複製したもの（またはMaterial Variant）をいじるようにしましょう。
あとで衣装等アップデートが入ってunitypackageをよく考えずにimportすると、マテリアルが上書きされて改変したものがなくなる悲劇が起こってしまいます。
複製してテクスチャなどを適用していく
最初から水色のマテリアルが準備されているので、Ctrl+Dで複製して、
名前を変えてフォルダも移動しておきます。
青色のテクスチャが設定されていたのでblueとしています。
変えたい色分、さらに複製します。
今回は青に加えて黒にも変更したいのでそれぞれ1つ複製して作成しました。
青はデフォルトで用意してくれているものなので、黒用の設定をしていきます。
青色のテクスチャが設定されているメインカラーと輪郭線のテクスチャを黒のものに変更します。
自分の場合、いじらないのであればテクスチャは複製せずそのまま使っています。あとから上書きされたとしても痛くないので。
こだわる場合、黒用に影色や輪郭線など変更しましょう。
Tranceparentの方も同様にテクスチャを変更して、マテリアルの準備は終わりです。
ちなみに14種作ってみるとこんな感じです。
アニメーションを作る
色変え用のマテリアルが準備できたので、色変えや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をアバターに設定されているアニメーションと合わせてONまたはOFFに設定します。
⚠️Write Defaultsは必ず統一する
Write Defaultsの設定がアバター内で混ざると不具合の原因になるため、必ず合わせるようにしましょう。
こんな感じに位置をいい感じに動かしたら、
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に設定します。即座にアニメーションが実行されるようになります。
Can Transition To Self
チェックが入っていれば外します。自身のアニメーションに再び遷移できるかの設定です。
🚫Can Transition To Selfは必ずオフに
スクリーンショットではオンになっていますが、必ずオフにしてください。Any Stateで使用する場合、都度自身のアニメーションに遷移してしまいループするなど、負荷や不具合の原因になります。
Conditions
Color Equals 0に設定します。Colorのパラメーターが0のとき黒に変更するアニメーションが実行されます。
同じように青色に変えるほうも設定するのですが、まあめんどくさいのでちょっとだけコピペして抗います。
Blackに繋げたTransitionを選択した状態で、InspectorのTransitionsのところを右クリック→Copy transition Parametersを選択
Blackに繋げたTransitionを選択した状態で、InspectorのTransitionsのところを右クリック→Paste Bothを選択
あとはColorの値を1に変えるだけで終わりです。ちょっとだけ楽ができます…。
これで、Colorのパラメーターが0になったら黒色に、1になったら青色になるアニメーションが組めました。
ちなみに14種の色変えを実装するとこんな感じです。
Colorのパラメーターは0～13を設定して、それぞれの色に割り当てています。
ちなみにこのようにたくさんのマテリアルを使う場合、テクスチャの容量に気をつけないといけません。
最適化方法についてはこちらに詳しく書いたので見てみてください。
衣装ONOFFアニメーションを作る
同様に衣装ONOFFのアニメーションも作っていきます。
AnimatorControllerの組み方がちょっと違うだけでだいたい一緒です。
衣装をONOFFするアニメーションを録画します。
カーディガンに対してやってみます。
Create New Clipで作って、
録画ボタンを押して、衣装の非表示を切り替えます。
ONにするときは2回クリックする必要があります。
同様にOFFのときのアニメーションも作成します。
AnimatorControllerを設定する（ONOFF）
できたらAnimatorControllerをダブルクリックして開きます。
開くとこうなっていると思うので、カーディガンのアニメーションは一旦消しちゃいます。
ONOFFのアニメーション2つを選択してdeleteキーで削除
カーディガン用のパラメーターを作るのですが、今回はboolで作ります。 衣装ONOFFのようにオン・オフの2状態だけを切り替える場合はboolを使います（Toggleメニューと相性がよいです）。
カーディガン変更用に別レイヤーを作成します。 Layersタブの+ボタンから作成できます。
⚠️Weightを1にするのを忘れずに
作成したら忘れずにWeightを1にします。動かなかったらまずはこれを疑うくらいには忘れます。歯車のマークから設定できます。
レイヤーができたらONOFF用アニメーションをドラッグ&ドロップで入れます。
デフォルトの状態を着ている状態としたいので、ONにするアニメーションをデフォルトとして設定します。 右クリックしてSet as Layer Default Stateでデフォルトにします。
この2つに関してもWrite Defaultsをアバターに合わせて設定しておきます。
こんな感じで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 Merge Animatorに設定されているControllerのパラメーターが表示されるはずです。
追加ボタンをクリックし、2つのパラメーターを追加します。
自動リネームにチェックを入れ、パラメーター型にそれぞれのパラメーターの型を設定します。
ColorはInt, IsCardiganはboolで設定します。
自動リネームにチェックを入れることで、統合するMA Merge AnimatorのControllerに対する内部用の値として使用されるため、アバターなど他のAnimator Controllerに設定されているパラメーターと名前が被っても問題なく動きます。
逆に、自動リネームにチェックを入れないことで、同じパラメーターを参照することができるため、アバターなど他のAnimatorと協調するような制御も可能になります。
この他のパラメーターとして、
保存する
チェックを入れると、アバターを変更したりワールドを移動したときも状態を保存することができます。
初期値
文字通り初期値です。変更することで最初の色や衣装のONOFFの状態を変更できます。
⚠️「保存する」の設定に注意
パブリックに出れないような変更（服を脱ぐなど）が発生する場合は「保存する」をオフにしておくのをおすすめします。裸のままパブリックに行く悲劇は起こしたくないです。
今回は最初は青色、カーディガンは着た状態としてみます。
その場合こんな感じです。
ちなみに、プログラミングの世界では一般的にBoolは0がfalse、1がtrueなのでカーディガンを脱いだ状態としたい場合は0を設定します。
これでパラメーターの準備は終わりです。
MA Parametersコンポーネントを使用する場合、あとからAnimator Controllerにパラメーターを追加すると自動ではついてこないので、適宜こちらも設定する必要があるので気をつけてください。
Exメニューの作成
設定したパラメーターを変化させるためのExメニューを作成します。
こちらもModular Avatarを使って作成できます。
Modular Avatarでメニューを作ると何が嬉しいかというと、衣装側にメニューが組み込めるだけでなく、Hierarchy上でコピペしてきて作ったり、Inspector上で一覧で見やすくパラメーターの設定ができるのが嬉しいところです。
衣装用のExメニューを差し込む場所を作る
その前に、衣装に関する項目を追加する場所としてExメニューを整理しておきます。
Modular Avatarでのメニュー作成は、特に何もしなければExメニューの一番上の階層にメニューが追加されます。
アバターによってはそもそも空きがない場合があるため、あらかじめ場所を確保しておきます。
ちなみにExメニューは1階層につき8個までです。
Exメニューの整理についてはこちらの記事でより詳しく解説しています。
ちなみにサフィーちゃんは空きがギリギリです。
あらかじめ衣装に関するメニューを追加する場所を決めておくといろんな小物をMAで導入したときに全部そこに入れてしまえるのも便利です。
自分の場合、猫耳ONOFF用のメニューと衣装に関するメニューを同じところに入れています。
既存のメニューを確認する
まずは、アバターに設定されているメニューを確認します。
Hierarchy上のアバターを選択し、Inspectorの下の方のMenuから確認できます。
これをクリックして、メニューをCtrl+Dで複製します。
適当にフォルダを作って移動しておきます。
メニューを選択してInspectorを確認してみるとこのようになっているのが確認できます。
これがExメニューと一致するはずです。このメニューを整理します。
メニューを整理する
今回はあんまり使わない3つをサブメニューとして1つに押し込みます。
今回は既存のメニューを流用して作ります。
複製したメニューを更にCtrl+Dで複製します。
その他のサブメニューということでこんな感じの名前にしてみました。
この3つ以外はいらないので消しちゃいます。
選択してーで削除します。
これでその他サブメニューとして押し込む先のメニューができました。
これをサブメニューとして開けるように設定します。
サブメニューとして押し込む項目は消してしまいます。
+ボタンをクリックして準備したサブメニューを追加します。
画像のようにTypeはSub Menuにし、Sub Menuとして準備したサブメニューを設定します。
適宜いい感じに名前を変えたりIconを設定したりします。
これでExメニューの整理ができました。
衣装用に差し込むメニューを作る
整理ができたので、同じようにして衣装用のExメニューを差し込む場所を作ります。
右クリック→VRChat→Avatars→Expressions Menuでメニューを作成します。
名前はこんな感じにしました。
Modular Avatarにて衣装周りのメニューを追加するだけなので、Controlは空のままで大丈夫です。
これをサブメニューとしてExメニューに追加します。
+ボタンで追加して、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の効果
Menu Groupコンポーネントを利用することで、衣装毎にサブメニューとしてまとまらず、展開された状態でメニューに組み込むことができます。サブメニューとしてまとめたい場合はMenu Groupではなく後述するMA Menu ItemをSub Menuとして使います。
個々のメニュー項目を作る
メニュー追加用の枠ができたので個々のメニューを追加していきます。
まずは色変え用のメニューをサブメニューとしてつくってみます。
このようなイメージです。
色変え用のメニューを作る
メニューアイテムを追加をクリックして画像のように設定します。
表示名
メニューでの表示名なのでColorとします。
タイプ
サブメニューとしたいのでSub Menuを選択します。
サブメニュー引用元
オブジェクトから生成したいので、子オブジェクトから生成を選択します。
サブメニューの中を作っていきます。
メニュー内容を表示を選択して展開後、メニューアイテムを追加をクリックします。
これが実際に衣装の色を変更するためのメニューの設定になります。
表示名
黒に変更するためのメニューとしたいのでBlackとしました。
タイプ
Toggleを選択します。
パラメーター値
黒色になるように設定したアニメーションのパラメーターは0なので0を設定します。
パラメーター名
衣装の色変えをやるパラメーターであるColorを設定します。
Hierarchyを見てみるとメニューオブジェクトの下に作成してきたColorのサブメニュー、黒用のメニューが並んでいることがわかります。
ここまでできたら色数分複製してしまうのが手っ取り早いです。
この状態でColorのオブジェクトを選択してInspectorを見てみるとズラッと並んでいるのがわかります。
ここから淡々と表示名とパラメーター値を変更するだけでメニューが出来上がります。
今回は黒と青に色変えするだけなので、2つにしておきます。
ここから消しちゃえばOKです。
このようになりました。
衣装をONOFFするメニューを作る
次は衣装をONOFFするメニューを作ってみます。
上でやったようにInspectorからちまちま作ってもいいのですが、オブジェクトを複製して作るのが早いです。
MA Menu Itemコンポーネントが設定されているオブジェクトを複製して、
このような位置に配置して、
MA Menu Itemコンポーネントをこのように設定します。
⚠️boolパラメーターの場合
パラメーターがboolの場合、パラメーター値は1のままにします。boolは0がfalse（オフ）、1がtrue（オン）を意味するため、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割くらいの時間がかかっています。
もう少し楽にできると嬉しいのですが…。
💡今はもっと楽になっています
いまはこんな大変なことはやってなくて、MAのObject ToggleやAvatarMenuCreatorを使っています。
まとめ
Prefab VariantやModular Avatarは最初は面倒ですが、一度やってしまえば別の衣装を着たいときにとても楽に実装できます。
衣装をそのまま着たいときはSetup Outfitってやるだけで終わるので最高です。
Modular Avatarは非破壊で実装できるためPrefab Variantと非常に相性がよいです。
Prefab Variantを活用して、変更に強い運用を頑張っていきましょう。
また、改変に慣れてきたらAvatar Optimizerなどを使って、アバターの軽量化にも挑戦していけるといいですね。
※ブログ形式の限界をひしひしと感じているので、徐々に軸足をこちらのサイト作成に移しています。
散り散りとした情報ではなく、体系的にまとめて行きたい所存です！
現在、アバター選びからUnityインストール、アップロードまでが作成完了しているので、これからアップロードするんだって方に見ていただきたいです！
巷の解説記事はUnityやVCCがインストールされている状態での解説で、あんまり初心者向きじゃないと感じていたので、丁寧に書いてみました。
おまけ
アバター変更時に一瞬服が脱げたようにみえてしまう
結論
服を着た状態（デフォルトであってほしい状態）にオブジェクトのオンオフをしっかり合わせてアップロードしよう！ということです。
アバターを変更した際、アバターアップロード時の状態が一番最初に表示されます。
その後パラメーターの同期が行われ、服を着せるアニメーションなどが発火し、服などの状態が同期されます。
そのため、服を着せていない状態でアップロードすると一瞬服が脱げた状態に見えることがあります。
同様に、セーフティによるアニメーションブロックや同期ズレ等で服を着せるアニメーションが再生されずに脱げたままになってしまうことがあります。
これを防ぐには以下のようにします。
- 服を着た状態（デフォルトであってほしい状態）にオブジェクトのオンオフをしっかり合わせてアップロードする
- 服をオン・オフするアニメーションを組む際、服を着た状態（デフォルトであってほしい状態）を最初の遷移とし、その後服を脱ぐアニメーションに遷移するようにコントローラーを組む
- パラメーターの状態によらないように空のアニメーションを挟みコントローラーを組む
くわしくは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がおすすめです。
使い方にクセはありますが、とても簡単にオブジェクトのオンオフやシェイプキーの変更、マテリアルの変更などが実装できてしまいます。
また、最近ではlilToon作者であるlilさんが作成したlilycalInventoryもおすすめです。
単にオブジェクトのオンオフをやりたい場合はこちらが楽です。
また、Modular Avatar本体にもMA Object Toggleというコンポーネントが増え、オンオフなどを簡単に実装できるようになっています。
MA Shape Changerなどと組み合わせることで、非常に簡単に複数のオブジェクト間で影響させつつ組むことができます。
衣装の排他制御（帽子とサングラスを同時に出さないなど）をやりたい場合は、AvatarParametersDriverを使っても簡単に実装できます。
筆者も自分で組むのはめんどくさいので、よっぽどのことがない限り自分では組まなくなりました。
ちなみに、これらのツールはNDMFという共通のフレームワークで作成されているため、同時に併用できます。
⚠️VRCFuryとの併用について
同様のツールとしてVRCFuryがありますが、こちらとの併用は不具合が起きる可能性があります。TTTやlilToonなど動作保証外としているツールもあるため、気をつけましょう。
購入した衣装を自分でPrefab Variantにしたい
購入した衣装がOriginal Prefabになっちゃってるから自分でPrefab Variantを作りたい。
そんなときはCopyComponentsByRegexがおすすめです。
元の衣装からVRCコンポーネントをコピーして移植したい衣装にペーストしましょう。
簡単に移植できます。
また、Original PrefabからPrefab Variantにする方法もあり、こちらで紹介しています。
その他番外編
MA Bone Proxy
チョーカーとか帽子とかをMAでポン付けできるようになります。
lilAvatarUtils
明るさ確認したりテクスチャのサイズ確認したりできて便利です。
テクスチャのサイズに気をつけよう
VRAMに優しくなりましょう。
マテリアルの明るさを合わせよう
身体と衣装で明るさが違って集合写真で恥をかかないようにしましょう。
これらの詳細はこちらの記事で解説しています。
衣装代
はてブにも投げ銭機能が増えていたので試してみます。
役に立ったと思ったら投げ銭してくれると嬉しいです…！
えっちな衣装代に充てます。
