VRoid Hub のキャラクターをUnityに召喚する

<br>
VRoid SDK を使えば、VRoid Hub に登録してあるキャラクターを選択するゲームやアプリケーションを作ることができます。
しかし、私の頭では公式サイトに書いてあることが理解できず、またVRoid SDK の情報はネットの中には少なくて、とても苦労しました。
自力で作ることはあきらめて、SDK付属のサンプルを使うことで、VRoid Hub のキャラクターを自分のUnity のプロジェクトに召喚することに成功しました。
もっといい方法があると思いますが、とりあえず何とかできたで、その手順を忘れないようにここに記します。


## まず最初に

VRoid SDK を使うにはまず、ここを読みましょう。
まずは、Pixiv さんへ申請する必要があります。
https://github.com/pixiv/vroid-sdk-developers


アプリ使用の許可がおりたら、アプリの登録をします。
https://hub.vroid.com/oauth/applications

登録後、Application ID と Secret が発行されます。


Unity のプロジェクトに、VRoid SDK package をインポートし、
以下に、さきほどの　Application ID と Secret　を入力します。

Asset > VRoidSDK > Plugins > SDKConfigurations

[![Image from Gyazo](https://i.gyazo.com/7cea682bd80201a9846a92e8d28bd12c.png)](https://gyazo.com/7cea682bd80201a9846a92e8d28bd12c)


##  今回やること
以下の動画のように、VRoid を選択し、他のシーンに登場させます。

[![Image from Gyazo](https://i.gyazo.com/46317e38790000c297127a6239626000.gif)](https://gyazo.com/46317e38790000c297127a6239626000)


## シーンを追加

以下の２つのシーンを用意します。

- VRoid を選ぶシーン
SDK付属のサンプルシーンを利用しました。
Asset > VroidSDK > Examples > Scene > Example

- 選択したVRoidを使うシーン
適当に用意します。
ここでは、Unity のプロジェクトを作った時のデフォルトのシーンを利用しました。
Asset > Scenes > SampleScene

<br>
以上の２つのシーンをセットします。
File > Build Setting 
[![Image from Gyazo](https://i.gyazo.com/0b59013f3d2e4e16c1ca6e3a6ffab7f7.png)](https://gyazo.com/0b59013f3d2e4e16c1ca6e3a6ffab7f7)


##画面遷移用のボタンを追加

画面遷移するためのボタンを追加します。
既にある以下のボタンをコピペします。

[![Image from Gyazo](https://i.gyazo.com/98e4331e36008237dfeaaddf723e4d5c.png)](https://gyazo.com/98e4331e36008237dfeaaddf723e4d5c)

コピペし、ボタンのテキストを「OK」にして位置を整えます。
（ボタンが１つ増えます）

[![Image from Gyazo](https://i.gyazo.com/fce7ed96f9dcb4db07b895cd0545627a.png)](https://gyazo.com/fce7ed96f9dcb4db07b895cd0545627a)

##画面遷移の設定
新しくできたButton(1)の Inspector の Button > On Click()の中身を消しておきます。（下画像のマイナスをクリック）

[![Image from Gyazo](https://i.gyazo.com/c616d09975d6fafaac4d59645991befe.png)](https://gyazo.com/c616d09975d6fafaac4d59645991befe)

List is Empty になればOK
[![Image from Gyazo](https://i.gyazo.com/544d977279bcbe3fa6d093ff9e2f6686.png)](https://gyazo.com/544d977279bcbe3fa6d093ff9e2f6686)


以下のスクリプトをButton(1) にアタッチします。

[![Image from Gyazo](https://i.gyazo.com/9f2289b8a2f5527bfeadf725eebed046.png)](https://gyazo.com/9f2289b8a2f5527bfeadf725eebed046)

```ChangeScene.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class ChangeScene : MonoBehaviour
{  
    public void OnClickButton()
    {
        SceneManager.LoadScene("SampleScene"); //遷移後のシーン名
    }
}

```

Inspector　に、スクリプト「Change Scene」が追加されてることを確認し、
On Click() の　プラスマークをクリックします。 
[![Image from Gyazo](https://i.gyazo.com/e33e0e45e2b616b2d9a18bccf5a00249.png)](https://gyazo.com/e33e0e45e2b616b2d9a18bccf5a00249)

Hierarchy の Button(1) を　Inspector　の　On Click() の「None(object)」にアタッチします。
[![Image from Gyazo](https://i.gyazo.com/43a5e4a41a88aa3fb6417dd90b59c7f2.png)](https://gyazo.com/43a5e4a41a88aa3fb6417dd90b59c7f2)

No Function > スクリプト名[ChangeScene] > 関数名[OnClickButton()] 

![スクリーンショット 2022-02-08 213921.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/65efb778-5ab0-6cb2-cecc-8054ffb33ce7.png)


これで、OKボタンを押すと SampleScene に画面遷移します。


## VRoid を遷移後のシーンに持っていく

Hierarchy の CharactersRoot に以下のスクリプトをアタッチ
（選択したVRoidを遷移後のシーンで使えるようにするため）

[![Image from Gyazo](https://i.gyazo.com/274d1b39a6660f04f18d41b89cd68721.png)](https://gyazo.com/274d1b39a6660f04f18d41b89cd68721)


```DontDestroy.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DontDestroy : MonoBehaviour
{
    void Awake()
    {
        DontDestroyOnLoad(gameObject);
    }
}
```

一応、遷移後のシーン(SampleScene)のMain Cameraの Position 、Rotation を遷移前の（Example）と揃えておきます。
揃えておかないと、遷移後に後ろ向きで登場します。

[![Image from Gyazo](https://i.gyazo.com/59e5b9fd2c8fd5ac024da71172286d4d.png)](https://gyazo.com/59e5b9fd2c8fd5ac024da71172286d4d)

これで、VRoid　を選び、OKボタンを押すと、選択したVRoidが遷移後のシーンで使用可能になります。

[![Image from Gyazo](https://i.gyazo.com/bd976c5baf03714f9c1b150bff291d81.png)](https://gyazo.com/bd976c5baf03714f9c1b150bff291d81)


## アニメーション設定

このままではＴ字型なので、
アニメーションを設定します。

アニメーションを用意します。
ここでは、Unity Asset Store にある「Unity-Chan!Model」のジャンプアニメーションを使用しました。

[Unity-Chan!Model](https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705) をインポートします。

Project のどこかに　新しい　Animation Controller を作成
（Create > Animation Controller）

Create State > New State
New State の Inspector で　モーションを選びます。

[![Image from Gyazo](https://i.gyazo.com/eb5d0b0f87530d6ac0b990fbb5b3715f.png)

遷移先のシーン（Sample Scene） で、
空のオブジェクトを作ります。
[![Image from Gyazo](https://i.gyazo.com/c46f252cd9c5637019b10fb049199ab6.png)](https://gyazo.com/c46f252cd9c5637019b10fb049199ab6)

その空のオブジェクトに以下のスクリプトをアタッチします。
新しいシーンに移動したVRMに さきほど作ったAnimation Controller をアタッチするスクリプトです。

[![Image from Gyazo](https://i.gyazo.com/f83b03a0405f8337463bd6b8c8187da5.png)](https://gyazo.com/f83b03a0405f8337463bd6b8c8187da5)

```Gamecontroller.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameController : MonoBehaviour
{
    GameObject vrmObject;
    Animator animator;

    [SerializeField] RuntimeAnimatorController animeController;

    void Start()
    {
        vrmObject = GameObject.Find("VRM");

        animator = vrmObject.GetComponent<Animator>();

        animator.runtimeAnimatorController = animeController;
    }
}


```

そのGameObject の Inspector のスクリプト Game Controller の　Anime Controller で　先ほど作った Animation Controller を選択します。
[![Image from Gyazo](https://i.gyazo.com/ec5df101ca006aac1ce60d8be9688bd3.png)](https://gyazo.com/ec5df101ca006aac1ce60d8be9688bd3)




これで、VRoid Hub のキャラクターを自分の Unity のプロジェクトへ持ってくることができました。

よーし、VRoid Hub　のキャラクターを使ったゲームやアプリケーションを作るぞ！！


<br>