[UE4] SceneCapture2DでMinimapを作成する [2/3回目]

[UE4] SceneCapture2DでMinimapを作成する [2/3回目]

#前回の概要
前回はSceneCapture2Dを用いて画面上にミニマップを表示しました。
https://qiita.com/kanurapoison/items/1a192227b3b44bd42562
大まかな流れを説明すると、SceneCapture2Dがキャプチャした画像をRenderTargetに流し込み、それをそのままマテリアルの出力結果としました。そして、そのマテリアルをWidget状にImageとして表示することで、動的に変化するミニマップを作成しました。
![03.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/8b3cc8a6-6508-c674-7b33-6c36bf037d26.jpeg)

#今回の概要
今回は、前回の内容を基に、ミニマップ上にプレイヤーアイコンを表示したいと思います。
完成図
![09.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/3cb8dd33-20ae-59f4-8689-1b7db0acf24d.jpeg)


#下準備
まずは、表示するプレイヤーアイコンを作成します。これは本当に何でも構いません、重要なのはミニマップ上に表示することです。
私は、Paintソフトで作成し背景を透過したものを使用しました。これを"PlayerIcon.png"等で保存し、UE状にドラッグアンドドロップすることで、Textureとして利用可能です。
PlayerIcon例
![PlayerIcon.png](https://qiita-image-store.s3.amazonaws.com/0/245572/ca89c97d-25f7-cab0-5586-929a53c3db72.png)

#ウィジェットの新規・追加実装
プレイヤーアイコンを表示するために、以下の2つの作業を行います。
1. プレイヤーアイコンを保持する新規ウィジェット"WBP_PlayerIcon"の作成
2. 前回作成した"WBP_Hud"に、プレイヤーアイコンを作成・追加する関数を実装

では、早速実装していきましょう。
↓
##1. WBP_PlayerIconの作成
新規ウィジェットブループリント（WBP_PlayerIcon）を作成する。MiniMapに重ねて表示するので、CanvasPanelを削除し、Overlayを追加します。そのOverlayの子要素として、Imageを追加しプレイヤーアイコンがウィジェットの中央に来るように調整します。Alignmentをcenterに設定することで中心に配置することが可能です。アイコンのサイズは適宜調整してください。要領は前回のWBP_MiniMapの作成と同様です。
![06.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/a4aa8e4c-19c7-c7d4-bf5f-0f966d09e586.jpeg)

##2. WBP_Hudに、プレイヤーアイコンを作成・追加する関数を実装
先ほど作成したWBP_PlayerIconをMiniMap上の中心に表示するための関数を実装します。
具体的には、関数が呼ばれるとWBP_PlayerIconを作成し、WBP_Hud内のOverlayの子要素として追加します。**Overlayの子要素として表示するためにOverlayを参照できるようにしなくてはなりません。**WBP_Hudを開き、Overlayを選択し、IsVariableにチェックを入れます。こうすることで、グラフ上でOverlayを参照することが可能となります。
※この部分は見落としがちなので注意してください。
![07.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/e97251c4-845e-bb27-0e14-05521460b057.jpeg)

グラフエディタを開き、Overlayの参照が追加されたことを確認したら、関数の実装に移ります。今回は、プレイヤーアイコンを追加するので"AddPlayerIcon"という関数名にしました。
関数名は皆さんの好みで命名していただいて構いません。関数内の処理は、WBP_PlayerIconを新規作成し、Overlayの子要素として追加しています。そして、位置を中心に来るように設定しています。今後の追加実装で利用するので、WBP_PlayerIconに対する参照を変数として保持しておいて下さい。
![08.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/916683d7-e403-e44c-8d1a-c6dbf282f683.jpeg)

最後に、この関数を呼び出しましょう。呼び出して初めて関数が実行され、プレイヤーアイコンが作成・追加されます。
呼び出し場所に特に指定は無いのですが、今回は、BP_GameModeMiniMap内のWBP_Hudを作成している部分に関数呼び出しを追加しました。
※PlayerIconが表示されない場合は、関数を呼び出していないか、どこかの実装が間違っているので一度見直してみて下さい。

#動作確認
ゲームを開始し、MiniMapの中心にプレイヤーアイコンが表示され続けていればokです!

#追加要素
基本的な実装はこれで終わりなのですが、ゲームで利用することを考えると少し物足りませんね。何となく違和感を覚えた方もいるかもしれません...
そうです、プレイヤーアイコンがMiniMap中心で微動だにしいていません。ただただ中心に表示され続けているだけです。ですので、**プレイヤーの向きに合わせて、アイコンも回転する**ようにしてみましょう。

##WBP_PlayerIconをPlayerの向きに合わせて回転
WBP_PlayerIcon内のTickでPlayerの向き(Rotation)を取得し、自身の向きを更新する処理を実装します。実装内容は下図を参照して下さい。
Playerの向きを取得する為に、Playerに対する参照が必要となりますので変数を新規作成しましょう（図では"PlayerActorRef"です）。Rotationの情報だけ取れれば良いので、変数の型はActorにします。変数を用意しただけでは中身には何も入っていないので、他の場所から中身を設定（代入）してもらいましょう。その為に、**この変数をスポーン時に公開する様に設定し、WBP_Hudの関数AddPlayerIconで作成すると同時に変数に値を設定**しましょう。新たに関数がインプットとしてActorの参照を受け取るようにしています。これは、BP_GameModeMiniMapから関数を呼び出す際に、PlayerActorの参照を同時に渡すためです。

WBP_PlayerIcon
![10.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/2a7cc369-87db-6638-364d-dc8dae4d3c71.jpeg)

WBP_Hud
![11.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/0aac3191-941a-e86b-4b91-961d67e77075.jpeg)

WBP_GameModeMiniMap(一部抜粋)
![12.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/bc4203a9-5869-7ef0-ea39-b7c65625adcb.jpeg)

※**PlayerActorの参照の取得方法は他にも存在**します。今回は、少し回りくどい方法だったかもしれませんね...ですが、関数にインプットを設定したり、スポーン時に公開した変数に値を渡すことに慣れてみてほしかった（自分が慣れたかっただけです）ので、この方法を紹介しました。念のため、以下に他の取得方法を記載します。主に2種類です。"Get Game Mode" or "Get Player Character"ノードを用いる方法です。こちらも頻繁に使用するので、ついでに覚えておきましょう!
![13.jpg](https://qiita-image-store.s3.amazonaws.com/0/245572/daaaa983-8729-7436-81eb-adf06eddf7e4.jpeg)

#動作確認
ゲームを開始し、プレイヤーを動かしてみましょう。プレイヤーの向きとアイコンの向きが一致すればokです。

#終わりに
今回は、前回の内容を基にMiniMap上にPlayerIconを表示しました。次回はMiniMap上に敵やアイテム等のアイコンを表示してみたいと思います。
次回->https://qiita.com/kanurapoison/items/0c528baae264f097a23d

#参考サイト
https://qiita.com/tamfoi/items/0f5534a3ed328828a46e
http://historia.co.jp/archives/5567/
https://www.youtube.com/watch?v=Z6qzaT4ZOh0
https://qiita.com/kanurapoison/items/1a192227b3b44bd42562