[UE4]ミニマップ的なものを作ってみよう

#はじめに

ミニマップ的なものを作成してみます。以下の一連ツイートを参考に少し手を加えたのものの導入手順になります。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">BPの中身はこんな感じで、今の所Tickで回してます…処理負荷見てみよっと… <a href="https://twitter.com/hashtag/UE4Study?src=hash">#UE4Study</a> <a href="https://t.co/XfjJNXSaqh">pic.twitter.com/XfjJNXSaqh</a></p>&mdash; のん @ UE4勉強中 (@non_ue4) <a href="https://twitter.com/non_ue4/status/761904028682850305">2016年8月6日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

#前提

バージョン:UE4.14.1

ThirdPersonテンプレートを使います


#ミニマップ作成

##UMGを作成して表示

UMGを作成します(名前はUMG_MiniMapにしました)

![mini1.png](https://qiita-image-store.s3.amazonaws.com/0/150472/c0c9c5bc-4978-6fb5-4576-217a6f7c633c.png)

作成したUMGを開いてパレットでImage見つけて配置、適当なサイズにしてください

![mini2.png](https://qiita-image-store.s3.amazonaws.com/0/150472/c993c4c6-5233-77ca-3495-59819c73e0ad.png)

ThirdPersonCharacterを開き以下のようにBPを組んでUMGを表示するようにします

![mini3.png](https://qiita-image-store.s3.amazonaws.com/0/150472/304526e0-7011-2720-7d03-62cc58fe632b.png)

下のようになったらOKです

![mini4.png](https://qiita-image-store.s3.amazonaws.com/0/150472/b05999c9-771b-5ec5-5679-1b8a257af855.png)

##CanvasRenderTargetとマテリアルを作ってUMGにセット

CanvasRenderTargetを作成します(名前はT_MiniMapにしました)

![mini5.png](https://qiita-image-store.s3.amazonaws.com/0/150472/55c2a1ca-f54c-a4cf-a010-99ae9f4e3a0a.png)

マテリアルを作成します(名前はM_MiniMapにしました)

![mini6.png](https://qiita-image-store.s3.amazonaws.com/0/150472/b5e9e144-6471-4685-0f5b-34b3e1b583ae.png)

マテリアルを開いてMaterialDomainをUserInterfaceに、TextureSampleを出してT_MiniMapを設定FinalColorに繋ぐ

![mini8.png](https://qiita-image-store.s3.amazonaws.com/0/150472/cbadaa24-a20d-4c13-4a48-ae7f378c5d48.png)

UMG_MiniMapを開いて置いたImageを選択Appearance→Brush→Image→M_MiniMapを設定

![mini9.png](https://qiita-image-store.s3.amazonaws.com/0/150472/45e1f1a2-7926-e0e5-f7fc-8ac7f2efce86.png)

##ActorにTagを設定してレベルに配置する

今回はThirdPersonCharacterにTagを設定します(名前はMiniMapにしました)

![mini10.png](https://qiita-image-store.s3.amazonaws.com/0/150472/158a1c23-986e-f1b0-635a-9a3efb73bc60.png)

適当にレベルにキャラを置きまくってください

##CanvasRenderTarget(T_MiniMap)に書き込む

作るものが増えると混乱しそうなので今回はUMG_MiniMapのグラフにロジックを組みます(実際にはActorComponentやActorに組むと良いでしょう)

![mini13.png](https://qiita-image-store.s3.amazonaws.com/0/150472/e78a3859-afcc-b315-d95a-b8f412293709.png)


こんな感じになりました

![mini12.png](https://qiita-image-store.s3.amazonaws.com/0/150472/adaeb9aa-5724-c8f3-8263-53fd78fe0402.png)


#おわりに

あとは改造あるのみ。特にGetAllActorswithTagをTickで使うのはよくないかもしれません。

下は改造例です

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">ふと思い立ってミニマップを作り始めましたの巻<a href="https://twitter.com/hashtag/UE4?src=hash">#UE4</a> <a href="https://twitter.com/hashtag/UE4Study?src=hash">#UE4Study</a> <a href="https://t.co/le7uJ3QqKZ">pic.twitter.com/le7uJ3QqKZ</a></p>&mdash; tamfoi (@tamfoi) <a href="https://twitter.com/tamfoi/status/812031955747246080">December 22, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">引き続きミニマップ実装、自機は固定で周りが回転するタイプのも作ってみた<a href="https://twitter.com/hashtag/UE4?src=hash">#UE4</a> <a href="https://twitter.com/hashtag/UE4Study?src=hash">#UE4Study</a> <a href="https://t.co/DVvsflSBFR">pic.twitter.com/DVvsflSBFR</a></p>&mdash; tamfoi (@tamfoi) <a href="https://twitter.com/tamfoi/status/812309522807066624">December 23, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">ミニマップ進捗、高さもとれるようになった！ <a href="https://twitter.com/hashtag/UE4?src=hash">#UE4</a> <a href="https://t.co/rf5CtivPvw">pic.twitter.com/rf5CtivPvw</a></p>&mdash; tamfoi (@tamfoi) <a href="https://twitter.com/tamfoi/status/812320687889076224">December 23, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>