商店街のゲーム出展イベントでVRChatワールドを作りました

[UdonTech Advent Calendar 2022](https://qiita.com/advent-calendar/2022/udontech)の5日目です。

7月10日に香川県の高松市南部3町商店街で行われた「[Sanuki X Game 2022](https://showxguys.org/)」にVRChatのワールドを作って出展してきましたので、どんなふうに作っていったかを紹介します。

Sanuki X Game 2022については、例えば以下をご参照ください。

https://news.ksb.co.jp/article/14667083 

https://www.youtube.com/watch?v=B7GmGivSz7k

[SXG -Sanuki X Game- 公式ツイッターアカウント](https://twitter.com/showxguys)


# 制作期間

会社の同僚達とVRChatでちょくちょく遊んでいて、どうせならワールドも作ってみるか！と盛り上がっていたところに、ちょうどSanuki X Gameの運営さんからSanuki X Gameの資料館ワールドを作ってみるのはどうですか？とお声がけいただいたのが、VRChatワールドを作り始めたきっかけでした。

大まかに以下のようなスケジュールで制作が進んでいきました。

- 4月頃: 会社の同僚達とVRChatのワールドを作ろうと盛り上がる
- 5月前半（GW）: VRChatワールドの作り方を調べていく
- 5月中盤: 制作するVRChatワールドの構想をまとめる
- 5月後半～7月10日まで: ワールドを作っていく

最終的には、去年（2021年）のSanuki X GameをVRChat上に再現したようなワールドを作っていきました。

作ったワールドは以下からアクセスできます。

https://vrchat.com/home/launch?worldId=wrld_1dbed48d-3516-4ca2-89eb-0135b09aac2e

ソース: https://github.com/k-mitani/SXG2021VRChat

短い制作期間で、UnityもVRChatワールド作りも初心者な状態から作り始めて、結局時間切れで未完成で終わった箇所も多々ありますが、何とか形になってよかったです。

来年以降、商店街の町並みをどんどんブラッシュアップしていって、本当にバーチャル上に商店街を再現して、Sanuki X Game当日にSanuki X Gameバーチャル会場！みたいなことができたら良いなあと思ったりしています。

次に、制作過程を書いていきます。

# 制作過程

## 1. VRChatワールド作成方法の調査

Unityをちょっと触ったり、VRChatのアバターのアップロードをしたりしたことはありましたが、VRChatワールドを作ったことはなかったため、まずはワールドの作り方を調べることから始めました。

まず以下の感じでVRChat SDKについているサンプルシーンを動かしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/67836842-dc52-392d-a80f-cad5d8784260.png)

その他、公式ドキュメントやYouTubeの解説動画や解説記事を見ていきました。

### 参考にしたサイト

- [VRChat公式ドキュメント](https://docs.vrchat.com/)
- [VRChat SDKのサンプルシーンの解説](https://docs.vrchat.com/docs/udon-example-scene)
- [使用可能コンポーネント一覧](https://docs.vrchat.com/docs/whitelisted-world-components)
- [VRChat UdonSharpで学ぶプログラミング講座](https://www.youtube.com/playlist?list=PLEETyGLUy1JISKkK3wcstRa4zS1NN93cQ)
- [プログラミング未習得者でも作れるVRChat SDK3ワールド](https://qiita.com/hoke946/items/df550f78e81e3628480b)
- [3D屋さんで始める初めてのVRChatホームワールド](https://note.com/yamabico_v/n/n1b4bbd263ccb)
- [Creator Toolbox Update](https://hello.vrchat.com/blog/creator-toolbox-update)


## 2. 制作するVRChatワールドの構想をまとめる

次に、以下の感じで制作するワールドの構想をまとめていきました。商店街の町並みや去年（2021年）のSanuki X Gameの状況をファンメイド的に再現してみた、というコンセプトのワールドを作っていく感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/c3972dc9-4b2f-24c4-cbbb-b61373e8833e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/7ba33230-617d-f55f-05da-cbae14663cdb.png)

## 3. ワールド作り

以降は実際にワールドを作っていきました。

### プロジェクトのセットアップ（VRChat Creator Companionを利用）

ワールドを作り始めたときにちょうど「[VRChat Creator Companion](https://vcc.docs.vrchat.com/)」というVRChat公式ツールがリリースされました。VRChat SDK、ClientSim、UdonSharpがセットアップされたUnityプロジェクトを簡単に作れる感じで便利でした。

- VRChat SDK: VRChatワールドの制作に必要なUnityパッケージ
- ClientSim: VRChatアプリを起動せずに、UnityのPlayボタンでワールドの動作確認ができるツール。これがあるとデバッグの効率が格段に上がります（シミュレーション環境なので、若干VRChatアプリと動作が違うこともあります）
- UdonSharp: ワールドのギミックをC#で書けるようにするツール（UdonSharpを使わない場合はUdonと呼ばれるVRChat独自のビジュアルスクリプティング言語を使う必要があります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/04eb6dd0-9637-0ed3-cf1f-389fb17a12c6.png)

### 街並み作り（ProBuilderを使用）

Googleマップを見ながら、商店街周辺の街並みを作っていきました。（~~豆腐~~）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/04bf8bb5-cc86-4aa2-ce70-20e2a720ba3f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/63c0b16a-5ead-b6c8-8c40-53d63f3f5eba.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/3070b08a-072e-e62f-eb11-90a93220428c.png)


### 釣り堀作り

2021年のSanuki X Gameでは「[あの森の釣り堀](https://mobile.twitter.com/takpj3/status/1413721481675112453)」というコーナーがあったので、それを再現した釣り堀を作っていきました。
![動画4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/f938132c-3707-d716-cf6f-523e17c2b35b.gif)

### インクのぶつけ合い作り

2021年のSanuki X Gameでは「[ぺちゃバト](https://twitter.com/ShowXGuys/status/1412575537722126339)」というインクのぶつけ合いのようなARゲームがあったようなので、それを再現したペイント銃を作っていきました。
![動画3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/83b063ea-4bd2-764b-94ee-03c9a385ce12.gif)

### うどんの湯切り作り

2021年のSanuki X Gameでは、[加速度センサーを取り付けたうどんの湯切りで妖怪を倒すゲーム](https://youtu.be/KUXLi-n76cQ?t=21)があったので、うどんの湯切り体験コーナーを作っていきました。
![動画5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/0e79263c-09e1-a9f0-6c2d-1319e13ae74b.gif)

![動画6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/d0f9742d-a0ff-0161-54f0-4ba5e8def624.gif)

![動画7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/a23a5221-6a11-ab75-793a-cb51104cb3ea.gif)

以上まで作って、時間切れとなりました。

### Quest版動作確認

最後にQuest版でも動くことを確認してSanuki X Game当日に臨みました。以下がQuest版の様子です。（動画容量を抑えるため、めちゃくちゃ急いで撮影しています）
![動画8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952672/1116affc-0cb3-2e0d-62cd-fc36391ee819.gif)

その他、同僚に田町の交番や妖怪を作ったりしてもらいました。（上記の動画でちらっと映っています）

もっと時間があれば、街並みやギミックを作り込んだり、[商店街を妖怪が闊歩する](https://twitter.com/meipam_meiro/status/1413687847282827265)ようにしたりしたかったなあと思いました。

以上です。