UE4でいわゆるRTSの探索マップの原型を作る

#UE4でいわゆるRTSの探索マップの原型を作る

##目的
RenderTargetの機能を利用して、プレイヤーが操作するキャラクターが移動するとともに背景が現れるようなゲーム要素の作成をしてみよう

結果画面
![ScreenShot00006.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/3d03c2da-83bf-945c-a3b6-c29c78acb475.jpeg)

##環境
UnrealEngine 4.15.2

##手段
１．見下ろしシューティングのサンプル（TwinStick)を利用します。
![SnapCrab_TwinStick - アンリアルエディタ_2017-5-15_2-33-43_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/2dd8bdbf-e9c3-8f07-88f8-dda25385f3ee.png)


２．モードのウィンドウから平面を選択して配置します。
サイズを1000x1000にするので、XYにスケールをかけてマップやキャラクターが隠れるぐらい上に上げます。（大体400ぐらいにしました。）
アクタはブループリントに変換して、保存しておきましょう。（仮に名前はBP_Planeに変更しておきました。）

![ScreenShot00006_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/ecacbd06-367a-2c11-f406-045bd75c7fbe.jpeg)

（サイズ変更）
![SnapCrab_NoName_2017-5-15_1-16-32_No-00_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/9067ff1f-2f93-acb9-13f5-9b3ceb2fb5de.jpeg)

４．同フォルダで右クリックして、メニューからマテリアル・テクスチャのCanvasRenderTarget2Dと、マテリアルを作成しておきます。（仮にT_CanvasとM_Canvasにしておきます。）

（Canvas)
![ScreenShot00006_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/e8146e43-21a6-d4d5-d16b-0494f303046a.jpeg)


５．T_Canvasの設定を平面のサイズと同じ1000x1000にして、Clamp設定に変更して、HDRも使わないのでチェックを外しておきます。

![SnapCrab_NoName_2017-5-15_1-32-11_No-00.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/624a013e-69fb-fa4c-5f4c-3432160de45f.jpeg)


６．M_CanvasにはT_Canvasをドラッグ＆ドロップのあと、BlendModeをTranslucentに変更し、ベースカラーとオパシティにそれぞれRGBのピンとAlphaのピンをつなげておきます。

![SnapCrab_M_Canvas_2017-5-15_1-33-5_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/1654e336-bbea-0fa9-5379-25b4c041736a.png)


７．BP_PlaneにM_Canvasのマテリアルを紐づけましょう。CanvasRenderTarget2Dのリファレンスを持てるように変数をMyCanvasという名前で設定しておきます。
コンパイル後、デフォルト値にT_Canvasを入れておきましょう。

（マテリアル設定）
![SnapCrab_NoName_2017-5-15_1-41-53_No-00.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/6c4001a2-b42e-9444-f117-bf17efabccd4.jpeg)

（変数設定）
![ScreenShot00006_4.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/860d9b89-5e07-7f88-8677-59b26bab40b9.jpeg)



８．さて、TwinStickPawnのほうを進めましょう。
イベントTickからつながるSequenceにピンを追加して、BP_Planeアクターすべて検索し、ForEachLoopで回しておきます。

（Sequenceピン追加）
![SnapCrab_NoName_2017-5-15_1-46-59_No-00.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/dfc3b3be-4e4a-ab4c-2a70-9d8e4acf11d7.jpeg)

（Class取得してForEarchで回す）
![SnapCrab_NoName_2017-5-15_1-49-12_No-00.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/4c71b746-683f-4851-3c8d-8451e5e101bf.jpeg)

９．BP_Planeで下記のような関数を作りました。
（LineTraceでとったほうがいいかもしれませんが、うまく取れなかったので方向転換、単純な内容なので今回は作成しました。）

![SnapCrab_NoName_2017-5-15_1-54-57_No-00.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/e3171b39-43f5-3d99-376a-640334be3768.jpeg)


１０．GetXYPlaneHitUVの中身は下記のような形です。
位置とオフセットとBP_Planeのリファレンスを入力にとって、当たった時のUVを返します。

（全体像）※エリアは平面のバウンディングボックスから取得しています。
![SnapCrab_TwinStick - アンリアルエディタ_2017-5-15_2-16-9_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/8f442007-0ec8-4d2b-02be-69de7fa7b9de.png)


１１．Hitした後はBeginDrawCanvastoRenderTargetとEndDrawCanvastoRenderTargetを設定、DrawPolygonで指定の半径でポリゴンを透明色で書いてしまいます。
（アルファはカラーピッカーの高度な設定で設定できます。）

![SnapCrab_NoName_2017-5-15_2-0-11_No-00.jpg](https://qiita-image-store.s3.amazonaws.com/0/181347/60b9f81c-ffea-bd56-229e-4ff56173bd86.jpeg)


１２．一度プレイしてみましょう。
カメラが埋まってしまったので、BP_PlaneのStaticComponentに設定されているコリジョンプリセットをNoCollisionに変更します。

（Planeの下に入ったとたんこんな絵に）
![SnapCrab_TwinStick ゲームプレビュー Standalone (64-ビットPCD3D_SM5)_2017-5-15_2-7-33_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/2e976a98-a17b-e20f-ecea-ebf91585d1dc.png)


１３．ひとまずうまくいったようです。
![SnapCrab_TwinStick ゲームプレビュー Standalone (64-ビットPCD3D_SM5)_2017-5-15_2-17-58_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/9cafd220-2fc8-d36e-5e70-4c3e7c4d6f69.png)

（おや？再スタート時にRenderTargetがクリアされていないので、空いたままになっています。）
![SnapCrab_TwinStick ゲームプレビュー Standalone (64-ビットPCD3D_SM5)_2017-5-15_2-18-32_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/0764537b-27d6-ac12-6df9-48e03bbf88b1.png)

１４．BP_PlaneのBeginPlay時にRenderTargetを塗りつぶしてクリアしてしまいましょう。
![SnapCrab_イベントグラフ_2017-5-15_2-27-22_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/a2ec55b5-9415-6051-b09e-8d5773c04830.png)


１５．今度こそうまくいきました。
ゲーム制作時のアイデア実現のファーストパスとして如何でしょうか。
![SnapCrab_TwinStick ゲームプレビュー Standalone (64-ビットPCD3D_SM5)_2017-5-15_2-28-29_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/2aaaca4d-fac8-aed4-3f23-a9348b39be47.png)
↓リスタート
![SnapCrab_TwinStick ゲームプレビュー Standalone (64-ビットPCD3D_SM5)_2017-5-15_2-28-49_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/181347/aab45f15-31f7-f208-3f7f-7c809093197f.png)

##パッケージ
https://drive.google.com/file/d/16osDxwUT7O71SNimIb9P7m5pfrB0Q1Bh/view?usp=sharing

##参考Webページ
◇BiginCanvasToRenderTarget関数の使い方について
http://miyahuji111.hatenablog.com/entry/2016/09/22/125840

http://meganeo.blog.shinobi.jp/ue4/%E3%80%90ue4%E3%80%91scenecapture%E3%81%AE%E4%BB%B6-%E5%9F%BA%E6%9C%AC%E7%B7%A8-