低コストでVTuberになるために　2 Unityで動かす

##はじめに##
　それでは本命といえるUnity上で実際に動くようにしていきたいと思います。こまめにセーブしていきましょう。
　モーションキャプチャーについては**取り扱いません**。そのうち興味が出てやるようなことがあればまた書きますが現時点では自分で調べてがんばってください。（どうやらkinect2出るらしいけどやるかどうかはわかんない。）

　では入れる必要がある（と思われる）アセットを紹介していきます。

**UniVRM**
　VRM方式のものをUnityで扱うためのアセット。必須。これを書いている時のバージョンは0.51.0。
https://github.com/dwango/UniVRM/releases

**OVRLipSync**
　声に合わせて唇を動かすためのアセット。
https://developer.oculus.com/downloads/package/oculus-lipsync-unity/

**VRMLipSyncContextMorphTarget.cs**
　OVRLipSyncをVRMのBlendshapeに対応させるためのスクリプト。これだけは.unitypackegeではないのでスクリプトを直接入れてやります。作者はこちらです→http://teruaki-tsubokura.com/
https://github.com/TsubokuLab/VRMLipSyncContextMorphTarget

**kumaS_Assets**
　僕が作ったアセット。いろいろ入っている。
https://github.com/kumachan0210/VTuber_env_package


これらをAssets → Import Package → Custom Package...から入れます。

![2019-03-13.png](https://qiita-image-store.s3.amazonaws.com/0/338159/73ba7b1b-9d1c-b3fe-f47c-d7870ee194ae.png)


##身体を召喚##
　モデルのインポートをしていきます。
　VRM → uniVRM-〇.〇〇.〇 → Importから作ったモデルをインポートします。Blenderでいじる人もマテリアルがはがれてしまうので一度入れます。

![2019-03-15 (20).png](https://qiita-image-store.s3.amazonaws.com/0/338159/6237ce88-8e5a-0d54-6c8a-780fa2ca4daf.png)

　このようにモデル用のフォルダをつくるといいです。複数のバージョン入れてるとどれがどれだったかわからなくなるので。
　入った青い立方体（この青い立方体となったやつを**prefab**といいます。）を**hierarchy**に置いてやりましょう。

<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/152ae74d-1664-71de-c326-9c351804ab85.png" width = 50%>

　これで身体が置けました。
　このままだと後姿を映すこととなるので**Main Camera**の**Transform**の**Position**の**Y**を**1.2**に、**X**を**4.1**に、**Rotation**の**Y**を**180**に、**Field of View**を**27**に設定します。

　さらに再生画面の解像度設定をします。デフォルトのままでもいいですができるところまで画質を上げたいでしょう？

<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/6f3189da-6e5c-65e8-3481-5e866a7e0bdc.png" width = 50%>


　Gameタブを押してその下の左から二番目のところをクリックして開きます。そして+を押して解像度を追加します。

* **Label**に名前を。
* **Type**は**Fixed Resolution**に。

　Width & Heightは解像度を入れます。

* **FHD**は**1920**, **1080**
* **4K**は**3840**, **2160**です。

　それでは再生ボタンを押して動かしましょう。

![2019-03-13 (2).png](https://qiita-image-store.s3.amazonaws.com/0/338159/f6bd32ed-2f31-fe10-5e47-a42d054316c0.png)


　…しかし動きません。しかも空中に浮いてて色々おかしいです。（ついでに後ろ髪も見えない…）

##部屋を作る##
　なんならゲームの世界を作ってもいいのですが簡単に。

　先ほどと同じようにkumaS Assets のObjectsの中のPrefabsにある**Baked Mesh Floor**を**hierarchy**に配置します。これで床ができました。
　**Baked Mesh Wall**を同じように配置すると壁ができます。さらに**Shell**も配置します。これだけです。

　まあ僕が完成品を渡しているだけなんですけど…。なので**作り方のほうも説明します**。

　Hierarchy内で右クリック→3D Object → Planeで板が生成されます。

![2019-03-13 (4).png](https://qiita-image-store.s3.amazonaws.com/0/338159/bf6ff1b3-7c62-f64f-1827-04a57a533544.png)


　そしてお絵かきソフト（僕は~~めんどくさいので~~3Dペイントを使ってます）で作ったファイル（.jpegが多いかな）を取り込みます。
　Project内で右クリック→Import New Assets からファイルを選択すれば取り込めます。これ最初にやったAssetタブのやつと同じなのでどっち使ってもいいです。ただしこちらは指定の場所にインポートできる。
　
　取り込んだ絵をさっき作ったPlaneにD&Dすれば完成。
　位置とか角度はがんばって探してね。

##動くようにする##
　**面倒です**。
　あ、すいません。本音出ました。
　いや、実を言うと最低限動かすのは楽なんですけど僕が追加で作ったやつの設定が割と面倒です。ただ、これがあるのとないのとでは大違いなのでつけるのを推奨します。（といってもこの中の面倒なので。開発と比べたら無視できるレベルですけど。）
####最低限動くようにする####

![2019-03-13 (6).png](https://qiita-image-store.s3.amazonaws.com/0/338159/184c2baf-f806-4f13-c12f-0552f4233425.png)

　このようにD&Dでくっつけてやります。ここには書けなかったけどVRM→UniVRM→Scripts→BlendShape→Blinkerをアバターにくっつけてやるとまばたきするようになります。

　そしてそれぞれの設定は以下の通りです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/db98b500-11b4-836c-3c2f-9a154989b3ad.png" width=50%>


- **Rigidbody**の**Constraints**の**Freeze Rotation**の**X**,**Z**にチェックを入れる。これをしないと倒れます。
- **Capsule Collider**の値をこんな感じにします。この円柱で接触判定をとる。
- **Humanoid Co**(ry　~~これはべつにいじらなくてもいい。~~適度に歩くスピードとかを調整してやるといいです。
- **About Random**　待機姿勢と表情のランダムな遷移termが待機姿勢。数字が大きいほど間が長くなる。

　首と頭につけたやつはこっち。
<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/3dcd3e57-4858-95b2-1ec5-2c4f79acfac2.png" width=50%>


　これと同じように設定がんばってください。首も頭も同じ設定です。それぞれコードのほうにコメントで説明してあるけどこっちでも簡単に説明を。

- **Anim_name**　自由に動かしていいアニメーション状態を指定。
- **Key_name**　どのキーで動かす/動かさないの切り替えをするか。
- **Start**　始まりの時に自由に動かせる状態で始まるか否か。
- **Set_start_rot**　初めの時のRotation。…ぶっちゃけ作らなくてもよかった。
- **Max**　それぞれの軸の動かしていい範囲の最大値。
- **Min**　それぞれの軸の動かしていい範囲の最小値。

　
　ついでに髪が中途半端に見えないのを解消しましょう。
<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/60609b2d-528b-30b9-cafe-10f6d1cc5709.png" width=70%>


　このように**cull mode**を**Off**にするとちゃんと見えるようになります。

　これで最小限動くようになりました。使い方は、

- 前後左右移動は**WASD**か**矢印**で。
- **マウス移動**で頭が動く。
- **Key_name**で設定したキーで動く/動かない切り替え。
- **R**で正面を見直す。
- **左Alt** + **Key_name**で頭の向く方向をそこで固定/解除。
- （テンキーではないほうの）**数字キー**でそれぞれアニメーション再生。
　
　

といったところです。動かしてみましょう。

　動きましたね。だけど物足りない。
（ここでカクカクしたり服が貫通したりするのはスペック不足です。後のほうに軽量化の方法を書きますのでそこまで我慢してください。…本当にスペックが足りなかったらごめんなさい。）

####十分に動かせるようにする####
　それでなにをするのか。目が動くようにする＆腕を動くようにする＆リップシンク。
　それぞれのスクリプトをこのようにアタッチします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/fe89234d-94eb-0184-bb98-c3ce77c0f557.png" width=40%>


　そしてそれぞれの設定はこのようになります。

　**目**

<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/58af9773-20c7-5aa2-4f02-3ef71b4d7b87.png" width=50%><img src="https://qiita-image-store.s3.amazonaws.com/0/338159/7464f6bc-2b9f-d9a4-8134-2f31f10a9f0e.png" width=50%>



- **Anim** 参照するAnimator。図のようにD&Dすればいい。
- **Anim_name**　動いていいアニメーションの状態
- **Key_name**　動かす/動かさないの切り替えのキー
- **Start** 始まったときに動かせるかどうか
- **Set_start_rot**　初めの時のRotation。…ぶっちゃけ作らなくてもよかった。
- **Max**　それぞれの軸の動かしていい範囲の最大値。
- **Min** それぞれの軸の動かしていい範囲の最小値。
- **Cam_obj** カメラ。Main CameraをD&Dすればいい。
- **L_r** 右目か左目か。

　**腕**
　左腕
<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/82577bdd-ce9b-0fa4-f34e-1d47e5be5a9e.png" width=50%><img src="https://qiita-image-store.s3.amazonaws.com/0/338159/e75e005c-ddaf-2529-c1a2-7be53862c7bb.png" width=50%>

　右腕
<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/591c90c9-64b5-6250-a8d5-5d582998d347.png" width=50%><img src="https://qiita-image-store.s3.amazonaws.com/0/338159/56db8a06-1707-4c85-5ed5-8dcb4413a95d.png" width=50%>




- **Anim** 参照するAnimator。図のようにD&Dすればいい。
- **Anim_name**　動いていいアニメーションの状態
- **Key_name**　動かす/動かさないの切り替えのキー
- **Start** 始まったときに動かせるかどうか
- **Set_start_rot**　初めの時のRotation。…ぶっちゃけ作らなくてもよかった。
- **Max**　それぞれの軸の動かしていい範囲の最大値。
- **Min** それぞれの軸の動かしていい範囲の最小値。
- **L_r** 右腕か左腕か。
- **Sec_key** SHIFT押しながら切り替えるやつかどうか。

　そしてリップシンクは**hierarchey**で右クリック、**Create Empty**で空のゲームオブジェクトを作ってこうします。

![2019-03-15 (11).png](https://qiita-image-store.s3.amazonaws.com/0/338159/83feac94-4c7f-0859-510b-fe97d12527e4.png)


　これでリップシンクができるようになったはずです。

　もう一度動かしてみましょう。操作方法は先ほどとほぼ変わらないです。追加要素としては、

- **Shift** + **1**で常にカメラ目線となります。**Shift** + **0**で自由に目を動かせるようになります。
- 腕はホイールの操作でも動きます。

##色の調整##
　今更なんですが、VRoidでの色とUnity上での色と***なんか違う***という人がいるかもしれません。
　その原因は**太陽光にあたるもの**か**MToonの設定**がずれているかの二択です。

　太陽光にあたるものは**Directional Light**といいます。ここで設定を変える必要があるのは、**Color**と**Intensity**です。それぞれ意味はそのままです。わからなかったら辞書を引いてください。
　ただ、僕は軽量化のために無効化したのでこっちの設定はスペックに余裕のある人向け。（スペックに余裕があるかどうか調べるのは次に書きます。）

##軽量化##
　でき上ったものなのですが、それなりに重いです。
　どれぐらい重いか調べるにはWindow → Analysis → Profilerをクリックし、さらにAdd ProfilerでGPUを選択します。その状態で再生すると処理にどれだけ時間がかかっているか表示してくれます。


![2019-03-15 (14).png](https://qiita-image-store.s3.amazonaws.com/0/338159/2fc63b9d-c178-ab18-95e4-bf67179c8940.png)

　見てもらうとわかる通り**Opaque**, **Shadows/depth**, **Rendering**が重めです。ということでこれらを軽くしていきます。

　これらは一体何か。それは光です。（**詳しくは違います。雑でごめんなさい**）ということで**Directional light**を無効化してやります。
　チェックを外してやるだけ。


<img src="https://qiita-image-store.s3.amazonaws.com/0/338159/61f70ff6-a744-d4d8-eb17-a63efacd5721.png" width=70%>

　…。床とか壁とかは大丈夫ですが、アバターが真っ黒になっちゃいました。考えてみれば当然で光が無ければ暗くなります。
　じゃあなぜ床とか壁とか大丈夫なのか。実はこれらは**光を発するように**僕が設定していたからなんですよね。ということでそのやり方を説明していきます。

　まず、設定を変える必要があるのはここにあります。（青で囲ってあるところ）
![2019-03-15 (16).png](https://qiita-image-store.s3.amazonaws.com/0/338159/446e450a-0e4e-f3bd-1dae-4851108e2e12.png)

　そして実際に変える画面はここ。
![2019-03-15 (17).png](https://qiita-image-store.s3.amazonaws.com/0/338159/3e4fcb5f-8f27-1edd-0dac-08fb72df0ece.png)


　青で囲ったところを押してその中から赤で囲ったところにあるやつと同じものを探し出します。そしてその隣のHDRと書かれているところをクリックし、RGBそれぞれ195ぐらいにして、Intensityを0.5前後で調整する（中には色がおかしくなるやつがあるのでそれは目指している色に設定）とよくなります。

それではどれぐらい軽量化されたか見ていきましょう。

・
・
・

多少軽くなりました。

##最後に##
 これで動くものができました。あと最後に一仕事。このままじゃ使えないので。

![2019-03-15 (18).png](https://qiita-image-store.s3.amazonaws.com/0/338159/9951e3f5-f0ed-b1ea-81a2-dd072d13ad5c.png)


**File** → **Build Settings...** をクリックする。

![2019-03-15 (19).png](https://qiita-image-store.s3.amazonaws.com/0/338159/93019fe5-4963-893c-de66-9f35b24046cf.png)


 **Target Platform**が間違っていないことを確認し**Build**を押す。これで.exeファイルとして出力されます。

　お疲れさまでした。次はBlenderでアニメーションを作るです。

##おまけ##
　僕はやらないのですが配信をするためOBS等を使うから背景をとある色にしたいという場合があると思います。そのときは背景を消して**Main Camera**の**Clear Frags**を**Solid Color**にして、**Background**を**目的の色**にしてやるとできます。