
キャラクターにアニメーションを付けてるのって難しいですね…

何も1からやることはないよ。
使えるものは積極的に使っていこう!
今回は、『Mixamo』という嬉しいキャラクターとアニメーションを提供しているサイトを利用して、キャラクターにアニメーションを付ける方法を解説します。
▼完成イメージ▼
Unity開発者にとっては、何度もお世話になるサイトなのでしっかり身につけていきましょう。
mixamoの使い方
サインイン
Webブラウザを立ち上げ、『mixamo』と入力し、検索をクリックします
TOPページが開いたら、[Sign Up for Free]をクリックします。

[Create an account]というタブが開きます。
必要事項を入力し、[Create account]をクリックします。

[Verify your identity]というタブが開きますので、先ほど指定したメールアドレスに送られたメールを確認します。

メール本文の6桁のコードをコピーして、先の画面に[Verification code]を入力します。

入力を終えたら、[Resend Code]をクリックします。
これで、[Sign in]は完了です。
キャラクターとアニメーションのダウンロード
『mixamo』からキャラクターとアニメーションをダウンロードします。
画面上部の[Characters]を選択後、好きなキャラクターを選んで、[DOWNLOAD]をクリックします。

[DOWNLOAD SETTING]ウインドウが開きますので、Formatを[FBX for Unity(.fbx)]に変更します。

以下のようになったら、[DOWNLOAD]をクリックします。

ダウンロード先のフォルダに、[〜.fbx]のファイルがあれば完了です。
続いて、アニメーションをダウンロードします。操作手順は先ほどと同様です。
画面上部の[Animations]を選択後、好きなアニメーションを選んで、[DOWNLOAD]をクリックします。

[DOWNLOAD SETTING]ウインドウが開きますので、Formatを[FBX for Unity(.fbx)]に変更します。その他は、任意で変更し、[DOWNLOAD]をクリックします。

ダウンロード先のフォルダに、[〜.fbx]のファイルがあれば完了です。
Unityの設定
ダウンロードしたキャラクターとアニメーションをUnityに取り込んで、動かす所まで設定していきます。
キャラクターとアニメーションのインポート
[Assets]>[Import New Asset…]をクリックして、先ほどダウンロードしたキャラクターとアニメーションのファイル[〜.fbx]を取り込みます。

インポートすると、Projectウインドウに、キャラクター[Worker]とアニメーション[Breakdance 1900]が追加されます。

キャラクターをSceneビューに追加
Projectウインドウのキャラクター[Worker]をSceneビューにドラックして離します。

キャラクターがSceneビューに表示されました。しかしながら、色が付いていません。テクスチャがファイル[〜.fbx]に埋め込まれてしまっていることが原因です。そのため、埋め込まれているテクスチャを取り出す必要があります。
Projectウインドウのキャラクター[Worker]を選択し、Inspectorウインドウの[Materials]>[Textures]>[Extract Textures…]をクリックします。

フォルダが開きますので、Assets内に新しいフォルダを作成します。[Choose]を選択するとTexturesがそのフォルダに保存されます。

[NormalMap settings]画面が表示された場合は、[Fix now]を選択します。

完了すると、Projectウインドウに作成したフォルダ[Textures]の配下にTextureが保存されます。

Sceneビューのキャラクターにも色付いていることを確認します。

同様にMaterialも修正します。
Projectウインドウのキャラクター[Worker]を選択し、Inspectorウインドウの[Materials]>[Materials]>[Extract Materials…]をクリックします。

フォルダが開きますので、Assets内に新しいフォルダを作成します。[Choose]を選択するとTexturesがそのフォルダに保存されます。
Projectウインドウを適宜整理します。
Projectウインドウ下の[+]を選択して、[Folder]をクリックして、フォルダを追加します。

追加したフォルダ[Worker]に、先のTextureやMaterialを入れてまとめます。
後で使いやすいように、キャラクターをプレハブ化します。
Hierarchyウインドウの[Worker]を選択し、Projectウインドウにドラッグします。青色アイコンに変われば完了です。

アニメーションの操作
Animatorで正常に動作するように、キャラクターとアニメーションのAnimation Typeを設定します。
Projectウインドウのキャラクター[Worker]を選択し、Inspectorウインドウの[Rig]>[Animation Type]から、プルダウンメニューで[Humanoid]を選んで、[Apply]をクリックします。

同様に、Projectウインドウのアニメーション[Breakdance 1990]を選択し、Inspectorウインドウの[Rig]>[Animation Type]から、プルダウンメニューで[Humanoid]を選んで、[Apply]をクリックします。

次に、動きを制御するために、Animator Contorllerを追加します。
Hierarchyウインドウのキャラクター[Worker]を選択し、Inspectorウインドウで、[Add Component]>[Animator]をクリックします。

ProjectウインドウにAnimator[WorkerController]が追加されます。

AnimatorにControllerとAvatarを設定します。
Hierarchyウインドウのキャラクター[Worker]を選択し、Inspectorウインドウで、[Animator]の[Controller]にAnimator[WorkerController]をドラッグし、[Avatar]にキャラクター[Worker]内のAvatar(人アイコン)をドラッグします。

Animator Layerで制御するアニメーターを指定します。
ProjectウインドウのAnimator[WorkerController]をクリックして、Animatorウインドウを開きます。Projectウインドウのアニメーション[Breakdance 1990]を選択し、Animatorウインドウにドラッグして追加します。

自動的に、[Entry]と接続されます。
これで、[Entry]したら、アニメーションを再生するという流れができました。
最後に、ループ再生をONにします。
Projectウインドウのアニメーション[Breakdance 1990]を選択し、Inspectorウインドウの[Animation]>[Loop Time]のチェックを入れます。最後に、[Apply]をクリックして確定します。

動作確認
[▶︎]ゲームプレイをクリックします。
指定したアニメーションが再生できれば完了です。お疲れ様でした。