Udonsharp覚書  (1)udonを導入してワールドのひな型を作るまで

## 背景
最近Udonsharpについて触れるようになり、こんなワールドを作るようになりました。
https://vrchat.com/home/world/wrld_d5b2d4f4-d2ac-4be5-a356-c28c24e8072e

そろそろ覚書したいことも増えてきたため、このような形にQiitaに書き留めていきます。
まずははじめの一歩として、ワールドひな型の手順を簡潔に覚書。

### 2024/11/30 追記
2022年8月31日に[VCC(VRChat Creator Companion)](https://vrchat.com/home/download)がリリースされ、今後はVCCによるワールド制作がデフォルト手法となりました。

**これにより、別途にudonsharpをインストールをする必要が消え、VRCSDKと一緒に自動でインストールされるようになりました。このため、本記事の1章~3.2章までの工程は古い時代のものとなっています。**
4章以降の工程は現在もそのままなぞることができます。
（不要な工程の部分は近いうちにきちんと改定します。）

## 本記事の前提
- 自身がVRCユーザであり、TrustRunkがUser以上である
- VRCでワールドを上げたことがない。ひな型を上げるまでの流れが知りたい
- アバターを上げたことはあり、なんとなくUnityの操作を知っている

## 本記事の目的・概要
- VRCSDKのダウンロード・インポート
- VRC Worldのひな型系の作成
- Udonsharpのダウンロード・インポート / 簡単なスクリプトの作成
- ワールドひな型のアップロード

(想定作業時間) ~30分

記事について、記載していく内容について
誤り・改善等ありましたらコメントをお願いします

## 1. VRCSDKのダウンロード
https://vrchat.com/home/download
上記ページより、VRCSDKをダウンロード。
アバター・ワールドでそれぞれunitypackageが別れている。**VRChat Worlds** のものをダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/fa595f75-bdf9-02ac-c8ae-824f81c025d6.png)


## 2. UdonSharpのダウンロード
https://github.com/MerlinVR/UdonSharp/releases
上記リポジトリのページより、最新のunitypackageをダウンロードする。

udon/udonsharpについての概略については　下記ページなどを参考にするとよいと思います。
- [UdonSharp](https://udonsharp.docs.vrchat.com/)
- [初心者向けUdonの概要【VRChat】](https://qiita.com/Nekomasu/items/b40790ad1fd7e010158d)
- [UdonSharpメモ ～(最初だけ)はじめての人に向けて書いてみる～](https://zenn.dev/axtuki1/articles/109c665aa0f43a)

> UdonSharp は、C# を Udon アセンブリにコンパイルするコンパイラです。UdonSharp は現在、C# 言語仕様のどのバージョンにも準拠していないため、実装されていないものや動作しないものが多数あります。

## 3. VRC Worldのひな型系の作成
### 3-1 VRCSDKのインポート
「VRCSDKのダウンロード」にてダウンロードしたunitypackageをダブルクリックし、AssetをImportする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/16e01fd6-87c2-a58d-7ce9-0cba8a4f207c.png)

### 3-2 udonsharpのインポート
「Udonsharpのダウンロード」にてダウンロードしたunitypackageをダブルクリックし、AssetをImportする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/3805edeb-405c-50ff-69de-16234307158f.png)

これでごく最低限、必要なものが整いました

## 4. ワールドひな型のアップロード 
ここでは、下記の要素を備えた最低限のワールドひな型としてのSceneを作成し、VRCSDKを用いてアップロードまですることを目的とします

### 足場の作成
足場を作成しなければ、永遠に落ち続けるため移動すらままならないため、まずはこれを作成します。
最初に、全てのオブジェクトを紐づけるためのEmpty（空オブジェクト）となる`world`を、メニューバーの「Create Empty」より作成します。
この配下に同じくメニューバーの「GameObject」>「3D Object」から　「plane」を選択し配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/a918195c-a6f4-59a6-94ab-19386e16fbb1.png)

### リスポーン地点の作成(VRCworld)
``Assets/VRChat Examples/Prefabs``を参照し、その中の``VRCWorld``をヒエラルキー上に配置します。
このアセットの位置・視点がそのままリスポーン時の情報となります。
（下記画像では、青(z)軸の向きに顔を向ける形でリスポーンするようになります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/b8724566-5764-ccfc-ff8e-29fac6f44d33.png)

また、このVRCWorldには ``pipeline manager``と同様に、``VRCSceneDiscripter``というComponentが紐づいています。
Avatarのアップロードにおける`VRCAvatarDiscriper`と同様で、ここにVRCへのアップロード対象となるワールドの情報・紐づくマテリアルの情報などが記載されます。
（ここ以外に複数のSceneDiscripterやpipeline managerを記載していると、アップロードに不具合がでることがありました。意図しない挙動を示した際は、この情報が手引きとなることがあるかもしれません）

このタイミングでは、`Unity Version`として2018の物が記載されていますが、手動で変更する必要はありません。
後述する `VRChat Scene Setup`にて　自動で今使用しているUnityのバージョン情報へ変換されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/cc053fcb-da76-65d0-e5c0-22168a1f9e24.png)


### udon behaviorのテスト
ここでは、入室音として簡単なudonの挙動をテストします。
(参考: https://qiita.com/Milcia/items/242b240816a03fc9928e)

#### udon scriptの作成
Assets配下へまずは適当なフォルダを作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/42616c7a-20b1-d10e-940e-661deeccbc7c.png)

この配下に、`Udon C# Program Asset`をCreateします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/5eaa7acb-1716-2f12-4e5b-f2494effada3.png)

次に、このAssetに紐づくudonsharpのソースファイルを作成します
assetファイルのInspectorより、`Create Script`を押下し、Scriptフォルダへcsファイルを作成します。
(ファイル名称はいいように変えておきましょう。今回は`EnteringSound`としました。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/86c3a31e-df5c-38c5-c046-0017fec8a12f.png)


そして実際に、このcsファイルにudonの挙動を記載していきます
```cs
using UdonSharp;
using UnityEngine;
using VRC.SDKBase;
using VRC.Udon;

public class EnteringSound : UdonSharpBehaviour
{
    //音声ファイル変数。
    public AudioSource audioSource;

    //「紐づけたアセットが読み込まれたとき」の動き
    void Start()
    {
        //unityから別途紐づけたAudioSourceファイルを読み込む
        audioSource = GetComponent<AudioSource>();
        audioSource.Play();
    }
}
```

最後に、このudon scriptをscene上のオブジェクトに紐づけ、実際に動きがもたせられるようにします。
今回は入室音としての動きなので、`world`に対し、下記のようにudon behavior componentを紐づけます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/6e0db056-a2dd-b7e3-20c1-4b8308f95902.png)

紐づけると、Inspectorがこのような表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/4902ec44-05e2-fd2b-dd06-332ae5f1ff98.png)

この「Program Source」の部分へ、先ほど作成した `EnteringSound.asset`ファイルをD&Dし、紐づけてください
紐づけに成功すると、このような表示になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/c7f863c5-3e27-b058-5695-d6dd0a6421c3.png)


ここまでのヒエラルキーの構造・Script配下の中身は　下記画像の通りです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/c77664d1-2d3f-138b-57ae-58112c83efe2.png)

### AudioSourceファイルの作成
入室音となる音声素材を作成します。
#### mp3の入手
https://soundeffect-lab.info/sound/voice/line-girl1.html
こちらより、任意の好きなファイルをDLします。（筆者は「こんばんは」をDLしました）
とりあえずはどこにおいても良いですが、ひとまずは`Assets/Script`へ配置します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/61c3f7a2-a711-d180-1609-062cfc9249a4.png)

#### audioSourceファイルとして利用
`world`のヒエラルキー上にCreate Emptyし、ここに`Audio Source`Componentを紐づけます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/6575a57d-a229-14e2-fcc8-a098ba9d70e2.png)

この後、`AudioClip`の部分へ、先ほどの音声素材をD&Dしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/98a6c693-fe7d-4c70-0734-a6d23956e452.png)

最後に、Worldのudon behaviorへこのAudio Sourceを紐づければOKです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/60235d30-7a4b-4445-f26e-913002ca7f63.png)

### VRChat Scene Setup
初回作成時、VRCSDKが下記のような表示を出すことがあります。
VRCに適したSceneの設定を自動で行ってくれるための表示で、特別な意図がなければこのままSetup Layers -> Do it!を押下してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/d4641009-2fcc-2695-b250-23b44ba4cef9.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/1f49ad2b-2153-0b39-6d3c-6b6a49ce506e.png)

### ローカルビルド + テスト
「とりあえず意図通り動いてるか確認したい」程度の目的であれば、ワールドをVRCに上げずとも、自身のローカル環境で挙動を確認することができます。
下記 `Build & Test`をクリックし、VRC Clientを起動してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/9772ded8-60cc-ee16-a2a7-5bdf56da0186.png)

このように、VRChatで作成中のワールドを起動させることができます。
「こんばんは」と音がすれば　挙動はOK!
後はアバターと同じように　アップロードしちゃいましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917169/feac7127-2eaf-3915-e43c-734583128f64.png)

## 今後の予定
気が向けば、Udonsharpに関する他の記事(Canvasを使ったUIの作成 / 麻雀ワールドに関するもろもろなど)を記載していきます...!