これからVCIを作りたい人へ（VirtualCastToolKit）

:::note info
この記事を読んで出来ること
・UnityでのVCI制作環境の構築！
・１クリックでいつでもサイトにVCIをお手軽アップ？(VirtualCastToolKit)
・初めてのキューブのVCIアップロード(＋ちょっとしたアレンジ)

:::

:::note warn
この記事はUnity＆VCI作り 初心者向けです。
・Unity Hub(Unity)、VirtualCast ToolKitの導入
・初めてのVCIアップロード
までに必要な手順をなるべく細かく記載しています。


:::
## 最初に
どうも、てすてゃ～です。

バチャキャス(Vキャス)で一度はアイテム作ってみたいですよね？
そんな人におススメなのが「**VirtualCast ToolKit**」という公式が出してるツールです。

![スクリーンショット 2023-12-05 024552.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/a95f8175-0fa1-cefd-becc-eb387e42d235.png)
https://developer.virtualcast.jp/vctk/

・初心者でも扱えるの？
・Unity結局使うんか。。

って、思う方も多いかと思いますが

:::note info
・制作環境が最初からプロジェクト内に用意されてる
・VR内に手軽にアップロード＆更新ができる
:::
というスタートアップ＆アウトプットの労力を限りなく減らせるので、初心者にもそれ以外の方にもおススメです！（UniVRMも入っているのでVRMデータも編集できます）

では公式の手順通りにさっそく一緒に導入してみましょう！

![スクリーンショット 2023-12-05 034606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/82e36fbd-8cb1-c6cf-15ed-8b9476460e56.png)

全部先ほどの公式サイトに書いてる通りなのですが、
ちょっとここからUnity初心者向けに細かく見ていきます。

※Unity Hub導入済みの人は「・必要なバージョンのUnityをインストールする」から進めて下さい。

## １．UnityHubをインストールする
![スクリーンショット 2023-12-05 04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/cc2d3ac8-bc5c-6e22-41bd-bdb8788d4338.png)



https://unity.com/ja/download

サイト内のWindows用ダウンロードをクリックして、
ダウンロードフォルダにできた「UnityHubSetup.exe」を起動します。
![スクリーンショット 2023-12-05 040729.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/18a1da21-5e89-ead0-cc08-6aa2eedb7eb1.png)

「同意する」をクリック。
![スクリーンショット 2023-12-05 041432.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/f56634d9-8b36-77bb-6ebd-475e9c5b738d.png)

「インストール」をクリック
※OSの入ってないドライブがあればそちらのほうがいいかも。
![スクリーンショット 2023-12-05 041652.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/1ef21ad4-733c-0bec-26ad-7b7fcc5b3444.png)

「完了」をクリック。
![スクリーンショット 2023-12-05 041842.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/d393fef2-d397-029c-4f9f-b2b79878c0d8.png)

### ・Unityにサインインする
Unity hub起動初回時にサインインがいります。
※アカウントがない人は「アカウント作成」をクリック。
※この時点で日本語表示じゃない人もあとで変更できます。
![スクリーンショット 2023-12-05 042004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/8b617f6b-6624-e498-739c-ba97d1849128.png)

ブラウザで以下のページが出るので、各項目を入力。
※ユーザーネームとフルネームは何か適当に入力。最初の２つのチェックは必須なので入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/98e6a220-252c-de01-b9bc-08e4c453a6d7.png)

**確認メールのリンクをクリックした後**に「続行」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/fd1d945e-524c-ad6c-eab3-34d177320a41.png)

こんな画面になったらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/f4441502-5084-39ca-01bc-9ad3dac53a10.png)



あとは先ほど立ち上げたUnityHubの「サインイン」をクリックすると、ブラウザにこんな画面が出るので「UnityHubを開く」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/ed6f32fe-6198-83d7-2f51-4d0a8d00edda.png)

最初にインストールするバージョンを聞いてくることがありますがここはスキップを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/2d39c646-81e7-2c2c-4393-5d744aa4b961.png)

### ・Unity Hubを日本語化する
左上の歯車マークを押して、「Appearance」のLanguage → 日本語を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/41659f85-f321-1516-da4d-626f8602a167.png)
### ・ライセンスを取得
初回はライセンス(無料)の取得がいるので「ライセンスの管理」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/4503943a-b1fc-93ea-4222-8e3f6defd8d6.png)
ライセンスを加える → 「無料のPersonalラインセンスを取得」→ 内容を確認して「同意」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/ce78c225-2b85-db7c-9fa1-6ab6435f0e9d.png)


### ・必要なバージョンのUnityをインストールする
ついにUnityHubの設定が終わりましたね！
ではさっそく必要なバージョンのUnityを入れるので左のタブのインストールをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/46ead91e-80eb-95ce-35ba-7a7896401ece.png)

必要なUnityのバージョンは https://developer.virtualcast.jp/vctk/ の最初に書いてあります。
※2023/12/5の時点ではUnity 2022.1.24f1ですね。
初めての人はまだ何のバージョンもインストールされていませんので「エディターをインストール」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/9dccab69-6e33-ec61-92b5-6e42180725d2.png)

欲しいバージョンが見つからない場合、アーカイブの「ダウンロードアーカイブ」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/d6d314f2-f893-54fa-3c23-c1e683da3323.png)

ブラウザが開くのでここから必要なバージョンを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/2bc3d382-de17-fd65-c46b-b3b905e4f4ab.png)

UnityHubにインストール画面が出るので「インストール」をクリック。
※日本語で表示させたい人は日本語パックを入れてもいいでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/832ff3db-1bae-4399-f997-58e3b92c181a.png)
インストールはしばらくかかるかと思いますのでその間、次にVirtualCastToolKitのプロジェクトフォルダを落としておきましょう！


## ２．VirtualCastToolKitを展開しておく
https://developer.virtualcast.jp/vctk/ のダウンロード（プロジェクト版）をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/b52c8d4a-3125-1949-be7d-fc0479908a58.png)

ダウンロードしたzipファイルを解凍して適当な場所に、、すると後で消してしまって泣くことになるので、場所はちゃんと決めておきましょう！
※UntyHubで「新しいプロジェクト」を押すと普段のプロジェクトの保存先が分かるので、そこに解凍したフォルダを置いておくと良いかもしれません。私の場合はD:\unity内ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/7db2315c-e77d-179c-c7df-95c99178c6d5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/5290bde2-9da9-171d-8185-855eddde0487.png)

また、この時のフォルダ名がプロジェクトの名前になります。
※今回は「VCToolKit_Test」という名前にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/7e3efcbb-8229-aaac-ab32-a54521f3cb02.png)
フォルダの中見はこんな感じになってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/460bf8fb-c7d9-f3d4-9fb6-7e0257be2b31.png)

## ３．UnityHubでプロジェクトを開く
UnityHubに先ほど設置したものをプロジェクトフォルダと認識させたいので、「追加」をクリック。※英語版だとOpenとかAddとかかな？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/028f6b26-4850-1ea7-1159-276472b363b9.png)

先ほど設置したフォルダを選択して「開く」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/7f1e94d7-37a8-d297-1074-d72a6464f3c0.png)

これで一覧に追加されました！今後はここからプロジェクトを開くことができます。
※開く際のUnityのバージョンは右側のところから変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/3776b2ca-f4ca-3449-633b-8366b7d74f07.png)

## ４．さっそくアイテムをアップロード！
プロジェクトが開けたら、とりあえずVCIをアップしてみましょう。

https://wiki.virtualcast.jp/wiki/vci/beginner

↑ もろもろのVCIの制作方法はこちらに書いてますが、とにかくアップしたいと思います。

### ・バーチャルキャストサイトとの連携
まずはツールキット君を入れたので、自動でサーバーにアップしてくれる設定をします。
Unityのタブから「VC ToolKit」ー＞「Setting…」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/a8c338c0-19db-13ac-d072-7c4db7df3c2c.png)

ログイン情報を保存にチェックを入れ、「ログイン」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/41bc84e9-2d79-d539-30d5-8e1be84fc3d8.png)

ブラウザが開くので「連携アプリの許可」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/6a2fd6cd-0716-3bb7-9ce1-3ef25f36cee3.png)

「codeとstateをコピー」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/4e66a190-9dd3-32b9-c871-4e75b1d013ef.png)

Unity側で「貼り付け」、「認証」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/3f4401ad-1920-2923-7677-71587dbf42c1.png)

IDと名前が出てくれば成功です！右上の×を押して消しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/d7f0eef2-a0c3-375d-b284-c0080c96fcf3.png)

### ・Simple VCI を出してみる。
１からVCIを作ると最初は結構手間なので、今回は最初から用意されているシンプルVCIというキューブのアイテムを作成してアップロードしてみましょう！
Unityメニュータブの「GameObject」→「VCI」→「Simple VCI」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/759c6150-dfcf-1115-17f4-600af71570e8.png)

出来上がったオブジェクトを選択して、
・TitleにVCI名を適当に入れて
・「AddCompornent」をクリック。
※この時のTitle名がVR内で表示される名前になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/e636e12b-f46f-532d-4635-ac171f3946b4.png)

「Tso Item Descriptor」を探して選択。※検索窓にtsとか入れると出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/ac521158-0359-845b-41fe-265196c4aa51.png)

「VCIをVirtualCastにアップロードする」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/d626183a-4477-23e0-d77c-3b6d86191656.png)

このウインドウが出れば成功！
Vキャス内で今アップしたアイテムが出せるようになっています！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/adf2981e-e148-ac3c-1df7-4556fc94391d.png)
１ｍの立方体だから**クソでけぇ・・・**(あと大きさも変わらない）
![2023120601143847_テストｚ_てすてゃ～ (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/29409a03-7004-3572-b856-6d0ffc33ef57.jpeg)


これだけだとちょっと味気ないので、ここからシンプルVCIがどんなものだったかを見ていく＆少しアレンジしていきます。

※また、Unity中央のシーンビューを操作したい人はここを参考にしてみてください。

https://gamedev.kurokumasoft.com/2022/08/01/unity-basic-operation/


## ５．ちょっとアイテムを更新してみる。

まずはVCIの横の▼を押して内部を展開します。Cubeというのが出てきましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/f8dbc95e-ce6c-1bd6-9cf4-63ea599f49d9.png)

更にCubeを選択してやると、右側のインスペクターと呼ばれる部分に色々と情報が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/a0b26077-3a06-8a47-c0b1-54d2ea148dae.png)

### ・キューブのサイズと位置を変える
まずはTransform。これがVCIを出現させた時の位置・回転・スケール表しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/75c453fb-d35e-154e-4dbe-4db56d3aa841.png)

デフォルトだと大きい＆地面に埋まってますので、上に上げて、サイズも0.2にしてみます。
※ScaleについてるリンクマークをONにしておくとXYZの比率が固定されて便利。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/d83978c2-f7b3-00b1-8f68-6fa9e4a2d952.png)

これでインスペクターの下の方にある「VCIをVirtualCastにアップロードする」をまた押すと、更新完了です。
Vキャス内でアイテムを新規作成してみましょう。

これでアイテムがいい感じの高さに最初出てきますが、落下しちゃいますね。
![2023120601320644_テストｚ_てすてゃ～.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/0d534cb9-f20a-88b6-7768-1e862eb12312.jpeg)



### ・落下せずにそのまま静止させる設定
落下せずその場で静止して欲しい場合は、Rigidbody内の
・Use Gravityのチェックを外して
・Is kinematicのチェックを入れて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/45a380a1-ed8e-cbad-f747-244211fa1e8f.png)
※Is kinematicのチェックを入れないと無重力空間をフヨフヨするような挙動にできます。

### ・拡大縮小させる設定
VCISubItem(Script)項目内のScalableのチェックを入れておくと、両手で拡大縮小できるようになります。（更にUniformScalingもチェックすると比率を変えずに拡縮可能）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/427b31c4-c8c4-4a42-7830-7bf072a321d3.png)



### ・コライダが干渉しなくなる設定
また、このCubeを人や物にぶつからないようにしたい場合は、Box ColliderのIsTriggerにチェックを入れて下さい。これでスタジオでもルームでもモノに干渉しなくなります。
（スイッチ用のコントローラーにする時はこういう設定にすることが多いですね）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/f00e2dcf-2490-6c85-ab0c-438a66dc2e25.png)


### ・キューブにテクスチャを張り付ける
これで実験してみたいですが、せっかくなので見た目も少し変えてみましょう。
unityの下のウインドウ（Projectウインドウ）に適当な画像をD＆Dして下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/d81f5726-f757-1754-a015-38238c30fcd1.png)

さらにその画像を先ほどのCubeにD＆Dします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/68d02be2-82fd-fd3d-9a62-42b9081424cf.png)

するとCubeに画像が貼れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/bbd807ba-481d-2889-e072-158e953eb7fb.png)

この状態で再度「VCIをVirtualCastにアップロードする」を押して、Vキャス内でアイテムを新規作成してみましょう！


# ６．最後に
![2023120601353662_テストｚ_てすてゃ～.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076559/7e9c5b44-904c-888e-7e35-915281394fe2.jpeg)
いかがだったでしょうか？
普段見ているVCIに少し近づいてきたでしょうか。

ここから例えば
・Cubeを別のモデルに置き換えてみる
・頭に装着できるようにする
・つかむと音が鳴る
・USEするとエフェクトが出る
・特定のものが触れると色が変わる
・etc…
など様々なことができます。
↓　どんなことが出来るのか詳しくはこちら見てみて下さい。

https://wiki.virtualcast.jp/wiki/vci/overview/introduction

特にモデルを別のものに差し替えたり、装着できるようにしたりは、**スクリプトなし**でも実装できるので、スクリプトが苦手な人も是非チャレンジしてみてください♪（自分の準備したモデルが頭に装着できるだけでも結構楽しい）

駆け足となりましたが、ここまで御覧いただき有難うございました！！！☺
「これを機にVCIを作ってみた！」という人が出たら嬉しいです。