皆さん、今日もアバター改変やってますか？
ところで、VRChatで他のユーザーのプロフィールを閲覧した時、その時使っているアバターに設定されているサムネイルが表示される仕様になっていることは、ご存じの方も多いのではないのでしょうか。
しかしこのサムネイル、デフォルトだとアバターのTポーズの写真になってしまいますよね。これ、変えたくありませんか？
VRChatで撮った写真やイラストにサムネイルを変えてる人も多いですよね。どうやってるのか知りたくありませんか？
ということで今回はその手法について解説したいと思います！
しかも何と！今なら最近VCCに追加された新機能を使えば手軽に一瞬で出来ちゃいます！
今回は最初にまだVCCを導入してない方向けに今までのUnityで使える手法を紹介して、その後にVCCを使った新しい手法を紹介したいと思います！
VCCを既に導入済みの方は下記の【サムネイルの設定方法 -今までの手法-】にある『まずは準備するもの』の項目は共通の説明になるので読んでいただいて、その後は【サムネイルの設定方法 -VCCでの手法-】まで読み飛ばしちゃって実装をチャレンジしてみてください！
サムネイルの設定方法 -今までの手法-
まずは準備するもの
まずはアバターをアップロードする直前まで進めましょう！
今回は髪と目の色だけ改変したアルディナちゃんを使わせて頂こうと思います。
それとサムネイルに設定したい4:3の画像を用意しましょう。
今回私は以下の画像をサムネイルにすることを目標にしたいと思います。
なお、実際にVRChatで見れるサムネイルはこの画像から真ん中を16:9で切り抜いた画像になるので、上下には余裕をもたせてあげましょう。
じゃあ最初から16:9でアップロードすれば良いじゃん！と思うんですが16:9の画像だと歪みます。なので4:3の画像をサムネイルとして用意してあげてください。
サムネイルはどう設定されてるの？
皆さん、通常のデフォルトのアップロードをしようとすると以下のようになりますよね？
さて、アップロードボタンを押す前と押した後でVRCCamというオブジェクトがHierarchyのタブの中に増えてるのにお気づきでしょうか？
このUplode Imageに表示されてる画像はVRCCamというカメラのオブジェクトから撮った写真が実は写っています。
GameタブからSceneタブに今の状態で移動してみましょう。(上記の画像だと左上にあるタブです)その後、VRCCamを選択します。
Camera Previewが先ほどのサムネイルの画像と同じであることからやはりVRCCamで撮っている写真がサムネイルになっているのがわかりますね。
試しにこの状態でカメラを矢印を選択して上下左右に動かしてみてください。Camera Previewの画像が変わって、Gameタブに戻るとサムネイルも変わっていることがわかると思います。
さて、VRCCamで撮った写真がサムネイルになるならば、アバター以外にサムネイルを張り付けた板のオブジェクトを生成して、それをVRCCamで撮ってあげれば、自分の好きな画像をサムネイルにしちゃえるわけですね！
いざ、サムネイルのオブジェクトを作って映してみよう
と、仕様がわかったあたりでアップロードを一度中断して、サムネイルのオブジェクトを作っていきましょう！
まずは用意したサムネイルの画像をUnityのProjectタブのAssetsフォルダのどこかにドラック＆ドロップします。今回私はわかりやすいようAssetsフォルダの直下にファイルを投入します。
その後、Assetsを選択して右クリック→Create→Materialを選択します。
同様の操作を行っていればAssetsフォルダの下に下記の画像のような2つのファイル、サムネイルの画像とNew Materialが増えているはずです。
Unityをある程度長い間触ってる方は既にご存じかもしれませんが、オブジェクトに画像ファイルを適応させるにはMaterialというファイルを必ず通さないといけません。
なので今回New Materialを作った、というわけですね。
さて、次は画像を表示させる板を作りましょう。
Hierarchyで右クリック→3D Object→Quadを選択します。
そうするとQuadというオブジェクトが生成されるはずです。
初期状態だと裏表が逆なので、Quadを選択してInspecterのTrasformの部分の設定を行います。RotationのYを180にして、また4:3の画像を入れるのでScaleのYを0.75にしましょう。
その後、Inspecterの一番下にあるMesh ColliderをRemove Componetで削除します。
さて、InspecterのMesh RendererのMateriarlsの項目にある、Element 0に初期状態だとDefault-Materialが入っていると思います。
この部分に先ほど作ったNew Materialをドラッグ&ドロップします！
Unityの初期状態のMaterialだと使いにくいのでlilToonに変えてしまいます。
New Materialを選択してSharderからlilToonを選択しましょう。
アバターに使用されてないなどの理由でlilToonがプロジェクトにないよ！という方はここのURLからDLしてimportしましょう！
その後色設定のメインカラーの色の部分に用意した4:3のサムネイルの画像をドラッグ&ドロップします。
上手くいっていれば下記の画像のようにサムネイルの画像を表示した板が生成されているはずです！
さて、VRCCamにはサムネイルの画像が映ってほしいので、アバターを後ろに下げます。
その後、Quad(サムネイル)を上にあげましょう。
アップロードを試してみましょう！
VRCCamの位置はアバターを基準に設定されるので、Sceneタブで確認すると以下の画像のようになると思います。
なのでサムネイルが映るようVRCCamを後ろに下げましょう。この時、同時にCamera Previewを見ながらサムネイルがカメラの枠に合うようにVRCCamの位置を上下含めて微調整します。
後はアップロードするだけです！Gameタブに戻って、サムネイルが設定出来てるのを確認してアップロードしましょう！
最後にゲーム内で確認してみましょう！綺麗に設定できてますね！これにて完了です！お疲れさまでした！
サムネイルの設定方法 -VCCでの手法-
さて、まずはアバターをアップロード直前まで進めて、サムネの画像まで用意していただいたと思います。
12月中旬に実装された新機能『GestureManager』を使ってサムネイルの設定を行います！
この機能の紹介、導入方法に関しては以前書いた記事で解説しているのでそちらを参考にしてください！
まずはAssetsフォルダの中に使いたいサムネイルの画像をドラック&ドロップします。
その後ToolsからGesture Manager Emulatorを選択してGestureManagerのprefabがHierarchyにある状態にします。
これで準備完了です。SDKからアップロードをしていきましょう。
最初は以下の画面になると思います。
まだTポーズのままですね。ここからHierarchyのGestureManagerのオブジェクトを選択します。
その後InspecterからToolsを選択するとAvatar Backgroundという緑色の項目がありますね。
ここのNone(Texture)の部分に用意したサムネイルの画像をドラッグ&ドロップします。
はい、これで完了です。後はUploadを押してサムネイルが反映されてるか確認しましょう。
出来てますね！お疲れさまでした！
最後に
皆さん、無事サムネイルは実装出来ましたでしょうか？上手くいったならば幸いです！
また、最初から最後まで目を通した人は如何にVCCが革新的で段違いに楽なのか感じれたのではないでしょうか？今後どんどんこのように楽な機能が増えていくと良いですね！
以上！この記事が皆様のVRChatライフの一助になれば幸いです！
投稿者プロフィール
