Menu

© 2026 ういやまラボ

JPEN
BLOGTOOLSPRODUCTNOTES
リストに戻る

【Unreal Engine】UMG入門：Widget BlueprintでゲームUIを構築する

作成: 2025-12-12

Unreal Motion Graphics（UMG）を使ったゲームUI制作の基本を紹介。Widget Blueprintの構造、HUDの作成手順、データバインディングによる動的な値の反映、Event Dispatcherを使ったウィジェット間通信などを整理。

UMGでUI制作を始める前に

Unreal Engine (UE) でゲーム開発を始めたばかりの皆さん、ゲームの核となるロジックは組めても、プレイヤーが直接触れるユーザーインターフェース（UI） の作成でつまずいていませんか？

  • 「HUD（ヘッドアップディスプレイ）をどうやって画面に表示すればいいのか？」
  • 「HPバーやスコアを、ゲーム内の値と連動させるにはどうすればいい？」
  • 「メニュー画面とゲームプレイ画面の切り替えが複雑になる…」

ゲームUIは、プレイヤー体験を大きく左右する重要な要素です。しかし、UIのレイアウト、アニメーション、そしてゲームロジックとの連携は、初心者にとって大きな壁となりがちです。

本記事では、Unreal Engineの強力なUIシステムであるUMG (Unreal Motion Graphics) と、その中核をなすWidget Blueprint（ウィジェットブループリント） に焦点を当て、基本から実践的な応用テクニックまでを、豊富なBlueprintの例を交えて徹底的に解説します。この記事を読めば、初心者から一歩進んだ、効率的でメンテナンス性の高いUI作成スキルが身につくでしょう。

目次

UMGとWidget Blueprintの基本

UMG (Unreal Motion Graphics) とは？

UMGは、Unreal Engineに標準搭載されているUI作成フレームワークです。HTML/CSSのようなマークアップ言語ではなく、ビジュアルスクリプティング とドラッグ＆ドロップ による直感的な操作でUIを構築できるのが特徴です。

UMGのUI要素はすべてウィジェット（Widget） として扱われます。ボタン、テキスト、画像、スライダーといった基本的な要素から、複雑なレイアウトを構成するためのコンテナウィジェットまで、多種多様なウィジェットが用意されています。

Widget Blueprint（ウィジェットブループリント）の構造

Widget Blueprintは、特定のUI要素（例：メインメニュー、HPバー）の見た目と動作ロジックを定義するアセットです。主に以下の2つのタブで構成されています。

  1. Designer（デザイナー）タブ:
    • UIのレイアウトを構築する場所です。パレットからウィジェットをドラッグ＆ドロップし、サイズや位置、アンカー（画面のどの位置に固定するか）を設定します。
    • ウィジェットの見た目（色、フォント、画像など）もここで設定します。
  2. Graph（グラフ）タブ:
    • UIの動作ロジックをBlueprintで記述する場所です。ボタンが押されたときの処理や、ゲームの状態に応じてUIを更新する処理などを実装します。

HUDの作成手順

最も基本的なUIである、プレイヤーのHPを表示するHUD（Head-Up Display）を例に、Widget Blueprintの作成手順を見ていきましょう。

ステップ1: Widget Blueprintの作成

  1. コンテンツブラウザで右クリックし、「User Interface」-> 「Widget Blueprint」を選択します。
  2. 親クラスとして「User Widget」を選択し、名前をWBP_PlayerHUDなどとします。

ステップ2: ウィジェットの配置とアンカー設定

WBP_PlayerHUDを開き、Designerタブで以下のウィジェットを配置します。

  1. Canvas Panel: ルートウィジェットとして自動で配置されます。
  2. Horizontal Box: HPバーとテキストを横並びにするためのコンテナです。Canvas Panelの子として配置します。
  3. Text: 「HP:」というラベル用。Horizontal Boxの子として配置します。
  4. Progress Bar: 実際のHPの割合を表示するためのバー。Horizontal Boxの子として配置します。

【重要：アンカー設定】 UIが様々な画面サイズやアスペクト比に対応できるように、必ずウィジェットのアンカー を設定します。HUDは通常、画面の左上や右上に固定されるため、Horizontal Boxを選択し、アンカーを「左上」に設定します。

ステップ3: ゲームへの表示ロジック

作成したウィジェットをゲーム画面に表示するには、ゲームの開始時（通常はプレイヤーコントローラーやHUDクラス）で以下の処理を行います。

// プレイヤーコントローラーのBeginPlayイベントなど
// 1. Create WidgetノードでWBP_PlayerHUDのインスタンスを作成
// 2. Add to Viewportノードで作成したウィジェットを画面に追加

データバインディングによる動的UI更新

HPバーをゲーム内のプレイヤーのHPと連動させるには、データバインディング（Data Binding） という仕組みを使います。

データバインディングとは、ウィジェットのプロパティ（例：Progress Barの割合）を、Blueprintの関数や変数に自動的にリンクさせる機能です。これにより、ゲームロジック側で変数を更新するだけで、UIが自動的に最新の状態を反映します。

データバインディングの実装例（Progress Bar）

  1. DesignerタブでProgress Barを選択します。
  2. Detailsパネルの「Progress」セクションにある「Percent」プロパティの横にあるBind ボタンをクリックし、「Create Binding」を選択します。
  3. GraphタブにGet Percentという名前の新しい関数が作成されます。
  4. この関数内で、プレイヤーキャラクターのHPを取得し、最大HPで割って0.0から1.0の間の値（割合）を算出し、Returnノードに接続します。
// GraphタブのGet Percent関数内
// 1. Get Player Characterノード
// 2. Cast To [プレイヤーキャラクタークラス]ノード
// 3. [プレイヤーキャラクター]からGet Current HPノード
// 4. Get Max HPノード
// 5. (Current HP / Max HP) を計算
// 6. Return ValueとしてPercentに接続

【ベストプラクティス】 バインディング関数は、Slateの描画サイクル に基づいて、UIの値が必要になるたびに呼び出されます。Event Tickのような厳密に毎フレーム実行される仕組みとは異なりますが、UIが表示されている間は高頻度で呼び出されるため、パフォーマンス上の理由から、複雑な計算や頻繁な参照を伴うバインディングは避けるべきです。 特に、値が頻繁に変わらない場合は、Event Dispatcher を使って、値が変更されたときだけUI更新用のカスタムイベントを呼び出す方が効率的です。

イベント処理の実装例（Button）

ボタンウィジェットの動作ロジックは、イベントを使って実装します。

  1. DesignerタブでButtonウィジェットを選択します。
  2. Detailsパネルの一番下にある「Events」セクションで、「On Clicked」の横にある**+** ボタンをクリックします。
  3. GraphタブにOn Clicked (Button)というイベントノードが作成されます。
  4. このイベントノードから、メニューを開く、ゲームを終了するなど、必要な処理を接続します。

ベストプラクティスとよくある間違い

ベストプラクティス：ウィジェット間の通信

複雑なUIでは、複数のウィジェットが連携する必要があります。ウィジェット間の通信には、以下の方法が推奨されます。

通信方法説明用途
Custom Event親ウィジェットから子ウィジェットへ直接処理を呼び出す。最もシンプル。親が子の状態を直接操作する場合。
Widget Interface複数のウィジェットが共通の関数を実装するための契約。汎用的なウィジェット（例：通知ポップアップ）を作成する場合。
Event Dispatcherウィジェット内でイベントを発生させ、外部（例：プレイヤーコントローラー）でそのイベントを購読（Subscribe）する。子ウィジェットが親やゲームロジックに「何か起こった」ことを通知する場合。最も推奨される方法。

よくある間違い

間違い問題点解決策
すべてのロジックをウィジェットに書くUIとゲームロジックが密結合し、再利用性やメンテナンス性が低下する。ウィジェットは「表示」と「入力受付」に専念させ、ゲームロジック（HPの増減など）はプレイヤーコントローラーやゲームモードに持たせる。
Event TickでUIを更新する毎フレーム実行されるため、UIが不要な処理でパフォーマンスを圧迫する。データバインディングを使うか、Event Dispatcher を使って、値が変更されたときだけUI更新用のカスタムイベントを呼び出す。
アンカー設定を怠る異なる解像度でUIの配置が崩れる。すべてのトップレベルウィジェットに適切なアンカーを設定し、様々な解像度でテストする。

Widget Blueprint活用のポイント

本記事では、Unreal EngineのUMGとWidget Blueprintを使ったUI作成の基本から応用までを解説しました。

要点説明
UMG/Widget BlueprintUEのビジュアルUIシステム。Designerで見た目を、Graphでロジックを構築する。
データバインディングUI要素のプロパティをゲームロジックの変数に自動で連動させる強力な機能。
イベント処理ボタンクリックなどのユーザー操作をトリガーにロジックを実行する。
ベストプラクティスウィジェットは表示に専念させ、Event Dispatcherでゲームロジックと疎結合に通信させる。

UMGは非常に柔軟で強力なツールです。これらの基本とベストプラクティスをマスターすれば、あなたのゲームのUIは格段に洗練され、プレイヤーにとって快適な体験を提供できるようになるでしょう。まずはシンプルなHUDから、実践を積み重ねていきましょう。