Menu

© 2025 ういやまラボ

BLOGTOOLSPRODUCTNOTES
    リストに戻る
    JAEN
    日本語English

    【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から、実践を積み重ねていきましょう。