Blockが消えるのと出現するのをアニメーションさせてみる


[前回](http://qiita.com/mokemokechicken/items/7d9abe11e99d2235092b) はとにかくBlockを消して出現するようにしてみましたが、
今回は少しアニメーションするようにしてみます。

ポイント
======

* Animationを作成する
* AnimatorでBlockのAnimationを管理する
* Scriptで穴あけビームが当たったらAnimatorの状態を遷移させる

Animationを作成する
==============

まず Hierarchy の BlockPrefab -> Cube を選択しておきます。
次に Window → Animation として、Animation編集画面を表示します。

![Window_と_Menubar.png](https://qiita-image-store.s3.amazonaws.com/0/11124/ac7db063-f91b-fc5e-3162-4ebf1cffb9dd.png "Window_と_Menubar.png")


そのAnimation Windowで 「Add Curve」を押すとファイル名を決めるダイアログが表示されるので
BlockAnimationとでもしておきます。

![Create_New_Animation_と_UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita_と_ターミナル_—_screen_—_155×33.png](https://qiita-image-store.s3.amazonaws.com/0/11124/771584fc-d775-97d5-21c4-11c77caa7451.png "Create_New_Animation_と_UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita_と_ターミナル_—_screen_—_155×33.png")

ここで保存すると先ほど選んだ Cubeに対して、Animator Componentと今保存した BlockAnimationがStateと共に関連付けられるようです（後で少しいじります）。

もう一度、[Add Curve] を押して、 Transform -> Scale (の右側の+）を選びます。
![UnityEditorInternal_AddCurvesPopup_と_UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/11124/70df432b-7fdd-9576-3a51-7152eb7687e5.png "UnityEditorInternal_AddCurvesPopup_と_UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita.png")


ここで時間毎の形状についてのいろいろな値の変化を指定することができます。
下の方の Curvesをクリックして、 １秒後にScaleが x,y,z全て0になるようにしてみます。
![UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/11124/7c7644ae-7b46-65c7-1ead-259421181d9b.png "UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita.png")

また、４秒後と１０秒後にKeyFrameを追加して、４秒後から１０秒後にかけてゆっくりScaleを戻すようにしてみます。
![UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita_と_ターミナル_—_screen_—_155×33.png](https://qiita-image-store.s3.amazonaws.com/0/11124/ae9c9f33-8f08-e31f-fc9b-f43fe7dde117.png "UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita_と_ターミナル_—_screen_—_155×33.png")

AnimationのWindowの操作は私はよくわかってないので見よう見まねです。。。（いずれはUnityちゃんの動作もここで頑張って作るのだろうか。AssetStore探索の旅はまだ成果ないですし。。）

とりあえず Scaleについて x,y,z ともに下記のような変化をするように設定してみます。

![UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita_と_ターミナル_—_screen_—_155×33.png](https://qiita-image-store.s3.amazonaws.com/0/11124/542e4f2e-2b06-a79d-f729-f79f88ae7ef1.png "UnityちゃんがBlockを破壊して、しばらくしたら元に戻るようにする_-_Qiita_と_ターミナル_—_screen_—_155×33.png")

AnimatorでBlockのAnimationを管理する
========================

次に、Animatorタブを開くと以下のようになっています。 
![demo1_unity_-_RoadRunner_-_Web_Player.png](https://qiita-image-store.s3.amazonaws.com/0/11124/5a6ad02e-e128-058f-77db-b87c3772993d.png "demo1_unity_-_RoadRunner_-_Web_Player.png")

一つ「Normal」というStateを作成し、そのNormalを右クリックして「Set As Default（初期状態）」しておきます。
また、BlockAnimationからNormalに対してTransitionを作ります。

![demo1_unity_-_RoadRunner_-_Web_Player.png](https://qiita-image-store.s3.amazonaws.com/0/11124/1e59cc47-05f7-6c5d-30f1-5dc30df6dfbd.png "demo1_unity_-_RoadRunner_-_Web_Player.png")


そのTransitionを選択して、 Transition Duration や Exit Time を 0 に設定します。

![demo1_unity_-_RoadRunner_-_Web_Player.png](https://qiita-image-store.s3.amazonaws.com/0/11124/e0324b28-2e30-2d91-81de-654ee6edc685.png "demo1_unity_-_RoadRunner_-_Web_Player.png")

こうしておくと、BlockAnimationに遷移したら１度Animationが再生され、
その後またNormalに戻るようになります。

Scriptで穴あけビームが当たったらAnimatorの状態を遷移させる
=====================


BlockControl.csの`HitGun`メソッドを以下の１行に置き換えます。

```cs:BlockControl.cs
using UnityEngine;
using System.Collections;

public class BlockControl : MonoBehaviour {
	private Animator animator;

	// Use this for initialization
	void Start () {
		animator = GetComponent<Animator>();
	}
	
	// Update is called once per frame
	void Update () {
	}

	void HitGun() {
		animator.Play("BlockAnimation");
	}
}
```


これで実行すると、穴を開けたら小さくなって消滅し、しばらくしたら復元するようになります。

さいごに
=======

無いよりはマシ程度のアニメーションがつくようになりました。

* [今回のSource](https://github.com/mokemokechicken/UnityChanRoadRunner/tree/demo1e)
* [WebPlayer:demo1e](https://dl.dropboxusercontent.com/u/21300511/UnityRoadRunner/demo1e/demo1e.html)