Humanoidの３ＤモデルにMixamoからアニメーションを実装したい

ゲークリ向け資料第２弾です。
今回は商用利用可能な人間型３Dモデルのアニメーションが揃っている、
Adobeが提供している[Mixamo]("https://www.mixamo.com/#/")というサービスの利用方法をお伝えします。
# UnityAssetStoreにAnimationがついてないorz
>「AssetStoreでよさげなモデル見つけた！でもAnimationがついてない…」

こんなとき、Mixamoを使えばなんとかなるかもしれません。


:::note warn
注意
AnimationTypeがHumanoidである場合に限ります。
:::
# Step1.アセットを選ぶ
今回はたまたま手元にあった、[Adventure Character]("https://assetstore.unity.com/packages/3d/characters/humanoids/humans/adventure-character-201384")というアセットを使用します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/f17762b8-9ce1-3ea5-769a-291f3ee80ab8.png)

早速アセットをプロジェクトにインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/def30a40-5f66-8dd1-46e3-dfb4b9cb106f.png)
…Animationがありません。
Prefabにもついていません。
ストアページによると、
>I present to you a character, in the style of adventure
The character has a little customization.
The character has no animations, but has a humanoid rigg.

とのことです。
Humanoid riggがある点は救いですね。
早速Mixamoでアニメーションを用意してみましょう。
# Step2. MixamoでAnimationをダウンロードしよう
[Mixamo]("https://www.mixamo.com/#/")に接続して、SignInしてください。Adobeアカウントがない場合はSignUpからアカウントを作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/81e069b3-3dd7-47b9-085b-1c1ce1510ee0.png)
Mixamoではもともと提供されている100体以上のモデルが存在し、それらに任意のAnimationをつけた状態でダウンロードしてUnityで使用することも可能です。

今回は、持参のモデルを使用する場合のやり方を説明します。

まず、画面左上のAnimationsをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/43ed12c2-99e1-1cf0-762d-e75694dac462.png)
この画面では、Humanoidモデルに対応した複数のアニメーションをプレビューで確認することができます。
まず、画面右の[Upload Character]から、使用するアセットのFBXファイルをアップロードしてみましょう。
今回のAdventure Characterでは[Mesh]フォルダ内にありました。
![スクリーンショット 2024-05-28 163505.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/989550f5-5ec2-b031-168a-3d92ce577f68.png)
アップロードが完了しました。
画像のように、マテリアルが真っ白の状態でプレビューに配置されます。
ここで、左のアニメーションを選ぶと、アップロードしたモデルでアニメーションが再生されます。
今回は投げるアニメーションが欲しいので、検索窓にThrowと入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/b73e31d1-5654-1c75-5d55-e517edf37c15.png)
ちょうどよいアニメーションがあったのでこの[Throw]を使用します。
右に調整可能なパラメーターがあります。

Overdrive...アニメーションの速度を変更できます。
Character Arm Space...腕の広げ具合を調整できます。
Trim...アニメーションの再生位置をトリミングできます。
Mirror...アニメーションを左右反転できます。

また、今回はありませんが、

Speed...アニメーションの速度を変更できます。Overdriveと併存しています。この辺はよくわからん。
In Place...その場でアニメーションさせるようにします。
他にもアニメーション毎に操作できるパラメーターがそれぞれ増減します。
自分でいろいろ確認してみてね。

調整が完了したら今度はダウンロードします。
右上の橙色の[DOWNLOAD]をクリックすると、ウィンドウが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/efb48750-562b-9688-f962-16b30d64b8e6.png)
Formatを[FBX for Unity(.fbx)]に、Skinを[Without Skin]に変更してダウンロードします。
これでアニメーションの準備は完了です。
# Step3. Unityへのインポート
ダウンロードしたファイルをUnityのAssetフォルダ内の任意の場所に入れます。
今回はインポートしたアセットのフォルダ内にAnimationというフォルダを作成し、そこに入れました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/7ee4fa9b-53a5-77a2-68bd-76f0fe5a2053.png)
ダンポールのようなアイコンの右にある三角マークを押すと、rootファイルとAnimation Clipが入っていることがわかりますね。
### インポートしたFBXのAnimationTypeを変更する
この工程が躓きポイントです。
まずさっき入れたダンボールをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/07334b64-9cc2-6045-d622-ab3aab03f039.png)
すると、Inspector上に画像のようなメニューが表示されます。
[Rig]をクリックし、Animationt Typeの項目を[Generic]->[Humanoid]へ変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/c67c9b52-20be-b828-44e8-755b49b823e9.png)
最後に[Apply]を押して完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/77e9e440-f01d-d8fa-e2ad-64aa525a5230.png)
すると、このようにfbxファイルAvatarが生成されます。
AnimationClip以外に用はないので、AnimationClipを選択してCtrl+D（もしくはCommand+D）でAnimationClipのみ残してFBXファイルは削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/82764d9d-13ed-f484-3b05-f1d06b871f0a.png)
スッキリ！
# Step4. 動かす
あとは元のアセットに入ってるPrefabにAnimatorコンポーネントをアタッチして元のアセットに入ってるAvatarと適当にAnimator Controller作ってアタッチして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/672cac47-648f-3c7e-b872-cd3c506e8f9c.png)
Animation Clipぶち込んでトリガーとか諸々設定したら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/96479833-e882-4b23-596f-adbefefefbda.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781381/3b38a0ef-0965-c3c7-0d7f-a6b2173ad25d.png)
動いた！

このような感じでMixamoを使用すると簡単に高クオリティなアニメーションを実装することができるのでぜひ試してみてください。

最後のほうに出てきたAnimator Controllerは深みにはまるとかなり沼なので
詳しくなりたい人は根気強く頑張ってください。

Unity Learning Materialsのこの資料がかなり有用なのでおいておきます。
[こんがらがったAnimationControllerを整理する]("https://learning.unity3d.jp/6755/")

## 環境
Unity Editor Version 2022.3.1f1