AnimNotifyを使用して当たり判定を可視化してみる

# はじめに
この記事は[Unreal Engine 4 (UE4) その1 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ue
 "「Unreal Engine 4 (UE4) その1 Advent Calendar 2021」")の11日目の記事になります。

AnimNotifyを使用した当たり判定の可視化について解説したいと思います。
最後までお付き合いよろしくお願いします！

# 難易度
甘口
初心者でも簡単に実装する事が出来ます。
気軽に挑戦してみてください。

# 検証環境
Unreal Engine 4.27.2

# AnimNotifyについて

アニメーション制御をあまりしていない人だと馴染みがないかもしれませんが
アニメーションにエフェクトやサウンドを仕込んだりするあれです。
今回はこの呼び出し処理を自作します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/4f886ab8-9823-f71d-c313-22a0a0f0d0c3.png)

# 実装手順

## AnimNotifyの生成

AnimNotifyとAnimNotifyStateがあり
今回はAnimNotifyStateを選択し「ANS_ShowCollision」とリネームしましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/bedc8786-8479-2cef-89c8-c45d5785efb3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/0a50091d-bd59-466d-189c-8f3d3c5de7b1.png)

## AnimNotifyStateの呼び出し
適当なモーションを開き
「通知ステートを追加」を確認すると「ANS_ShowCollision」が追加されている事がわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/3c8b32aa-ed47-f0ef-a5d3-13a9d37c1519.png)

アニメーションの指定フレーム間だけ更新するという処理が簡単に実装する事が出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/1ff22b0a-9c69-c766-4a6c-07edf81e657a.png)

## 【補足】AnimNotifyについて

AnimNotifyは1フレームだけ呼び出しが可能な通知イベントです。
特定のフレームに音を再生するなどで使用される事が多いです(例 : 材質によって足音を変えたい時など...)
基本的な実装方法はAnimNotifyStateと同じなので今回は省略いたします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/b2d2427d-0500-1faf-bcab-46dc5e53766a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/561bdb9b-4701-35bc-b8e7-7c1f96777168.png)

## AnimNotifyStateの実装

各関数をオーバーライドする事で機能を実装する事が出来ます。

「Received Notify Begin」  ・・・通知が開始した時に呼び出される。
「Received Notify End」    ・・・通知が終了した時に呼び出される。
「Received Notify Tick」   ・・・開始と終了のアニメーションが更新されている間呼び出される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/1938a31e-2ce5-4027-205d-58be02d9e168.png)

今回は当たり判定を可視化する機能を実装するので、
下記、関数・変数を追加してください。
※ アニメーション上で操作を行いたいので「編集可能状態」にする事を忘れずに！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/25be49b8-07a2-6884-638d-a392fbbd84c0.png)

実装はとても簡単
「DrawDebugSphere」関数を呼び出し以下のように実装してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/389b2fef-54fc-a684-246f-58d6351e3c22.png)

DrawDebug...を関数で検索すると
色々な形状のデバッグ表示を行う事が出来るのでどんどん活用していきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/31931c8f-ce24-6786-0bcd-17fad50f4213.png)

アニメーションを確認するとグレイマンの原点に白い球体が表示されている事がわかります。
![ezgif.com-gif-maker (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/d53b24b4-4f2d-a37b-51d9-eeb1a0551f45.gif)

先ほど編集可能にした変数群が詳細パネルに表示されているで
各アニメーションに適したパラメータを設定してあげましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/2eab6c31-fe56-269e-401c-2c286624d94d.png)

上記パラメーターを調整しながら実装した例がこちらになります。
各アニメーションに合わせてデバッグ用のコリジョンが生成されているのがわかります。
![ezgif.com-gif-maker (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/980013/842c7c7b-debf-94d0-6597-685821badfbc.gif)

今回の解説はここまでです。
現状ではコリジョンを可視化しただけで、可視化した場所にコリジョンを生成する必要があります。
生成方法については別の記事でまとめますのでお待ちいただければ幸いです。

# あとがき

今年もAdventCalendarに参加出来て楽しかったです。
来年からは自作ゲームで使用している技術解説もどんどん出していこうと思っているので
ぜひよろしくお願いいたします！！