UI
Material
UE4
minimap
4.18

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

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

前回の概要

前回はSceneCapture2Dを用いて画面上にミニマップを表示しました。
https://qiita.com/kanurapoison/items/1a192227b3b44bd42562
大まかな流れを説明すると、SceneCapture2Dがキャプチャした画像をRenderTargetに流し込み、それをそのままマテリアルの出力結果としました。そして、そのマテリアルをWidget状にImageとして表示することで、動的に変化するミニマップを作成しました。
03.jpg

今回の概要

今回は、前回の内容を基に、ミニマップ上にプレイヤーアイコンを表示したいと思います。
完成図
09.jpg

下準備

まずは、表示するプレイヤーアイコンを作成します。これは本当に何でも構いません、重要なのはミニマップ上に表示することです。
私は、Paintソフトで作成し背景を透過したものを使用しました。これを"PlayerIcon.png"等で保存し、UE状にドラッグアンドドロップすることで、Textureとして利用可能です。
PlayerIcon例
PlayerIcon.png

ウィジェットの新規・追加実装

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

では、早速実装していきましょう。

1. WBP_PlayerIconの作成

新規ウィジェットブループリント(WBP_PlayerIcon)を作成する。MiniMapに重ねて表示するので、CanvasPanelを削除し、Overlayを追加します。そのOverlayの子要素として、Imageを追加しプレイヤーアイコンがウィジェットの中央に来るように調整します。Alignmentをcenterに設定することで中心に配置することが可能です。アイコンのサイズは適宜調整してください。要領は前回のWBP_MiniMapの作成と同様です。
06.jpg

2. WBP_Hudに、プレイヤーアイコンを作成・追加する関数を実装

先ほど作成したWBP_PlayerIconをMiniMap上の中心に表示するための関数を実装します。
具体的には、関数が呼ばれるとWBP_PlayerIconを作成し、WBP_Hud内のOverlayの子要素として追加します。Overlayの子要素として表示するためにOverlayを参照できるようにしなくてはなりません。WBP_Hudを開き、Overlayを選択し、IsVariableにチェックを入れます。こうすることで、グラフ上でOverlayを参照することが可能となります。
※この部分は見落としがちなので注意してください。
07.jpg

グラフエディタを開き、Overlayの参照が追加されたことを確認したら、関数の実装に移ります。今回は、プレイヤーアイコンを追加するので"AddPlayerIcon"という関数名にしました。
関数名は皆さんの好みで命名していただいて構いません。関数内の処理は、WBP_PlayerIconを新規作成し、Overlayの子要素として追加しています。そして、位置を中心に来るように設定しています。今後の追加実装で利用するので、WBP_PlayerIconに対する参照を変数として保持しておいて下さい。
08.jpg

最後に、この関数を呼び出しましょう。呼び出して初めて関数が実行され、プレイヤーアイコンが作成・追加されます。
呼び出し場所に特に指定は無いのですが、今回は、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

WBP_Hud
11.jpg

WBP_GameModeMiniMap(一部抜粋)
12.jpg

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

動作確認

ゲームを開始し、プレイヤーを動かしてみましょう。プレイヤーの向きとアイコンの向きが一致すれば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