mixamoで制作した３DキャラクターをUnityで使ってみた

#　mixamoで制作した３DキャラクターをUnityで使ってみた
本記事は、[サムザップ Advent Calendar 2019 #2](https://qiita.com/advent-calendar/2019/sumzap2) の12/21の記事です。
## はじめに
こんにちは。Unityエンジニアの金崎です。
mixamoというサービスをご存じでしょうか。mixamoは３Dキャラのボーンアニメーションを簡単に作ることができます。モック開発や個人開発などでとても役立つサービスだと思います。
今回はこのmixamoを使用してボーンアニメーションを制作し、Unityで動かすまでの流れを紹介します。
## mixamoとは
mixamoは2015年にadobeに買収された3Dキャラクタをカスタマイズしたり、ボーンアニメーションを簡単に作成できるwebサービスです。
Adobe Creative Cloudのアカウントがあれば、利用することができます
## mixamoでのボーンアニメーション制作の手順
以下の順番でアニメーションを作っていきます
1. 3Dモデルを用意
2. mixamoにキャラクターデータをアップロード
3. ポイントの設定
4. アニメーションの設定

#### 1. ３ｄモデルの用意
3Dモデルを用意します。
mixamoには、３Dモデルが用意されており、それを利用することもできます。
今回は自分で制作したボクセルで制作したモデルを使います。
![man.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/15d4516d-0516-c944-a420-1bf8a9b0b60f.png)![charalist.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/d2097234-e73a-2aea-2d07-817e737ddb49.png)

#### 2. mixamoにキャラクターデータをアップする
用意した３Dモデルを使うにはUPLOAD CHARACTERボタンを押します。
アップロードするためのダイアログが開くので、使用したい３Dモデルをドラッグアンドドロップします。
対応ファイルはFBX, OBJ, ZIPファイルです。
![upload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/7a9d07c8-babb-1079-5d6c-8c4178da774f.png)
![upload2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/c16683db-e9d2-5307-e802-c0c70491e748.png)
今回はOBJファイル、マテリアルファイル、テクスチャ画像をZipファイルにしてアップしています。
正常にアップロードされると以下のようなダイアログが開かれます。
問題がなければ、NEXTボタンを押して、次に進みます。
![chara_point_setting1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/eb215008-9b51-ed34-592e-6d186f21ae76.png)

#### 3. ポイントの設定
３Dモデルにポイントを設定します。（あご、両手首、両肘、両膝、股下）
また、赤枠の箇所で指の設定も指定できます。今回はNo Fingerに設定しました。
設定が終わったら、次へボタンを押下します
![setting.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/6902fde9-c65f-2136-d7f2-3a3814609848.png)
正常に設定が終わると３Dモデルがアニメーションする表示に切り替わります。
NEXTボタンを押して、アニメーションの設定をしていきます。
![preview.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/b2c8807b-1701-e973-b08b-9ccd8ecd58b3.png)
#### 4. アニメーション設定の設定
mixamoに用意されたボーンアニメーションを３Dモデルに反映させることができます。
![animationSetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/99eb06d8-7a96-3a5f-35c6-aacf36350482.png)
アニメーションが決まったら、DOWNLOADボタンを押します。
Formatが指定できるので、FBX for unityに設定してDOWNLOADボタンを押します。
これでアニメーションデータの完成です。
![exportSetting.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/43caac3d-ca5f-0d29-1a0a-2c82c34b8310.png)

## unityに導入
### 1. ３Dモデルのインポートと設定
unityに3Dモデルをドラッグアンドドロップします。
Assets/Man配下に配置しました。
![unity1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/aa95108e-8aaa-f4f6-9506-0f08f044b430.png)
ただし、ドラッグアンドドロップしただけでは、マテリアルが貼られていません。
この問題を解決するためにテクスチャとマテリアルを生成する必要があります。
![unity2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/c03d5f0d-483b-b4f1-0c3e-2fb305dfa70b.png)
配置した３Dモデルを選択し、Inspector上のMaterialsタブを選択します。
Extract Textures...とExtract Materials...ボタンを押下し、テクスチャとマテリアルを生成します。
これでマテリアルが正しく設定されます。
![unity3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/2a696d3c-d401-188d-44d5-7c0408d160fc.png)
![unity4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/10113ac8-ebe4-ef7f-b57b-4580b4e9a8df.png)
![unity5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/1355b092-241a-c1ec-ccc3-a86710f61dab.png)

### 2. アニメーションの制御の追加
まず、AnimationControllerファイルを作ります。
AnimationControllerに新しくステート（今回はPunch）を作り、アニメーションファイルを設定します。
![unity6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/55eb755a-6084-1563-ec04-5732851e17a8.png)
![unity7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/46ad25bc-bc04-4453-f8e9-0e7afe0aa701.png)
作成したAnimationControllerを３Dモデルのインスペクタに設定します。
再生するとキャラクターがmixamoで作った動きをします。
![play.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/c828d4a4-3346-82ff-93d8-580c97138915.png)

## まとめ
今回はmixamoでのボーンアニメーションの作成とunityへの導入方法の紹介しました。
とても簡単に３Dキャラクターをアニメーションをさせることができますので、一度体験してみてはいかがですか。

明日は、@ichikawa_masahiro さんの記事です。