はじめに
今回は、VCC+Unity2022でVRChatにアバターをアップロードする方法を紹介します。
VCCとUnityの導入が済んでる状態でスタートします。
↓前提知識はこちらをご覧ください。
また、自作アバターを1から設定する場合はより複雑な手順が必要になります。
↓1から設定する方法はこちらで解説。
![](https://signyamo.blog/wp-content/uploads/2024/05/dc3ee87ef36f8aef46a0fe859f673171-1-320x180.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
この記事は、Boothなどで買った “設定済み”のアバターを使ってアップロードする方法を解説します。
Boothでモデルのシェーダーを確認
VRChatアバターは、基本的に…
「シェーダー」 → 「モデル」の順に入れます。
VRChat向けアバターはBoothなどで販売+配布されてます。
↓ここでは、例としてこちらのモデルを使います。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/dc28637d2ba1a42bd6d4be9fa6242502.jpg)
まず、シェーダーを確認します。
アバターはまだ、ダウンロードしません。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-01-16.jpg)
Boothの商品ページでCtrl+Fキー。
「シェーダー」や「Shader」で検索。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-02-11.jpg)
すると、対応してるシェーダーが表示されます。
このモデルではlilToonが使われる事が分かりました。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-03-12.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
シェーダーは同梱されてる事もありますが…
アップデートなどに対応してないので、
自分入れることをおすすめします。
そしたら「シェーダー」 → 「モデル」の順に入れます。
シェーダーを入れる(lilToon)
モデルのシェーダを確認したら、そのシェーダーを入れます。
大体のシェーダーはlilToonなので、こちらを入れていきます。
【シェーダーの入れ方】
・VCC経由で入れる → アップデートが簡単
・UnityPackageで入れる → アップデートが手間
この2つの入れ方を紹介します。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
基本的に、VCC経由で入れることをおすすめします。
VCCを経由する入れ方
↓lilToonの配布ページにアクセス。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/e30bebd1b85bc57d531494a4dc6da272.jpg)
そして、主な機能の一番下にあるドキュメントのURLを選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-01-14.jpg)
ここの「VRChat Creator Companion」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-02-10.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
ここのリンク1発で張っても良かったですが…
偽サイトと思われてもアレなので、Booth経由にしました。
すると、下図のようなポップアップが出ます。
「CreatorCompanion を開く」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-03-11.jpg)
そして「I Understand, Add Repository」を選択。
※VCCを入れてない場合、この画面が出ません。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-04-11.jpg)
すると、Settings → Packagesの中に「lilxyzw」が表示されます。
これで、lilToonをVCCに入れる事ができました。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-05-10.jpg)
lilToonを入れたいProjectの「Manage Project」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-02-2.jpg)
下にスクロール。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-06-12.jpg)
すると「lilToon」があります。
Not Installedと書かれた場所から、Unityに入れるバージョンを選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-07-10.jpg)
Open Projectで、Unityを入れたプロジェクトを開きます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-13-8.jpg)
これで、lilToonがUnityに入ります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-09-8.jpg)
これで大丈夫と思いますが…
↓より細かな操作を知りたい方向けに、詳細はこちらで解説してます。
↓あとlilToon以外のシェーダーや、他に入れたいモノがある方はこちらより入れてください。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
あと、VCC経由で入れれない、URLが用意されてないモノは…
.unitypackageをドラッグ&ドロップで入れる形になります。
VCCを経由したので、Package Managerの所でlilToonもアップデートできるようになります。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-02-2.jpg)
これが便利なので、基本はVCC経由で入れることをおすすめします。
![](https://signyamo.blog/wp-content/uploads/2024/04/add-03-2.jpg)
つぎは、このVCCが対応してない時のために「.unitypackage」を使う方法を紹介します。
VCCを経由しない入れ方
.unitypackageを使うとUnityにアセットを入れれます。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
ただし、VCC経由のアップデートができないので注意。
↓lilToonの配布ページにアクセス。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/e30bebd1b85bc57d531494a4dc6da272.jpg)
lilToonのページからダウンロード。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-18-3.jpg)
.zipを展開 → ファイルの中に入ります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-19-3.jpg)
.zipをダウンロード → 展開し…
中にある.unitypackageをUnityの「Project」にドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-20-3.jpg)
すべてにチェックが入ってる事を確認。
「Import」で読み込み。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-21-3.jpg)
これで、lilToonの導入が完了。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-22-4.jpg)
※ちなみに、入れ方の違いでlilToonの入る場所が変わります。
.unityPackageで入れると「Assets」の中に入ります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-10-9.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
だいたい「Assets」の中はごちゃごちゃしていくので…
ファイル整理という観点でも、入れれるものはVCC経由で入れることをおすすめします。
シーンを保存する(.unity)
次はUnityを開き、シーン(.unity)というファイルを保存します。
これは、ヒエラルキーとシーンの状態を保存したファイルです。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-12-11.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
このシーン(.unity)ファイルが無いと…
Unityはデータを保存できません。
なので、このタイミングで先に使います。
Ctrl+Sキーで「保存」を実行。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-13-9.jpg)
そして、シーン(.unity)が無い場合、自動で保存画面が出てきます。
ここで名前を設定して保存。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-14-8.jpg)
これで、シーンの保存が完了です。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-15-6.jpg)
モデルをUnityに入れる
そしたら、Boothで使いたい3DモデルをDLします。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-04-12.jpg)
.zipを右クリック → 展開。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-05-11.jpg)
展開したファイルの中から「.unitypackage」を探します。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-06-13.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
ほとんどのモデルは「.unitypackage」方式で配布されてます。
「.unitypackage」をプロジェクト内にドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-07-11.jpg)
このモデルは “シェーダーが同梱” されてるので、lilToon関係のチェックを外します。
この状態で「インポート」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-08-11.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
これをしないと、古いバージョンのlilToonで
新しいバージョンのlilToonを上書きしてしまったり…
といった不具合に繋がる可能性があります。
チェックを外さないと、lilToon関係の情報が入ります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-09-9.jpg)
VCC経由でlilToonを入れてた場合、シェーダーのファイルが2つ生成されてしまいます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-10-9.jpg)
なので、間違って入れた方はShift+クリックで複数選択。
「Delete」キーで削除してください。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-11-10.jpg)
そしたら、3Dモデルのファイルを選択して開きます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-16-8.jpg)
ここから、VRChat向けの設定が入った3Dモデルデータを探します。
大体の場合「.prefab」形式のデータが入ってます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-17-6.jpg)
が… このモデルは入ってませんでした。
なので、別モデルで「.prefabの使い方」と「.prefabが無い場合」の探し方を紹介します。
.prefabを使う
だいたいのVRChat向けモデルは.prefab形式で配布されてます。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
なので、9割はこの方法を使って3Dモデルを読み込むことになります。
プロジェクトから、3Dモデルっぽいアイコンのモノを選択。
インスペクターを確認し、「Prefab Asset」と書かれていればそのデータが.prefabになります。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-63-3.jpg)
ヒエラルキーにProjectのデータをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-38.jpg)
これで、モデルの読み込みが完了です。
![](https://signyamo.blog/wp-content/uploads/2022/02/image-39.jpg)
.prefabが無い場合
今回読み込んだモデルは「.prefab」がありませんでした。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-17-6.jpg)
こういう時は、まずプロジェクトをよく観察します。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
何かしらの方法で必ず配布されてるはずです。
データをよく見ます。
(モデルが販売したてで入ってなからったら…
それは、公式にお問合せした方がいいです。)
そして、シーンファイルが入ってる事が分かりました。
こちらをダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-19-5.jpg)
これで、先ほど作ったシーンファイル (.unity) の表示では無くなりますが…
モデルを読み込むことができます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-20-5.jpg)
VRChat SDKを使ってアップロード
画面上部から、VRChat SDKを選択。
→ 「Show Control Panel」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-21-4.jpg)
VRChat SDKが表示されます。
Authentication → VRChatアカウントでログインします。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-22-6.jpg)
無い方は、こちらのページからアカウントを作成。
登録したメールアドレスに届くコードを入力。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-23-5.jpg)
これで、SDKにログインが完了です。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-24-5.jpg)
そしたら「Builder」の所をクリック。
すると、アバターにアップできる設定が出てきます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-25-5-649x1024.jpg)
Createing a New Avatarを見ると、アップロードに必要なことが表示されます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-27-6.jpg)
やる事は下記。
・アバターの選択
・Avatar Infoの設定を設定(名前)
・サムネイルの設定
・エラーへの対処
・アップロード
こちらを解説していきます。
アバターの選択
アバターはSelected Avatarから選択できます。
ここにはヒエラルキー入れたアバターが表示されます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-26-5.jpg)
ここで、アバターの選択ができます。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
アバターの選択は2つ以上ヒエラルキーに入れた際に問題になります。
Avatar Infoの設定(名前)
Avatar InfoのNameの所で名前を設定できます。
ここで「Test」などの名前を設定。
すると、1つ目のチェックが入ります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-28-5.jpg)
この名前は、VRChat画面のアバター名として表示されます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-40-5.jpg)
あと、Visibiltyは絶対に「Private」にしてください。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-29-7.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
ここをPublicにすると、誰でも使えるアバターになります。
99.999%ぐらいのモデルはPublic化NGなので注意してください。
以上が、Avatar Infoの設定です。
サムネイルの設定
次はサムネイルを設定します。
サムネイルの設定方法は下記の2つ。
・任意の画像を読み込む
・シーンから撮影する
この2つについて解説します。
任意の画像を読み込む
「Select New Thumbnail」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-30-6.jpg)
ここで、任意の画像を選択 → 「開く」を実行。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-31-8.jpg)
これで、サムネイルの設定が完了です。
サムネイルを設定すると2つ目のチェックが入ります。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-32-4.jpg)
シーンから撮影する
「Capture From Scene」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-33-5.jpg)
この状態でビューを操作。
すると、サムネイルが設定されます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-34-4.jpg)
良いアングルになったら「Capture」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-35-4.jpg)
これで、サムネイルの設定が完了です。
エラーへの対処
エラーの結論は「だいたい無視してOK」です。
とりあえずアップロードを試してください。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-36-4.jpg)
もし赤い三角エラーが出たり、アップロードできない場合はそのエラーを調べて個別に対処します。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
以上が、エラーへの対処法です。
アップロード
「Online Publishing」のチェックボタンを押します。
(利用規約に同意みたいなボタンです)
そして、Build & Publishを選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-37-3.jpg)
しばらく待ちます。
エラーが出なければ、アップロード完了です。
「Dismiss」で閉じます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-38-4.jpg)
これで、アップロードが完了です。
VRChatで動作確認
VRChatに入ります。
Launch Padから「Avatars」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-39-4.jpg)
すると、アップロードされたアバターが表示されます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-40-5.jpg)
右側の「Change Into Avatar」を選択。
これで、アバターを変えれます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-41-5.jpg)
ダブルクリックしてしまった場合は、このような表示になります。
こちらもで「Change Into Avatar」を選択。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-42-3.jpg)
これで、アバターをアップロードできます。
![](https://signyamo.blog/wp-content/uploads/2024/04/image-43-4.jpg)
まとめ
今回は、VCC+Unity2022でVRChatにアバターをアップロードする方法を紹介しました。
・モデルを入れるより先にシェーダーを入れる
・シェーダーはVCC経由がおすすめ
・アバターは.unitypackageでUnityに入れる
・アバターはVRChat SDKを使ってアップロードする
また、他にもVRChat向けの内容を解説してます。
ぜひ、こちらもご覧ください。
コメント