VCIを作成するための環境を整える

「VキャスのVCIで◯ine◯raftっぽいもの作る Advent Calendar 2024」2日目

Vキャス内で、穴を掘って、石を砕き、木を切って、組み合わせて武器を作って、何なら出てくる敵を倒して・・・
そんなことをやりたいなぁっていう試みを12月でできるところまで行こうというカレンダーの2日目です！

設計図を書いたので③のアイテムや敵のような実態のVCIの作成をしていきたいですが。
VCIを作るためのまず環境がないということに気が付きます。

そこで2日目は、VCIを作成するための環境を整える作業をします。


# VCIを作成するための環境を整える
VCIを最低限作るためには、以下６つの手順が必要です。

① Unityアカウントを作成する
② UnityHubをインストールする
③ VirtualCastのアカウントを作成する
④ VCToolKitをDLする
⑤ UnityHubのProjectにVCToolKitを追加して、必要なUnityをインストールする
⑥ Unityから開いたVCToolKitのメニューからVirtualCastにログインする

同様のやり方説明は[公式](https://virtualcast.jp/wiki/vci/beginner)にも、他の方の記事もあります。
こちらで分かりづらい場合は合わせて確認してみてください。

# 手順

## ① Unityのアカウントを作成する
Unityは、VCIだけでなくいろいろなゲームだったりを作成することができる3D 開発プラットフォームです。
UnityはVirtualCastとは関係ない組織＆ソフトですが、アカウントを作ることで、アセット（3Dモデル）をDLして利用できたり、Unityの情報を得ることができたりします。

アカウント作成にはお金はかかりません。
また、Unityのアカウントの用途として、[Unityアセットストア](https://assetstore.unity.com/)があります(以下画像のようなすごいアセットがたくさん販売されています！)。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/31672e98-d2ed-0b9e-a83b-5b99260127f6.png" width="50%">
この、Unityのアセットストアで購入したアセット(モデルやアイテム、ツールなどがあるよ)は追加規約がなければ、VCIやVRMに利用してTSOに公開・販売することも可能ですので、ぜひ時間があったら見てみてください。

[Unityの公式ページ](https://unity.com/ja)を開きます
開いた画面の右上に人のアイコンがあるので、これをクリックして出てくるメニューの中の「サインイン」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a9f90a3b-105f-5b8e-2e65-627e186ab9d4.png" width="50%">

メールアドレスとパスワードを入力してもよいですが、おそらく一番簡単なのは、下のORにある「G」つまりGoogleアカウントでサインインする方法です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/dc792990-e94c-b7d0-0e55-a020c888d197.png" width="50%">

Googleアカウントにログインして連携の承認をしたらアサインできるはずです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/99a4c6c8-f44e-4292-fbf6-c65901ed9da4.png" width="50%">

メールアドレスとパスワードの場合は、メールが送られてくるので、登録承認をして本登録してください。
これでUnityのアカウント作成は終わりです。


## ② UnityHubをインストールする

Unityは活発に開発がされているソフトで、どんどん新しいバージョンが提供されます。
しかし、Unityの開発をしているのはバーチャルキャスト社ではないので、VCIを作れるUnityのバージョンはバーチャルキャストが対応したものだけになります。
一方で、VCIを作れるように対応したUnityのバージョンは、例えばVRCのワールド作成が可能なUnityのバージョンとは異なるかもしれません。
そのために、同じPC上で複数のバージョンのUnityを使うことが一般的です。

そこで、複数のUnityのバージョンをわかりやすくするソフトである「UnityHub」を導入しましょう。
やることは、以下リンクからUnityHubのインストーラーをDLして、インストールする(OKを押していく)だけです！
https://unity.com/download


## ③ VirtualCastのアカウントを作成する
UnityHubの用意はできましたが、VCIを投稿するためのVirtualCastのアカウントが必要です。
そこでVirtualCastのアカウントを作成します。

[VirtualCastのWebページ](https://virtualcast.jp/)に遷移して、新規登録をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/96acf93e-2f20-3dbd-0605-92695fc5fbf6.png" width="50%">

アカウント登録画面になるので、メールアドレスと必要情報をいれるか、連携SNSから登録しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/bb1e947a-7952-27d5-f386-4082e88ffae5.png" width="50%">
VirtualCastにはGoogleアカウントからの登録がないので、SNSの利用がない場合はメールアドレスとパスワードを入力して登録し、送信されてくるメールから本登録する形になると思います。

## ④ VCIのツールキットをDLする
ここまでで、VCIを登録する場所の確保と、VCIの制作をするための開発ツールの管理ソフトの導入が終わりました。

残りは、VCIを制作するツールキットをDLして、開発ツールの本体をインストールし、開発ツールからツールキットを開いて、VCIを登録できるように開発ツールからVirtualCastにログインするという作業が残っています。

・・・言葉で書いてもよくわからないので、順々に進めましょう。

[VCToolKitの公式ページ](https://developer.virtualcast.jp/vctk/)を開いて、プロジェクト版というボタンをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/4be35c4b-656d-49a6-f156-5e0e4d0f5f97.png" width="50%">

クリックすると最新版のVCToolKitをDLしてよいか聞かれるので、了承してDLします。
DLしたファイルはZIPファイル（圧縮されているファイル）なので「すべて展開」をしておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/d20627ac-d91c-f428-33a4-1dc2954b98c8.png" width="50%">

これで、VCIを制作するツールキットのDLは完了です。

## ⑤ UnityHubのProjectにVCToolKitを追加して、必要なUnityをインストールする

UnityHubを起動しましょう。
起動するとUnityにサインインを求められます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/1c05ad34-6347-c543-c939-ade31f3f54c9.png" width="50%">

①で作成したUnityのアカウントでログインします。
ブラウザが開いて、ログインをするとUnityのアプリにリダイレクトしてログイン状態になるかと思います。

次に、起動したUnityHubの右上部にある、Addのボタンをクリックし、表示されるメニューの中で「Add Project from disk」というものをクリックします。
これは選んだフォルダをUnityの作業場所として開くという意味合いになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/d793f753-4553-82df-9f48-fab5084d091b.png" width="50%">

PC内のフォルダ選択が表示されるので、④で展開したフォルダをダブルクリックし中身の「VCToolKit」を選択して、右下のAddProjectをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/f7af5fb3-a3fa-0481-944a-0dec2748f3b2.png" width="50%">

読み込まれると、プロジェクトとして認識されて表示されます。
ただし、Unity本体（開発ツールの本体）がまだないので、右の方に黄色い警告マークが出ています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/6ad6ae7f-5da9-6e58-0968-d6b96b685bb6.png" width="50%">

警告マークをクリックすると、VCToolKitが必要にするUnityをインストールするかが聞かれます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/06d246d6-d2de-040d-65b3-95515f65f50d.png" width="50%">

2024/12/2時点のVCToolKit_v1.3.0ではUnity2022.3.20f1が使うようにされているので、画像のように推薦されます。
このUnityのバージョンというのはとても重要で、ズレたもので起動しようとすると大抵失敗するので、推薦されたものをインストールしましょう。
画像の下に「最新に2022.3.53f1もある」というような表示がありますが、これをインストールしても動かない可能性が高いので、Unity2022.3.20f1をインストール。この画面の「Install Version 2022.3.20f1」ボタンをクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/e594a013-6376-568b-9fab-3c8a393b3db5.png" width="50%">

インストール時にオプションで色々聞かれますが、一番上のDEV TOOLSというもの以外は必要ないので、チェックはせずContinueをクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/9f35da13-1c56-a94e-2790-c99451185051.png" width="50%">

環境には寄りますが結構時間がかかるので、気長に待ちましょう。
インストールが完了すれば、大体の準備が完了になります。

## ⑥ Unityから開いたVCToolKitのメニューからVirtualCastにログインする
残るは開発ツール（Unity）でVCToolKitを開いて、VirtualCastにログインするだけです。

⑤のインストールが完了すると、VCToolKitを開くかの緑色の確認表示がされます。
これをクリックすると、VCToolKitを開発ツール（Unity）から開くことができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/5a07b58e-d285-5c18-89c8-ff6119a8cb6f.png" width="50%">

そこから開かなくても、UnityHubのメニューのVCToolKitについても、警告マークがなくなっているので、ダブルクリックでVCToolKitを開発ツール（Unity）から開くことができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/f4090491-0ce4-cb30-4c84-05c1ac0d7c72.png" width="50%">

VCToolKitが開かれるとUnityの画面が開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/7c3f8169-0abc-23e3-3249-d98d96c1ec57.png" width="50%">

Unityの画面の上部には色々なメニューが表示されますが、この中の「VC ToolKit」をクリックし、展開される項目の中でから「Settings...」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/97243a26-9e8c-1c01-d127-793f14325395.png" width="50%">

Settings...をクリックするとVirtualCastのログインメニューが表示されるので「ログイン（ブラウザが開きます）」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a5939b32-d9b5-2831-a9f8-f75f618debeb.png" width="50%">

ブラウザが展開され、そのブラウザでVirtualCastにログインしていると、連携許可の確認画面が表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/3055c4d6-852a-a9b2-0175-289acff8bee1.png" width="50%">

「連携アプリを認可」をクリックすると、codeとstateが表示されるので「codeとstateをコピー」をクリックして、codeとstateをクリップボードにコピーします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/12cc810d-452e-3a8b-936f-7ab45529c91e.png" width="50%">


Unityの画面に戻ると、codeとstateを貼り付けるフォームが出ているので、貼り付けをクリックするとクリップボードにコピーされた文字列が貼り付けられます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/8baa2abd-1230-c6aa-5d94-a4368e3f7908.png" width="50%">

貼り付けたら「認証」をクリックします。
成功すると、自分のVirtualCastアカウントのユーザー名とアイコン、IDが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/f3fd855f-fdc6-dbb1-aabf-3a46b59c6541.png" width="50%">

以上で完了です。


# おわりに
これでVCIを作るための最低限の環境が作れました。
いよいよ明日は、アイテムや敵のような実態のVCIの制作をしていきます。