UMG UI デザイナのクイックスタートガイド | Unreal Engine 5.0 ドキュメンテーション

この クイックスタートガイド では、Unreal Motion Graphics (UMG) UI デザイナ を基本的なインゲームの HUD 要素を実装する方法について説明します。また、ヘルスバー、エネルギーバー、弾薬の数などの動的な要素の作成プロセスの例について紹介します。さらに、これらの要素を ビューポート に追加する方法についても説明します。

すべてのアクションについて、ステップごとに、詳しく説明します。ただし、Unreal Engine を初めて使用する方は、まず「レベルデザイナのクイックスタート」を参照してください。このクイックスタートでは、UE を使用する際に必要な基本的な知識と用語について解説しています。また、このコースにもより詳細な情報へのリンクが含まれています。必要に応じて、ご確認ください。

1 - 必要なプロジェクト設定

このチュートリアルでは、[Starter Content (スターターコンテンツ)] を有効にした「Blueprint First Person」テンプレートを使用します。

キャラクターはゲームプロセス開始時には武器を持たない状態で表示されます。キャラクターが武器を手にすると、弾薬の表示が出るようにする必要があります。このためには、2 つのウィジェット (HUD および HUD_AmmoCount) を使用します。ゲームプロセス開始時にキャラクターのヘルスとエネルギーが表示されるように HUD ウィジェットを調整し、武器を手にしたら弾薬が表示されるように HUD_AmmoCount ウィジェットを調整する必要があります。

Widget ブループリント を作成します。コンテンツブラウザ で [Add New (新規追加)] をクリックし、[User Interface (ユーザーインターフェース)] > [Widget Blueprint (ウィジェットブループリント)] を選択します。このウィジェットに「HUD」という名前を付けます。

UI 要素 (HUD、メニューなど) の作成と設定には、ウィジェットブループリントを使用します。Widget ブループリントを使用すると、UI 要素を視覚的にレイアウトし、その要素のスクリプト化された機能を提供することができます。

ウィジェットブループリントの詳細については、「[UMG のウィジェットブループリント]](building-virtual-worlds/level-design-quick-start)」を参照してください。
さらに 3 つのウィジェットブループリントを作成し、「HUD_AmmoCount」、「MainMenu」、「PauseMenu」という名前を付けます。
新規 レベル を作成します。コンテンツブラウザ で 右クリック して、[Level (レベル)]を選択し、「Main」という名前を付けます。

このレベルは後でメインメニューのセットアップのガイドで使用します。 ### BP_FirstPersonCharacter ブループリントを調整する
コンテンツブラウザ で、「Content/FirstPerson/Blueprints」フォルダにある BP_FirstPersonCharacter ブループリントを開きます。

これはゲームでコントロールする キャラクターブループリント です。HUD ウィジェットを作成してビューポートに表示するには、このブループリントを調整する必要があります。
ブループリントエディタ ウィンドウで、[Add Variable (変数を追加)] ボタンをクリックします。
この変数の [Details (詳細)] パネルで、変数の型として Float を選択し、「Health」という名前を入力します。[Default Value (デフォルト値)] を「1.0」に設定します。

この変数は、HUD ウィジェットでキャラクターのヘルスバーを調整するために使用します。
Float 型の変数をもう 1 つ作成して、「Energy」という名前を付けます。[Default Value (デフォルト値)] を「1.0」に設定します。

この変数は、HUD ウィジェットでキャラクターのエネルギーバーを調整するために使用します。

デフォルト値を入力する前に、ツールバーの [Compile (コンパイル)] ボタンをクリックしてブループリントをコンパイルする必要があります。
Integer 型の変数をもう 1 つ作成して、「Ammo」という名前を付けます。[Default Value] を「25」に設定します。
Integer 型の変数をさらにもう 1 つ作成して、「MaxAmmo」という名前を付けます。[Default Value] を「25」に設定します。
グラフ ウィンドウ内を 右クリック し、Event Begin Play ノードを追加して、Create Widget ノードを追加します。Class を HUD ウィジェットに設定します。
Create HUD Widget の Return Value で [Promote to Variable (変数へ昇格)] を選択して、「HUD Reference」という名前を付けます。

これを使用して、ゲーム開始時に HUD ウィジェットを作成し、後続の呼び出しのために変数として設定します。これは、ブループリント経由で HUD ウィジェットの関数を呼び出したり、プロパティを設定したりする必要がある場合に役立ちます。たとえば、ゲームを一時停止中に HUD を非表示にしたい場合、この変数を介して HUD にアクセスすることができます。
Set ノードの出力ピンに Add to Viewport ノードを追加します。

これで、ゲームプロセスの開始時からビューポートに HUD ウィジェットが追加されます。
1. BP_FirstPersonCharacter ブループリントを コンパイル して保存し、閉じます。

BP_Rifle ブループリントを調整する

BP_Rifle ブループリントの調整プロセスは、BP_FirstPersonCharacter ブループリントの調整と似ています。詳細については、上記の「BP_FirstPersonCharacter ブループリントを調整する」セクションを参照してください。

コンテンツブラウザ で、「Content/FirstPerson/Blueprints」フォルダにある BP_Rifle ブループリントを開きます。
1. On Component Begin Overlap (SphereCollision) ノードを見つけます。実行ピンで 右クリック して、[Break All Pin Link(s) (すべてのピンリンクを切断)] を選択します。
On Component Begin Overlap (SphereCollision) ノードの実行ピンからドラッグして、Create Widget ノードを追加します。Class を HUD_AmmoCount ウィジェットに設定します。
Create HUD Widget の Return Value で [Promote to Variable] を選択して、「HUD Ammo Count Ref」という名前を付けます。
Set ノードの出力ピンに Add to Viewport ノードを追加します。
Add to Viewport ノードの実行ピンを Cast to BP_FirstPersonCharacter ノードの実行ピンに接続します。スクリプトは次のようになります。

これで、キャラクターが武器を手にすると、HUD_AmmoCount ウィジェットがビューポートに追加されます。
1. BP_Rifle ブループリントを コンパイル して保存し、閉じます。

BP_FirstPersonCharacter ブループリントでキャラクター変数を調整する

この章では、宣言された変数を調整して、ブループリントに追加する方法について説明します。

BP_FirstPersonCharacter のブループリントエディタで、Alt キーを押したまま Energy 変数を グラフ ウィンドウにドラッグして、Jump スクリプトの横に配置します。
Ctrl キーを押したまま Energy 変数のコピーをグラフ ウィンドウにドラッグします。次のように、Substruct 演算子ノードを追加して接続し、「0.25**」に設定します。

このスクリプトを使用すると、キャラクターがジャンプするたびに、現在のエネルギー値からエネルギーが 0.25 ずつ減ります。
[Health] 変数に対しても同じスクリプトを設定します。ただし、テストのために F Key Event (またはその他のキー押下イベント) を使用します。

Health 変数でも同じスクリプトを設定します。ただし、テストのために F Key Event (またはその他のキー押下イベント) を使用します。
このスクリプトを使用すると、F キーを押すたびに、ヘルスの現在の値からヘルスが 0.25 減るかどうかをテストすることができます。

弾薬を再装填する機能を追加するには、以下の手順を実行します。R Key Event を追加します。Alt キーを押したまま Ammo 変数をドラッグします。Ctrl キーを押したまま Max Ammo 変数をドラッグします。次の図のように接続します。

BP_Rifle ブループリントでキャラクター変数を調整する

BP_Rifle ブループリントを開きます。OnFireProjectile Custom Event を見つけます。実行ピンで 右クリック して、[Break All Pin Link(s) (すべてのピンリンクを切断)] を選択します。
このノードの近くで 右クリック して、Branch ノードを追加します。
Ctrl キーを押したまま FirstPersonCharacterReference 変数のコピーを グラフ ウィンドウにドラッグします。このピンをドラッグして、Get Ammo を選択します。
Greater 演算子ノードを追加して、「0」に設定し、次のように接続します。

このスクリプトにより、弾薬が 0 より大きい場合、プレイするキャラクターが発射することができます。
OnFireProjectile Custom Event スクリプトの末尾の Montage Play ノードの後ろで、Ctrl キーを押したまま FirstPersonCharacterReference 変数のコピーを グラフ ウィンドウにドラッグします。このピンをドラッグして、Get Ammo を選択します。もう一度ピンをドラッグして、Set Ammo を選択します。
Substruct 演算子を追加して、Ammo を Ammo - 1 と等しくなるように設定します。スクリプトは次のようになります。

このスクリプトにより、プレイするキャラクターが発射するたびに、弾薬が 1 つずつ減ります。
1. BP_Rifle ブループリントを コンパイル して保存し、閉じます。

2 - ヘルス、エネルギー、弾薬を表示する

このステップでは、ウィジェットでヘルス、エネルギー、弾薬の各変数のビジュアライゼーションを設定し、ゲームプロセスとの接続を調整する必要があります。

ビジュアル：ヘルスおよびエネルギー

HUD ウィジェットのビジュアライゼーションを設定するには、次を実行します。

HUD ウィジェットブループリントを開き、ウィジェットブループリントエディタ にアクセスします。これにより、HUD ウィジェットのビジュアルレイアウトとスクリプト化された機能を作成できます。

ウィジェットブループリントエディタの各種要素の詳細については、「UMG のウィジェットブループリント」を参照してください。
[Palette (パレット)] パネルの [Panel (パネル)] にある [Horizontal Box (横方向ボックス)] を見つけ、[Hierarchy (階層)] パネルの [Canvas Panel (キャンバスパネル)] の上にドラッグします。

パネル ウィジェットは他のウィジェットのコンテナのようなウィジェットです。パネルウィジェット内のウィジェットに追加機能を提供することができます。
また、[Panel (パネル)] で 2 つの [Vertical Boxes (縦方向ボックス)] を [Horizontal Box (横方向ボックス)] にドラッグします。
[Common (一般)] で、2 つの [Text (テキスト)] ウィジェットを 1 つ目の [Vertical Box] の上に、そして 2 つの [Progress Bars (進捗バー)] を 2 つ目の [Vertical Box] の上にドラッグします。
[Horizontal Box] を選択して、グラフ でそのボックスを見つけて、サイズ調整してウィンドウの左上に配置します。
両方の [Progress Bars] を選択して、[Details (詳細)] パネルで、両方とも [Size] を [Fill] に設定します。
Progress Bars を含む [Vertical Box] を選択して、[Details] パネルの [Size (サイズ)] で両方とも [Fill] に設定します。
再度 [Horizontal Box] を選択して、バーがテキストとぴったりと合うようにサイズ調整します。
[Hierarchy] パネルで一番上の Text ウィジェットを選択し、[Details] パネルの [Content (コンテンツ)] に「Health:」と入力します。
もう 1 つの Text ウィジェットも同じ操作を行って、「Energy:」と入力します。次のようになります。

UMG テキストウィジェットでは、デフォルトで、Unreal Engine に内蔵されているフォントを使用します。これにより、Unreal Engine での作業を迅速に開始することができます。ただし、このビルトインフォントには、限られた数の言語しかサポートしていないなどの制限があります。ほとんどの場合、カスタムフォントをアセットにインポートする必要があります。カスタムフォントを使用するためのテキストウィジェットの設定の詳細については、「Creating and Assigning Fonts in Unreal Engine User Interface (Unreal Engine ユーザーインターフェースでのフォントを作成し、割り当てる)」を参照してください。
Health の横の 進捗バー を選択して、[Details] パネルで、[Fill Color and Opacity] を緑色に設定します。

色を割り当てても進捗バーの色は変わりません。これは、バーの塗りつぶしの [Percent] 値が「0.0」に設定されているためです。これを変更すると、他の色をテストすることができます。この値は後でキャラクターのヘルス変数値にリンクさせます。
また、Energy バーの [Fill Color and Opacity] も設定します (オレンジ色など)。
HUD ウィジェットのレイアウトは次のようになります。
1. HUD ウィジェットブループリントを コンパイル して保存し、閉じます。

ビジュアル：弾薬

HUD_AmmoCount ウィジェットのビジュアライゼーションを設定するには、次を実行します。

HUD_AmmoCount ウィジェットブループリントを開き、ウィジェットブループリントエディタ にアクセスします。
同じ方法で、ウィジェットを [Hierarchy] パネルに追加します。レイアウトの構造は次のようになります。
グラフ で 横方向ボックス を選択して、ボックスのサイズを調整してウィンドウの右上に配置します。
横方向ボックス を選択し、[Details] パネルで [Anchors (アンカー)] をクリックして、右上のアンカーを選択します。

これで、メダル形状のアンカー が画面右上に配置されます。

アンカーの設定により、スクリーンサイズに関係なく横方向ボックスの位置が固定されます。スクリーンサイズを変更しても、ウィジェットはメダル形状のアンカーからの同じ距離を保持します。

グラフ内で [Preview Size (プレビューサイズ)] オプションをクリックして変更することで、さまざまな画面サイズをテストできます。
HUD_AmmoCount ウィジェットブループリントを コンパイル して保存し、閉じます。

スクリプト：ヘルスおよびエネルギー

次のステップでは、HUD ウィジェットの要素に機能を提供します。

HUD ウィジェットブループリントを開き、ウィジェットブループリントエディタ にアクセスします。
ウィジェットブループリントエディタウィンドウの右上にある [Graph (グラフ)] ボタンをクリックします。
グラフ の Event Construct ノードで 右クリック して、Get Player Controller ノードを追加します。
Get Player Character ノードの Return Value ピンをドラッグして、Cast to BP_FirstPersonCharacter を選択します。
As First Person Character ピンからドラッグして、[Promote to Variable] を選択して、「My Character」と名前を付け、次のように接続します。

これで、BP_FirstPersonCharacter ブループリントの変数にアクセスできます。
ツールバーの [Compile (コンパイル)] をクリックしてスクリプトをコンパイルします。
デザイナ に戻り、[Health] の横にある 進捗バー を選択します。
[Details] パネルの [Progress] で、[Percent] の横にある [Bind (バインド)] オプションをクリックし、[Create Binding (バインディングを作成)] をクリックします。

これで、開いたウィンドウで関数スクリプトを調整することで、カスタムバインディングを作成できます。
Ctrl キーを押したまま MyCharacter 変数のコピーを グラフ にドラッグします。
MyCharacter ピンをドラッグして、Get Health を選択します。
Health ピンを Return Node の Return Value に接続します。次のようになります。
同じ手順で、[Energy] の隣にある 進捗バー を調整します。次のようになります。
HUD ウィジェットブループリントを コンパイル して保存し、閉じます。

スクリプト：Ammo および AmmoMax

Ammo 変数の設定手順は、Health 変数および Energy 変数の設定と同様です。詳細については、上記の「スクリプト：ヘルスおよびエネルギー」セクションを参照してください。

HUD_AmmoCount ウィジェットブループリントを開いて、*[Graph (グラフ)] タブに移動します。
HUD_AmmoCount ウィジェットブループリントと BP_FirstPersonCharacter** ブループリントを接続するためのスクリプトを前述の方法で作成します。以下のようになります。
ツールバーの [Compile (コンパイル)] をクリックしてスクリプトをコンパイルします。
デザイナ に戻り、Ammo テキストの後ろにある「25」テキストを選択します。[Details]パネルの [Text] で、[Bind]、[Create Binding] の順にクリックします。
開いたウィンドウで、Ctrl キーを押したまま MyCharacter 変数のコピーを グラフ にドラッグします。MyCharacter ピンをドラッグして、Get Ammo を選択します。Ammo ピンを Return Node の Return Value に接続します。次のようになります。次のようになります。

Ammo ノードと Returned ノード を接続すると、変換ノード To Text が自動的に作成されます。
もう 1 つの 25 のテキストでも上記のプロセスを繰り返し、「AmmoMax」テキストのバインディングを作成します。

最大弾薬が一定である場合は、これを行う必要はありません。ただし、この AmmoMax 変数設定を使用すると、BP_FirstPersonCharacter にスクリプトを作成することでこれを変更できます。
[Compile]、[Save (保存)] の順にクリックして、[Play (再生)] ボタンをクリックしてエディタで再生します。

このガイドでは、HUD ウィジェットによるヘルスバーとエネルギーバーの表示、および HUD_AmmoCount ウィジェットによる弾薬の表示を調整しました。これらのウィジェットはすべて、キャラクターブループリントの現在の値を表示します。ゲームプロセスでは、Space キーを押すとキャラクターがジャンプしてエネルギーが減り、F キーを押すとヘルスが減り、左マウスボタン を押すと武器が発射されて弾薬が減ります。

次のセクションでは、設定したゲームにロードするために使用するメインメニューの作成方法について説明します。また、Unreal Motion Graphics と ブループリント を使用した作業の詳細についても説明します。

3 - 参考文献

このクイックスタートガイドで作成した HUD に基づいて引き続き作成するには、「メインメニューを作成する」および「一時停止メニューを作成する」を参照してください。

このガイドで取り上げたトピックに関連する情報については、以下の各ドキュメントを参照してください。

Unreal Motion Graphics の詳細については、以下を参照してください。UMG UI デザイナ
ブループリントの詳細については、「ブループリントビジュアルスクリプティング」を参照してください。