持ち物の概念をつくる　その１

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

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

昨日までで、ブロックを壊して動かして置くということができるようになりました。
しかし、人が運べるブロックは頑張っても2つなので、動かせるブロックがたくさん転がっているのは無駄になっています。また、ブロックの所有みたいなことを管理したいです。

そこで今日から何日かかけて、自分の持っているアイテムを管理する管理板を作っていこうと思います。

# 持ち物の概念をつくる

今後の軽量化やユーザーのステータス情報管理なども考えて、最初に[SAC-Craft（Vキャス内◯ine◯raft）の設計図を作る](https://qiita.com/HAHURI/items/d4b81e8fd32e2755f609)で考えていた、ステータス管理VCIで、今回の持ち物管理の制御を考えます。

そこで今日はまずは、持ち物管理をするアイテムのガワを作っていきます。
以下のような手順で、今日の時点では、実際に動いたりまでは行かず、デザインをつくるまでにします。

① ステータスのアレコレを表示するUIを考える
② ステータス管理VCIオブジェクトを作成する
③ Unityのデフォルトの部品から①を再現する

それではやっていきます。

# 手順

## ① ステータスのアレコレを表示するUIを考える

一旦両手につけるアイテムを考えます。
左手には所有物の表示をし、右手には自分のステータス（後々レベルとか職業とかHPとか考えたい・・・）を表示する事を考えます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/2711d916-349b-6ec0-930c-64e44bc3aebd.png" width="50%">


また、常に出ていると邪魔なので、表示をON/OFFできるようにしたいと思います。
ONの状態ではUIを見れるようにして、OFFのときは腕に小さな目立つアクセサリーだけが出るようにします。

とりあえず、８つのアイテムを所有できることを考えます。
上限数とかは一旦考えないでおきますが、持っている数は表示を考えます。

また、このVCIの仕組みはブロックオブジェクトを格納するVCIがルームになければ、所有していても設置ができない事になってしまうので、ブロックパックみたいなVCIを呼び出すことで設置できるようになるというような仕組みを考えます。
設置する対象のアイテムを選択すると、設置できるブロックのVCIがちゃんと呼び出されているかを確認し、なかったら出すことを催促する事を考えます。

なお、右手のステータス表示は、今回は考えないでおきます。

## ② ステータス管理VCIオブジェクトを作成する

UnityでVCToolKitを開きます。

今まで作っていた、VCIは表示上じゃまになるので、VCIObject（画像ではSAC-Craft_Tree）を選択し、Inspectorの一番上のチェックを外します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/1e6d23f1-bf0a-5a03-69bb-b01d038eff17.png" width="50%">

このチェックを外すと真ん中のSceneに表示されなくなるので、見た目上邪魔にならなくなります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/fde0284e-f49f-5bc6-d496-4a8c2a3129f0.png" width="50%">

次に新しいVCIObjectを作成していきます。
Hierarchyでマウスを右クリックし、VCI、Simple VCIをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/48421c4f-8bb7-da60-9538-32f0d93772e8.png" width="50%">

これで今回作成する、ステータス管理VCIの枠ができました。


## ③ Unityのデフォルトの部品から①を再現する

作成されたVCIの中の、Cubeを加工していきます。
人が持ちやすい場所に出てほしいので、CubeのY軸の位置を1.3にします。
Cubeは最初のサイズは1m×1m×1mの正方形なので、これを左手に付けるサイズ（X0.6,Y0.01,Z0.35）に変形します。

また、腕にくっつけるためのSphereを追加します。
VCIObjectの上で、右クリックをして、3D Objectの中のSphereをクリックすることで追加できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/94c84f00-0349-2210-d3dc-bcadd865c9ee.png" width="50%">

またSphereのサイズと位置を、腕につけるのにちょうどよい位置へ移動＆サイズ変更します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/b6fbc2d5-e409-e095-847e-105a8e7d03ce.png" width="50%">

OFF状態で表示するアクセサリーとして、Cylinderを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/88fc8021-968e-ea6a-eefa-13733d5f4864.png" width="50%">

これもサイズと角度を調整します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/ca8808f4-1adf-fa8d-f124-e21c58033efe.png" width="50%">

情報を表示するための文字を入れていきます。
HierarchyでVCIObjectを選択した状態で、右クリックをして、VCIの中のTextをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/050d713e-1919-9aef-63ff-6d0bee3efeed.png" width="50%">

初回はフォントをImportするか聞かれるので、Import TMP Essentialsをクリック。
さらに、Import TMP Examples & Extrasをクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a602139f-f15f-1ef4-2824-41c236835282.png" width="50%">

出てくるTextというオブジェクトを、Cubeの大きさや角度に合わせて修正します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/4fc04e63-7b58-d801-f96a-886082b2a0c1.png" width="50%">

スロットや選択中、ON/OFFボタンになる場所にCubeを置きます。
cubeとテキストを移動して行くことで、こういった形にしました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/8ffa4694-6a9d-b6a2-1dbe-c43ee3dab64a.png" width="50%">

また、スロットのボタン表示はテクスチャで変更していくことを考えるので、それぞれの場所を別の名前のマテリアルを作って当てておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/9a5dc237-2e9c-5a47-09e8-84b0fbae8141.png" width="50%">

そして、各ボタンやオブジェクトはUSEしたりするので、VCISubItemをつけておきます。
そして、掴むことはできて物理判定はなく、重力は働かないようにしておきます。
InspectorのColliderの「Is Trigger」にチェックをし、VCISubItemの「Grabbable」にチェック、Rigiodbodyの「Use Gravity」のチェックを外し、「Is Kinematic」にチェックを入れる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/2193e8e3-bebc-26da-288d-e120289b2a22.png" width="50%">

また、Sphereは、腕に装着したいので、装着の設定をします。
Sphereを選択し、Inspectorで右クリックをし「VCI Attachable」を検索して追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/6160846d-98dd-dcdd-a573-0e212ebecb13.png" width="50%">

これは、アバターの特定名のBONEにアイテムをくっつく状態にできる設定になります。

くっつく範囲を0.5mにしたいので、Attachable Distanceを0.5に指定し、左右両方につけられたほうが利き手両方に対応できそうなので、Attachable Human Body Bonesを２にして、Left HandとRight Handを指定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/8c8eca7d-6e87-7504-f32e-265c106ff865.png" width="50%">
なお、指定できるアバターのBONEに何が存在するかは以下画像が参考になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/6e46d564-2547-893b-6feb-c27611132e65.png" width="50%">
※[Unity Humanoid Avatarの解説](https://wiki.virtualcast.jp/wiki/unity/humanoid)を引用。

形になったので、VirtualCastにアップロードをしておきます。
VCIObjectを選択して、VCIの名前と作者を記入して、TSO Item Descriptorを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/91c00469-0250-fabf-3280-d13646f2c61a.png" width="50%">

最後に「VCIをVirtualCastにアップロードする」をクリックして、成功すれば完了です。

# おわりに
今日でUIのデザインと、その形を作るところまではできました。
明日は、コードでオブジェクトが追従して動くようにする制御やUIのON OFF制御を作っていきたいと思います。