ポストプロセスでラストアタック演出を作る

#はじめに

[Unreal Engine 4 (UE4) その2 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/ue4second)の15日目の記事です。
今回は、Materialが触れるようになると表現の幅が広がって楽しいといった具体例として、
PostProcessを使ったカメラ演出について書きます。
よろしくお願いします。

#想定
16:9ディスプレイにフルスクリーンで行った場合で作ってます。
ズレる場合は、今回作成するMaterialを調整してください。

#作ります
全部で3ステップ！
とっても簡単！

[完成イメージ(サンプル動画)](https://www.youtube.com/watch?v=5y5TYkCe-sQ)


##1,PostProcessMaterialsを作る
今回のキモです。
PostProcessMaterialsの詳細は、以下のドキュメントをご覧ください。
[Unreal Engine 4 Documentation : Post Process Materials](https://docs.unrealengine.com/latest/JPN/Engine/Rendering/PostProcessEffects/PostProcessMaterials/index.html)

###集中線Textureを用意
参考Blog : [Webデザインのタネ](http://oshare.jugem.cc/?eid=742)
記事を参考にこんな感じのテクスチャを用意します。
サイズは、1024*1024で作成しました。
集中線は少なめがオススメです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/9eb67b0b-18df-ac40-557f-4788b0548c31.png" width=50%>

###MaterialParameterCollectionsを作成
MaterialParameterCollectionsの詳細は以下のドキュメントをご覧ください。
[Unreal Engine 4 Documentation : Material Parameter Collections](https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/ParameterCollections/index.html)

以下2つのパラメーターを**ScalarParameter**として作成します。

| Paramter Name | Radius  | Density |
|:-------------:|:-------:|:-------:|
| Default Value |   2     |    4    |


<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/525f2ac8-f01a-9910-1cee-a1cd00dca62b.jpeg">
▲ParameterCollectionsの中身

###Materialを作成
参考Blog : [blog.dalton.gd](http://blog.dalton.gd/overwatch-like-speed-lines/)
こちらのブログを参考に集中線Materialを作成し、シャッターの役割追加したものがこちら

<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/dcaf014a-74cf-74e9-a6fd-f39c91fc2827.png">
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/6ae59f09-0936-f67d-0857-91b056bf9ee1.png">

**TextureSampleには、先ほど作成した集中線Textureをセットします。**

これで、集中線+シャッターの役割を持ったPostProcessMaterialができました。

##2,ClassBlueprintを作成、Timelineでコントロールする
実際の演出を動かす部分となります。
**Actorを継承したClassBlueprint**を作成して、以下の作業をしてください。
名前は、**BP_CutMan**としました。

- PostProcessを用意します。
PostProcessは、Class内にComponentを直接置いて使用します。
**Rendering Featuresタブ内のPost Process Materials**に先程、作成したMaterialをセットします。
演出時にのみPostProcessを表示して欲しいので、**Post Process Volumeタブ内のEnabledをFalse**にセットします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/35f210ec-2899-98ef-d10f-215c044b8e87.png">
<br>

- EventGlaph内で、Timelineを作成します。
**Lengthは、0.51**で作成しています。
以下の2つのfloat型カーブでKeyを打ちます。
 
|    \    | 0秒 | 0.25秒 | 0.50秒 | 0.51秒 |
|:-------:|:---:|:-----:|:------:|:------:|
| Radius  |  2  |   1   |   2    |    2   |
| Density |  4  |   1   |   4    |    4   |

<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/6dbad3da-8d00-7639-837d-5f907b7e0023.png">

- Timelineを呼び出し、ParameterCollectionsを操作する処理を作成します。
今回は、CustomEventとして、"Shot!"を用意し、処理を作成しました。
**PostProcessをEnableにする処理を忘れずに！**
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/19cca806-1b15-ee62-9715-4c3606d0f867.png">
<br>

- "Shot!"イベントを呼び出す。
今回は、Level内に作成したClassBlueprintを配置し、LevelBPから呼び出しています。
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/fce8c754-27d5-6ea0-ac63-584f1edd35e7.png">

動かすとこうなるはずです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/be9ad2cf-7c64-8a24-a66f-4d86c0805a51.gif" width=50%>

動作が確認できました。
これだけでも、使うことはできますが、今回はラストアタックの演出などを想定していますので、もう少しいじります。

##3,扱いやすくする
Timeline終了毎にカメラ切り替え、3回ほど回してみましょう。

###カメラのSpawn処理を用意

- 2つの変数を用意する。

|     Name     |        Type        | Default Value |
|:------------:|:------------------:|:-------------:|
|     Count    |       Integer      |       0       |
| CameraActors | CameraActor(Array) |     None      |

<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/b0917e9d-5068-e687-3eb0-faca94175e7c.png">
<br>

- ArrowComponentを3つ追加します。
Level上に配置した際に調整しやすいようにしておきます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/1382b456-3eeb-f774-c7a2-74d3fe88ffb8.png" width=70%>
<br>

- BeginPlayに処理を書く
各ArrowComponentのTransformにCameraActorをSpawnさせ、変数として保存しておきます。
これで、3つのカメラを用意できます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/d0567955-2922-77bf-552d-262d35887c75.png">
<br>

- Shot!イベントを修正する。
[SetViewTargetWithBlend](https://docs.unrealengine.com/latest/INT/BlueprintAPI/Game/Player/SetViewTargetwithBlend/index.html)を使用して、Shot毎にカメラを切り替え、3回実行したら、カメラをプレイヤーに戻す処理となっています。
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/88a70c59-9bcf-cd8d-aab9-113f46305f03.png">
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/0a03b1f3-accb-afb3-dca6-7216cd1f5665.png">
<br>

- Level上に配置する
配置後、各ArrowComponentを好きな位置に動かしてみましょう。
<img src="https://qiita-image-store.s3.amazonaws.com/0/213936/c6e98d4f-eb1d-30c9-2157-6c9fd0ca70c4.png" width=70%>

そして、動かすとこうなるはずです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/ehgiJoQ5HnA" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">アドカレ用 <a href="https://t.co/glldVr2ZLI">pic.twitter.com/glldVr2ZLI</a></p>&mdash; shiotani (@YuyaShiotani) <a href="https://twitter.com/YuyaShiotani/status/940705258954571776?ref_src=twsrc%5Etfw">2017年12月12日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これで、ラストアタック演出の完成です。

#そして用意したものがこちら
この記事で作成したプロジェクトファイルです。
改良版が入っています。
記事との違いは、ArrowのLocation調整後、Rotationの調整がやりづらかったので、
FindLookAtLocationを使った処理を挟んで、調整しやすくしています。
[Download](https://www.dropbox.com/sh/fohwhmrzlfsf00p/AADA25FKwJKx4k7vv2riUSDja?dl=0)

#最後に
MaterialParameterCollectionsでPostProcessをコントロールしているので、シネマティックツールであるSequencer内で今回の演出を作成することもできます。
[Unreal Engine 4 Documentation : Animating Material Parameter Collections](https://docs.unrealengine.com/latest/INT/Engine/Sequencer/HowTo/TracksMaterialParameter/index.html)

また、MaterialCollectionsではなく、Material内に直接ScalarParamterを置くという手段もありますが、そちらはお好みでどうぞ。

閲覧、ありがとうございました。

明日は、[くらかすさん](https://twitter.com/klcatha0518)の「僕とUE4の出会い」です。
馴れ初め話、楽しみです。