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

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

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

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

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

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

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

手順

① Visual Studio Codeのインストール

Visual Studio Codeにアクセスして「Download for Windows」をクリックします。

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

DLしたらインストーラーをダブルクリックしてインストールしましょう。

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

② Visual Studio Codeを起動し、拡張機能を導入する

インストールしたら、Visual Studio Codeを起動します。

起動するとこのような画面が出るかと思います。
場合によっては、今のバージョン説明などが出ますが無視して問題ありません。

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

左のアイコンの中で、ブロックのようなアイコンをクリックします。

そうすると、左上に入力フォームが出てくるので、そこで「Lua」と入力します。
Luaとは、VCIでコードを書く場合の言語で、このLuaの形式で書くことで、色々な動きが作れます。

出てくる、拡張機能の中から、おそらく一番上のものをインストールします。
Installボタンがあるので、クリックしましょう。

少し待つと、導入が完了します。

（画像の真ん中に「Uninstall」という場所がありますが、この表示になっているということはインストールが終わっている意味になります。）

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

③ VCIのコード記述デバッグをONにし、VCIのデバッグ用コードを生成する

ここで、一度またUnityからVCToolKitを開いて作業をします。

HierarchyからVCIObject（画像ではSAC-Craft_Tree）を選択し、Inspectorを見ます。
VCI Object(Script)という項目の下の方に「Script Enable Debugging」という項目があるので、ここにチェックを付けます。

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

チェックを付けたら、また「VCIをVirtualCastにアップロードする」をクリックして、VirtrualCastに登録されているVCIを更新しておきます。

更に、VirtualCastを起動して、VRから再度ルームに入ります。
昨日出したVCIがそのままであれば、一度削除します。

そしてもう一度VCIを出し直します。

更に、デバッグのために、VCIの状態を見れるデバッグウィンドウをVR内に出します。
まず、右コントローラーでBを押してリングメニューを出し「システム」を選択

さらに、次のメニューから「開発者向け」を選択。

次に「VCIデバッグ」を選択。

最後に、コンソールを選択。

こうすると、VR内に黒いデバッグウィンドウが出てきます（画像の左にあるもの）。

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

④ Visual Studio CodeからVCIのデバッグ用コードを開く

③でVR内で「Script Enable Debugging」がONのVCIを出しているので、デバッグ用のファイルがPCの中に生成されているはずです。

デバッグ用のファイルが有る場所は以下階層になっているはずです。
C:\Users\（ここはユーザー名）\AppData\LocalLow\VirtualCast\VirtualCast\EmbeddedScriptWorkspace

アップロードしたVCIの名前のフォルダがあるはずなので、そのフォルダを開けます。

「_main」というのがあると思うので、このファイルを選択して、Ctrl+Cをして、すぐCtrl+Vでコピーを作り、コピーしたファイルの名前を「main」にします。

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

次に、Visual Studio Codeからこのファイルを開きます。
Visual Studio Codeの上の「File」をクリックし「Open Folder…」をクリック。

開いた画面で、先程のデバッグファイルがある階層C:\Users\（ここはユーザー名）\AppData\LocalLow\VirtualCast\VirtualCast\EmbeddedScriptWorkspace\SAC-Craft_Treeを指定し、フォルダーの選択をクリック。

こうすると、デバッグファイルが有るフォルダの内容が左のEXPLORERに表示されるので、mainをクリックします。
ファイルを開いてよいか聞かれる場合もありますが、その場合は開く方を選択してください。

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

⑤ VR内でVCIのデバッグ用コードへの記述反映を確認する

最後に、今VR内のデバッグウィンドウに出ている「Hello World!」というメッセージを変えてみます。

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

保存されていないと、Visual Studio Codeの画面の上にあるタブの部分に白丸があり、保存すると消えるので、それで確認してください。

保存したら、VR内に戻ってデバッグウィンドウを見てみます。
画像のようにメッセージが変わっていれば、デバッグができています。

おわりに

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

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