VRChatでワールドをアップロードする(Udonもちょっとだけこねる)

この記事は[リンク情報システム](https://www.lis.co.jp/)の勝手に始める[「2021新春アドベントカレンダー Tech Connect」](https://qiita.com/dgkz/private/eabde6515457d8acec9b)のリレー記事です。
engineer.hanzomon のグループメンバによってリレーされています。
（リンク情報システムのFacebookは[こちら](https://ja-jp.facebook.com/lis.co.jp/)から）

---

年末年始に[Vertual Market5](https://www.v-market.work/v5/)があったりなどしてVRChatのワールドをいじってみたい欲が少しでたので今回は簡単にワールドアップロードの流れを勉強しようかと思います。
その過程でいじる予定のなかったUdonを少しいじることにもなりましたが・・・。
まぁとにかくそんな感じでワールド作成していこうと思います。


## プロジェクト作成
まずはともあれプロジェクト作成です。
UnityHubから2018.4.20f1を選択、テンプレートは3Dを選択して新しいプロジェクトを作成します。
![qiita_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/9eb24d2b-18d4-3847-1ef3-5d2beb943309.jpeg)
## VRChatSDKのインポート
VRChatのワールドをアップロードするためにVRChatSDKをまずダウンロードしてきます。

ひとまずVRChatのHPにログインし、Downloadのページを開きます。
![qiita_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/9f2a21e0-e0fa-06d8-e42c-baccae826803.jpeg)
SDK2とSDK3がありますがUdonを使う場合はSDK3、古いトリガーなどを使う場合はSDK2をダウンロードしてください。
([VRChatに実装するプログラミング言語『Udon』とは？](https://www.vrtechhammer.com/2020/03/02-VRChat-Udon.html))
今回は大したことする予定はないのでどちらでもいいのですがせっかくなので新しいSDK3を持ってくることにします。
![qiita_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/42412fb9-b5c5-e12d-3316-9eb49314be7d.jpeg)
ダウンロードしたunitypackageをD&DでUnity画面に放り込み、出てきたダイアログで`Import`ボタンを押せばインポート完了です。
![qiita_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/e18f8d23-092b-956d-416c-621b0e4172d5.jpeg)

## ワールドを作っていく
まずは下準備としてProjectタブ内の`VRChat Example`>`Prefabs`>`VRCWorld`をHierarchyに突っ込みます。
![qiita_5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/b0dc916b-4b64-f38a-6f66-c83c5d80831c.jpeg)
### とりあえず床を作る
上部メニューの`GameObject`>`3D Object`>`Plane`を選択します。
これで床ができました。
![qiita_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/e0957b42-69c8-c233-f3d9-f57f354818b8.jpeg)
### 空を作る
地ができたので次は天を作りましょう。
AssetStoreを開いてskyboxで検索してみます。
今回はフリーのものがあったのでAllSky Freeを使います。
ということでダウンロードしてインポートしておきます。
![qiita_9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/60a1ae8b-8953-ac3f-4e63-475c9577606d.jpeg)
インポートしたらフォルダの中から好きなマテリアルを選択してSceneに放り込みます。
これで空ができました。
![qiita_10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/9129cb77-c778-d15e-3b96-61603ce81d62.jpeg)

### ミラーを作る
次にミラーを作ります。
VRChat民はミラーに集まる修正があるのでこれが最重要と言っても過言ではありません。
床とミラーがあればワールドとして完成みたいなところある。

まずはProjectタブ内の`VRChat Example`>`Prefabs`>`VRCMirror`をHierarchyに突っ込みます。
![qiita_11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/7bc937f6-84a9-78e8-ae5c-b5534e33e719.jpeg)
これでミラーとしては完成です。

### ミラーをON/OFFできるようにする
ミラーはできました。
が、ミラーはON/OFFできてほしい民なのでON/OFFボタンも作っていこうと思います。
まずはボタン用にキューブを生成します。
ついでに大きさ調整でTransform欄から0.5*0.5*0.5に変更しておきます。
![qiita_12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/fcffa777-7efb-1656-1e61-a221722813df.jpeg)

ここで問題が一つでてきました。
とりあえずここでトリガーをつければOK!だと思っていたのですが、今回なんとなくでSDK3を使っているのでそういうわけにはいかないようで、Udonをこねないといけなくなりました。
大した事する予定ないしどっちでもええやろSDK3にしよ！と適当に決めたことを若干後悔しつつ・・・
とりあえずキューブのAdd Componentから`Udon Behavior`を追加します。
Program Sourceの下にあるプルダウンから`UdonGraphProgramAsset`を選択し、`New Program`をクリックします。
![qiita_15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/5182608e-a265-e87a-94c6-d35bbf5298d6.jpeg)
すると`Open Udon Graph`ボタンが表示されるのでこれをクリックしてUdon Graph画面を表示します。
![qiita_16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/7fd1c463-d8ad-44a3-bc05-5138443aeec3.jpeg)
下のような編集画面が表示されます。
Udonはノードベースでプログラムを行うのでここからノードを足したりつなげたりしていきます。
とりあえずHierarchyから使いそうなcubeとVRCMirrorをD&DしたところVariablesに追加されました。
使うかわかりませんがこのまま進めてしまいます。
![qiita_17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/8c3d4395-a6d7-a941-caa3-adfcfd9bb85a.jpeg)
次に今回はインタラクトしたときにMirrorのON/OFFを行うためインタラクトのNodeを追加します。
右クリックメニューから`Create Node`を選択し、出てきた画面で`Events`>`Event Interact`を選択します。
ついでにON/OFF用に同じように`UnityEngine`>`GameObject`>`SetActive`を追加しておきます。
![qiita_18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/afe593ae-1ada-6993-9373-995b0b569349.jpeg)
下のように追加されました。
![qiita_19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/4348731e-df5c-36b5-b368-1fcf6cb993eb.jpeg)
ここから線をつなげていきます。
InteractとSetActive、VRCMirrorのGameObjectとSetActiveのinstanceをつなげます。
ONにしたいのでvalueにチェックも入れておきます。
![qiita_20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/27539411-83a6-b209-75b7-f0328d08165a.jpeg)
ミラーは初期非表示にしたいのでInspectorのチェックは外しておきます。
これで準備OKなはず！
![qiita_21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/00fb02f9-ba3d-e2c4-b474-d68536d4a187.jpeg)

## ワールドのテストとアップロード
### 準備
アバターのアップロードと同様に上部メニューの`VRChat SDK`から`Show Control Panel`を選択し、コントロールパネルを表示します。
Builderタブに`Setup Layers for VRChat`ボタンがあるのでクリックし、表示されたダイアログでDo it!をクリックします。
![qiita_22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/b73aa542-5a95-96cd-df25-f9ea6a09d159.jpeg)
次に`Set Collision Matrix`ボタンが出てくるので同じくクリックしてダイアログもDo it!をクリックして進めます。
![qiita_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/41c97639-9078-d4f7-ff17-3bd1851be030.jpeg)
すると下のような画面になると思います。
見ての通りテストとアップロードですね。
今回はVRで確認しないといけないようなものはないので`Force Non-VR`にチェックを入れて`Build & Test`をクリックします。
これでデスクトップモードでVRChatが開きヨシ！となるはずでしたがいくつか問題が・・・・・・
![qiita_27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/6d03c738-fef5-3fb9-47dc-907474ff2f1d.jpeg)

### 問題と解決
1. なぜかVRモードで起動する 
`Force Non-VR`にチェックを入れたのになぜかVRモードで起動しました。
どうして・・・と思っていたらどうやらVRChatのクライアントパスが間違えていた様子。
コントロールパネルSettingsタブのVRchat Clientを正しく修正するとデスクトップモードで起動しました。

2. 作ったワールドではなくホームに戻される
デスクトップモードで起動して安心していたところテストしようとしたワールドではなくホームに飛ばされました。
結構ここで詰まったのですが下記ページの対策Bで何とかなりました。
確かにログを見たところAllSkyFreeのファイルが原因でエラーとなっていたようで該当ファイルを削除したところ問題なくテストできました。
[“Last built VRChat scene could not be found” エラー](https://lilea.net/lab/last-built-vrchat-scene-could-not-be-found/)

3. ミラーが表示されない
テストもできるようになったしギミックもミラーのON/OFFのみなので問題ないでしょうと思ってたわけですが、まぁそのミラーがキューブをインタラクトしても表示されませんでした。
どういうことなのかと確認していたところキューブに追加した`Udon Behaviour`に`Public Variables`が増えていることに気が付きました。
なるほど？ということでここのVRCMirrorにHierarchyのVRCMirrorをD&Dしたところ表示されるようになりました。
Udon GraphにD&Dして作ったんだから設定されてるのかと思いきやそういうわけではないんですね・・・。
![qiita_24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/15257780-949e-9db6-c7d8-a9e5b8d5f1ca.jpeg)

4. ミラーがOFFにならない
さてミラーも表示されたしもうこれで問題はないでしょう。
いえ、今度は表示されたミラーが消えないという問題が・・・。
まぁ冷静に先ほどつくったUdonを見てみると消す処理なんてどこにも書いてないですよね・・・。
消えてたら出す、出てたら消すなので分岐が必要？とか別の変数に状態持ってないとダメ？とか色々試行錯誤した結果下の形でON/OFFができるようになりました。
なお最初になんとなく突っ込んだCubeは結局使わなかったのでここでは残ってますが消したほうがよさそうです。
![qiita_28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/53d985ed-791d-c821-a94b-5c672daba7b1.jpeg)

### ワールドのアップロード
なんとか問題も解決したのでワールドを実際にアップロードしていきます。
`Build & Publish for Windows`ボタンを押すと`Game`タブが下のような画面になります。
必要項目を入力して`Upload`ボタンを押すとアップロードできます。
![qiita_25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/63c0507e-91de-6f1b-a018-08ee83e85276.jpeg)
下のような画面が出たらOKです。
![qiita_26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/31dc8407-be34-18c9-47af-3bd869d9e6a1.jpeg)
無事にアップロードできました！
![VRChat_1920x1080_2021-01-18_00-10-50.196.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282891/89734a7c-584f-9ae5-f17a-963711352e0a.png)

## 終わりに
いつものように突貫工事でしたがなんとかアップロードまではいけました。
触る予定のなかったUdonにも少し触ることができたので上々ではないでしょうか。
こういう形でプログラムを組むのは初めてですが結構楽しかったのでUdonももう少しいじってみたいですね。
実際にいじるのがいつになるかはわかりませんが・・・。


## 参考
[Udon Graph エディタ ガイド (2020/6月版)](http://vrcprog.hatenablog.jp/entry/guide-udon-graph-editor-202006)
[【VRchat】～初めてワールド 作成してみますか？～【前半】](https://note.com/lotte2005/n/nf3a517a9d2d6)