90
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-08

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

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

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

Animation Event とは?

アニメーションの指定のタイミングでスクリプトの関数を呼ぶことのできる機能です。
以下のようにアニメーションにイベントを設定すると、そのタイミングでスクリプト内の指定した関数が呼び出されます。
スクリーンショット 2018-06-08 9.57.41.png

Animation Eventでできること

例えば、

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

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

まずはやってみよう

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

Animation Eventの設定

今回はAssetStoreにあるこちらのキャラクターデータを用いてやっていきます。
おなじみのデフォルメユニティちゃんです〜
スクリーンショット 2018-06-08 9.52.51.png

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

AssetStoreからインポートし、
Optimize SDKohaku-Chanz -> Animation -> FBX -> StandA_idleA
を選択。
InspectorのEditをクリックしましょう。
スクリーンショット 2018-06-08 9.53.34.png

するとInspectorに以下のような内容が出てきます。
スクリーンショット 2018-06-08 9.53.59.png

下にスクロールすると、Eventsという項目があります。
これがAnimation Eventです!
スクリーンショット 2018-06-08 9.54.21.png

▶︎をクリックするとEventsの詳細がみれます。
ここでAnimation Eventの編集を行なっていきます。
+マークのついたボタンでイベントを追加し、ドラッグで任意のタイミングにイベントを設定します。
Functionには呼び出す関数名を入力します。このスクリプトはこのあと書いていきます。
スクリーンショット 2018-06-08 9.54.34.png

今回は以下の図のように4箇所にイベントを追加します。
スクリーンショット 2018-06-08 9.57.411.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オブジェクトです。(フォントはお好みで)
スクリーンショット 2018-06-08 10.04.40.png

スクリプトをつける

Animation Eventで大事なのは、Animation Eventをつけたアニメーションを含むAnimatorまたはAnimationコンポーネントと同じオブジェクトにスクリプトをアタッチすることです。
そうでないと関数を呼び出せません!
今回はStandA_idleAをセットした「SampleAnicon」というAnimation Controllerを用意し、Animatorユニティちゃんにアタッチしています。
AnimationScriptの「Text」にはUIで用意したTextをアタッチしておきましょう。
スクリーンショット 2018-06-08 10.02.10.png

さぁ再生してみよう!

gif01.gif

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

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

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

+マークのついたボタンでイベントを追加できます。
スクリーンショット 2018-06-08 11.20.09.png

イベントマーカーをクリックすると、Inspectorから呼び出す関数を選べるようになります。
スクリーンショット 2018-06-08 11.20.21.png

応用編

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

足音をつける

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

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

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

以下の図のように、当たり判定用のCubeオブジェクトを用意しておきます。
今回はわかりやすいように半透明にしておきました。
スクリーンショット 2018-06-08 11.57.31.png

Animation EventでこのCubeの表示/非表示を切り替えると...
パンチした時だけ当たり判定がONに!
gif03.gif

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

最後に

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

追記

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

オンライン3D格ゲー「ユニファイト」

ヘッダー.png
Androidはこちら
iOSは配信準備中です。近日公開予定!
iOSもリリースしておりますが、現在公開を停止しております。Androidは今までどおり遊べます。

90
75
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
90
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?