VCC導入してみる(World作成)｜キャラクターがジャンプできるジャンプパッドを作る｜UdonSharpを書いてみよう(2)

皆さんお久しぶりです。Milciaです。
最後の投稿からかなり日が経ちましたね・・・
１年？２年ほどでしょうか。

今回はVRCをプレイしていない間にVCCというツール(？)が導入されていたので触っていこうかなと思います。
(VCCっていつ導入されたんだろう・・・。もしかして：もう遅い)
・・・メモがてら書いているのでわからないことがあればコメントにてご相談受け付けます。

こちらは前回の続きとなります(続きではないかもしれない)
[オブジェクトに触れると音が鳴るギミックを作る｜UdonSharpを書いてみよう(1)](https://qiita.com/Milcia/items/242b240816a03fc9928e)

# 目次
・[VCCのインストール](#VCCのインストール)
・[VCCでUnityプロジェクトを開く](#VCCでUnityプロジェクトを開く)
・[Worldの作成](#Worldの作成)
・[ワールドのテスト・アップロード](#ワールドのテスト・アップロード)
・[おまけ](#おまけ)
・[次回](#次回)

# VCCのインストール
### VCCダウンロード
VCCのダウンロードはVRChatの公式サイトからダウンロードできます。
https://vrchat.com/home/download

1.ログイン後Downloadタブを選択
2.Creator CompanionのDownload the Creator Companionをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/99bdc4f1-bcb8-a202-2f66-5978791bc5fd.png)

### VCCのインストール
VCCのダウンロードが終わったらファイルを開きます。
インストーラーが開いたら表示に従って進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/dd14ad8e-8b2d-8c94-77e5-01229926e982.png)

# VCCでUnityプロジェクトを開く
### UnityEditorの新規インストールまたは適用
インストールが終わると以下画像と同じ表示が出てくるかと思います。
Show Me Aroundを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/164c700b-5f4f-c0e1-43ca-125b37a65e0f.png)
本来以下画像の画面からUnityEditor(2019.3.31f1)をインストールしてくださいと表示が出るはずなんですが、
元々インストールされていた2019.3.31と紐づけされたのかこのまま進めちゃいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/9f13e49a-7f4f-0447-d793-60258d4854c9.png)
新規インストール・・・どうしよう説明できない・・・
UnityEditorの新規インストールでわからなければチャットで相談受けますね・・・
もしくはVCCのインストール方法を説明している方沢山いるので、お手数をおかけしますがそちらでお願いします・・・

### Unityプロジェクト立ち上げ
気を取り直して進めていきます。
右上のCreate New Projectから新しくプロジェクトを立ち上げます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/c30b6439-b0e5-848e-ff89-e74cb0b4ca98.png)
プロジェクトの立ち上げオプションが出てきましたね。
今回は以下の設定でプロジェクトを立ち上げます。
・Select Template - World Project
・Project Name - TestWorld_VCC(ここは何でもいい)
・Project Location - お好きなところへ
設定が終わったら Create Projectを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/44082107-df7f-437e-3e44-4a9a32f13538.png)
パッケージマネージャーが自動で開きましたね。
ではUdonSharpをインストールしましょう。
UdonSharpのNot Installedを最新バージョンに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/c7fb452a-60e6-6994-e9be-7f26958aa49f.png)
先ほどNot Installedが表示されいた場所にバージョンが記載されていれば問題なくインストールされているようです。
他インストールするものはないので右上のOpen Pojectで立ち上げます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/1a5cb825-4e19-11bf-c4dd-fd7a1f465f55.png)

# Worldの作成
### ワールドのシーンを作成する
プロジェクトが立ち上がった直後なのでUntitledになってますね。
Ctrl + Sを押してセーブしましょう。
シーンの名前は何でもいいです。
場所は元々指定されているので、基本的に変える必要はありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/b7e9a513-8b2d-0cd9-aecc-c690e17e45f1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/31d9c9bf-4ea9-1740-50d1-67e53714b9ab.png)


### ワールドに地面とリスポーン地点を設定する
まず地面がなければ何もできないので、地面を作っていきます。
Hierarchyで右クリック＞＞3D オブジェクト＞＞平面で作成できます。
※Hierarchy - デフォルトでは画面の左上にあるタブのこと(初期では Main CameraとDirectional Lightが入っている)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/380af532-2201-1c9e-d70e-c7dc972de766.png)
平面ができたのでInspectorから大きさ等変更していきます。
※Inspector - デフォルトでは画面の右上にあるタブのこと(オブジェクトの詳細が書かれている)
変更点
オブジェクト名 - 地面
オブジェクトサイズ - x10 y1 z10
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/485a4960-2423-a056-171d-c0b64350260e.png)
リスポーン地点を設定するため、VRCWorld.prefab(リスポーン地点)を配置します。
HierarchyもしくはSceneにそのままドラッグアンドドロップで配置できます。
※Scene - デフォルトでは画面の真ん中にあるタブの一つ(表示されていなければ別タブになっていないか確認)
Packages＞＞VRChat SDK - Worlds＞＞Samples＞＞UdonExampleScene＞＞Perfabs＞＞VRCWorld.prefab
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/3bf8bfb6-3180-0b1f-e569-3b62398dda8e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/2cb04362-757d-cbc1-a330-2e317cac7e9f.png)
もし空の色が気になったなら、勝手に変更しただけなので気にしないでください。

### ジャンプパッドを作る
ファイルがAssetsに散らばるのも嫌なのでファルダーを作ります。
Projectタブで右クリック＞＞作成＞＞フォルダー
※Projectタブ - デフォルトでは画面の下にあるタブのこと(ファイルの管理ができるが表示されていない場合はConsoleになっていないか確認する)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/5d4d48e3-e6f5-eb85-cfe1-d23abc1c33ab.png)
フォルダの中にUdon C# Program Assetを作成します。
Pojectタブで右クリック(フォルダ内)＞＞作成＞＞VRChat＞＞udon＞＞Udon C# Program Asset
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/2f79de25-3cae-f14e-e027-fc588484c37f.png)
Udon C# Program Assetをクリックし、InspectorからCreate Scriptを押します。
ファイルエクスプローラーが開いたらそのまま保存します。
もしエラーが出ていればCompile All UdonSharp Programsを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/d34cd0d6-1ff2-1f1c-d0e4-b0a6efabd93f.png)
Hierarchyにジャンプパッドとなるオブジェクトを作成します
Hierarchyを右クリック＞＞3D オブジェクト＞＞シリンダー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/9bcf6818-823a-0795-c53e-fc513d82673b.png)
Inspectorから変更します。
変更点
オブジェクト名 - JumpPad_Obj（なんでもいい）
オブジェクトサイズ - x1 y0.1 z1
カプセルコライダー - トリガーにする(isTrigger)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/18c6ed0c-e0f3-fd42-2fa3-0f3433b16a39.png)
先ほど作成したU#スクリプトにジャンプするためのコードを書いていきます（白い＃が書いている方）
C#スクリプトをダブルクリックしてエディターを開きます。
今回は以下のコードをそのままコピペしてください・・・(説明めんどくさいだけ)
コメントは書いているので、多分見れば動きはわかるかな。
```C#
    // ジャンプ力調節
    [SerializeField, Header("ジャンプ力")]
    private float p_JumpPower = 10f;

    //アバターがトリガーに触れた際の動作
    public override void OnPlayerTriggerEnter(VRCPlayerApi player)
    {
        //プレイヤーが空でないことを確認
        if (player != null)
        {
            //キャラクターの速度を取得後、y軸だけjumpPower
            Vector3 v3p = player.GetVelocity();
            if(v3p.y > 0) v3p.y += p_JumpPower; else v3p.y = p_JumpPower;
            player.SetVelocity(v3p);
        }
    }
```
コピペするとこんな感じ
セーブ(Ctrl + S)してエディターは閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/2690213c-2aa5-0bb2-7903-29c7ccb80e1c.png)

コードを記載したU#スクリプトをオブジェクトに入れます（白い＃が書いている方）
オブジェクトへはドラッグアンドドロップで入れられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/3d6eb7ab-5f1e-ffbf-d137-ca46cc1dff9a.png)
分かりやすいように黒にでもしておきますか・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/85540fba-fd90-4653-27a1-93fbd353481e.png)

# ワールドのテスト・アップロード
### ワールドのテストする
Unityの上にあるタブからSDKのControl Panelを開きます。
VRChat SDK＞＞Show Control Panel
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/69770665-220b-13c3-c4a0-1c6307082fd5.png)
SDkを開くとログイン画面が出てくるのでVRChatのアカウントでログインします。
ログイン後はBuilderタブに移動します。
Builderタブに移動するとヴわぁー！と沢山項目が出てくるので設定します。
name - 設定したい名前
max - 今回は16
rec - 今回は8
Thumbnail - Worldのアイコンに設定したい写真を追加
今回は他に変更点ありません。
Buildの中にあるBuild & Test New Buildを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/e3893c82-a935-8bcd-a9c5-026af62de2fb.png)
自動的にVRChatが立ち上がるのでテストします。
以下動画の方になっていれば成功ですね。
失敗している場合は再度設定してみてくださいね。
画面がチカチカしているのは気にしないで・・・
<iframe width="560" height="315" src="https://www.youtube.com/embed/3C6muZweXEA?si=vXVUnse3pEJVbVYq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

### ワールドをアップロードする
Worldのテストがてきたのでアップロードします。
再度SDKのControl Panelを開きます。
先ほど押したBuild & Test New Buildの下にある Build and Uploadをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/04ae82d8-bcbb-cafc-2a7f-d5abdd0f66da.png)
これでアップロードが終われば完了です。
お疲れさまでした。

# おまけ
作ったジャンプパッドだと悲しいので、音とパーティクルを付けようかなと思います。
音源だけは作れないのでフリーを拾ってきます・・・
今回はFC音工場様からダウンロードさせていただきました。

https://fc.sitefactory.info/se.html

コードを書き換えます。
```c#
    // ジャンプ力調節
    [SerializeField, Header("ジャンプ力")]
    private float p_JumpPower = 10f;

    [SerializeField, Header("ジャンプ時の音")]
    private AudioSource p_JumpPadAudio;

    [SerializeField, Header("ジャンプ時のパーティクル")]
    private ParticleSystem p_JumpPadParticle;

    //アバターがトリガーに触れた際の動作
    public override void OnPlayerTriggerEnter(VRCPlayerApi player)
    {
        //プレイヤーが空でないことを確認
        if (player != null)
        {
            //キャラクターの速度を取得後、y軸だけjumpPower
            Vector3 v3p = player.GetVelocity();
            if(v3p.y > 0) v3p.y += p_JumpPower; else v3p.y = p_JumpPower;
            player.SetVelocity(v3p);

            //音、パーティクルの実行
            if(p_JumpPadAudio != null) p_JumpPadAudio.Play();
            if(p_JumpPadParticle != null) p_JumpPadParticle.Play();
        }
    }
```
書き換え終わったので音とパーティクル追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2286080/6f2da875-03bf-8ce2-6858-6e1033caf4ca.png)
よし、テストしてみますか。
動画も問題なさそうですね。よかった・・・
<iframe width="560" height="315" src="https://www.youtube.com/embed/IcbWGKlRP7o?si=L4s2jnvZV1E-rqAB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

これで本当に終わります。

# 次回
時間があればワールド上でジャンプ力を調節するスライダーを作りたいと思います（多分）