画面の隅には、周囲の道が見えるミニマップ。部屋の壁には、離れた場所を映す監視モニター。見た目は違いますが、どちらも「別のカメラで撮った映像を貼る」と考えると、同じ仕組みで作れます。
その映像を入れておくのが Render Target です。今回はThird Personテンプレートに、プレイヤーを真上から映すミニマップを追加します。映像が表示できたら更新頻度を調整し、最後にゲーム内のモニターへ応用してみましょう。
この記事でわかること
- 撮影するScene Captureと、映像を受け取るRender Targetの役割
- プレイヤーを追いかけ、向きは固定するミニマップの作り方
- 撮影範囲・解像度・更新頻度をそれぞれ変えたときの違い
- 同じ仕組みで、ゲーム内のモニターにも映像を表示する方法
Blueprintでコンポーネントを追加し、ノードをつなげられる方を想定しています。UIとマテリアルは今回使う設定を順に示します。基本操作を確認したい場合は、UMGの基礎とマテリアルの基礎も 参考にしてください。実践はシングルプレイ向けです。
Render Targetは映像の受け皿
ふつうのテクスチャは、あらかじめ用意した画像を読み込んで使います。Render Targetは、ゲームの実行中に画像を書き込めるテクスチャです。今回なら、撮影のたびに新しい風景を書き込みます。
Render Target自身が撮影するわけではありません。カメラに相当する Scene Capture Component 2D がシーンを撮り、その結果をRender Targetへ渡します。Scene Captureは、ふだんプレイヤーが見ているカメラとは別の視点で撮影できます。
役割は「撮る・保存する・表示する」の3つです。撮影を止めても、Render Targetには最後の画像が残るため、表示は静止画になります 。逆に、同じRender Targetを複数のモニターで表示するだけなら、モニターごとに撮影用カメラを増やす必要はありません。
この分担を覚えておくと、映らないときも「撮影できていないのか、貼る先の設定なのか」と分けて調べられます。
プレイヤーの真上に撮影用カメラを付ける
まずは、上に屋根のないThird Personのテストレベルで作ります。目印になる箱を地面にいくつか置いておくと、あとで映る範囲や向きを確かめやすくなります。
映像の保存先を用意する
コンテンツブラウザで右クリックし、「Materials & Textures」→「Render Target」を作成します。名前を RT_Minimap にし、開いて「Size X」「Size Y」をどちらも 512 に設定して保存します。
これで512×512ピクセルの画像を受け取る場所ができました。まだ撮影するものをつないでいないので、風景が映らなくても大丈夫です。
キャラクターにScene Captureを追加する
操作中のキャラクターBlueprint（標準テンプレートなら BP_ThirdPersonCharacter）を開きます。「Components」で「Capsule Component」を選び、「Add」から Scene Capture Component 2D を追加して、名前を MinimapCapture にします。
Capsule Componentの子に置き、MeshやCamera Boomの下へ入れないようにします。プレイヤーの位置には付いてきてほしい一方、体のアニメーションや操作用カメラの回転には合わせたくないためです。
MinimapCapture を選び、「Details」で次を設定します。英語名はDetailsの検索にも使えます。
| 設定 | 値 | 今回の役割 |
|---|---|---|
| Location | Relative、X=0・Y=0・Z=1500 | キャラクターの上、約15mの位置に置く |
| Rotation | World、X=0・Y=-90・Z=0 | 世界に対して向きを固定し、真下を撮る |
| Projection Type | Orthographic | 遠近を付けずに撮る |
| Ortho Width | 3000 | 横幅30mの範囲を映す |
| Texture Target | RT_Minimap | 撮影結果の保存先 |
| Capture Source | Final Color (LDR) in RGB | 色の映像を出力する |
| Capture Every Frame | オン | まずは毎フレーム更新して動作を確かめる |
「Rotation」のラベル横にあるメニューで「World」を選んでから角度を入力します。X・Y・ZはそれぞれRoll・Pitch・Yawで、ここでは Y（Pitch）を-90度にします。「Location」はRelativeのままにしてください。
Relativeは親を基準にする設定、Worldは世界を基準にする設定です。位置だけ親に付いていき、回転は世界に固定するので、プレイヤーが方向転換しても地図全体は回りません。
Capture Sourceは「撮影結果の何を画像に書き込むか」の選択です。今回は明るさや色を表示用にまとめたFinal Colorを使います。LDRという略称を覚えるより、深度などのデータではなく、風景の色を受け取る設定だと押さえておけば進められます。
コンパイルしてPlayし、RT_Minimap のプレビューを確認します。Play中にエディタを操作したいときは、Shift + F1 でマウス操作を戻せます。真上から見た地面や箱が映れば、撮影と保存先はつながっています。真っ黒なら、Texture Targetの指定に加えて、撮影する向き、屋根や壁でふさがれていないか、レベルに照明があるかを順に確認してください。
撮影範囲と画像の細かさを分けて考える
Orthographic（平行投影） は、カメラからの距離によって物の大きさが変わらない撮り方です。真上から道や建物の位置関係を読むミニマップに向いています。
ふだんのゲーム画面でよく使う Perspective（透視投影） は、奥のものが小さく見える撮り方です。監視カメラのように、その場所を眺める感覚を出したいときに使います。
ミニマップを広く見せたいときは、Render Targetのサイズではなく、MinimapCapture の Ortho Width を変えます。これは画像の横幅に収める、実際の世界の広さです。UEの標準単位では 3000 が30m、6000 が60mになります。
Playを止めてOrtho Widthを 6000 にし、もう一度試してみてください。遠くの箱まで見えるようになり、同じ箱はミニマップ上で小さくなります。
一方、Ortho Widthを変えず、RT_Minimap のSize X・Size Yだけを 256 にすると、映る範囲は同じまま、輪郭が粗くなります。Ortho Widthは「どこまで映すか」、Render Targetのサイズは「どれだけ細かく描くか」 です。確認したら、今回は 3000 と 512×512 に戻します。
撮った映像を画面の隅に出す
ここまでで、映像はRender Targetに届いています。次はその色をUIに渡すマテリアルを作り、WidgetのImageに設定します。Widgetは画面に置くUIのまとまりで、Imageはその中で画像を表示する部品です。
UI用マテリアルを作る
- マテリアル
M_MinimapUIを作成して開きます。 - Detailsで「Material Domain」を User Interface、「Blend Mode」を Opaque にします。
- コンテンツブラウザから
RT_Minimapをグラフへドラッグし、Texture Sampleノードを置きます。 - Texture Sampleの RGB出力を、マテリアルの Final Color入力へつなぎ、適用・保存します。
RGBは画像の色です。Opaqueは「透かさず表示する」設定なので、今回は色だけを使った四角いミニマップになります。透明度を表すA（アルファ）はつなぎません。
WidgetにImageを置く
コンテンツブラウザの「User Interface」→「Widget Blueprint」から、親をUser Widgetとして WBP_Minimap を作成します。「Designer」で、ルートに Canvas Panel を置き、その子として Image を1つ追加します。
Imageを選び、Detailsで次を設定します。
| 場所 | 設定 |
|---|---|
| Slot（Canvas Panel Slot）→ Anchors | 右上の一点に固定するプリセット |
| Alignment | X=1、Y=0 |
| Position | X=-20、Y=20 |
| Size | X=220、Y=220 |
| Brush → Image | M_MinimapUI |
| Color and Opacity | 白、A=1 |
Anchorsは画面のどこを基準に置くか、AlignmentはImageのどの位置をその基準へ合わせるかです。この組み合わせなら、Imageの右上を画面の右上から左へ20、下へ20ずらして配置できます。設定したらコンパイル・保存します。
Play時に表示する
キャラクターBlueprintへ戻り、Event Graphで次の4ノードをつなぎます。既に Event BeginPlay がある場合は、同じイベントから続けて処理します。BeginPlayは、そ のキャラクターのゲーム開始時に呼ばれるイベントです。
- 実行線：
Event BeginPlay→Create Widget→Add to Viewport Create WidgetのClass：WBP_MinimapGet Player Controller（Player Index=0）のReturn Value →Create WidgetのOwning PlayerCreate WidgetのReturn Value →Add to ViewportのTarget
Owning Playerは、このUIを使うプレイヤーの指定です。今回は Get Player Controller で最初のプレイヤー（Index=0）を取得して渡します。
Create Widget で表示する実物を作り、Add to Viewport でゲーム画面へ載せます。Return Valueは、作ったWidgetを次のノードへ指定するための参照です。Imageを置いた設計図だけでは、Play中の画面にはまだ現れません。
Playすると右上に映像が出ます。箱のそばまで歩くと、その箱がミニマップの中央へ近づきます。プレイヤーが方向転換しても箱の並びの向きは変わらず、カメラ操作でメイン画面を回してもミニマップは回りません。
なお、今回はシーンを上から撮った映像です。プレイヤーを示す三角アイコンや、敵だけを強調する印が自動で付くわけではありません。上から見えるキャラクターの姿は映りますが、見やすい記号を 重ねる仕組みは別に追加します。
0.1秒ごとの撮影へ切り替える
映像が出たら、更新頻度も試してみましょう。Scene Captureは別の視点を描画するため、撮影するたびに処理が増えます。ただし、映す物の量や解像度で負荷は変わるので、「カメラが2台ならゲーム全体が2倍重くなる」とは限りません。
小さなミニマップなら、毎フレーム撮らず、少し間隔を空けても用途を満たせることがあります。ここでは 0.1秒ごと、目安として1秒に10回の更新へ変え、動きの見え方を比べます。
自動撮影の設定を2つともオフにする
MinimapCapture のDetailsで、次の両方をオフにします。
| 設定 | オンのときに起きること |
|---|---|
| Capture Every Frame | 毎フレーム撮影する |
| Capture on Movement | 撮影コンポーネントが動いたときに更新する |
今回はScene Captureがプレイヤーと一緒に動きます。Capture Every Frameだけを切っても、Capture on Movementがオンなら移 動に伴う更新が残ります。タイマーで撮る間隔を決めるなら、両方を切るのがポイントです。
タイマーが呼ぶイベントを作る
キャラクターのEvent Graphで、独自に呼び出せるCustom Event UpdateMinimap を追加します。Componentsの MinimapCapture をグラフへドラッグし、そこから Capture Scene を作ります。
UpdateMinimap の白い実行出力を Capture Scene へつなぎ、MinimapCapture の参照をTargetへ渡します。Capture Sceneは、指定したScene Captureに「今、1回撮影して」と伝えるノードです。
続いて、先ほどの Add to Viewport の実行出力へ Set Timer by Event をつなぎ、Timeを 0.1、Loopingをオンにします。赤いEvent入力には、UpdateMinimap の赤いデリゲート出力をつなぎます。
デリゲートは、ここでは「あとで呼ぶイベントの指定」 です。白い線は処理を進める順番、赤い線はタイマーに呼んでもらうイベントの登録と、役割が違います。
Set Timer by Event の白い実行出力からCapture Sceneへつなぐと、タイマーを設定した直後に1回撮るだけです。繰り返す処理は、図のように UpdateMinimapの白い出力側へ置いてください。図中のAdd to Viewportは前の節と同じノードで、もう1つ作る必要はありません。
Loopingは繰り返しの指定です。オンなら以後0.1秒ごとにUpdateMinimapを呼びます。Playして歩き、ミニマップも更新され続けることを確かめてください。
速さ・細かさ・範囲を別々に調整する
タイマーのTimeを一度 0.5 にすると、映像が少しずつ飛びながら追いかける様子が分かります。0.1 に戻して比べると、更新頻度が見た目に与える影響をつかめます。
更新を減らすほど最新の位置が映るまでの待ち時間が増え、速い動きも段階的に見えます。解像度を下げれば小さな目印がつぶれやすくなります。どちらも「下げても見た目は同じ」と決めず、実際に表示する220×220の大きさで、必要なものを読めるか確かめます。
負荷を比べるときは、同じ場所・同じ視点で、毎フレーム撮影の場合とタイマー撮影の場合を試します。stat unit のGPUなど、1フレームを描くのにかかる時間も見て判断しましょう。解像度を半分にすると画像のピクセル数は4分の1ですが、ゲーム全体の処理時間まで4分の1になるわけではありません。数値の読み方はパフォーマンス計測の基本で扱っています。
実践：ゲーム内の監視モニターに映す
ミニマップが動けば、次は同じ考え方で監視モニターを作れます。変えるのは主に 撮影する位置・撮り方・貼る先です。まずは同じテストレベルの通路を撮り、モニター越しに様子を見られるようにします。
固定の撮影用Actorを置く
- Render Target
RT_Securityを作り、Size X・Size Yを256にします。ミニマップとは別の映像なので、保存先も分けます。 - Actorを親とするBlueprint
BP_SecurityCaptureを作り、Scene Capture Component 2Dを追加してSecurityCaptureと名付けます。 - Texture Targetを
RT_Security、Capture SourceをFinal Color (LDR) in RGB、Projection Typeを Perspective にします。 - FOV Angleを
90、Capture Every Frameをオンにします。今回はまず滑らかに映る状態を作ります。 BP_SecurityCaptureをレベルへ1体置き、通路を見下ろす位置と角度に調整します。PlayしてRT_Securityのプレビューに通路が映るか確認します。
FOVはカメラが横方向に見渡す角度です。Perspectiveでは、数値を大きくすると広い範囲を映せます。ミニマップで使ったOrtho Widthは、こちらの撮り方では使いません。
映像を貼るマテリアルを作る
マテリアル M_SecurityScreen を作り、Material Domainを Surface、Blend Modeを Opaque、Shading Modelを Unlit にします。確認用の板を両側から見られるよう、「Two Sided」もオンにします。
RT_Security をグラフへドラッグし、Texture Sampleの RGB を Emissive Color へつなぎます。先ほどのUI用とは、マテリアルの用途と色をつなぐ先が変わります。
Unlitは、板に当たる照明による陰影を付けず、指定した色を表示する方式です。ここでは撮影済みの色をEmissive Colorへ渡し、モニターの映像として使います。最終的な見え方はゲーム画面側の露出などにも影響されるため、メイン画面と完全に同じ明るさになるとは限りません。
板へ貼って動作を確かめる
レベルに「Shapes」→「Plane」を追加し、M_SecurityScreen を割り当てます。RotationのXを 90、Y・Zを 0 にして板を立て、見やすい高さへ移動します。最初は正方形のまま使えば、256×256の映像が横に伸びません。板の大きさはScaleで調整できます。
Playして板を見ると、撮影先の通路が映ります。その通路をプレイヤーが歩いている様子も確かめるなら、板と撮影範囲を同時に見渡せる位置で試します。映像を表示する板自体は、監視カメラの撮影範囲から外しておくと、画面の中に画面が入る入れ子の映像を避けられます。
監視映像の更新も減らしたくなったら、前の節のタイマー方式を BP_SecurityCapture に組みます。BeginPlayからSet Timer by Eventを開始し、Custom Event名を UpdateSecurity、Capture SceneのTargetを SecurityCapture に置き換えます。Timeはたとえば 0.2、Loopingはオンです。この場合もCapture Every FrameとCapture on Movementを両方オフにします。
別の部屋へカメラを移すだけで、扉の向こうの敵を先に確認する仕掛けにもなります。同じ映像を出す板を増やすなら、M_SecurityScreen を共有できます。異なる場所をそれぞれ映したい場合は、撮影用カメラとRender Targetを別々に用意します。
おまけ：先に知っておくと良いこと
Render Targetには映るのに、画面には出ない
RT_Minimap のプレビューに映像があるなら、次は M_MinimapUI とWidget側を確認します。Material DomainがUser Interfaceか、RGBがFinal Colorへつながっているか、ImageのBrushへそのマテリアルを選んだか、Create WidgetとAdd to Viewportが実行されているか、の順にたどります。
設計中にImageの色や不透明度を変更した場合は、いったん白・A=1へ戻して確認します。今回のマテリアルは画像のアルファを使わず、RGBだけを表示する構成です。
屋内のミニマップに屋根 しか映らない
Scene Captureもカメラなので、天井越しに室内を自動で透視するわけではありません。屋根など特定のActorを撮影から外したい場合は、Scene Captureの Hidden Actors を使えます。ただし、屋根と床が同じActorにまとまっていると両方を隠すことになるため、何を隠すかに合わせた分け方が必要です。
室内の見取り図や敵の印だけがほしい場合は、最初から用意した地図画像の上へアイコンを重ねる方法もあります。毎回3Dの風景を撮る必要があるか、見せたい情報から選びましょう。
映像の一部が切れる・暗く見える
カメラの位置や向きが正しくても、手前・奥のどこまで描くかというクリッピング範囲や、露出の設定が影響することがあります。Orthographicで地面などが欠ける場合はNear/Far Clip Plane周辺の設定、明るさが合わない場合は撮影側と表示側の露出を確認します。まず照明のある開けた場所で基本の映像を出してから、実際のステージへ移すと原因を絞れます。
映さなくてよい物を減らす
Scene CaptureのShow Flagsでは、影など撮影に含める描画要素を調整できます。ただし、切る項目によって映像そのものが変わります。解像度や更新頻度と同じく、必要な目印が読める状態を残しながら、一つずつ比べてください。
まとめ
Render Targetは、ゲーム中に書き換えられる映像の受け皿です。Scene Captureで撮り、その色をUIやマテリアルへ渡すと、ミニマップにも監視モニターにも使えます。
まずは「Render Targetに映る」→「画面に表示される」→「歩くと更新される」の順に確かめましょう。その後で撮影範囲、解像度、更新頻度を一つずつ変えると、見せたい情報に合う設定を選びやすくなります。
参考：Scene Capture Component 2D、Transformの座標基準、Widgetの作成と表示、Capture Scene、Set Timer by Event