◀ 49.

UE5で画面に文字やエフェクトを重ねる方法｜HUDウィジェットとポストプロセス

▶
編集

Unreal Engine 5（UE5）でカメラの映す画面（プレイヤーが実際に見ているビュー）に文字やエフェクトを重ねるには、文字やゲージなどのUIはウィジェット（UMG）をビューポートに追加し、色調変化やブラー・ビネットといった画面全体の映像効果はポストプロセスで処理するのが基本です。「画面に何かを足す」という目的は同じでも、テキスト系とエフェクト系で適した仕組みが分かれている点を押さえると、迷わず実装できます。

この記事の要点
  • 画面に重ねる対象は大きく「文字・UI」と「映像エフェクト」に分かれ、それぞれ適した仕組みが異なる。
  • 文字・HP・スコア・アイコンなどのUIは、ウィジェットブループリント（UMG）を作り「Add to Viewport」でビューポートに重ねるのが一般的。
  • 画面全体の色調変化・ブラー・ビネット・グレースケールなどのエフェクトは、Post Process Volume またはポストプロセスマテリアルで実現する。
  • 被ダメージ時の赤いフラッシュなどは、ウィジェットのアニメーションでもポストプロセスでも表現でき、用途に応じて選ぶ。
  • カメラ単位で効果を限定したい場合は、Camera Component が持つ Post Process 設定を使う方法もある。
  • バージョンによって設定名や選択肢が変わる項目があるため、最終的な名称や挙動は使用中のエンジンエディタや公式ドキュメントで確認するのが確実。

画面に重ねるものを「UI」と「映像効果」に分けて考える

まず方針を整理します。カメラの映す画面に乗せたいものは、おおむね次の2系統に分類できます。どちらを使うかで作り方がまったく変わるため、最初に切り分けておくと作業がスムーズです。

重ねたいもの具体例適した仕組み
文字・UI要素テキスト、HP/MPゲージ、スコア、ミニマップ、ボタン、アイコン、字幕ウィジェット（UMG）を Add to Viewport
画面全体の映像効果色調補正、ブラー、ビネット、グレースケール、被ダメージ時の赤みPost Process Volume／ポストプロセスマテリアル
図形や文字の直接描画デバッグ表示、簡易的なテキスト・ライン描画HUDクラスの描画ノード（補助的用途）

一般的なゲームのUI（メニュー、ゲージ、テキスト演出）はウィジェットで作るのが主流です。HUDクラスによる直接描画は、簡易表示やデバッグ用途で使われることが多く、本格的なUIではウィジェットが選ばれる傾向にあります。以下、それぞれの作り方を見ていきます。

画面に文字やUIを重ねる：ウィジェット（UMG）を Add to Viewport

テキストやゲージなどを画面にオーバーレイ表示する最も標準的な方法が、UMG（Unreal Motion Graphics）のウィジェットブループリントです。ウィジェット上で部品を配置し、ゲーム開始時などにビューポートへ追加することで、カメラ映像の上にUIが重なって表示されます。

大まかな手順

  1. コンテンツブラウザから「ユーザーインターフェース」→「ウィジェットブループリント」を作成します。
  2. ウィジェットを開き、デザイナー上に「Text」「Image」「Progress Bar」などの部品を配置してレイアウトを整えます。
  3. 表示を制御するブループリント（プレイヤーコントローラーやキャラクター、レベルブループリントなど）で、ウィジェットを生成してビューポートに追加するノードをつなぎます。

ビューポートに追加するノードの基本的な流れは、おおよそ次のようになります。

Event BeginPlay

  → Create Widget（Class に作成したウィジェットを指定）

  → Add to Viewport

「Create Widget」で生成したウィジェットを「Add to Viewport」に渡すと、画面に重ねて表示されます。生成したウィジェットの参照を変数として保持しておくと、後からゲージの値を更新したり、不要になったときに「Remove from Parent」で取り除いたりしやすくなります。

ゲージやスコアのように数値が変化するUIは、毎フレーム更新する代わりに、値が変わったタイミングだけ更新したり、ウィジェット側のバインディングで表示を反映させたりする方法があります。常時バインディングは手軽ですが、要素が増えると負荷の要因になり得るため、更新頻度を意識すると安定しやすいです。

画面エフェクトを重ねる：ポストプロセス

色合いを変える、画面をぼかす、画面の四隅を暗くする（ビネット）といった画面全体に作用する映像効果は、ポストプロセスで実現します。ポストプロセスはレンダリングされた画面（シーンカラー）に対して後処理として効果をかける仕組みで、UIのように個別の部品を置くのではなく、映像そのものの見え方を変えます。

Post Process Volume による基本的な効果

露出・色温度・コントラスト・彩度・ブルーム・被写界深度・ビネットなど、エンジンが標準で用意している多くの効果は、Post Process Volume（ポストプロセスボリューム）をレベルに配置するだけで調整できます。

  1. レベルに Post Process Volume を配置します。
  2. 詳細パネルで色調補正やビネットなどのパラメータを調整します。
  3. ボリュームの範囲内だけに効かせるか、レベル全体に効かせるかを「Infinite Extent（Unbound）」などの設定で切り替えます。範囲を持たせる場合は、その内側にカメラが入ったときに効果が適用されます。

「画面全体に常時かけたい」のであれば、ボリュームを無限範囲（Unbound）に設定するか、後述するカメラ側のポストプロセス設定を使うと、カメラの位置に依存せず適用できます。

ポストプロセスマテリアルによる独自エフェクト

標準パラメータにない独自の効果（グレースケール化、走査線、画面の歪み、輪郭抽出など）を作りたい場合は、ポストプロセスマテリアルを使います。

  1. マテリアルを新規作成し、詳細パネルで「Material Domain」を「Post Process」に変更します。
  2. 「Blendable Location（ブレンド適用位置）」で、効果をレンダリングのどの段階で適用するかを選びます。トーンマッピング前に適用するか後に適用するかなどの選択肢があり、HDR段階で処理したいか、最終的な見た目に対してかけたいかで選びます。この項目の名称や選択肢はエンジンのバージョンによって変更されているため、実際の選択肢はエディタ上で確認してください。
  3. マテリアル内で効果を組み、Emissive Color など適切な出力につなぎます。
  4. Post Process Volume またはカメラの「Post Process Materials（Array）」に、作成したマテリアルを追加します。

多くの画面エフェクトは、シーンカラーを取得して色を加工し、出力する流れで作成します。トーンマッピングや、TAA・アップスケーリング（解像度スケール）と組み合わせたときの見え方はブレンド適用位置によって変わることがあるため、意図した結果になるか実機・実プレビューで確認するのが安全です。

被ダメージ時の赤いフラッシュなどの演出例

「ダメージを受けたら画面の縁が赤く光る」「回復で画面が緑にフラッシュする」といった演出は、代表的な画面エフェクトです。実現方法は複数あり、目的に応じて選びます。

方法特徴向いているケース
ウィジェットの全画面イメージ＋アニメーション赤いビネット画像などを全画面に置き、透明度をアニメーションで増減させる。UMGだけで完結し調整しやすい。シンプルな点滅・フェード演出
ポストプロセスマテリアル＋パラメータ制御マテリアルのパラメータをブループリントから動かし、画面の色味そのものを変える。映像と一体感が出る。映像処理として精密に表現したい場合
Post Process Volume の重み（Blend Weight）制御効果用ボリューム（やカメラ設定）の適用強度をブループリントで増減させる。既存のポストプロセス設定を一時的に強める演出

手軽さを優先するならウィジェットのアニメーション、映像としての一体感を優先するならポストプロセスマテリアル、という使い分けが目安になります。タイマーや「Timeline」ノードで透明度や強度を時間変化させると、自然なフェードイン・フェードアウトを表現できます。

カメラ単位で効果を限定する：Camera Component の Post Process 設定

「特定のカメラで覗いているときだけ効果をかけたい」（例：スコープを覗いたとき、特定の視点に切り替えたとき）という場合は、Camera Component（カメラコンポーネント）が持つ Post Process 設定を使う方法があります。

  • カメラコンポーネントの詳細パネルには、Post Process Volume と同様の「Post Process」設定があり、ここで色調補正やポストプロセスマテリアルの追加ができます。
  • この設定はそのカメラがアクティブなときに適用されるため、カメラを切り替えると効果も切り替わります。「Post Process Blend Weight」で適用強度を調整できます。
  • レベル全体ではなく、特定のキャラクターや乗り物のカメラにだけ効果を持たせたいときに役立ちます。

レベル全体に常時かけたいなら Post Process Volume（無限範囲）、特定カメラ視点に限定したいならカメラコンポーネント、という整理になります。

HUDクラスによる直接描画（補助的な方法）

UMGが主流になる前から存在する仕組みとして、HUDクラスの描画ノードで画面に直接テキストや図形を描く方法もあります。デバッグ情報の簡易表示などには手軽ですが、レイアウトやアニメーション、入力対応といった面ではウィジェットの方が柔軟です。

  1. 「ブループリントクラス」から HUD を親クラスにしたクラスを作成します。
  2. HUDの描画イベント内で「Draw Text」「Draw Line」などのノードを使い、表示内容を描きます。
  3. 使用する Game Mode に、作成したHUDクラスを設定します。

本格的なUIを作る場合はウィジェットを中心に据え、HUDの直接描画は簡易表示やデバッグ用途に絞ると、保守しやすい構成になります。

つまずきやすいポイント

症状・注意点原因と対処
文字やUIをポストプロセスで出そうとしてうまくいかないテキストやゲージはポストプロセスではなくウィジェット（UMG）の領分。文字・UIはウィジェットを Add to Viewport、画面全体の映像効果はポストプロセス、と役割を分ける。
ウィジェットが画面に表示されない「Add to Viewport」が呼ばれていない、ウィジェットの生成や追加の処理が実行されていない、要素の透明度やサイズ・配置（アンカー）が原因のことが多い。生成と追加が確実に走っているか、要素が画面内に収まっているかを確認する。
ポストプロセスエフェクトが効かない／効きすぎるボリュームの範囲外にカメラがある、Blend Weight が0、ブレンド適用位置が意図と違う、などが原因になりやすい。全画面に効かせたい場合は無限範囲（Unbound）やカメラ側の設定を検討する。
エディタの設定名が解説と違うブレンド適用位置をはじめ、項目名や選択肢はバージョンで変更されることがある。最終的な名称・挙動は使用中のエディタや公式ドキュメントで確認する。

よくある質問（FAQ）

Q. 文字を画面に出すのに、ウィジェットとHUDのどちらを使うべきですか？

A. 一般的なゲームUI（テキスト、ゲージ、メニュー、アニメーション付き演出など）はウィジェット（UMG）が標準的です。HUDクラスの直接描画は、デバッグ表示や簡易的な描画に向いています。多くの場面ではウィジェットを選ぶと拡張しやすいです。

Q. 画面全体に色味のエフェクトをかけたいのですが、ウィジェットとポストプロセスのどちらが良いですか？

A. 半透明の色を全画面に重ねるだけの簡単な表現ならウィジェットでも可能です。一方、映像そのものの色調・コントラスト・ブラーなどを変えたい、レンダリング結果に対して処理したい場合はポストプロセスが適しています。映像との一体感が必要かどうかが判断の目安です。

Q. 特定のカメラのときだけエフェクトをかけるには？

A. カメラコンポーネントの Post Process 設定にポストプロセスマテリアルや色調補正を設定すると、そのカメラがアクティブなときだけ効果が適用されます。カメラを切り替えると効果も切り替わるため、視点ごとに見え方を変えたい場合に便利です。

まとめ

UE5でカメラの映す画面に文字やエフェクトを重ねる際は、文字・UIはウィジェット（UMG）を Add to Viewport で重ね、画面全体の映像効果はポストプロセス（Post Process Volume／ポストプロセスマテリアル）で処理する、という役割分担を意識するのが要点です。被ダメージ時のフラッシュのような演出は両方の手段で実現でき、手軽さと映像の一体感のどちらを優先するかで選びます。効果を特定カメラに限定したい場合はカメラコンポーネントのポストプロセス設定が使えます。設定名や選択肢はバージョンによって変わることがあるため、最終的な名称や挙動は使用中のエディタや公式ドキュメントで確認すると確実です。

編集
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-13 12:42:43 atom 64

人気ページ

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