[Unity] Animation Eventを使いこなそう！

今回はアニメーションにある「**Animation Event**」という機能について色々書いていきたいと思います！

[この記事の対象者] 
・Unity中級者
・アニメーション関係なので、プログラマー/デザイナーどちらも必見！
[この記事の目的]
・Animation Eventを使いこなそう

それではやっていきましょう！



# Animation Event とは？
アニメーションの指定のタイミングでスクリプトの関数を呼ぶことのできる機能です。
以下のようにアニメーションにイベントを設定すると、そのタイミングでスクリプト内の指定した関数が呼び出されます。
<img width="385" alt="スクリーンショット 2018-06-08 9.57.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/c52e2d10-a87c-e2a9-8715-553d58b0eb2c.png">



# Animation Eventでできること
例えば、

- アニメーションに合わせて音を再生する
- アニメーションに合わせてエフェクトを表示する
- アニメーションに合わせて当たり判定をつける

など、**アニメーションに合わせた挙動**を簡単に実装することができます。
これを使いこなせるととても便利です！



# まずはやってみよう

Animation Eventに軽く触れてみましょう。
アニメーションに合わせて表示するテキストの内容を変化させてみたいと思います。


## Animation Eventの設定

今回はAssetStoreにあるこちらのキャラクターデータを用いてやっていきます。
おなじみのデフォルメユニティちゃんです〜
<img width="800" alt="スクリーンショット 2018-06-08 9.52.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/1ea0ab8d-66e8-bbc8-a946-6196063d0d8b.png">

今回はこのアセットに梱包されている「StandA_idleA」というアニメーションを使います。

AssetStoreからインポートし、
Optimize SDKohaku-Chanz -> Animation -> FBX -> StandA_idleA
を選択。
InspectorのEditをクリックしましょう。
<img width="664" alt="スクリーンショット 2018-06-08 9.53.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/d1e258d8-b416-c367-e0b1-0362cce82544.png">

するとInspectorに以下のような内容が出てきます。
<img width="399" alt="スクリーンショット 2018-06-08 9.53.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/9d5adad0-7877-50ea-236e-a0de857b7735.png">

下にスクロールすると、**Events**という項目があります。
これがAnimation Eventです！
<img width="398" alt="スクリーンショット 2018-06-08 9.54.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/36653f57-0546-4aa5-8381-43ae76e4c63f.png">

▶︎をクリックするとEventsの詳細がみれます。
ここでAnimation Eventの編集を行なっていきます。
＋マークのついたボタンでイベントを追加し、ドラッグで任意のタイミングにイベントを設定します。
Functionには呼び出す関数名を入力します。このスクリプトはこのあと書いていきます。
<img width="386" alt="スクリーンショット 2018-06-08 9.54.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/311c5cd9-d684-9992-3bfb-29b2720787b8.png">

今回は以下の図のように４箇所にイベントを追加します。
<img width="385" alt="スクリーンショット 2018-06-08 9.57.411.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/bb005b8e-d9f2-5d2a-f92d-9c6a8f49a402.png">
関数名は左から
`ResetText`, `ShowText1`, `ShowText2`, `ShowText3`
となっています。


## スクリプトの用意

以下のようなコードを用意します。

```AnimationScript.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class AnimationScript : MonoBehaviour {

	public Text text;

	void ShowText1() {
		text.text = "あれ？";
	}

	void ShowText2() {
		text.text = "ここはどこ？";
	}

	void ShowText3() {
		text.text = "おーい！";
	}

	void ResetText() {
		text.text = "";
	}
}
```

先ほどAnimation Eventに指定した関数を書いていきます。
puslicである必要はありません。
やりたい挙動としては、セリフのテキストを
(リセット) -> あれ？ -> ここはどこ？ -> おーい！
というように変化させていく感じです。


## シーンにユニティちゃんとテキストを配置

画面内にユニティちゃんと文字が映るように適当に配置してください。
テキストはUIオブジェクトです。（フォントはお好みで）
<img width="650" alt="スクリーンショット 2018-06-08 10.04.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/d5eb4fb4-aba3-40b6-8ea1-420c68f1c6ee.png">


## スクリプトをつける
Animation Eventで大事なのは、**Animation Eventをつけたアニメーションを含むAnimatorまたはAnimationコンポーネントと同じオブジェクトにスクリプトをアタッチすること**です。
そうでないと関数を呼び出せません！
今回はStandA_idleAをセットした「SampleAnicon」というAnimation Controllerを用意し、Animatorユニティちゃんにアタッチしています。
AnimationScriptの「Text」にはUIで用意したTextをアタッチしておきましょう。
<img width="402" alt="スクリーンショット 2018-06-08 10.02.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/a7f4c241-b63c-1deb-dacb-14412343cdd5.png">


## さぁ再生してみよう！

![gif01.gif](https://qiita-image-store.s3.amazonaws.com/0/250456/98967f4f-7acd-ccf9-c868-6c53397d8e4d.gif)

どうでしょうか？
アニメーションに合わせてセリフテキストが切り替わってますね！


## 自作のアニメーションでも使えます

今回はインポートしたアニメーションでやってみたしたが、もちろん自分で作成したアニメーションにもAnimation Eventは設定できます。

＋マークのついたボタンでイベントを追加できます。
<img width="581" alt="スクリーンショット 2018-06-08 11.20.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/ac966e35-3ff1-0476-03ce-f42f6de12267.png">

イベントマーカーをクリックすると、Inspectorから呼び出す関数を選べるようになります。
<img width="403" alt="スクリーンショット 2018-06-08 11.20.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/2c7df3c0-ecc9-9cdd-369f-ee4ef2f7e19f.png">



# 応用編
Animation Eventの活用例を紹介します。

## 足音をつける
歩くアニメーションに合わせて足音をつけてみます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Animation Eventでアニメーションに足音をつける<a href="https://t.co/CkvPs9w9Gi">https://t.co/CkvPs9w9Gi</a></p>&mdash; ゆうな@AR会 (@yun_ar_1107) <a href="https://twitter.com/yun_ar_1107/status/1004916745423880193?ref_src=twsrc%5Etfw">2018年6月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 動的な当たり判定をつける

アニメーションに合わせて当たり判定をつけてみます。

以下の図のように、当たり判定用のCubeオブジェクトを用意しておきます。
今回はわかりやすいように半透明にしておきました。
<img width="410" alt="スクリーンショット 2018-06-08 11.57.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/250456/652e99f4-99ec-4ffa-c9e2-a48528d4d6f9.png">

Animation EventでこのCubeの表示/非表示を切り替えると...
パンチした時だけ当たり判定がONに！
![gif03.gif](https://qiita-image-store.s3.amazonaws.com/0/250456/5b60702f-ae28-a437-5206-8c5c988cd0d9.gif)

これでアニメーションに合わせた当たり判定がバッチリ取れます！
腕を振る効果音や殴る効果音をつければ、さらにそれっぽくなりますね！



# 最後に
Animation Eventを使えば、簡単にアニメーションをうまく活用できるようになるかと思います！
この記事が役に立てば幸いです。



# 追記
最近私がリリースしたゲームで、Animation Eventでのサウンド付けや動的当たり判定を取り込んでいます。
よろしければ遊んでみてくださいね！

### オンライン３D格ゲー「ユニファイト」
![ヘッダー.png](https://qiita-image-store.s3.amazonaws.com/0/250456/0e9c7155-e3be-6dcf-8b38-517dab233754.png)
[Androidはこちら](https://play.google.com/store/apps/details?id=com.YunaTanaka.UniFight&hl=en_AU)
~~iOSは配信準備中です。近日公開予定！~~
iOSもリリースしておりますが、現在公開を停止しております。Androidは今までどおり遊べます。