2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-16

[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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?