【Unity】ノンコーディングでオブジェクトを動かしたい【Animation】

# 前説

## 当記事の動画解説はこちらから
[【unity】Animationを使って、ノンコーディングでオブジェクトを動かしてみよう
](https://youtu.be/0IhQ0NLz9Go)
<img width="488" alt="サムネ用.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/55949741-5db5-718e-ed3d-e9e60e2403f4.png">


さて、
[【Unity】いったりきたりするオブジェクトをつくる](https://qiita.com/sanpeita/items/674f8b1b07fdc37d4a8a)のように、
わざわざスクリプトに書かなくても、
Cubeの移動などはAnimationクリップでかんたんに移動させることができます。
また、Animationクリップを作成することによって、
自動的にアニメーターコントローラーなどアタッチされるため、
ぜひ有効活用していきたいコンポーネントのひとつです。

下図は、今回の作例です。
<img width="1436" alt="スクリーンショット 2020-07-06 10.04.27のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8142ae1a-e6d1-0120-b797-eeaf201ffddc.png">

## 応用すればこうなる

応用すれば、要スクリプト必須ですが、
動いている横方向のオブジェクトに、プレイヤーを載せることもできます。
(今回の記事では解説しません)
<img width="609" alt="スクリーンショット 2020-07-06 11.54.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ee369a8b-b0e5-6591-9383-4644ae2aba82.png">
下記動画は、その様子です。(解説動画ではありません)
### [動く床に擬似プレイヤーを載せてみた](https://youtu.be/u8znJyWeYtQ)

---

## 参考元
### Unityユーザーマニュアル
#### Animationウィンドウの利用法
https://docs.unity3d.com/ja/2018.4/Manual/animeditor-UsingAnimationEditor.html
#### ゲームオブジェクトのアニメーション化
https://docs.unity3d.com/ja/2018.4/Manual/animeditor-AnimatingAGameObject.html

---

# 準備編

[Window]メニューから、[Animation]を選択して、さらに[Animation]を選択する。
<img width="443" alt="スクリーンショット 2020-07-06 9.56.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4093faf7-1e42-1292-1057-3611eb4ad65e.png">

下図のように、Animationウィンドウが表示されるので、わかりやすい場所にドッキングする。
ドッキングの仕方がわからない場合は、[【unity】ウィンドウタブの動かし方](https://qiita.com/sanpeita/items/ee77753aaec9187db348)を参照。
<img width="706" alt="スクリーンショット 2020-07-06 9.57.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d409632f-3f51-00f4-3692-f1960f37efc5.png">

動かしたいオブジェクトを選択する。
今回は、「MoveCube」という名前で、Cubeを動かす。
<img width="440" alt="スクリーンショット 2020-07-06 9.57.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/92944e1c-f29e-7b98-4594-30fc733154af.png">

Animationウィンドウで、[Create]ボタンを押下する。
<img width="706" alt="スクリーンショット 2020-07-06 9.57.07のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/543608af-88ff-265d-5811-df9df0f0bd1e.png">

下図のウィンドウで、アニメーションクリップ名を決める。
(この名前で、アニメーターコントローラーのアセットも作成される)
<img width="396" alt="スクリーンショット 2020-07-06 9.57.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2d46ac98-2af8-5849-9dd0-ba81bc154958.png">

今回は、オブジェクトと同じ名前で、「MoveCube」という名前にした。
<img width="345" alt="スクリーンショット 2020-07-06 9.58.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/af4cfbb2-da0f-b8f6-69b5-d7d6cf680ef1.png">

Animationウィンドウも、下図のように変わる。
<img width="713" alt="スクリーンショット 2020-07-06 9.59.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4035a12f-95e5-1059-1c6a-7c87e20fdaea.png">

なお、下図のようにアニメーターコントローラーも、アセット内に作成されるが、今回は使用しない。
<img width="715" alt="スクリーンショット 2020-07-06 9.59.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/31a3a2fd-3c03-b124-c664-0e9399387fc7.png">

以上が、オブジェクトをアニメーションさせるための準備となる。
次からは、実際にオブジェクトを動かしてみよう。

---

# 実践編

今回は、

- 1秒で目的の場所へ「MoveCube」が移動して
- 1秒で元の場所へ戻る

アニメーションを作っていく。

まずは、下図の枠内に「60」と入力する。
(ミリ秒なので、60ミリ秒 = 1秒 という意味)
<img width="672" alt="スクリーンショット 2020-07-06 10.02.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/6b92814d-153e-5a1c-283d-b1ac936e0d70.png">

下図のレコードボタンを押下する。
(レコードボタンを押下することによって、その時間のオブジェクトの位置などを記録(レコード)することができる)
<img width="677" alt="スクリーンショット 2020-07-06 10.02.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/438adfdd-aa25-5db0-df33-4cb0856f6b2f.png">

移動させたい場所へオブジェクト(今回は「MoveCube」)を移動させたり、TransformコンポーネントのPositionの値を変更する。
(下図は、編集の都合でヒエラルキーウィンドウやインスペクターウィンドウの配置がデフォルトと異なるので、混乱しないように注意)
<img width="727" alt="スクリーンショット 2020-07-06 10.03.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/daaabc6b-548b-bcfa-204e-86ae6c08eef9.png">

変更できたら、下図のように、Animationウィンドウのレコードボタンを忘れずに押下する。
押下前
<img width="684" alt="スクリーンショット 2020-07-06 10.03.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/05a9d349-0be9-cf5c-a0cf-6b97f3042c0f.png">
↓　このように、赤い表示がなくなる。
<img width="687" alt="スクリーンショット 2020-07-06 10.03.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/33bb9c29-f843-f1d1-8204-3fe2d263b7be.png">

レコードボタンの押し忘れには注意すること。

再生ボタンを押下すると、オブジェクトの動きを確認することができる。
<img width="1436" alt="スクリーンショット 2020-07-06 10.04.27のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a9435e57-fd1e-5b2a-2b3d-73c52ddaf1af.png">

同様に、
「120ミリ秒(2秒)後に、元の場所へ戻る」ようにしたい。
あえてスクショには枠などを設けていないので、上のページを見ながらチャレンジしてほしい。

「120」を入力する。
<img width="713" alt="スクリーンショット 2020-07-06 10.05.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2afa6140-abb8-ad06-b580-4b7608e09727.png">

レコードボタンを押下する。
<img width="717" alt="スクリーンショット 2020-07-06 10.05.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3be0b6b5-06c3-2aa9-91b4-1a076127fce8.png">

オブジェクトを、元の場所へ戻るよう、Positionの値を変更する。
(下図の例では、x,y,zともに0,0,0とした)
<img width="725" alt="スクリーンショット 2020-07-06 10.05.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d824827a-66ab-d40e-b61f-95dc333e4228.png">

レコードボタンを押下して、レコード状態を解除する。
<img width="713" alt="スクリーンショット 2020-07-06 10.05.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/05efd815-8ece-e693-50e4-32f6ff6f8bf4.png">

再生ボタンを押下して、オブジェクト(今回なら「MoveCube」)がいったりきたりすれば成功。

---

# おまけ編

オブジェクトのpositionだけでなく、rotationやscaleも変更することができる。
Animationウィンドウの[AddProperty]を押下すると、各項目が表示される。

<img width="564" alt="スクリーンショット 2020-07-06 10.06.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4d4d585b-e505-4acf-0ed6-7b006e3c946e.png">
<img width="555" alt="スクリーンショット 2020-07-06 10.06.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/61c2152a-fe8f-cb53-0c8b-f9b7e67c373e.png">

下図は、RotationとScaleをそれぞれ追加したもの。
<img width="713" alt="スクリーンショット 2020-07-06 10.06.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3063c906-f544-1a1e-3e8e-01bfe112a76b.png">

時間を指定して、レコードボタンを押下して設定すれば、位置だけでなく、
回転やサイズも変更することができる。
ぜひチャレンジしてみよう。
<img width="728" alt="スクリーンショット 2020-07-06 10.07.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/890134e9-eaaa-0a10-69c3-1e4053819a55.png">

---

# animation に関する応用テクニック
- [【Unity】任意のタイミングでanimationを発動させるやり方【animation／animator】](https://qiita.com/sanpeita/items/3864578e852801c15f80)
- [Animation Eventの使い方](https://qiita.com/sanpeita/items/a11348e47f256b8d1cf3)
- [AnimationEventレシピ ~アニメーションで当たり判定を切り替える~](https://qiita.com/mino4273/items/ef58de54b585b804f08c#_reference-2175f659a2f8f8442ba0)(@mino4273
)