動かない土と石と木をつくる

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

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

VCIをつくるための環境は昨日[VCIを作成するための環境を整える](https://qiita.com/HAHURI/items/bf628c8fa03c2eb2eee4)で整えたので、今日は実際にVCIを作る作業をしていきます。

最終的には、穴を掘って、石を砕き、木を切って、組み合わせてという複雑なことをやりたいのですが、最初から想像するのは難しいです。
そこで3日目の時点では、バーチャルキャスト内に当たり判定があるブロックが並べられていて、それが持てるという状態を目指します。

# 動かない土と石と木をつくる

今回はすべて、形はUnityでデフォルトで使える「Cube」とテクスチャ（色とか模様）も単色だけで構成します。
作業手順は以下の手順になります。

① UnityからVCToolKitを開く
② VCIObjectを作成する
③ Cubeを掴んで乗れるようにする
④ シーンにCubeを並べる
⑤ Cube毎に名付けとマテリアルを設定する
⑥ VirtualCastに投稿をする
⑦ 投稿したアイテムをWebから確認する

項目は多いけれど今日やることは単純、作成してみよう！

# 手順

## ① UnityからVCToolKitを開く
昨日の記事の最後、UnityでVCToolKitを開いた状態にします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/ddcf257b-0cbe-8fe6-9519-f39ae8039785.png" width="50%">

## ② VCIObjectを作成する
VCToolKitを使っているので、VCIのメニューはすでにUnityに追加されています。
早速、VCIを作っていきましょう。

まずは、VCIの雛形を用意します。
Unity画面の左のエリア（Hierarchyといいます）でマウスの右クリックをし、出てきたメニューの中のVCIのSimpleVCIというのをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/976501fa-3625-36d3-fa28-9e8f17ea286b.png" width="50%">

クリックすると、Unity画面の左エリアには「VCIObject」というものが追加され、真ん中のなにか移りそうなエリアに箱が出てくるはずです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/383af235-0bb1-735b-9dcc-7ddd59e55442.png" width="50%">

呼び出した「VCISample」（名前はVCIObject）は、VCIの雛形であるとともに、VCIの最小単位のサンプルでもあります。
Hierarchyで、VCIObjectをクリックすると、階層構造が開いて中身にCubeが入っていることが確認できます。
このCubeみたいな要素を増やしたり、設定を触ることでVCIを作り込んでいきましょう。

## ③ Cubeを掴んで乗れるようにする
今回作るものは、「動かない土と石と木」なので、箱を土、石、そして木の部品とみなして並べていきます。
ただ、今回作るこれら「動かない土と石と木」は、バーチャルキャストの中で触れて上に乗っかったりもしたいので、その設定だけは先に最初の1つに適用してしまいます。

HierarchyでCubeを選択すると、Unity画面の右側のInspectorという領域に入れお色な情報が出てきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/b553fb1a-84b7-729a-4cc9-ef393b9603d0.png" width="50%">

これは、Hierarchyで選択したCubeに設定されている情報です。
たくさんある情報を説明するのは難しい＆わたしも把握しきれないので、今は掴めて乗れるということだけ考えます。

まず掴めること。これはVCI SUbItemの「Grabbable」をチェックするとこで可能になります。
VCISampleのCubeはデフォルトがチェックが付いているので、特に何も変更しなくてよいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/01c29047-3a0c-7a9e-f0e6-b90ac05bb597.png" width="50%">

次に、乗れること。物理挙動で箱が吹っ飛んでしまうと乗れないので、吹っ飛ばないようにします。なお、バーチャルキャストの中の空間で重力を働かせるかの設定もありますが、重力が働くと色々面倒なので、それも切ってしまいます。
これらは、Rigiodbodyの「Use Gravity」のチェックを外すことで重力をかからなくし、「Is Kinematic」のチェックをつけることで、物理挙動をOFFにします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/de78d4b1-19fc-dff4-c528-b6d42ae40a65.png" width="50%">

これでこのCubeはVirtualCast内で持つことができ、かつ乗ることができるようになったはずです。

## ④ シーンにCubeを並べる
Cubeをコピーして並べることで、「動かない土と石と木」っぽくしてみます。
HierarchyでCubeにマウスを合わせた状態で「Ctrl+C」をするとCubeをコピーできるので、一度コピーした状態で「Ctrl+V」をクリックしてみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/d5e5f7f6-ccd1-51e2-5e69-2d8ff5f4bab7.png" width="50%">
画像のように、Cube(1)というものがコピーで作成されるはずです。
これでコピーして作られたCubeを真ん中のSceneのエリアを見ながら並べていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/131892fd-e132-86e3-ff72-b961fb5ff179.png" width="50%">
Sceneの左上にある十字のアイコンが選択されている状態であれば、Scene内の赤青緑の矢印をマウスでクリックしたまま動かすことでCubeを移動することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/76ed2252-8de3-4a4a-7f42-7d1b60a0d71b.png" width="50%">

移動された正確な位置は、右のInspectorのTransformのPositionのX,Y,Zで確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/cf4dc4f6-69dd-4de3-08b6-187eb7088dca.png" width="50%">
この画像なら、選択されているCubeはX1.451,Y0,Z0の位置に配置されているということですね。

このCubeみたいな単位は増えすぎると、バーチャルキャストへの負荷が大きなものになってしまい、動きが遅くなったりみんなで遊ぶ際に支障が出てしまうので凄まじい数にはならないようにする必要があります。
今回は、最適化などは考えず50個程度のCubeでとりあえずの「動かない土と石と木」を作ってみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/5c50739e-cb4b-00e7-8827-652332c9824e.png" width="50%">
コピーと移動だけで、全部で56個のCubeを組み合わせて、石（最下部）、土（2段目の層）、木（３段目以降）っぽい形を作ってみました。

## ⑤ Cube毎にマテリアルを設定する
今のままだと色が白なので、どこが土で石で木なのかが全くわかりません。
そこで、テクスチャを貼って色を付け、それっぽく見えるようにします。

Unity画面下部のProjectのAssetsというエリアで右クリックをし、CreateからMaterialをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/8ba7d627-a535-0f28-1163-e12b1d96a5ab.png" width="50%">

Unity画面下部のProjectのAssetsというエリアに丸いものが作られて名前がつけられるので、土の色をこのマテリアルで定義したいのでSoilと名前をつけました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/8e005924-c16f-d2b8-db0c-c9fbfd59bb63.png" width="50%">

名前をつけたら、このSoilという丸を選択して、Unity画面右側のInspectorを見ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/6a39b4b1-c474-d0f9-efe5-f85caa0cd452.png" width="50%">
マテリアルの設定情報がInspectorには表示された状態になります。
Inspectorの中のAlbedoという場所の右の白いエリアをクリックすると、カラーパレットが出てきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/5a75feea-cbe1-99b0-7506-f10e74fa0499.png" width="50%">
土の色にしたいので、茶色を設定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a880945d-ed80-9326-e929-43e5a7109537.png" width="50%">
すると、Unity画面下部のAssetsというエリアにあるSoilの丸の色が設定した色になっています。

次に、SoilをマウスでクリックしたままUnityのScene内の土のブロックの場所にドラッグ＆ドロップします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/dadb50f8-3b8c-f54b-7ffc-a61edc5acb84.png" width="50%">
そうすると、Unityの画面内のSceneにうつっているドロップされたCubeの色もマテリアルのSoilの色になっていることが確認できると思います。

なお、マテリアルが設定されるとCubeを選択したときのInspectorにもマテリアルの記述が増えているのが確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/1198a37f-315f-642b-0865-1d2288925776.png" width="50%">

土ができたので、続けて石と木の幹、木の葉のマテリアルも作成して同じようにドラッグ＆ドロップをして色をつけていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/50f1862f-3cdb-4eb6-3019-74e53ce31019.png" width="50%">

単色ですが、これで土と石と木っぽいものができました。

## ⑥ VirtualCastに投稿をする
形が完成したので、VirtualCastに投稿しましょう。

HierarchyのVCIObjectを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/de664c8c-0b6a-9f15-c23e-6f6bbe342cda.png" width="50%">

その状態で、Inspectorを見ると、VCIの名前や作者登録をする場所があるので、自分の名前とアイテムの名前をつけます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/980a2fa2-254f-4fb1-ccd2-3fa5cea0c2e1.png" width="50%">

さらに、InspectorのAdd Componentをクリックし、検索窓から「tso」を検索します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/3a771a5f-77d8-d91b-157f-aaae2bbd0820.png" width="50%">

「TSO Item Descriptor」というものが出るはずなので、これをクリックします。
そうすると、「TSO Item Descriptor」がInspectorに追加されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/37cf9b31-f602-2a35-e68c-2adef680eba5.png" width="50%">

追加された「TSO Item Descriptor」から「VCIをVirtualCastにアップロードする」をクリックすると、2日目の最後にログイン設定をしたバーチャルキャストのユーザーアカウントにVCIが投稿されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/d74414f8-f49a-1516-4b89-e17a6c260976.png" width="50%">

これでVCIの投稿も完了です！

## ⑦ 投稿したアイテムをWebから確認する
今日の最後に[バーチャルキャストのWebページ](https://virtualcast.jp/library#assets)から、投稿したVCIを確認しましょう。

[「投稿アセット」のページ](https://virtualcast.jp/library#assets)を表示すると、先程のInspectorでつけた名前のVCIが一番左上に出ているはずです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/d1b795c0-4712-4dec-ef25-3b8a9567c455.png" width="50%">

VCIをクリックすると、詳細画面が表示されWeb画面内でも3Dで確認ができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/2f5c0f3f-f9b1-d5fb-a29a-66d89d4f95cf.png" width="50%">

# おわりに
今回はVirtualCastにVCIを登録するところまでができました。
明日はVR内で投稿したアイテムを確認作業を記事にします。