【Unity初心者向け】VRMモデルでCandy Rock Star踊ってみた

VRoidモデル完成したしせっかくだし踊ってみたい！！！！！！
なるほど[VRMLiveViewer](http://fantom1x.blog130.fc2.com/blog-entry-309.html)を使えば簡単に踊ることができるんですね……Macだと使えないじゃないですかー！！！やだーーーーーーー！！！！！！！！！！

ということでUnityのインストールから始めてみたものの参考記事が古かったり色々あって苦戦したので、これからチャレンジする方のためにもUnityインストールからの手順を残しておこうと思います。

完成動画はこちら↓
[![【踊ってみた】Candy Rock Star【VTuber月夜莉央】](http://img.youtube.com/vi/BD9zPAEoMvY/0.jpg)](http://www.youtube.com/watch?v=BD9zPAEoMvY)


##Unityのインストール
既にインストールが完了している方は[プロジェクト作成](#プロジェクト作成)まで読み飛ばしてください。

###UnityID作成/ログイン
まずはじめに[Unityトップページ](https://unity.com/ja)へアクセスし、UnityIDを作成します。既に作成済みの方はログインを行ってください。
画像の赤枠で囲ったボタンを押すと**Create a Unity ID**のメニューが出てくるので必要な項目を入力して登録します。
![スクリーンショット 2019-11-07 11.38.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/812a6b6f-9f7a-2c78-ffcd-a724c6a44c2c.png)

###Unity hubのダウンロード
[Unityダウンロードページ](https://unity3d.com/jp/get-unity/download)の赤枠のボタンからUnity hubをダウンロードしてインストールを実行します。
![スクリーンショット 2019-11-07 11.57.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/0e8d8ecd-23eb-e05e-28e4-f722077c6910.png)

###Unity hubの起動/サインイン
インストールしたUnity hubを起動すると画像のような画面が表示されます。赤枠で囲ったボタンから先ほど作成したUnity IDでサインインを実行してください。
![スクリーンショット 2019-11-07 12.03.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/981eafc0-822f-ada5-a39e-ff446e2c7073.png)

###Unityのインストール
**インストール**ボタンを押すとUnityのバージョン選択画面が出てきます。特別な理由がなければ最新正式リリース版で問題ないのでそのまま**次へ**ボタンを押してモジュール選択画面へ行きましょう。

モジュール選択画面ではUnityに追加するモジュールを選択することができます。
今回はアプリに書き出したりするわけではないのでドキュメントと日本語化パックを入れました。**実行**ボタンを押すとインストールが始まります。

<img width="980" alt="スクリーンショット 2019-11-07 12.12.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/383d83a7-55a0-f64d-2441-c44884add3f3.png">
<img width="978" alt="スクリーンショット 2019-11-07 12.17.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/206c1fb1-bef2-8807-1356-915c03296ce9.png">

##プロジェクト作成
メニューから**プロジェクト**を選択し、**新規作成**ボタンを押します。
新規作成ボタンの左にある▼ボタンでUnityのバージョンが選択できますので、複数バージョンのUnityがインストールされている場合はここでバージョンを指定してください。
２枚目の画像の画面が出てきたらテンプレートを**3D**に指定し、**プロジェクト名**と**保存先**を指定して**作成**ボタンを押します。
Unityが起動して3枚目の画面が出てきたらプロジェクト作成成功です。

![スクリーンショット 2019-11-07 12.37.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/dde1ca80-e5cb-4b17-377f-aa3b601ff38f.png)
<img width="861" alt="スクリーンショット 2019-11-07 12.51.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/90049383-746f-9ca5-96fe-ddbbd326f9a3.png">
<img width="1342" alt="スクリーンショット 2019-11-07 13.00.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/f32ae860-d691-f9f8-40b8-c128a1a47e95.png">

##ユニティちゃんライブステージ！ -Candy Rock Star- 導入
まずは動作確認としてユニティちゃんを躍らせてみます。

###ライブステージのダウンロード
[ここ](http://unity-chan.com/download/releaseNote.php?id=CandyRockStar)からzipファイルをダウンロードして解凍します。

###Assetsのコピー
解凍したファイルのAssetsフォルダの中身を全て選択し、UnityのProjectツリーのAssets内にドラッグ&ドロップでコピーします。（完了まで少し時間がかかります）
コピーが完了するとUnityのAssets内が２枚目の画像の状態になります。
![スクリーンショット 2019-11-07 13.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/b92f362b-f0b1-3088-3329-24cd3e09ab90.png)
<img width="717" alt="スクリーンショット 2019-11-07 13.14.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/071308bf-d4e5-74b0-255f-f1812b41df04.png">

###起動
Assets内の**Scenes 1**をダブルクリック→**Main**をダブルクリックしてHierarchyのトップがMainになったら**再生(▶︎）**ボタンを押します。
ユニティちゃんが踊り出したら正常にAssetsが取り込めた状態です。
![スクリーンショット 2019-11-07 13.14.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/022f2041-c6e2-fbd0-a115-3f27ce55888b.png)
![スクリーンショット 2019-11-07 13.26.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/b3abaf3e-0841-e7ec-41da-222992596a9a.png)
<img width="1188" alt="スクリーンショット 2019-11-07 13.32.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/ce13b2f3-21a1-c41e-5b40-28e9c84260cc.png">

##VRMモデル導入
さぁここからが本番です！ユニティちゃんと自分のVRMモデルを差し替えていきましょう。

###UniVRMの導入
UniVRMはUnityにVRMモデルをインポートするためのパッケージです。
[ここ](https://github.com/vrm-c/UniVRM/releases)から最新版のunitypackageをダウンロードしてください。2019年11月08日時点で最新版のファイル名は**UniVRM-0.53.0_6b07.unitypackage**です。

ダウンロードしたファイルを開くと画像のような画面が出てくるので、**Import**ボタンを押すと起動しているUnityのプロジェクトにパッケージが適用されます。
![スクリーンショット 2019-11-07 17.17.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/bbab71dd-3dfc-f028-b9ea-2cd771bbe11c.png)

###VRMモデル書き出し/Unityへインポート
ここで一旦Unityは最小化しておいてVroid Studioを起動しましょう。
**撮影・エクスポート**タブで**エクスポート**を選択すると画像２枚目の画面が出てきます。必要な項目を入力して**OK**ボタンを押すとファイルダイアログが出てくるのでファイル名やフォルダを指定します。
出力が完了したらVRMファイルをUnityのAssetsにドラッグ&ドロップでインポートしてください。インポートが完了するとVRM名と同様の名前のファイルが２つ、フォルダが４つ追加されます。
![スクリーンショット 2019-11-07 16.34.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/5f2da3e9-e083-73b8-b3c3-74588df27b43.png)
![スクリーンショット 2019-11-07 16.35.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/7d70ea68-4ba5-68bf-5775-f615bafa4ce0.png)
![スクリーンショット 2019-11-07 18.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/35211c96-3164-bfa0-cd2b-751cb0da9333.png)

###StageDirectorの設定
Hierarchyビュー内にある**StageDirector**を選択します。
InspectorビューからStageDirector(Script)→PrefabOnTimeLine→Element0の横のボタンを押すとダイアログが表示されるので、自分が作成したVRMを選択して変更します。
![スクリーンショット 2019-11-07 18.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/2247181e-9c16-5299-8d70-6f9e781222d3.png)


###VRM Prefabの設定
Assetsフォルダを表示し、モデルの素体が表示されているファイルをダブルクリックするとHierarchyにvrmモデルの階層が表示されます。
![スクリーンショット 2019-11-07 18.34.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/1ab282f9-13c5-2d74-9267-a3c11706828c.png)

####アニメーションの追加
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、InspectorビューからAnimatorのController横のボタンを選択します。出てきたダイアログから**MocapC86**を選択してください。
また、Appley Root Motionのチェックボックスを有効にします。（これをしないとモデルが前後左右へ動いてくれません）
![スクリーンショット 2019-11-07 18.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/bffe3846-81fe-25a6-887f-becfb9f79286.png)


####ライトの追加
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、右クリックのメニューから**Light→DirectionalLight**を選択するとモデルにライトが追加されます。
![スクリーンショット 2019-11-07 18.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/75a00019-9d0a-1fe3-9748-104cdccd38f2.png)
<img width="1195" alt="スクリーンショット 2019-11-07 18.42.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/f037770e-0325-cfcb-0345-edb43342b329.png">

####カメラターゲットオブジェクトの追加
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、右クリックのメニューから**CreateEmpty**を選択して空のオブジェクトを作成し、名前を「**Camera Target**」に変更します。
同様の方法でもう１つ空のオブジェクトを作成し、名前を「**Character1_Head**」に変更します。
<img width="363" alt="スクリーンショット 2019-11-07 18.43.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/fc73cd5b-7aa6-89d2-dae5-fc3236eff497.png">
InspectorビューのTransformのYの値をモデルの身長に合わせて変更してください。Camera Targetがメインカメラ、Character1_Headがバックスクリーン表示用のカメラに対応しています。Camera Targetは胸、Character1_Headは頭の位置ぐらいを目安に調整してみてください。

**ここまで設定して実行すると自分のVRMモデルが踊るようになります！
せっかくなのであと一歩頑張ってみましょう！！**

###表情変化の設定
ユニティちゃんの表情変化と同様のものを割り当てます。
Hierarchyの一番上にあるモデル名のオブジェクトを選択し、Inspectorビューの一番下にある**Add Component**ボタンを押して一覧から**New script**を選択します。
Nameに「**FaceChanger**」と入力して**Create and Add**ボタンを押します。
Script右のFaceChangerの文字をダブルクリックでファイルを開き、下記のコードを入力してください。

```c:FaceChanger.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using VRM;

public class FaceChanger : MonoBehaviour {
    VRMBlendShapeProxy proxy;

    void Start() {
        proxy = GetComponent<VRMBlendShapeProxy>();
    }
    //表情を変えるイベントをここで受け取る．
    public void OnCallChangeFace (string str) {   
        switch(str) {                                    //受け取ったメッセージが
            case "eye_close@unitychan":                 //「目を閉じる」であれば
                proxy.ImmediatelySetValue("BLINK",1);   //目を閉じる
                break;
            case "smile3@unitychan":                    //「笑顔」であれば
                proxy.ImmediatelySetValue("JOY",1);     //笑顔
                break;
            case "conf@unitychan":                      //「怒る」であれば
                proxy.ImmediatelySetValue("ANGRY",1);   //怒る
                break;
            case "default@unitychan":                   //それ以外なら
                proxy.ImmediatelySetValue("BLINK",0);   //初期化
                proxy.ImmediatelySetValue("JOY",0);
                proxy.ImmediatelySetValue("ANGRY",0);
                break;
        }
    }
}
```

###リップシンク(口パク）の設定
表情の変化はつきましたが歌っている最中の口元が寂しい状態ですのでリップシンクを適用しましょう。
Assetsから**UniteInTheSky→Scripts→LipSyncController**ダブルクリックで選択し、下記のように修正します。
また、**UniteInTheSky→Prefabs→LipSyncController**を選択し、InspectorビューからLipSyncController(Script)内のTargetNameを**VRMPrefab名(Clone)**に変更してください。

```c:LipSyncController.cs

using UnityEngine;
using System.Collections;
using VRM; //追加

public class LipSyncController : MonoBehaviour {
    public string targetName;

    public Transform nodeA;
    public Transform nodeE;
    public Transform nodeI;
    public Transform nodeO;
    public Transform nodeU;

    public AnimationCurve weightCurve;

    VRMBlendShapeProxy target; //変更

    void Start() {
        target = GameObject.Find(targetName).GetComponent<VRMBlendShapeProxy>(); //変更
    }

    float GetWeight(Transform tr) {
        return weightCurve.Evaluate(tr.localPosition.z);
    }

    void LateUpdate() {
        var total = 1.0f; //変更

        var w = total * GetWeight(nodeA);
        target.ImmediatelySetValue(BlendShapePreset.A, w); //変更
        total -= w;

        w = total * GetWeight(nodeI);
        target.ImmediatelySetValue(BlendShapePreset.I, w); //変更
        total -= w;

        w = total * GetWeight(nodeU);
        target.ImmediatelySetValue(BlendShapePreset.U, w); //変更
        total -= w;

        w = total * GetWeight(nodeE);
        target.ImmediatelySetValue(BlendShapePreset.E, w); //変更
        total -= w;

        w = total * GetWeight(nodeO);
        target.ImmediatelySetValue(BlendShapePreset.O, w); //変更

        target.Apply(); //追加
    }
}
```
<img width="273" alt="スクリーンショット 2019-11-08 12.36.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/c2b665ad-07dd-e867-caf0-343e33b4bcd5.png">


##効果の編集
ここまででも十分素敵な動きになっていますが、プラスアルファで効果を追加、変更してみましょう。

###手からパーティクルを出す
Assetsから**UnityChan→Prefabs→CandyRockStar**をダブルクリックで選択し、Hierarchyの検索画面に**Spray**と入力します。
両腕と両腰に設定された計４つのパーティクルのオブジェクトが出てくるので、選択してコピーします。
Assetsから自分のモデルのPrefabを選択し、コピーしたオブジェクトをペーストします。
Root配下のパーティクルを表示させたいオブジェクト下にペーストされたSprayを移動させ、位置を調整すると、該当のオブジェクトの移動に合わせてパーティクルが表示されるようになります。
<img width="906" alt="スクリーンショット 2019-11-08 1.33.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/a11ec598-331f-e468-0398-d009b9c8dea3.png">
<img width="923" alt="スクリーンショット 2019-11-08 10.37.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/4bcd6716-a285-4114-d596-de4e1943eb50.png">


###エフェクトの変更
Assetsの**UnityChanStage→Effects**配下にステージ装置やエフェクトの設定が纏まっています。
ここのオブジェクトを変更することで色などを変更することができます。
例えばレーザーの色を変えたい場合は**Laser→Materials→light_green**を選択してInspectorのBaseとEmissionを調整することで色が変わります。
<img width="1186" alt="スクリーンショット 2019-11-08 10.48.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/adcf2cb3-4108-923e-3a3c-44f43b6c1c40.png">

##完成！！
諸々調整してこのような動画になりました！！やったー！！！！！！！！！
高評価、チャンネル登録お願いします！！！！！！！！！！！！！！！！！！（定型文）
[![【踊ってみた】Candy Rock Star【VTuber月夜莉央】](http://img.youtube.com/vi/BD9zPAEoMvY/0.jpg)](http://www.youtube.com/watch?v=BD9zPAEoMvY)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【踊ってみた】Candy Rock Star【VTuber月夜莉央】 <a href="https://t.co/ivp2WZkS8r">https://t.co/ivp2WZkS8r</a><br><br>初めての踊ってみた動画です！！<br>あなたの４分間をボクに下さい！！！！！！！！！！！！！<br><br>先ほどミスがあったのでアップし直しました……せっかく高評価頂いていたのに申し訳ありませんっっ！！！！！！ <a href="https://t.co/0zFtoWijET">pic.twitter.com/0zFtoWijET</a></p>&mdash; 月夜莉央🌙🌌18時踊ってみた動画投稿！ (@VirtualDollRio) <a href="https://twitter.com/VirtualDollRio/status/1192742011159244800?ref_src=twsrc%5Etfw">November 8, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##最後に
日本語化のモジュール入れたのに最後まで設定変更するの忘れてましたっ！！(・ω<) ﾃﾍﾍﾟﾛ
UnityメニューのPreferences→Languageで変更できます！！

##参考
[- オリジナルVRMモデルにCandyRockStarを踊ってもらう （2）VRMの導入・設定](https://qiita.com/niiya_enji/items/e40362c2b5d54eef5985)
[- ユニティちゃんライブのシーン構造について軽く解説してみる](http://tsubakit1.hateblo.jp/entry/2014/11/09/235348)
[- 「VRoid Studio」で作った3Dモデルを「Unity」で踊らせてみよう](https://3owebcreate.com/web/design/vroid_studio_dance)
[- ユニティちゃんステージ（Candy Rock Star)をいじる](http://bibinbaleo.hatenablog.com/entry/2017/09/17/140232)
[- 【Unity】VRM（VRoid）をライブステージで踊らせるアプリを作ってみた](http://fantom1x.blog130.fc2.com/blog-entry-309.html?sp&photo=true)

##ライセンス
![imageLicenseLogo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/b0b16152-6c7b-a780-6d89-6247570e80f0.png)

この作品は[ユニティちゃんライセンス条項](http://unity-chan.com/contents/license_jp/)の元に提供されています