Adobe Fuseで作ったモデルにモーションをつけてUnityで使えるようになるまで

## Fuse CCとは
簡単にモデルが作成でき、アニメーションを選択して付けることができるソフト.

##環境
Unity 2018.4
Fuse CC (Beta)

##Fuse CC を使ってみる
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/4045a8c0-500a-c200-a8bc-bc844f16e7df.png width=50% height= 50%>

モデルが完成したら、書き出し準備をします.
File -> Animate with Mixamo を選択

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/c99a0f1c-65c8-ecdc-9500-86178d318a7b.png width=50% height= 50%>

すると、下のようなものが出てくるので、saveをクリックしてアップロードを開始します.完了すると、ブラウザが開きます.

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/95a508a0-0650-3f15-231d-d9d2489f84a0.png width=50% height= 50%>

ブラウザが開いたら、FINISHを選択します.次にANIMETEを選択しアップロードしたモデルにアニメーションを付けます.

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/6456964b-4a70-a40f-19ef-c31026350e54.png width=50% height= 50%>

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/84558461-5f1d-6495-260d-2ce9d021135f.png width=50% height= 50%>

Runningを検索して、Downloadを選択しましょう.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/74752b87-4c32-922e-7f85-f1d9ccb4c635.png width=50% height= 50%>

形式に関しては、こんな感じです.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/2d4d028e-88c8-827a-24c0-d5b73781967f.png width=50% height= 50%>

ダウンロードが終わったら、unityを開いてプロジェクト内にドロップします.

##Unityにモデルを入れる
先ほどのモデルをヒエラルキーにドロップしてみましょう.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/09c68903-40e9-f195-35c3-b954135e85f7.png width=50% height= 50%>

見事に色が落ちてます...
もう一度、Fuse CCで先ほどのモデルを開き、Textureをエクスポートします.
File -> Export -> Export Texturesを選択
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/36ae09bf-7488-02b2-e4eb-4af762011d54.png width=50% height= 50%>

形式はこんな感じです.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/5a7a5ba7-1a84-fc57-a0cf-40b0dfbdfd3a.png width=50% height= 50%>

次にUnityのプロジェクト内にあるモデルと同じディレクトリーにtextureを入れます.
そしてモデルのインスペクターを表示して、MaterialからExtract Materials...を選択してApply
もしくは、Extract Textureで先ほどのTextureフォルダーを選択してください
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/f155f054-0080-570c-b424-1cd738add9f3.png width=50% height= 50%>

下のようなものが出てきたら、Fix nowを選択します.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/7dfd51b8-0039-6fc1-d7ee-1229adf2b4f6.png width=50% height= 50%>

ちゃんと色がつきました.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/540f418e-f251-da7a-fae8-81b96322c69e.png width=50% height= 50%>

##Unityでモデルのアニメーションを使う
まず、モデルに付いているモーションを選択、ctrl+Dで複製しておき、複製したモーションは別ファイルにまとめます.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/04f6caa3-6929-02e2-0c70-84de3bb0a18c.png width=50% height= 50%>

今の状態で実行しても、モデルは動かないのでcontrollerを作成します.
右クリック -> Create -> Animation Controller
ここでは名前をControllerにしました.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/e58d305e-f1ff-a17e-47d9-7ea688994d95.png width=50% height= 50%>

作成したAnimation Controllerを開き、複製したモーションをAnimetor内にドロップ
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/51459a3e-655b-e803-519d-3667ab6a0e38.png width=50% height= 30%>

次に先ほどのRunモーションをダブルクリックして表示したインスペクターから、Loop Timeにチェックを入れます.
すると、実行した時に繰り返しモーションが動きます.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/b9037da9-3a30-54cb-892c-c77c3fb2516d.png width=50% height= 50%>

これをモデルのAnimatorのControllerにつけます.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/eaee1b0e-38f9-f855-187a-aa24a94aa6d4.png width=50% height= 50%>

すると走るのですが、モーションが終わるたびに元の座標に戻っていると思います.
座標が変わるようにしましょう.
まず、ヒエラルキー内にあるモデルのAnimatorのApply Root Motionにチェックを入れます.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/9292a9e8-6736-9a76-782f-34a3b9668561.png width=50% height= 50%>

次にプロジェクト内の元のモデルを選択、Rig -> Avatar Definitionからモーション実行中に動いているパーツを選択します. 今回はHipsでした.
ここは、実際に実行してヒエラルキーにあるモデルのパーツを観察して選択します.そしてApply
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/b552bc22-ebff-44ab-eeae-d735e845e7a9.png width=50% height= 50%>

すると、プロジェクト内のモデルに入っているモーションのヒエラルキーが変更されていると思います.
下のモーションが変更前です.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/0f5635a5-8f17-1550-370c-38712da284e1.png width=50% height= 50%>


下の画像が変更後です. このようになっていれば成功です. ここからまたモーションを複製し、置き換えます
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/eb2d5a53-1431-b6b9-2961-70a619e30636.png width=50% height= 50%>

変更したアニメーションの名前をRe_Runningとします.
作ったAnimator Controllerを開き、Motionを置き換えます.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/6676007d-7ff5-72b9-59b3-2aea8634877c.png width=50% height= 50%>

Re_Runningをダブルクリックして、Loop Timeにチェックを入れます.
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177825/111da610-904a-66f5-7e20-cc3309366663.png width=50% height= 50%>

実行して、遠くに走って行けば完成です.

##おまけ
他のモーションをつけたい場合は、ブラウザからモーションを選び、without Skinを選択し、unityに落とします.
落としたfbxを選択し、上記と同様 Rig -> Avatar Definitionを変更、Applyしてモーションを複製して使います