VCIのコーディング環境を整える

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

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

昨日VR内で確認した、動かない土と石と木を何もしないでも持ち運べるのではなく、なにか条件をクリアしたら運べるというようにしたいので、VCIにコードを書く作業を次はしていきます。
ただし、まずはコードを書く環境を用意しないと作業ができないので、今日はコードを書くための環境を整えます。


# VCIのコーディング環境を整える

VCIのコーディングは、実はメモ帳でもできますし、文字列が書ける場所があれば可能です。
でも、ただのメモ帳では以下のようなことができなかったりし辛かったりします。
・書いている言語に従った記述ができているか
・関数のまとまりなどの目視判断のしやすさ
・関数で畳んだりわかりやすくする
・文字数
・複数ファイルのタブ分け

そこで、コーディングしやすいコーディングソフトを導入します。
今回はバーチャルキャスト公式でも記載している[Visual Studio Code](https://code.visualstudio.com/)の導入になります。

手順は以下のようになります。
① Visual Studio Codeのインストール
② Visual Studio Codeを起動し、拡張機能を導入する
③ VCIのコード記述デバッグをONにし、VCIのデバッグ用コードを生成する
④ Visual Studio CodeからVCIのデバッグ用コードを開く
⑤ VR内でVCIのデバッグ用コードへの記述反映を確認する

# 手順
## ① Visual Studio Codeのインストール
[Visual Studio Code](https://code.visualstudio.com/)にアクセスして「Download for Windows」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/09c50a06-f16a-098b-6d7d-baa27f7d04a5.png" width="50%">

※MacOSでもVCIのコーディング自体はできますが、VRで触りながらデバッグはできないので、今回はWindows前提とします。

DLしたらインストーラーをダブルクリックしてインストールしましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/e095af70-5899-29fd-1d5c-75283d2aef48.png" width="50%">

次へを押していけば問題なくインストールできると思います。

## ② Visual Studio Codeを起動し、拡張機能を導入する
インストールしたら、Visual Studio Codeを起動します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/53ce7e58-9564-6637-b0de-39401211a55c.png" width="50%">

起動するとこのような画面が出るかと思います。
場合によっては、今のバージョン説明などが出ますが無視して問題ありません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/228b47bd-ec0c-275a-b794-a9d222f782a1.png" width="50%">

今のままでも使えますが、少し使いやすさをアップさせるために拡張機能を入れます。
拡張機能とは、コードを書いているときに文法があっているかを示してくれたり、表示をわかりやすくしてくれる補助機能みたいなものと思うとわかりやすいかもしれません。

左のアイコンの中で、ブロックのようなアイコンをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/bf29d0be-d8db-e5bf-a9d0-a1013243ec26.png" width="50%">

そうすると、左上に入力フォームが出てくるので、そこで「Lua」と入力します。
Luaとは、VCIでコードを書く場合の言語で、このLuaの形式で書くことで、色々な動きが作れます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/c68b6c0a-5b14-e9dc-577b-875a6a4ba2d1.png" width="50%">

出てくる、拡張機能の中から、おそらく一番上のものをインストールします。
Installボタンがあるので、クリックしましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/9a56c665-0d27-9220-b5a9-d3d7b1ca1284.png" width="50%">

少し待つと、導入が完了します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/55008894-9900-73f7-7df5-eefb2a63d109.png" width="50%">
（画像の真ん中に「Uninstall」という場所がありますが、この表示になっているということはインストールが終わっている意味になります。）

これで、拡張機能の導入は完了です。

## ③ VCIのコード記述デバッグをONにし、VCIのデバッグ用コードを生成する
ここで、一度またUnityからVCToolKitを開いて作業をします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/c22ff7a4-e043-de4c-5db7-dcd4f7fd691d.png" width="50%">

HierarchyからVCIObject（画像ではSAC-Craft_Tree）を選択し、Inspectorを見ます。
VCI Object(Script)という項目の下の方に「Script Enable Debugging」という項目があるので、ここにチェックを付けます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/76258514-5cbe-e125-2f8f-41f92d147ac6.png" width="50%">

これはScriptデバッグを許可するという場所なので、これにチェックがないとリアルタイムでコードを書いてデバッグすることができません。

チェックを付けたら、また「VCIをVirtualCastにアップロードする」をクリックして、VirtrualCastに登録されているVCIを更新しておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/318e4765-91d0-3c53-e381-602262b4a4d3.png" width="50%">

更に、VirtualCastを起動して、VRから再度ルームに入ります。
昨日出したVCIがそのままであれば、一度削除します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/36e136c4-f386-775c-c84a-186308c4298c.jpeg" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/45c7c670-b19a-b5e5-8c5d-6196ab999961.jpeg" width="50%">

そしてもう一度VCIを出し直します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/55ff47ba-963f-b0ad-bccd-fe4e6223b3aa.jpeg" width="50%">

更に、デバッグのために、VCIの状態を見れるデバッグウィンドウをVR内に出します。
まず、右コントローラーでBを押してリングメニューを出し「システム」を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/a6f4676c-c87d-f93a-c123-16764ed913e0.jpeg" width="50%">

さらに、次のメニューから「開発者向け」を選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/2aac44b2-30e2-bbc4-7e63-66f2861c84d3.jpeg" width="50%">

次に「VCIデバッグ」を選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/46056ace-f711-c97e-5f27-ab5ba38d00f0.jpeg" width="50%">

最後に、コンソールを選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/bdd1a6d2-b2d8-6497-eb8b-46a3541afc7a.jpeg" width="50%">

こうすると、VR内に黒いデバッグウィンドウが出てきます（画像の左にあるもの）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/83a6dfde-bbf9-3cfa-079f-08fc537766e5.jpeg" width="50%">

ここまで出来きたら、コーディングの準備が完了です。


## ④ Visual Studio CodeからVCIのデバッグ用コードを開く
③でVR内で「Script Enable Debugging」がONのVCIを出しているので、デバッグ用のファイルがPCの中に生成されているはずです。

デバッグ用のファイルが有る場所は以下階層になっているはずです。
`C:\Users\（ここはユーザー名）\AppData\LocalLow\VirtualCast\VirtualCast\EmbeddedScriptWorkspace`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/d31257a2-00e2-f31c-e6b5-c13c687423bd.png" width="50%">

アップロードしたVCIの名前のフォルダがあるはずなので、そのフォルダを開けます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/3074429b-466b-acf7-66b1-4dab1f4a7c32.png" width="50%">

「_main」というのがあると思うので、このファイルを選択して、Ctrl+Cをして、すぐCtrl+Vでコピーを作り、コピーしたファイルの名前を「main」にします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/1f11bcd5-5dd0-3f2a-e466-a59b687945f0.png" width="50%">

このmainがデバッグで書き換えていくファイルになります。

次に、Visual Studio Codeからこのファイルを開きます。
    Visual Studio Codeの上の「File」をクリックし「Open Folder…」をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/b7d862fc-3d20-6a8c-690e-53477443ae1d.png" width="50%">

開いた画面で、先程のデバッグファイルがある階層`C:\Users\（ここはユーザー名）\AppData\LocalLow\VirtualCast\VirtualCast\EmbeddedScriptWorkspace\SAC-Craft_Tree`を指定し、フォルダーの選択をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/0b6240fe-dd09-bae6-d6c3-0436587b8606.png" width="50%">

こうすると、デバッグファイルが有るフォルダの内容が左のEXPLORERに表示されるので、mainをクリックします。
ファイルを開いてよいか聞かれる場合もありますが、その場合は開く方を選択してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/6caf67bd-ba3d-eccd-01dd-18dd33dfdda3.png" width="50%">

これで、デバッグするファイルをVisual Studio Codeから開くことができました。


## ⑤ VR内でVCIのデバッグ用コードへの記述反映を確認する
最後に、今VR内のデバッグウィンドウに出ている「Hello World!」というメッセージを変えてみます。

Visual Studio Codeに書かれている`print("Hello World!")`を以下のように書き換えましょう。
`print("こんにちは！SAC-Craftだ！")`
書き換えたら、Ctrl+Sを押して保存します。

保存されていないと、Visual Studio Codeの画面の上にあるタブの部分に白丸があり、保存すると消えるので、それで確認してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/584fad0e-edb7-61dc-3cff-646656c70ec2.png" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/2017ca6c-4ec5-0b53-4db9-50c943a66ef9.png" width="50%">

保存したら、VR内に戻ってデバッグウィンドウを見てみます。
画像のようにメッセージが変わっていれば、デバッグができています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222644/d71597df-0f36-2e4d-d05c-75275f6d80b7.jpeg" width="50%">

# おわりに
今日は、VCIのデバッグコーディング環境を整えました。

次は、ただ持てるのではなく「何回か叩いたら取得できる（持ち運べるようになる）」ということをコードで実現していきます。
明日はその中のどこまでできるかな・・・？