Unity2D: 粗いアニメーションにおける正確な当たり判定の設定

本記事は、少ない画像で表現されるアニメーションの当たり判定を正確に表現しようという内容の記事です。
力技の部分が多いため、多くの画像を用いたアニメーションには不向きだと思いますし、より効率的な方法もあると思いますので、あくまでこんなアプローチもあるよということをご理解ください。

# 使うとよい状況
PollygonCollider2DとAnimationEventというものをひとつづつ設定するため、以下の状況においては良いアプローチだと思います。
・アニメーション内で当たり判定の大きな変化をさせたい
・既存のコライダーでは表現しにくい当たり判定をつくりたい
・アニメーションを表現する画像数が少ない
・当たり判定を画像通りに正確に表現したい
・プログラムをあまり書きたくない、書けない

※ただし、今回使うコライダーは非常に重いため多用はしない方が良いです


# 作り方
## 事前準備
まずは、画像を連続で表示するアニメーションを用意し、Sceneに持っていきます(自前のものでも、AssetのものでもOKです)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/09884273-8fb7-7732-b827-288641026568.png)

## コライダーの生成
次に、PollygonCollider2Dを使用してコライダーを作ります。先ほどシーンにもっていったアニメーション付きオブジェクト([オブジェクト名]_0のようになっているもの)を選択してください。

ここで、「SpriteRenderer」コンポーネントは以下のようになっていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/a1751bdc-8afb-0bf8-8ab9-90546e1bfc16.png)

ここからが独特な操作になります。以下の2つを画像枚数分繰り返してください。
①:「Sprite」の画像を前の画像の一つ後の画像に切り替える(画像だと、「example_0」から「example_1」)。
__※ただし、最初は「〇〇_0」にする。__
②:「PollygonCollider2D」を一つ追加する

すべての画像について行うと、たくさんのPollygonCollider2Dがついている状態になると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/438c1db7-2a68-26f0-887d-14a94915d1a7.png)

## コライダーの切り替え
まずは、以下のスクリプトを作ります。
~~~csharp:ChangeCollider.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ChangeCollider : MonoBehaviour
{
    public PolygonCollider2D[] colliders; 

    private void Start()
    {
        DontDestroyOnLoad(this.gameObject);
        foreach (var collider in colliders)
        {
            collider.enabled = false;
        }
    }

    public void ActivateCollider(int index)
    {
        foreach (var collider in colliders)
        {
            collider.enabled = false;
        }

        if (index >= 0 && index < colliders.Length)
        {
            colliders[index].enabled = true;
        }
    }
}
~~~

このスクリプトを先ほどのPollygonCollider2Dが付いたオブジェクトにアタッチします。アタッチしたスクリプトには、「Colliders」プロパティがありますので、そこの数字を0から画像の総数に変えてから、右矢印のようなボタンを押します。
するとColliderをアタッチする枠が出てくるので、先ほど作ったコライダーを上から順番にアタッチします。
全て行うと下の画像のようになると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/47a1c484-0a87-3bf4-b3c0-bb74f63b99ca.png)

## animationEventの設定
最後に、アニメーションの切り替えを設定します。animationファイルを開き、次の画面を出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/c36c9204-9c76-eb12-3397-2b7d62d125d5.png)
旗みたいなボタン、「AddEvent」を押して、Eventを画像ごとに設定します。上の方にある数字を切り替えると画像が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/d2f7fbb4-6b0b-8fc5-a0f7-d08932315404.png)
作成したEventのマークを押すと、いろいろ設定できる画面がインスペクターに出てくるので、すべてのEventにおいてFunctionに「ActivateCollider」を設定します。__ただし、「int」の値は最初を0として1ずつ増やしてください。__
(もし入力欄が出てきたら、そのまま「ActivateCollider」と入力してください。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/7dfb1a8c-9c1d-9b30-a865-ef08c2181809.png)

この状態で動かしてみると、きちんと当たり判定が変わっていることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/dc7c6d36-be65-71d3-85dc-0d1b15915a28.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3857975/bd5126b5-c441-036d-5f60-9c89eb49425f.png)




これにて完成です！！