◀ 77.

UE5 ミニマップ実装ガイド（Widget Blueprint / Render Transform / 座標変換）

▶
編集
この記事の要点
  • UE5 のミニマップは Widget Blueprint 上にマップ画像とプレイヤーアイコンを重ねて作る
  • マップ素材: 真上から見下ろしレンダリングするか、外部の画像ソフトで作成してインポート
  • 位置反映の核は ワールド座標 ↔ 2D 座標の変換 — ワールドの 100 単位 = マップの X px のスケール変換
  • リアルタイム更新は Tick イベントで Render Transform を更新。重い場合は Timer (0.1 秒間隔) で代用
  • 応用: マップ自体を回転 (回転マップ) / 敵や目的地アイコンの動的追加 / ズーム機能

ミニマップとは

ミニマップは、ゲーム画面の端に表示される小さな地図 UI で、プレイヤーが現在位置や周辺環境を把握しやすくする要素です。オープンワールド、RPG、FPS、MOBA など、ジャンルを問わず採用される基本 UI です。

UE5 では UMG (Unreal Motion Graphics) の Widget Blueprint を使って実装するのが王道。本記事ではマップ素材の用意からポーン位置の反映、応用テクニックまでを解説します。

全体の流れ

  1. マップ用テクスチャを準備 (見下ろしレンダリング or 自作)
  2. Widget Blueprint を作成し、Image でマップを表示
  3. プレイヤーアイコン用の Image を重ねる
  4. Tick でポーンのワールド座標を取得し、2D 座標に変換してアイコンを移動
  5. HUD クラスやプレイヤーコントローラから Widget を画面に追加

1. マップ用テクスチャの準備

ミニマップに表示するベース画像を用意します。2 つの定番手法:

A. レベル全体を真上からレンダリング

  • レベル上空に Top-down Camera を配置し、レベル全体が映る位置・FOV に調整
  • Scene Capture Component 2D + Render Target で 1 枚キャプチャ → テクスチャとして保存
  • もしくはエディタの「High Res Screenshot」でビューポートを真上視点にして撮影

B. 外部ツールで自作

Photoshop / Krita / Figma 等でマップを作成 (シンボル化、デフォルメ化が可能)。PNG / TGA で保存し、コンテンツブラウザにドラッグ&ドロップ。

2. Widget Blueprint の作成

コンテンツブラウザで右クリック →「User Interface」→「Widget Blueprint」 (例: WBP_MiniMap)。

レイアウト構成

[Canvas Panel]
 ├ [Image] MapImage     ← マップのベース画像 (例: 200x200)
 └ [Image] PlayerIcon   ← プレイヤー位置アイコン (例: 16x16, ★や●)
  • MapImage: Anchors を Center / Position 0,0 / Size 200x200 程度
  • PlayerIcon: Is Variable をチェック (Blueprint からアクセスするため) / Anchors は中心 / Render Transform で位置を動かす

3. ポーンの位置をミニマップに反映

Widget Blueprint の Event Graph で Tick イベントから位置更新ロジックを組みます。

処理の擬似コード

EventTick (DeltaTime)
  ├ GetPlayerPawn → GetActorLocation → (X, Y, Z) ワールド座標
  ├ ワールド原点との差分 (WorldOffset = PlayerLocation - WorldCenter)
  ├ スケール変換: MapPos = WorldOffset * (MapSize / WorldSize)
  └ PlayerIcon → SetRenderTranslation(MapPos)

Blueprint で実装する場合のノード例

  • Get Player Pawn → Get Actor Location
  • Break Vector で X / Y を取り出す
  • 定数ノード WorldSize (例: 10000.0 = レベル全体が ±5000 cm 範囲) と MapSize (例: 200.0) を用意
  • (WorldX / WorldSize) * MapSize で X 軸の表示位置を算出 (Y も同様)
  • Set Render Translation ノードで PlayerIcon の位置を更新

注意: UE のワールド座標と UI のスクリーン座標は Y 軸が逆。Y 値はマイナスを乗じて反転する必要があります。

4. Widget を画面に表示

HUD クラスまたは PlayerController の BeginPlay で Widget を作成して画面に追加します。

// C++ の場合
void AMyPlayerController::BeginPlay()
{
    Super::BeginPlay();
    if (MiniMapWidgetClass) {
        MiniMapWidget = CreateWidget<UUserWidget>(this, MiniMapWidgetClass);
        if (MiniMapWidget) {
            MiniMapWidget->AddToViewport();
        }
    }
}

Blueprint 派なら PlayerController の BeginPlay で Create Widget → Add to Viewport の 2 ノードでも同じことが可能です。

5. マップ自体を回転させる (回転マップ)

プレイヤーの向きにマップを追従させるタイプ (Skyrim 系) の実装は、マップ画像側を逆方向に回転させるのがポイント。

EventTick
  ├ GetControlRotation → Yaw 取得
  ├ -Yaw をマップの Render Transform Rotation にセット
  └ プレイヤーアイコンは常に中心 (回転しない)

6. 動的な敵 / 目的地アイコンを表示

敵やクエスト目的地のアイコンも、同じ仕組みで個別の Image を Render Translation で動かせます。複数表示する場合は動的生成がおすすめ。

動的生成のパターン

  • 新しい敵がスポーンしたら Create Widget でアイコン用 Widget を作成
  • ミニマップの Canvas Panel に Add Child to Canvas で追加
  • 配列で管理しておき、敵が倒れたら Remove from Parent で削除

パフォーマンスのコツ

テクニック効果
Tick の代わりに Timer (0.1 秒)毎フレーム更新は人間の目で違いが分からない
距離でアイコン表示を打ち切り視界外の敵を計算しない
Material を共有して Dynamic Instance 化アイコン数が多い場合に効果大
Render Target をマップ素材化Scene Capture を毎フレームではなく数秒ごとに

応用: 全画面マップ (M キーで開閉)

ミニマップを大きく表示する全画面モードはゲーム性向上に効果絶大。同じ Widget をスケール 1.0 → フルスクリーンサイズに拡大表示し、PlayerIcon の位置計算も同じスケーリング係数で動作させれば実装できます。

まとめ

UE5 のミニマップ実装の核は、Widget Blueprint でマップとアイコンを重ね、Tick でワールド座標を 2D 座標に変換し続けること。一度この基盤を作れば、回転マップ、複数アイコン、ズーム、全画面マップなどの拡張が容易です。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 床の上に乗ったらイベントを発生させる方法
  2. OverlapAllDynamicとOverlapAllの違い
  3. タイトル画面を作る方法
  4. サードパーソンテンプレートでのキャラクター表示の仕組みと非表示にする方法
  5. ボタンに文字を記載する方法
  6. Event ActorBeginOverlapとOn Component Begin Overlapの違い
  7. キャラクターに特定のオブジェクトとの当たり判定を付ける
  8. 特定のオブジェクトに触れたとき、キャラクターが倒れるようにする
  9. 動いているオブジェクトに静止しているキャラクターが当たり判定を持たない原因と解決方法
  10. 「On Component Hit」に「Cast To ～」で複数のクラスを指定する方法
  11. Blenderファイルをインポートする方法
  12. 鏡を作成する方法
  13. レベルブループリントでキャラクターの出現を設定する方法
  14. サードパーソンテンプレートにおけるキャラクター出現の定義
  15. アイテムに近づいたらボタンを押してイベントを発火させる方法
  16. 画面の中央にメッセージを表示する方法
  17. どこからでも呼び出せるカスタムイベントを作成する方法
  18. カスタムイベントに引数を追加する方法
  19. 「Get Overlapping Actors」から特定のクラスの場合のみ処理を実行する方法
  20. オブジェクトに近づいている間だけメッセージを表示する方法
  21. PCの画面を操作するUIを作る方法
  22. コンテンツブラウザに画像を追加する方法
  23. SetInputMode_UIOnlyを取り消す方法
  24. 特定の画像の上にマウスカーソルを置いたら手マークにする方法
  25. オブジェクトがアウトライナーで選択できない原因と解決策
  26. PlayerStartを作成する方法
  27. メニュー画面を作成して開く方法
  28. 「Esc」キーを押してメニュー画面を開く方法
  29. イベントの「On Clicked」と「On Pressed」の違い
  30. 「Set Input Mode」の種類と使い方
  31. 「Set Game Paused」の使い方と詳細解説
  32. Motion Matchingとは？
  33. 「GameMode」と「GameModeBase」の違い
  34. マップに配置したTargetPointを取得する方法
  35. TargetPointにタグをつけて取得する方法
  36. Spawnしたインスタンスがイベントを実行する方法
  37. 特定の時間ごとに処理を実行する方法
  38. 数値をランダムで出力する方法
  39. ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
  40. MaxWalkSpeedを変更する方法
  41. しゃがむ動作を導入する方法
  42. キャラクターのアニメーションを設定する方法
  43. 導入済みのプラグインを確認する方法
  44. Motion Matchingの導入と必要なプラグイン
  45. プレイヤーを非表示にする方法
  46. カメラを傾ける角度を制限させる方法
  47. 配列からランダムに重ならない要素を特定の数取得する方法
  48. カメラの映す画面に文字やエフェクトを付ける方法
  49. キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
  50. プライマリーデータアセットを活用する方法
  51. プレイヤーのHPといった変数を定義する最適な場所
  52. カメラに映った画面をスクリーンショットとして保存する方法
  53. ゲーム内のカメラ映像を保存して再表示する方法
  54. HighResShot を使って高解像度の画像を保存する方法（UE5）
  55. HighResShotで保存した画像のファイル名を取得する方法
  56. SceneCapture2DとFrameGrabberの画像保存方法の比較
  57. SceneCapture2Dを使用して画像を保存・取得する方法
  58. HighResShotとTake High Res Screenshotの違い
  59. ゲーム終了ボタンを作成する方法
  60. 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
  61. 画面上にメッセージを指定された時間表示させる方法
  62. シェーダコンパイル時間を短縮する方法
  63. 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
  64. データベースを活用する方法
  65. UE5.5がインストールされた環境にUE5.4を追加で導入する方法
  66. World PartitionとWorld Compositionの違い
  67. オープンワールドテンプレートとは？
  68. ポーンをスポーンさせても視点を切り替えない方法
  69. キャラクター同士がすり抜けてしまう問題の解決方法
  70. キャラクターの外見を動的に変更
  71. World Partitionでインスタンスが「アンロード済み」になる問題
  72. データ アセットとデータ テーブルの違い
  73. コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
  74. エディターのソースコードの自動保存の頻度を高める方法
  75. SpawnActorでSpawn Transform Rotationが反映されない理由
  76. ミニマップを表示しポーンの位置を反映する方法
  77. RInterp ToとVInterp Toの違い
  78. 毎秒実行するイベントの定義方法
  79. Niagara のエフェクトにコリジョンを持たせる方法
  80. 「Overlap」と「Hit」の違い
  81. OverlapはあるがHitがない原因
  82. Overlapした位置の座標を取得する方法
  83. ブループリントでレベル間のパラメータを受け渡す方法
2026-06-11 07:07:02 T 201

人気ページ

最近更新/作成されたページ