【VRChat】VCCでツールが使えなくても出来る！ゼロから解説するツールに頼らない小物のONOFFの実装！

　皆さん、VCCへの移行は無事に出来ましたでしょうか？
　「ツールが使えなくなるらしい」という情報を聞いていまいち手を出しづらい方もまだ多いかと思われます。
　なんならツールの使い方がよくわからなくて……とアバターに小物の実装すらしていない方ももしかしたらいらっしゃるのではないでしょうか。

　でも大丈夫！完全にゼロからVCCで小物をONOFFする手法を解説しているこの記事を読めば、ツールが無くてもアクセサリーや服のONとOFFは意外と簡単に実装できちゃうんです！
　更に言えばVCCではない現行(2022年11月)のUnityでも同じ操作でONとOFFはツールなしで実装できちゃいます！

　それにもし、自分で仕様を理解して実装を行うことが出来るところまで来れれば、いざ何らかのバグを起こした時に理由が判別しやすいというメリットもあります。ツールは確かに便利ですが、バグを起こした時にツールがバグってるのか他なのか、バグってるとしてどこがバグってるのか判別しづらい面はどうしてもあるので……。

　「とりあえず同じ操作をしてONとOFFを実装したい方」「ちゃんと仕様を理解したうえでONとOFFを実装したい方」どちらの方が読んでもなるべくわかりやすいよう記事を執筆しようと思います。仕様の話はなるべくTipsという項目にわけて説明したり、黄色いボックスの中にので、「とりあえずONとOFFの実装がやってみたい！」という方はその部分は読み飛ばしていただいて構いません！あくまで補足の説明になっています。

　なるべく誰でもわからない要素を減らしたいと思った結果かなり長めの記事になってしまいましたが……。操作自体はそんなに多くはありません！

　というわけで2か月で同じ素体のアバターの総アップロード数が500を超えた私がなるべく丁寧に解説の方をさせていただこうと思います！

小物のONOFFを実装するにあたっての大まかな流れ
VCCを使った上で小物を新しく実装しよう
小物のONとOFFのアニメーションの制作をやってみよう
FXレイヤーでONとOFFのアニメーションを制御しよう
ExpressionメニューにONとOFFのボタンを実装しよう！

小物のONOFFを実装するにあたっての大まかな流れ

　小物とそのONOFFの実装の流れは以下になります。

VCCでのプロジェクトの立ち上げ、アバターと小物を設定(Hierarchyに置いて対応するboneに小物のObjectを入れる)
小物のONとOFFのアニメーションの制作
FXレイヤーに小物のONOFFをするレイヤーの作成
Expressionメニュー(パイメニュー)に小物をONOFFする項目の追加

　もし何を言ってるかわからない項目があっても大丈夫！各項目で丁寧に解説をしていきますし、同じ操作をしていただければ確実にONとOFFが実装出来るよう記事を書いています。ひとまずこういう順番があるんだな、程度の認識で大丈夫です。

　逆にこれくらい知ってるよ！って項目があれば読み飛ばしていただいて構いません！特に1ページ目はVCCでのアバターと小物の導入について執筆しているので、その部分は読み飛ばしても問題ない方は多いでしょう。
　読みたい部分だけ読んで、欲しい知識だけをパクっちゃいましょう！

　最後に1つだけ。UnityとVRChatの仕様をある程度わかっている方向けに注意点を。
　この記事を読む方はなるべくUnityやVRChatの仕様がわからない方向けにかみ砕いた表現を使用して記事を執筆しています。
　なので読んでいて「厳密にはそういう事じゃない」と思う表現もあるかと思います。が、そこは上記を踏まえてある程度許容していただけると幸いです。何より、私もUnityﾎﾝﾉﾁｮｯﾄﾀﾞｹﾜｶﾙだけの人間ですので……。何かそれ間違えてない？って思った方はTwitter(@2tro_)に気軽に連絡をいただければ対応、場合によっては修正致しますので宜しくお願い致します！

　それでは長い前置きはさておき、始めていきましょう！

VCCを使った上で小物を新しく実装しよう

VCCって何？

　まだVCCに手をつけてない方もいらっしゃると思いますので少しだけ解説を。
　VCCとは、簡単に言えばVRChat専用に作られたUnityHubです。

これがVCCの実際の画面。こっから『mayaVCC』という名前のプロジェクトを選択して起動することになります。

　VRChat専用に作ってあるので、VCC経由で起動したプロジェクトにはあらかじめSDKが入っている状態でUnityが起動します。

そう、皆がアバターをアップロードしてる時に使ってるこれ！これがSDK。
これが最初から入ってます。

　そう、UnityHubでプロジェクトを選んでいたあの画面が変わるだけで、実際に使うのは今まで使っていたUnityと同じです。

　Unityからは逃れられませんが……逆に言えばVCCになったからといってUnity上で特別な操作が必要になるわけではありません。

　SDKの導入の方法がVCCになってから変わったことによって、確かに使えなくなってしまうツールは現状出てきてしまっています(2022年11月現在)。が、逆に言えば元からUnityの仕様で実行出来たことはVCCになっても変わらず実行できます。

　つまり今回はツールを使わずに、Unityだけで元から出来る機能で小物のONOFFを実装しちゃおう！というお話になります。

まずはVCCで新規プロジェクトの立ち上げてみよう！

　VCC(VRChat Creator companion)を立ち上げ、Projectsを選択、Newを押します。

　今回は確実にバグを踏まない方法として新規でのプロジェクトを立ち上げます。既に移行が完了していて特にバグが起こってないプロジェクトがあるのでしたらそちらを扱って大丈夫でしょう。アニメーション作成の項目(2ページ目)まで読み飛ばしていただいても恐らく大丈夫だと思います。

　今回はアバターを扱うのでAvatarを選択。

　プロジェクトの名前と保存先(Location)を選ぶ画面が出てくると思います。Locationの部分は人によって違うと思うので気にしないでください。

　さて、デフォルトのプロジェクトの名前は『New Project』ですが今回はわかりやすいように『RitoriVCC』(アバターの名前+VCC)と名付けようと思います。ですがこれはあくまで一例で、プロジェクトの名前に関しては個々人で好みがわかれる部分だと思います！ですので、ご自由にしていただいて大丈夫です。

　さて、プロジェクトの名前を決めたらCreateを押しましょう！

　これで『RitoriVCC』という名前のプロジェクトが生成されました。ここからOpen Projectをクリックします。

　はい、いつものUnityの画面が出てきました。

　さて、ここからいつも通りのUnityPackageのimportの作業から始まります。

Tips:VCCで変わったSDKの導入方法

　Unityの画像を見ると上のFile Edit……と続いてる部分にVRChatSDKが既に入っていることにお気づきでしょうか？このようにimportをしなくてもSDKが既に入ってることがVCCの大きな特徴の一つとなります。

Tips:Unityのレイアウトの配置について

　さて、私のUnityの画面を見ると「自分のと違うな？」と思った方も多いと思います。このレイアウトの配置については完全に人それぞれの好みにはなるのですが……。個人的にはUnityの一番右上にあるLayoutを2by3にした後、下に出てくるGameタブをSceneタブの横に移動させるのが一番お勧めかなと思います。HierarchyやProjectはファイルやオブジェクトが多く並ぶことが多いことから、縦の直線にした方が見やすいかな、と思うので……。またProjectの右にあるファイルが並ぶ項目の部分、一番下をよく見ると、線の上に●が置いてあると思います。この●を一番左までドラッグしていくことで、ファイルの表記が一番小さくなり私はこれが見やすい、管理しやすいと思います。もし何か使いづらいレイアウトだな、と思いながらUnityを触ってる方がいらっしゃいましたら試してみてください！

アバターと小物をimportしよう！

　さて、使いたいアバターなどをimportしてUnityに入れていきましょう。

　Assets→Import Package→Custom Packageを選択していきます。

　開くを押してimportしていきましょう！

　今回importするのは『りとり』ちゃん(アバター)、『liltoon』(シェーダー)、『うさぎのめがね』(小物)になります。

Tips:シェーダー

シェーダーとはUnity(VRChat)上でモノに色をつけてあげるために必要なもの、くらいの認識で大丈夫です。シェーダーが実装されてない状態でHierarchyに試しにモノを置いてみるとピンクの状態(マテリアルエラー)になってしまいます。これを回避するために、それぞれのアバターやアイテムに対応したシェーダーを入れる必要がある思ってもらえれば大丈夫です。因みに『うさぎのめがね』は対応したシェーダーがUnityPackageに既に一緒に入ってるので別で入れる必要がない形になります。

シェーダーが入ってない状態でHierarchyに置いてみたりとりちゃん。こんな感じでピンクになってしまいます。

アバターに小物を実装しよう！

　さて、importが終わりましたらHierarchyにPrefab Asset(青い箱のアイコンのものです)をドラッグ＆ドロップしていきましょう。

Tips:Hierarchy、Project、Inspector

　アバターが表示されてるタブ(ウィンドウ)以外に、Unityでは基本的にプロジェクトを実装していく上で活用していく3つのタブがあります。Hierarchy、Project、Insptector、の3つです。

　Hierarchyは実際にアバターや服、小物を置いて実装する場所、だと思っていただければ大丈夫です。下にある画像だとアバターが実際に映ってるSceneの右にありますね。ここにオブジェクトを並べて改変を行っていくことになります。

　Projectはimportしたファイルやフォルダが実際に入って並ぶ場所です。Projectの中にあるAssetsというフォルダの中に入っていきますね。このProjectからHierarchyにドラッグ&ドロップをしていくことでSceneにアバターなどが並んでいくことになりますね。

　InspectorはHierarchyやProjectで選択したアバター(オブジェクト)やファイルの詳細が表示される場所です。意外と何度も確認することになるので、覚えておくと良いでしょう。

　まずはアバターのPrefab Assetをドラック&ドロップ、その後Hierarchyに置いたPrefab Assetを右クリックして、必ずUnpack Prefabをしましょう。

Tips:Unpack Prefab

　Unpack PrefabをせずにPrefab Assetのままアバターの改変を行った場合、VRChatの仕様上(これはいつのSDKのバージョンを使っているかにもよると思いますが)、アバターの変更をしてもPrefab Assetのデフォルトの状態に戻されたり、逆に操作次第では変更した内容がそのままPrefab Assetに適応されてしまう場合があります。
　Prefab Assetに変更が適応されてしまった場合、「一度改変をリセットして新しく作り直したい！」などと思った時にPrefab Assetをドラッグ&ドロップしたときに改変後のアバターしか出てこなく、importしなおし……なんてこともあります。

　改変する上でUnpack Prefabはなるべくバグを避けるための”おまじない”の操作だと思ってくださっても構いません。一部ツール等の導入でPrefab Assetのまま使用する場合もありますが、特にそういった注意事項や導入手法の紹介がない場合は必ずUnpack Prefabしましょう。

　更に改変するアバターであることをわかりやすくするため、アバターのパッケージの名前を変更しましょう。アバターを選択→右クリック→Renameを選択することで名前を変更できます。今回は仮に『MeganeRitori』にしましょうか。もちろんここは自分の好きな名前をつけてあげてくださいね！

　さて、ここからメガネを実装するわけですが、メガネは頭に追従するアイテムなため、Armatureの中にあるHeadの中にメガネのPrefab Assetを入れましょう。

　この後、『うさぎのめがね』をUnpack Prefabすることもお忘れなく。

Tips:Armature

　さて、大抵の人型アバターには『Armature』という名前のパッケージが入っていると思います。(そうじゃないアバターもあると思いますが、私は見たことないです。)
　この中にはアバターのBoneが入っています。これは、名前のまま関節等の人型の骨が中に入っていると思っていただいて最初は構いません。骨の動きに肉がついてくるように、ついてる名前のパッケージの下にオブジェクトを入れると、その名前の部分に対応した部分に入れたオブジェクトが追従するようになります。(ネイルなら指先、チョーカーならNeck(首)など)今回のメガネは頭の動きと一緒に動いて欲しいので、Headのオブジェクトの中に入れることにしました。

　少し見辛いですが、メガネがりとりちゃんの頭の上からかなり遠い部分にあるので、メガネを動かして座標を調整していきます。