目次
- はじめに
- 解説
- さいごに
はじめに
この記事は2024アドベントカレンダーの参加記事です！
以前ミニマップの記事を書きました。
今回の記事ではこれのバージョンアップ版として、一般的なゲームにあるようなプレイヤーを中心としたミニマップや、マップの回転・アイコンの表示などについて紹介します！
この記事では、ブループリントのみでシーンキャプチャー2Dなどを利用しないゼロからミニマップを作る方法について紹介します。
UE5.4.4で解説しますが基礎的な実装なのでUE4でも利用できます。
今回初の試みとして、UE5.4のプロジェクトをBoothで無料版として配布しています。
この記事では無料版の内容を０から作成したときのものとなっております。
また、機能強化版を販売しているので、ぜひ利用してみてください！
この記事を紹介するにあたり環境アセットとして以下のアセットを利用しています。
解説
①ミニマップのアイコンに表示可能なアクタ向けのインターフェースを作成
マップに配置されているアクタに対してミニマップにアイコンとして表示可能にするためのインターフェースを作成します。
ブループリントインターフェースからBI_MiniMapDisplayableを作成します。
以下の3種類の関数を作成します。
関数GetMiniMapInfo
ミニマップの表示されるアイコンの情報を取得する関数です。
アウトプットに以下の2つを用意します。
・アイコンを表示するUserWidgetClassのIconWidgetClass
・アイコンの画像用にSlateBrushのIconImage
関数GetbMiniMapDisplayable
ミニマップにアイコンとして表示可能かどうかのフラグを取得する関数です。
アウトプットに以下を用意します。
・アイコンを表示するかを分岐するBool型の bMiniMapDisplayable
関数OverridebMiniMapDisplayable
外部からbMiniMapDisplayableのフラグを上書きするための関数です。
インプットに以下を用意します。
・アイコンを表示するかを分岐するBool型の bMiniMapDisplayable
②ミニマップアイコンウィジェットの情報を渡すインターフェースを作成
ミニマップの表示されるアイコンウィジェットに対して情報をやり取りするインターフェースです。
ブループリントインターフェースからBI_MiniMapIconAdapterを作成します。
以下の3種類の関数を作成します。
関数SetMiniMapIconImage
外部からアイコンに画像を反映するための関数です。
インプットに以下を用意します。
・アイコンの画像用にSlateBrushのIconImage
関数SetbMiniMapIconVisibility
外部からミニマップのアイコンの表示非表示を切り替えるための関数です。
インプットに以下を用意します。
・アイコンの表示切替用にBoolのbMapIconVisibility
関数GetMiniMapIconRoot
アイコンのルートとなるCanvacePanelを渡す関数です。
アウトプットに以下を用意します。
・キャンバスパネルのIconRoot
③ミニマップアイコン用のウィジェットの作成
ウィジェットブループリントをベースにWB_MiniMapIconを作ります。
デザイナーの調整
デザイナーのエディタから以下のように設定します。
上から順番に紹介
スケールボックス
キャンバスパネル
MiniMapIconRoot (IsVariableにチェックを入れておきます)
MiniMapIconRootが左上に原点が来るようにアンカーを調整します。
MiniMapIconImage (IsVariableにチェックを入れておきます)
グラフの調整
クラス設定からインターフェースBI_MiniMapIconAdapterを設定します。
それぞれイベントを実装します。
④ミニマップのアイコンアクタを作成
ここからはミニマップに表示するための機能をアクタに反映する手順を解説します。
ブループリントのアクタをベースにB_MiniMapIconActorを作成します。
クラス設定からBI_MiniMapDisplayableインターフェースを実装します。
※こちらのコンポーネントはあくまでもアイコンをプレビューするためなので、必須ではありません。
HiddenInGameのチェックを外しておきます。
変数に以下の3つを追加します。
Bool- bMini Map Displayable（インスタンス編集可能にチェック）
UserWidget- Icon Widget Class（インスタンス編集可能にチェック）
SlateBrush - Icon Image (インスタンス編集可能にチェック）
デフォルト値は以下のようにセットアップしておきましょう。
インターフェースの関数を実装します。
GetbMiniMapDisplayable
GetMiniMapInfo
設定した情報をプレビューするためにも以下の処理を実装します。
※こちらの機能はあくまでもアイコンをプレビューするための機能なので、必須ではありません。
⑤ミニマップマネージャーの作成
マップ上からアイコン可能なアクタや計算に利用するのに必要なマネージャークラスｗを作ります。
ブループリントのアクタをベースにB_MiniMapManagerを作ります。
変数に以下の3つを追加します。
TriggerVolume - MapVolume（インスタンス編集可能にチェック）
float - MapXY（インスタンス編集可能にチェック）
Actor(配列) - MinimapDisplayableActors
ゲーム開始時に開いているレベルからミニマップに表示可能なアクタを収集する関数を作ります。
GetAllActorsWithInterfaceではBI_MiniMapDisplayableを指定します。
⑥ミニマップ用のMaskマテリアルを作成
過去にこちらで紹介しました。
マテリアルからM_MiniMapMaskを作成します。
マテリアルの詳細から以下のように設定します。
グラフで以下のように組みます。
特にTextureという名前のスペルミスに注意しましょう。
⑦ミニマップウィジェットの作成
実際にミニマップとして機能するウィジェットを作成していきます。
ウィジェットブループリントをベースにWB_MiniMapを作ります。
デザイナーの調整
デザイナーのエディタから以下のように設定します。
上から順番に設定していきます。
・キャンバスパネル（デフォルト）- CanvasPanel
・MiniMapMainRoot - CanvasPanel (IsVariableにチェックを入れておきます)
ミニマップの位置やサイズを調整するためのもののため、アンカーは自由です。
・Mask - RetainerBox
アンカーは画面全体です。EffextMaterialにM_MiniMapMaskを割り当てます。
・キャンバスパネル（デフォルト）- CanvasPanel
・BackGround_Border
ミニマップの範囲外背景色を決めるボーダーウィジェットです。
アンカーは画面全体でBrushColorが反映されます。
・MiniMapRotationRoot_CanvasPanel - CanvasPanel
(IsVariableにチェックを入れておきます)
ミニマップの回転を行う基準です。アンカーは中央にします。
・MiniMapPositionRoot_Overlay- Overlay
(IsVariableにチェックを入れておきます)
ミニマップの移動を行う基準です。アンカーは中央にします。
・MapImage - Image (IsVariableにチェックを入れておきます)
マップの画像を登録するためのImageです。
・PlayerIconImage- Image (IsVariableにチェックを入れておきます)
プレイヤーのアイコンを登録するためのImageです。アンカーは中央。
グラフ実装
ここからは本格的な機能実装をしていきます。
関数UpdateMinimapの作成
ローカル変数に以下を持たせます。
Vector型 - FowerdVector
関数のインプットは以下のように用意します。
MiniMapRotationRoot
MiniMapPositionRoot
PlayerWidget
PlayerActor
BaseVolume
VolumeScale
MapRoation?
UserActorFowerd?
Volumeからみたアクタの相対位置をUIのキャンパスサイズに逆算して反映するロジックです。
PlayerActorもしくはカメラの前方ベクトルを取得し設定する実装です。
マップの回転有無で処理を分岐します。
関数UpdateMinimapIconの作成
ここではレベル上に配置しているミニマップアクタをミニマップに表示するロジックです。
ローカル変数に以下を持たせます。
Vector型 - FowerdVector
関数の入出力は以下のように用意します。
IconRootWidget
PlayerActor
BaseVolume
TargetActor
VolumeScale
MiniMapPositionRoot
MapRotation?
UserActorFowerd?
マップの回転が有効な場合アイコンを回転補正するためにFowerdVectorを取得してセットします。
FowerdVectorから回転を補正します。
下の処理は、Volumeからみたそれぞれのアクタの相対位置をUIのキャンパスサイズに逆算して2D座標としてチェックするロジックです。
計算された位置をアイコンに反映します。
イベントグラフに戻り、変数に以下の7つを追加します。
B_MiniMapManager - MinimapManager
Actor/ UserWidgetのマップ - ActorUserWidgetMap
Actor - PlayerActor
float - Map Volume
float - Map XY
bool - Map Roation?
bool - User Actor Fowerd?
イベントグラフに処理を記載していきます。
レベル上からMiniMapMangerを取得します。
値の初期化をします。
ウィジェットを生成します。
AddDisplayableActorではMinimapDisplayableActorsを元にウィジェットの構築を行います。作成されたウィジェットとアクタをActorUserWidgetMapに登録します。
更新処理です。
⑧セットアップ
これまでの実装を使い実際にマップに実装します。
トリガーボリュームをマップに配置します。
詳細からNoCollision, Scaleは1,1,1に固定しておきましょう。
ミニマップの範囲として規定するエリアに囲みます。高さは考慮しなくても大丈夫です。
サイズについてはブラシセッティングのXYで指定します。
この時関数の計算を楽にするために同じ値を入れてください。
また、繰り返しますがアクタのスケールは1,1,1に固定して下さい。
Zは考慮しなくても大丈夫です。
上からライティングありで投影します。
トリガーボリュームの範囲をスクリーンショットして画像編集ソフトでトリミングします。
トリミングした画像をインポートします。
合わせてプレイヤーのアイコンも用意しておきましょう。
今回はこちらのサイトから素材を取得しました。
素材をミニマップに反映します。
- MapImageにはマップの画像
- PlayerIconImageにはプレイヤーアイコンの画像
レベルに戻りB_MiniMapIconManagerをレベルに配置します。
MapVolumeに配置したTriggerVolumeを指定して、
VolumeのXYの値を入れます。
キャラクターBPのBeginplayにWidgetを構築してAddToViewportします。
これでミニマップの基礎的な実装ができました。
次にミニマップアイコンのセットアップです。
B_MiniMapIconActorをレベルに配置します。（複数可能）
アイコンのデザインやベースとなるウィジェットなどよしなに設定します。
これで完成です。
さいごに
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやX（Twitter）のフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
