◀ 16.

UE5で画面中央にメッセージを表示する方法｜アンカー設定とウィジェット

▶
編集

Unreal Engine 5（UE5）で画面の中央にメッセージ（テキスト）を表示するには、ウィジェットブループリントにテキストブロックを配置し、そのアンカーを画面中央、アライメントを「0.5, 0.5」に設定したうえで、ゲーム側から「Create Widget」と「Add to Viewport」で表示するのが基本的な方法です。アンカーとアライメントの両方を正しく設定することが、どの解像度でも確実に中央へ配置するための要点になります。

この記事の要点
  • 画面中央にメッセージを出す土台は「ウィジェットブループリント＋テキストブロック」が扱いやすく、解像度差にも対応しやすい。
  • 中央配置にはアンカーを中央、位置（Position）を0,0、アライメントを0.5, 0.5に設定する。アンカーだけでは中央にならない点に注意。
  • 表示は「Create Widget」→「Add to Viewport」、消すときは生成したウィジェットを変数に保持して「Remove from Parent」を呼ぶ。
  • 一定時間で消すなら「Delay」→「Remove from Parent」、文言を動的に変えるなら「Set Text」を使う。
  • アンカーの設定漏れ、Z Orderによる重なり順、解像度対応、消し忘れがよくある落とし穴。

画面中央にメッセージを表示する全体の流れ

UE5でメッセージを画面に出す手段はいくつかありますが、見た目の調整や中央寄せのしやすさを考えると、UMG（Unreal Motion Graphics）のウィジェットを使う方法が扱いやすい傾向にあります。デバッグ用途であれば「Print String」でも文字は出せますが、表示位置やフォントを細かく制御したい場合はウィジェットを使う方が向いています。

大まかな流れは次のとおりです。

  • ウィジェットブループリントを作成し、テキストブロックを中央に配置する。
  • ゲーム側（プレイヤーキャラクターやHUDなど）で「Create Widget」によりウィジェットを生成する。
  • 「Add to Viewport」で画面に表示する。
  • 必要に応じて「Set Text」で文言を変更し、一定時間後に「Remove from Parent」で消す。

ウィジェットブループリントとテキストブロックを用意する

まず、メッセージの入れ物となるウィジェットを作成します。

  • コンテンツブラウザで右クリックし、「ユーザーインターフェース」→「ウィジェットブループリント」を選択します（UE5のバージョンによっては、生成時に親クラスとして「User Widget」を選ぶ画面が表示されます）。
  • 名前を「WBP_Message」など分かりやすいものに変更し、ダブルクリックしてUMGエディタ（デザイナー）を開きます。
  • 左側の「パレット」から「Text（テキスト）」を、中央のデザイナー領域へドラッグして配置します。

配置したテキストブロックを選択し、右側の「詳細（Details）」パネルで設定を行います。後からブループリントで文言を差し替えられるよう、テキストブロックの変数名（例: MessageText）を分かりやすく付け、「Is Variable（変数として公開）」にチェックを入れておくと便利です。

なお、テキストブロックを直接キャンバスに置いて中央寄せする方法のほか、テキストブロックを「Size Box」や「Border」などのコンテナに入れてから中央配置する方法もあります。本記事ではまず最小構成として、テキストブロックを直接中央に配置する手順を説明します。

テキストブロックを画面中央に配置する設定

ウィジェットの一番外側（ルート）がCanvas Panel（キャンバスパネル）になっている場合、その上に置いた要素は「アンカー」と「位置」と「アライメント」で配置が決まります。中央に正しく配置するには、これらをまとめて設定する必要があります。

テキストブロックを選択した状態で、「詳細」パネルの「Slot (Canvas Panel Slot)」付近にあるアンカー設定を開き、次のように設定します。

項目設定値役割
アンカー（Anchors）画面中央（中央のプリセット）親（画面）に対する基準点を中央にする
Position X / Position Y0 / 0アンカー基準点からのずれをゼロにする
Alignment X / Alignment Y0.5 / 0.5要素自身の原点（ピボット）を中心に合わせる

アンカーは、アンカーメニューを開いたときに表示されるプリセットの中から、中央（縦横ともに中央）を選びます。アンカー値で表すと、横0.5・縦0.5の位置（画面の真ん中）が基準点になります。

ここで重要なのがアライメント（Alignment）です。アライメントは要素自身のどの点をアンカーに合わせるかを0〜1で指定する値で、0.5, 0.5に設定すると要素の「中心」がアンカー（画面中央）にそろいます。アンカーを中央にしただけでアライメントを既定のままにすると、要素の左上が画面中央に来てしまい、見た目が右下にずれて感じられます。アンカー中央＋位置0＋アライメント0.5の3点をそろえて、はじめて要素全体が画面中央に配置されます。

テキスト自体の左右の揃え（Justification）も別途設定できます。文字数によって幅が変わる場合は、テキストブロックの「Justification」を中央寄せにしておくと、複数行や可変長のメッセージでも中央にそろいやすくなります。

メッセージを表示する処理を組む

次に、作成したウィジェットを実際に画面へ出す処理を、プレイヤーキャラクターのブループリントなどに追加します。ここではカスタムイベント「ShowMessage」を作る例で説明します。

  • イベントグラフを開き、カスタムイベント「ShowMessage」を作成します。
  • 必要に応じて、ShowMessageに文字列型（String または Text）の入力ピン「Message」を追加します。
  • 「Create Widget」ノードを置き、Class に先ほどの「WBP_Message」を指定します。Owning Player には、対象となるプレイヤーコントローラを接続します（未指定でも動作する場合がありますが、明示しておくと挙動が安定しやすいです）。
  • 「Create Widget」の戻り値（Return Value）を、後で消せるように変数（例: CurrentMessageWidget）に保存します。
  • その変数を「Add to Viewport」に接続して、画面に表示します。

処理の流れをノードの並びで表すと次のようになります。

ShowMessage（Message）

　→ Create Widget（Class: WBP_Message）

　→ Set CurrentMessageWidget（生成したウィジェットを変数に保存）

　→ Add to Viewport

「Add to Viewport」にはZ Orderという入力があり、数値が大きいほど手前に表示されます。他のUI（HUDやメニューなど）と重なる場合は、このZ Orderを調整して、メッセージが他の要素の裏に隠れないようにします。

表示するメッセージの文言を動的に変える

表示するたびに文言を変えたい場合は、テキストブロックの「Set Text」を使います。前述のように、テキストブロックを「Is Variable」にしておくと、ウィジェット内のブループリントから直接参照できます。

ウィジェットブループリント側に文言を受け取る関数やイベント（例: SetMessageText(Text)）を用意し、その中でテキストブロックの「Set Text」を呼ぶと、外部から渡した文字列を画面に反映できます。

SetMessageText（InText）

　→ MessageText の Set Text（In Text: InText）

呼び出し側では、Create Widgetの直後にこの関数を呼んでから「Add to Viewport」する、という順序にすると、表示と同時に正しい文言が出ます。なお、テキストブロックが扱うのはText型のため、String型の値を渡す場合は「To Text (String)」などで変換が必要になることがあります。

一定時間でメッセージを自動的に消す

通知のように一定時間だけ表示して自動で消したい場合は、「Delay」と「Remove from Parent」を組み合わせます。「Remove from Parent」は、ビューポートに追加したウィジェットを画面から取り除くノードで、ターゲットには表示中のウィジェット（保存しておいた変数）を指定します。

Add to Viewport

　→ Delay（Duration: 3.0）

　→ Remove from Parent（Target: CurrentMessageWidget）

Delayの秒数は、メッセージの長さや用途に合わせて調整します。フェードアウトのような演出を加えたい場合は、ウィジェット内のアニメーション機能（UMGのアニメーション）を再生してから「Remove from Parent」する、という流れにすると、より滑らかに消すことができます。

よくある落とし穴と対処

注意したいポイント
  • アンカーは設定したのに中央に来ない: アライメントが既定（0, 0）のままになっている可能性が高いです。アライメントを0.5, 0.5にして、要素の中心をアンカーへ合わせます。位置（Position）が0になっているかも併せて確認します。
  • 他のUIの裏に隠れる: 「Add to Viewport」のZ Orderが小さいと、後から追加された他のウィジェットの背面に回ることがあります。Z Orderを大きくして、表示順を調整します。
  • 解像度やウィンドウサイズを変えると位置がずれる: アンカーを中央にしておけば、画面サイズが変わっても基準点は中央に保たれます。固定のPosition値だけで配置していると、解像度差でずれやすくなります。文字サイズ自体を画面に追従させたい場合は、ルートにScale Boxを使う方法も検討します。
  • メッセージが消えない・重複して残る: 生成したウィジェットを変数に保存しておかないと、「Remove from Parent」で消す対象を指定できません。連続表示する場合は、新しく表示する前に古いウィジェットが残っていないかを確認し、必要なら先に消してから生成すると重複を防げます。
  • Create Widgetを毎回呼んで負荷が増える: 高頻度で表示するメッセージは、毎回生成・破棄するより、ウィジェットを保持したまま表示／非表示（Visibilityの切り替え）で制御する設計にすると無駄が減ります。

よくある質問

Q. アンカーとアライメントの違いは何ですか。
アンカーは「親（画面）のどこを基準点にするか」を決める設定で、アライメントは「要素自身のどの点をその基準点に合わせるか」を決める設定です。中央配置では、アンカーを画面中央にし、アライメントを0.5, 0.5にして要素の中心を基準点に重ねます。両方を設定して初めて、要素全体が画面の真ん中にそろいます。

Q. テキストではなく画像やアイコンを中央に出したい場合はどうしますか。
基本的な配置の考え方は同じです。テキストブロックの代わりに「Image」をキャンバスに置き、アンカーを中央、アライメントを0.5, 0.5に設定すれば中央に配置できます。テキストと画像をまとめて中央に出したい場合は、それらを「Overlay」や「Vertical Box」などのコンテナにまとめ、そのコンテナを中央配置すると、全体の位置をひとまとめに管理できます。

Q. C++では同様のことはできますか。
できます。UMGはC++からも操作でき、ウィジェットの生成（CreateWidget）やビューポートへの追加（AddToViewport）に相当する処理をコードで記述できます。チームや規模に応じて、ブループリントとC++を使い分けるとよいでしょう。各ノードや関数の正確な引数・挙動は、利用しているUE5のバージョンの公式ドキュメントで確認することをおすすめします。

ウィジェットによる中央メッセージ表示は、アイテム取得時の通知やチュートリアルの案内、演出用のテロップなど、さまざまな場面に応用できます。まずはアンカー・位置・アライメントの3点を正しくそろえることから始めてみてください。

編集
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:37 atom 64

人気ページ

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