今回は、Unreal Engine 5（UE5）を使用して、建築ビジュアライゼーションのためのウォークスルー用のミニマップを作成する方法について詳しく解説します。このチュートリアルは初心者向けに、手順を一つ一つ丁寧に説明しています。ミニマップは、リアルタイムでキャラクターの位置を表示するために使われ、プロジェクトのプレゼンテーションにも非常に役立ちます。
1. ミニマップの準備
最初に、ミニマップとして使用するための2D画像を作成します。これは、シーンの俯瞰図を表すもので、3Dソフトウェア（例えばRhinoceros）を使って、シーンの天井を取り除いた状態でレンダリングします。影や詳細なテクスチャは必要なく、シンプルな間取り図を用意しましょう。
今回はダウンロードしてきた画像データを利用します。
2. Unreal Engine 5へのインポートと設定
次に、UE5で作成したウォークスルーウィジェットに、ダウンロードしてきた2D画像をインポートします。以下の手順で進めていきます。
- シーンキャプチャ2Dの追加:
UE4内で「シーンキャプチャ2D」というカメラを使い、俯瞰視点からの画像をキャプチャします。これをシーンにドラッグし、XとYの位置を調整して、マップ全体が映るようにします。 - 正投影の設定:
正投影を使用して、ミニマップが歪まないようにします。適切な解像度（例: 2027x2027）を設定し、その後、レンダーターゲットを作成します。これにより、リアルタイムでシーンの変化がミニマップに反映されるようになります。 - Photoshopでの編集:
レンダリングした画像をPhotoshopで開き、HDRから通常の8ビット画像に変換します。さらに、ミニマップ用のアイコンやオーバーレイなど、必要な編集を行い、最終的にPNG形式で保存します。
シーンキャプチャ2Dの追加
Configuratorフォルダの直下に「mini_Map」フォルダを作成します。そこに先ほどダウンロードしたPNG画像をドラッグ＆ドロップでインポートします。それぞれ「Map_Sample」と「right_arrow」と名前を付けます。
Map_Sampleをダブルクリックして開きます。「ミップ全般設定」を「SimpleAverage」、「Texture Group」を「UI」、「圧縮設定」を「UserInterface2D(RGBA)」に変更し、保存します。「right_arrow」についても同様に設定します。
UE5内で「2D」と検索して「シーンキャプチャ2D」というカメラを配置します。トランスフォームで位置をマップの中央に来るように調整し、カメラが下を向くように回転も修正します。
俯瞰視点からの画像をキャプチャします。これをシーンにドラッグし、XとYの位置を調整して、マップ全体が映るようにします。
正投影の設定
正投影を使用して、ミニマップが歪まないようにします。適切な解像度（例: 2027x2027）を設定し、その後、レンダーターゲットを作成します。これにより、リアルタイムでシーンの変化がミニマップに反映されるようになります。
今回はダウンロードした画像データのサイズに合わせています。
「SceneCapture2D」を「描画ターゲット」に合わせていくための修正をします。
先ほど、位置と回転については設定したので確認します。プロジェクションのProjection Typeを「Orthographic」とし「Ortho Width」を「3900」とします。
「Ortho Width」についてはプレイしながら最終的に微調整をして決めていきますが、今回は合わせた数値を先に入力してしまいます。
3. ウォークスルーウィジェットにミニマップを配置
作成したミニマップ画像を、UE5のウォークスルーウィジェットに追加します。
mini_Mapフォルダの直下にブループリントウィジェットを作成します。「Walkthrough」と名前を付けます。
パレットから「キャンバスパネル」「オーバーレイ」「image」を追加します。
オーバーレイの設定
ウィジェット内にオーバーレイを追加し、その中にミニマップ画像を配置します。これにより、ミニマップが他のUI要素と重なる形で表示されます。（補足：この場合はBP_mainwidgetに表示されるようになります。）
「オーバーレイ」の名前を「ArchViz_BaseMap」と変更し、「Is Variable」にチェックを入れて変数とします。さらに、位置Xを「1600」に調整し、「Size To Content」にチェックを入れます。
イメージの設定
「Image」の名前を「ArchVizMiniMap」と変更し、「Is Variable」にチェックを入れて変数とします。さらに、Imageに先ほどインポートした画像（Map_Sample）をドラッグ＆ドロップします。Image SizeのXとYを「300」に調整し、TransformのAngleを「-90.0」に設定します。
ウォークスルーウィジェット（ミニマップ）を表示
BP_FirstPersonCharacterのイベントグラフを編集して、プレイしたらミニマップが表示されるようにします。
SequenceのThen1のピンから「Create Walkthrough Widget」を配置し、Classに「Walkthrough」を設定します。さらに「Get Player Controller」と「Add to Viewport」を配置接続します。
これにより、プレイしたらウォークスルーウィジェット（ミニマップ）が表示されます。
「Alt＋P」でプレイして動作確認します。
キャラクター参照アイコンの追加
キャラクターの現在位置を示すアイコンを作成し、これをミニマップ上に配置します。アイコンの大きさや位置は、プロジェクトのニーズに合わせて調整します。
パレットから「キャンバスパネル」「オーバーレイ」「image」を追加します。
オーバーレイの設定
ウィジェット内にオーバーレイを追加し、その中にキャラクターのインジケーター画像（right_arrow）を配置します。これにより、キャラクターインジケーターが他のUI要素と重なる形で表示されます。（補足：この場合はWalkthrough（mini map）に表示されるようになります。）
「Image」の名前を「ArchVizRef」と変更し、「Is Variable」にチェックを入れて変数とします。さらに、位置Xを「-150」、位置Yを「100」に調整し、「Size To Content」にチェックを入れます。（今回は初めから位置を調整した値を設定します。）
イメージの設定
「Image」の名前を「ArchVizRef」と変更し、「Is Variable」にチェックを入れて変数とします。さらに、Imageに先ほどインポートした画像（right_arrow）をドラッグ＆ドロップします。Image SizeのXとYを「32.0」に調整します。
キャラクターインジケーターの設定
先ほど変数に設定した「ArchVizRef」（キャラクターインジケーター）をGETして「Set Brush」と「Make SlateBrush」を配置し接続します。さらに、Make SlateBrushのImageに「right_arrow」を設定します。
これにより、
変数「ArchVizRef」をGETして「Set Render Transform Angle」を配置し「Event Tick」とそれぞれ接続します。さらに「Get Player Controller」と「Get World Rotation」を配置し「Set Render Transform Angle」に接続します。
これにより、
4. ミニマップの動作設定
ミニマップがキャラクターの動きに追従するように設定します。
ブループリントでの設定
「Create Arch Viz Character Ref Widget」を配置し、Return Valueを「Promote to Variable（変数へ昇格）」します。変数名を「characterRef」に設定します。
キャラクターの位置に応じてアイコンが移動するよう、ブループリントで必要なロジックを構築します。アイコンがキャラクターの動きに合わせて回転するように、イベントティックを利用して更新します。
キャラクターインジケーターの動作と位置とサイズの調整
キャラクターが移動した際に、ミニマップ上で適切に位置が表示されるよう、必要に応じてアイコンの位置やサイズを調整します。
Walkthroughのイベントグラフから関数の「＋」から関数を追加し、「ArchVizCharacterRef」と名前を付けます。「Character Ref」をGETし「Set Render Translation」を配置、接続します。
「Get Player Character」「Get Actor Location」「Divide」「Multiply」「Make Vector 2D」を配置しそれぞれ接続します。
Divideには3800は「SceneCapture2D」の「Ortho Width」で設定した「3900」より少し小さい値を設定しています。
Multiplyにはキャラクターインジケーターの画像サイズ「300」を設定します。
最後にWalkthroughのイベントグラフを編集します。
プレイしたときに先ほどの関数「ArchVizCharacterRef」が実行されるようにします。
「Event Tick」に関数「ArchVizCharacterRef」をドラッグ＆ドロップし接続します。
5. テストと最終調整
最後に、ウォークスルーを実行して、ミニマップが正しく動作するかを確認します。アイコンの位置が正しく表示されているか、マップの不透明度が適切かをチェックし、必要であれば再調整を行います。
キャラクターインジケーターのアイコンの初期位置については「ArchVizCharacterRef」のウィジェットのデザイナーのオーバーレイの位置を変えることで調整することができます。位置の変更とプレイをしながら調整します。
キャラクターインジケーターの移動距離についてはミニマップのサイズが画像と合っているかが重要となります。「SceneCapture2D」の「Ortho Width」で設定した値より少しだけ小さい値を設定するなどこちらもプレイをしながら調整していきます。
これで、UE5でのミニマップ作成が完了です。