Unityには、キャラクターや3Dモデルのアニメーション効果を実装するAnimatorControllerという機能があります。
AnimatorControllerは複数のアニメーションクリップを制御しており、これを利用することでアニメーションクリップを切り替えたり、複数のアニメーションを組み合わせたりといったことが可能になります。
![スクリーンショット 2019-08-05 12.29.04 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-05-12.29.04-e1564975816109.png)
AnimatorController設定画面
本記事ではAnimatorControllerの基本的な使い方を、Cubeを回転させるアニメーションを作りながら紹介します。
なお、AnimatorControllerを理解するためには前提としてアニメーション機能の基礎知識が必要になるので、以下の「Unity入門 アニメーションを覚える」の記事を見て内容がまだわかっていない場合は、先にそちらの記事を読んでみてください。
AnimatorControllerを開く
前準備として、回転させるCubeを作成してください。
Cubeの設定はデフォルトで構いません。
![スクリーンショット 2019-08-02 20.06.41 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-20.06.41-e1564744382603.png)
Cubeを作成
まずはProjectビューで「Create」→「Animator Controller」を選択してください。
![スクリーンショット 2019-08-02 14.50.03 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-14.50.03-1-e1564725310855.png)
Projectビューでアニメーションコントローラーを作成
Assetsフォルダに新しくファイルが作成されました。これがAnimatorControllerファイルです。
今回は物体が回転するシンプルなアニメーションを作りたいので、AnimatorControllerのファイル名を「Rotate」に変更してください。
![スクリーンショット 2019-08-02 14.50.28 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-14.50.28-e1564725505340.png)
アニメーションコントローラが作成された
AnimatorControllerファイルをダブルクリックすると、Scene画面内にAnimatorの画面が表示されます。
![スクリーンショット 2019-08-02 15.02.13 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-15.02.13-e1564725849885.png)
Animator設定画面
アニメーションを作成する
回転するアニメーションを作成します。
Projectビューで右クリック→「Create」→「Animation」をクリックしてください。
![スクリーンショット 2019-08-02 17.30.29 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-17.30.29-e1564743575782.png)
アニメーションクリップの作成
Assetsにアニメーションクリップが作成されたのでファイル名を「Cube Rotate」に変更し、CubeのInspectorウィンドウにドラッグ&ドロップしてください。
これはアニメーションを作成しただけでは意味がなく、対象となるオブジェクト(今回でいうとCube)に追加して意味を持つからです。
![スクリーンショット 2019-08-02 17.38.24 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-17.38.24-e1564735205686.png)
ドラッグ&ドロップでアニメーションを追加
CubeのInspectorウィンドウにアニメーションが追加されました。
![スクリーンショット 2019-08-02 19.16.09 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-19.16.09-e1564741039249.png)
Inspectorにアニメーションが追加
今はCubeオブジェクトにアニメーションを設定しただけで、アニメーションの中身は空です。
そこでアニメーションに回転の動きを追加していきます。
「Window」メニューから「Animation」を選択してAnimationビューを表示してください。
![スクリーンショット-2019-06-12-17.05.41-e1560326778191 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-06-12-17.05.41-e1560326778191.png)
Animationビューを表示
Animationビューの「Add Property」→「Transform」→「Rotation」の+ボタンをクリックしてください。
![スクリーンショット 2019-08-02 19.40.23 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-19.40.23.png)
Rotateプロパティを追加
以下の画像のようにタイムラインが表示されるので、Rotation.yの1:00のキーフレームの数値を360に変更してください。
![スクリーンショット 2019-08-02 19.39.48 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-19.39.48-e1564742937890.png)
1秒でY軸を中心に1周させる設定
これはCubeは1秒間でY軸を中心に1回転(360°回転)する設定です。
Sceneを実行してみましょう。
![回転1 - STYLY](https://styly.cc/wp-content/uploads/2019/07/回転1.gif)
Cubeは1周だけ回転
設定通り、Y軸を中心に1回転しました。しかし1回転するとアニメーションは終了します(上の画像はGIFなので繰り返し表示されています)。
Stateを作成する
それでは、AnimatorControllerの使い方に入ります。
Animator画面の何もないところを右クリックして「Create State」→「Empty」を選択してください。
![スクリーンショット 2019-08-02 15.08.51 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-15.08.51-e1564726201697.png)
Emptyを選択
「New State」という長方形が作成されました。
![スクリーンショット 2019-08-02 15.09.04 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-15.09.04-e1564726263755.png)
New Stateが作成された
「New State」も含めてAnimator画面内にある長方形がStateというものです。
Stateとはアニメーションクリップを格納し様々な設定をする機能です。Stateの設定を調整することで、アニメーションの設定をすることができます。
今「Entry」Stateから「New State」Stateに矢印が伸びています。これを遷移と呼びます。
遷移はアニメーションの実行順序を指定するものなので、上の画像で言うと「Entry」の次に「New State」のアニメーションが実行されます。
各Stateの役割
ここで最初から用意されているStateについて、それぞれのStateの役割を簡単に解説します。
Entry
Entryは最初にアニメーションの遷移がスタートするStateです。
アニメーションの最初に設定したい動作はこのEntryから遷移させるようにしましょう。
![スクリーンショット 2019-08-02 16.24.03 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-16.24.03.png)
Entry
Any State
Any Stateはどの状態からでも好きな状態に遷移できるStateです。
![スクリーンショット 2019-08-02 16.20.12 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-16.20.12.png)
Any State
なので、Any Stateから遷移を以下のように伸ばせば、好きなように遷移可能になります。
![スクリーンショット 2019-08-02 17.00.55 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-17.00.55-e1564732923139.png)
どこからでも遷移が可能
Exit
Exitに遷移すると最初のEntryに戻ります。
![スクリーンショット 2019-08-02 16.20.23 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-16.20.23.png)
Exit
つまり1連のアニメーションの最後のStateをExitに遷移させればアニメーションをループさせることができますね。
AnimatorControllerの使い方
各Stateの役割を理解したところで、先ほど新規作成した「New State」を「Cube Rotate」に変更します。
![スクリーンショット 2019-08-02 17.06.35 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-02-17.06.35-e1564733332234.png)
ステートの名称変更
アニメーションをループさせる
次はStateの設定でアニメーションをループさせます。
「Cube Rotate」Stateを右クリックして「Make Transition」をクリックしてください。
![スクリーンショット 2019-08-05 12.03.17 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-05-12.03.17-e1564974253316.png)
Make Transitionを選択
白い矢印が表示されるので、「Exit」Stateにつなげてください。
![スクリーンショット 2019-08-05 12.03.25 - STYLY](https://styly.cc/wp-content/uploads/2019/07/スクリーンショット-2019-08-05-12.03.25-e1564974346619.png)
Exitに遷移
Exitは最初のEntryに戻るので、これで連続して回転し続けるアニメーションができたはずです。
Sceneを実行して確認してみましょう。
![連続回転 - STYLY](https://styly.cc/wp-content/uploads/2019/07/連続回転.gif)
回転し続けるアニメーション完成
アニメーションがループしていますね。
最後に
Unityでアニメーションを設定する方法をわかりやすく解説する為に、出来るだけシンプルなサンプルで記事を書いてみました。
複雑で難しく見えるアニメーションも、設定するオブジェクトの数が多かったり設定が細かいだけだったりします。
より詳しいAnimatorControllerの使い方も紹介したいのですが、分量が多くなりそうなので本記事はここまでとします。今後続編を出しますのでお楽しみに!