UE5ではじめての UMG — ボタンを押したらテキストが変わる（Blueprint）

Third Person など任意のテンプレートでプロジェクトを開き、 Widget Blueprint（UMG）を新規作成します。Designer でボタンとテキストを配置し、Graph で OnClicked からカウンタを増やして Set Text します。最後に Level Blueprint から Add to Viewport して表示します。

下図は「Designer で UI 配置 → Graph でクリック処理 → レベルで Viewport に載せる → 再生」の流れです。

Content Browser で右クリック → User Interface → Widget Blueprint を選び、名前を WBP_ClickCounter などにします。開いたら Designer を選択します。

1. Palette から Canvas Panel をルートに（既定であればそのまま）
2. Button を配置し、Hierarchy 名を BtnClick、キャプションは「押す」など好きに
3. Text を配置し、名を TxtStatus、初期文言は「ボタンを 0 回押しました！」など
4. レイアウト（アンカー・位置）はこのレッスンでは大まかで OK（まず動作優先）

Graph タブへ切り替え、左の Graph パネルから BtnClick を探して OnClicked をドラッグして配置します（またはコンポーネント一覧からイベントを追加）。

【WBP_ClickCounter · Event Graph のイメージ】
※ 実際は Blueprint エディタ上のノードでつなぎます。

① 変数 ClickCount（Integer, 既定 0）を用意
② BtnClick の OnClicked イベントを配置
③ 実行ピン: SET ClickCount = ClickCount + 1
④ TxtStatus を取得し、SetText（In Text）
   · Format Text ノードなどで「ボタンを {0} 回押しました！」の {0} に ClickCount を渡す
   · または Conv_IntToText → 文字列連結でも OK
⑤ Compile → Save

ノード名は英語UIのままの場合が多いです。「Increment Int」や単純な「加算→Set」、Format Text など、手元のエンジンバージョンで検索しながら同じ結果になる配線を選んでください。

メインレベルを開き、ツールバーから Blueprints → Open Level Blueprint を開きます。Event BeginPlay から Widget を生成して Viewport へ載せます。

【Level Blueprint · Event BeginPlay のイメージ】

Event BeginPlay
  → Create Widget（Class = WBP_ClickCounter, Owning Player = Get Player Controller）
  → Return Value を「Add to Viewport」へ
  · ZOrder はこのレッスンでは既定のままで可

※ テンプレートやプロジェクト設定により、別の場所（PlayerController 等）から
  Add to Viewport する構成もあります。まずはレベルから表示できればゴール達成です。

• Compile / Save を忘れずに。エラーが出たら Output Log とグラフを確認
• Play（PIE）でボタンをクリックし、テキストが更新されることを確認
• ウィジェットが二重に出る場合は、BeginPlay が複数回走っていないか・別経路でも Add していないかを確認

• クリックしても反応しない … Is Visible、入力モード（Set Input Mode UI Only / Game And UI）の影響、他 UI が被っていないか。
• Compile Error … ピンの型（Text と String 等）不一致。Set Text に渡す値の型を確認。
• 画面に何も出ない … Add to Viewport を呼んでいない、Class が None、別レベルを再生している等。
• Designer の名前と Graph が一致しない … Hierarchy の名前変更後、古い参照が残っていないか。

• Widget Blueprint を作成し、Designer で Button / Text を配置した
• Graph で OnClicked からカウンタを更新し Set Text した
• Level Blueprint から Create Widget → Add to Viewport した
• UE5 の UI 入口（UMG）を掴んだ

• PlayerController や GameMode から HUD を管理する構成へ移す
• 入力（Enhanced Input）と UI のフォーカスを組み合わせる
• Common UI やスタイル・アニメーション（Widget Animation）へ展開
• Unreal ロードマップで学習の順番を俯瞰する