[UE5]歩いたところが見えるようになる！霧付きミニマップをつくろう！

はじめに

皆さんこんにちは、今回は歩いたところが晴れていく霧付のミニマップを作ります。

まず初めに今回作るものをお見せします。

右下のミニマップに注目してください。
はじめは青色の「霧」に覆われていますが、歩いたところの周りが映るようになっています。

▼gif画像なので開いて動いているところを見てください！

それでは早速作り方の説明をしていきます。

主な手順は次の3ステップです
①ミニマップの下地を用意
②霧が晴れる仕組みの作成
③ミニマップUIの表示

①ミニマップの下地を用意

まずは霧がかかる前のミニマップを準備していきます。
今回はSceneCapture2Dというコンポーネントでマップを真上から撮影する方法を使います。

先にRenderTargetアセットを用意して「RT_Minimap」と名付けておきます
次にActorを新規で作成して、「BP_MinimapCamera」と名付けます。

BP_MinimapCameraを開いてSceneCaptureComponent2Dを追加します。
カメラには真下を撮影してほしいので、RotationのPitchを-90°のします。
さらに今回はパースが不要なので平行投影に設定するためProjectionTypeをOrthographicに変更して、撮影範囲を広げるためOrthoWidthを4500にします。
ScneCaptureComponent2Dで撮影したものをRenderTargetに書き込んでほしいので、TextureTargetに「RT_MiniMap」を指定します。
ついでにミニマップの色味にを普段見ている色味と同じにしたいのでCaptureSourceを「FinalColor（LDR）inRGB」に変えておきます

ここまで出来たら「BP_MinimapCamera」をレベルに配置して、Locationを(X=0.0,Y=0.0,Z=1500.0)にします。
平行投影なので撮影する高さによって画角は変わりませんが、一応高めの場所に配置しておくとよいです。
あとで霧が晴れる処理を書くときに座標の扱いがややこしくなってしまうので、苦肉の策として「BP_MinimapCamera」のRotationをYaw=-90°にします。

②霧が晴れる仕組みの作成

次は霧のシステムを作っていきます。
霧自体の仕組みとしては霧用のマスク画像を用意してミニマップに適用して、霧用のマスク画像を動的に変更する。といった考え方です。
マスク画像を動的に変更する仕組みについては、CanvasRenderTargetを使ってプログラムでCanvasに画像を書きこんでマスク画像をTickで更新するといったものです。

まずはCanvasRenderTargetアセットを作成して、「CRT_FogMask」を名付けます。
扱いやすい数値にしたいので、作成したCRT_FogMaskを開いてSizeXとSizeYをそれぞれ1000にします。

次にマスク画像に書き込む用のマテリアルを用意します。
「MT_paint」と名付けて、MaterialDomainをUserInterfaceに、BlendModeをAdditiveに変更します。
今回は円形にしたいのでTexCoordから円形になるようにノードを組みます。
ここは好きな形でいいので、任意でテクスチャを用意して用いてもよいです。

これで素材がつくれたので、次はプログラムでマスク画像を更新する処理を組んでいきます。
BP_ThirdPersonCharacterのTickにノードを組んでいきます。

プレイヤーの座標をミニマップ座標に変換するため、諸々の計算をしています。
まずは「プレイヤー座標」-「BP_MinimapCameraの座標」を行い、先ほどカメラのOrthoWidthに設定した4500で割ります。
ついでにZ座標は不要なのでVector3DからVector2Dに変換します。
このままだと-0.5～0.5の値範囲になり、画像書き込み時に不都合なので0~1にするためにXとYにそれぞれ0.5を足します。
Canvasにマテリアルを書き込む「DrawMaterial」はCanvasのサイズに依存してPositionを指定する必要があります。
そのためCRT_FogMaskのサイズで設定した1000に合わせるために値範囲を0~1000にするため1000を掛けます。
DrawMaterial関数は指定した座標を基準に右下に広がるように、ScreenSizeの大きさの描画を行います。
つまりScreenPositionが中心座標にならないため、その分ずらしてあげる必要があるため、ScreenSizeの半分の値を引きます。

BeginDrawCanvasToRenderTargetで、「CRT_FogMask」を指定して書き込みを開始します。
DrawMaterialで対象のCanvasに対して、ScreenPositionを始点としてScreenSizeの大きさでRenderMaterialで指定したマテリアル(画像)を書き込みます。
書き込みが終わったら必ずEndDrawCanvasToRenderTargetを呼びましょう。

これで霧用のマスク画像の更新処理ができました。
最後にBeginPlay時にマスク画像がリセットされるように、マスク画像のリセット関数をBP_ThirdPersonCharacterのBeginPlayに記述します。
ClearRenderTarget2DにCRT_FogMaskを指定することで、BeginPlayでマスク画像がリセットされます。

③ミニマップUIの表示

UIとして表示するために、撮影したミニマップと霧用のマスク画像を合体させるマテリアルを作成します。
新規でマテリアルを作成し、名前を「MT_Minimap」とします。
MaterialDomainをUserInterfaceにして、ミニマップ画像と霧の色を、マスク画像でLerpするノードを組みます。
この際マスク画像をClampするのを忘れないでください。

最終的なミニマップ用のマテリアルが出来上がったのでWidgetを作ります。UserWidgetを継承したWidgetBlueprintを作成し、「WBP_InGameHUD」と名付けます。
WBP_InGameHUDを開いてCanvasパネルとImageを追加します。
ImageのBrush->Imageに先ほど作成した「MT_Minimap」を指定し、ついでにSizeXとSizeYを300程度にしておきます。

作成したWidgetを表示するため、BP_ThirdPersonCharacterのBeginPlayでCreateWidgetノードを配置して「WBP_InGameHUD」を指定し、
CreateWidgetのReturnValueをそのままAddToViewportします。

さいごに

以上の手順で歩いたところが見えるようになる霧付きミニマップが完成しました。
途中で作成した霧用マスク画像については、データとしてはただのマスク画像なので、霧が晴れている箇所だけ敵アイコンを出すなどの応用が利くようになっています。

今回特に注目してほしい機能はCanvasRenderTargetです。
プログラムで任意で画像を加工できるので、汎用性が高くアイデア次第で様々なことに使えます。
たとえば本格的な雪の足跡表現のために歩いた箇所の足跡マスクを作成したり、プレイヤーが直接ゲーム内でペイントしたイラストをポスターにしたりできます。

ぜひ活用してみてください！それでは！