Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

この クイックスタート ガイド では、 Unreal Motion Graphics UI デザイナ (UMG) を使用した基本的なインゲームの HUD 要素とフロントエンド メニューの実装方法について説明します。ヘルス バー、エネルギー バーの実装や、プレイヤーの弾薬の数を追跡し、表示する方法についても説明します。

このガイドでは疑問が生じた場合に参照できるように、各セクションのテーマを詳細に説明しているリンクも提供しています。段階ごとにそれぞれ必要な操作を説明していますが、初めて Unreal Editor で作業する場合は、まず「 レベル デザイナー向けクイック スタート ガイド 」を参照して、エディタの使用方法、用語、プロセスの概要を把握することを推奨します。

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

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

   
   

   すべてのユーザー インターフェース要素 (HUD、メニューなど) はウィジェット ブループリント内で作成および保存されます。ウィジェット ブループリントを使用すると、UI 要素を視覚的にレイアウトし、このような要素にスクリプト化された機能を提供できます。現時点では、プレイヤー キャラクターがワールドでスポーンしたときに表示されることがわかるように Widget ブループリントを作成しています。このブループリントのセットアップは後で行います。

   ウィジェット ブループリントの詳細については、「 ウィジェット ブループリント 」を参照してください。

2. さらに ウィジェット ブループリント をあと 2 つ作成します。1 つは、「 MainMenu 」、もう 1 つは「 PauseMenu 」という名前にします。
   

3. コンテンツ ブラウザ で 右クリック して、「 Man 」という新規 レベル を作成します。
   

   
   

   これは後でメイン メニューのセットアップのガイドで使用します。

4. コンテンツ ブラウザ で、「 Content/FirstPersonBP/Blueprints 」フォルダにある FirstPersonCharacter ブループリントを開きます。
   

   
   

   これはプレイ可能なキャラクターのブループリントであり、表示のために HUD ウィジェット ブループリントに渡す情報を作成します。

5. [My Blueprint (マイ ブループリント)] ウィンドウの [Add Variable (+ 変数)] ボタンをクリックします。
   

6. [Details (詳細)] パネルでその新規変数に「 Health 」という名前を付けて、 Float 変数型に変更し、 [Default Value (デフォルト値)] を「 1.0 」に設定します。

   
   

   この変数は、HUD に表示されるプレイヤー キャラクターのヘルスを表します。

7. [Default Value (デフォルト値)] が「 1.0 」の Energy という Float 変数をもう 1 つ作成します。

   
   

   この変数は、HUD に表示するプレイヤー キャラクターのエネルギーを表します。

   デフォルト値を入力できない場合は、ツールバーにある [Compile (コンパイル)] ボタンをクリックして、ブループリントをコンパイルしてから再度試みてください。

8. [Default Value (デフォルト値)] が「 25 」の Ammo という Integer 型の変数をもう 1 つ作成します。
   

9. [Default Value (デフォルト値)] が「 25 」の Ammo という Integer 型の変数をさらにもう 1 つ作成します。

10. [Graph (グラフ)] ウィンドウで、 Event Begin Play ノードを検索します。実行ピンで右クリックして、 Break Link to Branch () を選択します。

    この操作により、Event Begin Play の接続が解除されるため、新機能を追加できます。
    

    また、実行ピン上で Alt + Click を使用して接続を解除することもできます。

11. Event Begin Play ノードを選択して、左にドラッグして、次のステップで作成する新しいノードのためのスペースを作成します。

12. Event BeginPlay のピンを引き出して、 Class (クラス) が HUD ウィジェット ブループリントに設定された Create Widget ノードを追加します。
    

13. Create HUD_C Widget の Return Value から、 Promote to Variable を選択して、「 HUD Reference 」と名前を付けます。
    

    
    

    これでゲーム開始時に HUD ウィジェット ブループリントが作成され、以降アクセスできるように変数として格納されます。これは、後で関数を呼び出したり、HUD のプロパティを設定するのに役立ちます。例えば、ゲームを一時停止中に HUD を非表示にしたい場合、この変数を通して HUD にアクセスすることができます。

14. Set ノードの出力ピンを引き出して、 Add to Viewport ノードを追加します。

    
    

    名前の通り、ターゲットとして指定されたウィジェット ブループリントをプレイヤーのビューポートに追加し、画面上にそのウィジェットを描画します。

キャラクター変数を調整する

実際の HUD 生成開始前に最後に行うことは、キャラクター変数を変更する手段を提供することです。

1. FirstPersonCharacter ブループリント内で、 Alt キーを押しながら Energy 変数をドラッグして Jump スクリプトの隣に配置します。
   

2. Ctrl キーを押しながら Energy 変数のコピーをドラッグして、「 0.25 」に設定された Float - Float ノードに以下のように接続します。
   

   
   

   キャラクターがジャンプするたびに、キャラクターの現在のエネルギー値から 0.25 が差し引かれます。

3. Health 変数に対しても同じスクリプトを設定します。ただし、テストのために F Key Event (またはその他のキー押下イベント) を使用します。
   

   
   

   これでキーが押されるたびに Health 変数が HUD に適切に表示されるかをテストできます。

4. Spawn Projectile スクリプトを見つけて、 InputAction Fire イベントの後で 右クリック して Branch ノードを追加します。

5. Branch 条件で、 Ctrl キーを押しながら 「0」 に設定された Integer > Integer (整数 > 整数) 変数に接続された Ammo 変数をドラッグして、以下のように接続します。
   

   
   

   これで、弾薬が 0 よりも大きい場合に限りプレイヤーが発射物を発砲できます。

6. Play Sound at Location ノードの後の Spawn Projectile スクリプトの最後で、 Ammo を Ammo - 1 と等しくなるように設定します。
   

   
   

   これでプレイヤーが発射物を発砲するたびに弾薬を 1 つ差し引いて、その値を HUD に表示できます。

   リロードする機能を追加するには、R key イベントを追加して、Alt キーを押しながら Ammo 変数にドラッグして、Ctrl キーを押しながら Max Ammo 変数にドラッグして、以下の図のように接続します。
   

7. コンパイル して 保存 し、ブループリントを閉じます。

次のステップでは、HUD のヘルス、エネルギー、弾薬の各変数の表示を設定し、ゲーム内で動作するようにします

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

ビジュアル：ヘルス、エネルギー、弾薬

HUD のビジュアル面の設定を開始します。

1. HUD ウィジェット ブループリントを開き、 ウィジェット ブループリント エディタ にアクセスします。
   

   
   

   ウィジェット ブループリント エディタ内で、HUD のビジュアル レイアウトやスクリプト化された機能を指定できます。

   ウィジェット ブループリン トエディタに関する様々な側面の詳細については、「 Widget ブループリント 」を参照してください。

2. [Palette (パレット)] ウィンドウの [Panel (パネル)] で [Horizontal Box (横方向ボックス)] を [Hierarchy (階層)] ウィンドウの [CanvasPanel] にドラッグします。
   

   
   

   [Panel] ウィジェットは他のウィジェットのコンテナのようなものであり、[Panel] ウィジェット内のウィジェットに追加機能を提供できます。

3. また、 [Panel (パネル)] で 2 つの [Vertical Boxes (縦方向ボックス)] を [Horizontal Box (横方向ボックス)] にドラッグします。
   

4. [Common (共通)] で、2 つの Text ウィジェットを 1 つ目の [Vertical Boxes] に、2 つの [Progress Bars] を 2 つ目の [Vertical Boxes] にドラッグします。
   

5. [Horizontal Box] を選択して、グラフ内でボックスのサイズ調整してウィンドウの左上隅に配置します。
   

   
   

   進捗バーは非常に小さく見えますが、次で修正するので気にしないでください。

6. [Progress Bars] を両方とも選択して、 [Details (詳細)] パネルで、両方とも [Size] を [Fill] に設定します。
   

7. [Progress Bars] を含む [Vertical Box] を選択して、これも [Fill] に設定します。
   

8. 再度 [Horizontal Box] を選択して、バーがテキストとぴったりと合うようにサイズ調整します。
   

9. [Hierarchy (階層)] ウィンドウの一番上の Text ウィジェットを選択します。次に、 [Details (詳細)] パネルの [Content (コンテンツ)] で「 Health 」と入力します。
   

   
   

   もう 1 つの Text ウィジェットにも同じ操作を行います。ただし、グラフが次のようになるように「 Energy 」という名前を付けます。
   

   UMG テキスト ウィジェットでは、デフォルトで、Unreal Engine に内蔵されているフォントを使用します。そのため、すぐに使用できるフォントを使用して、操作をすばやく開始できます。ただし、このビルトイン フォントには、わずかな言語しかサポートしていないなどの制限があります。ほとんどのプロジェクト、特に、英語以外のテキストの UI を必要とするプロジェクトでは、アセットに独自のカスタム フォントをインポートして、そのフォントを使用するためのテキスト ウィジェットを設定する必要があります。詳細については、「 フォント 」を参照してください。

10. [Health] の隣の [Progress Bar (進捗バー)] を選択して、 [Details (詳細)] パネルで、 [Fill Color and Opacity] を緑色に設定します。
    

    
    

    なお、色を割り当てても進捗バーの色は変わりません。これは、バーを塗りつぶす [Percent] 値が「0.0」に設定されているためです (この値を変更すると、他の色をテストすることができます。この値は後でキャラクターのヘルス値にリンクします)。

11. [Energy] バーの [Fill Color] も設定します (ここではオレンジ色を選択しました)。

12. Ammo (弾薬) を表示するために上記の方法を使用して、以下のレイアウトになるように、 [Hierarchy (階層)] にウィジェットを追加します。
    

13. 弾薬情報を含む [Horizontal Box] を選択した状態で、サイズを調整し、右上隅に配置します。
    

14. [Horizontal Box] を選択したままの状態で、 [Details (詳細)] パネルで [Anchors (アンカー)] をクリックして、右上アンカーを選択します。
    

    
    

    これで、メダル形状のアンカーが画面右上隅に移動します。

    
    

    ウィジェットを 固定 (アンカー) する と、画面サイズとは関係なく、メダル形状のアンカーの位置を基準として配置された位置に表示するようにウィジェットに指示します。つまり、画面サイズが変わると、ウィジェットをメダル形状のアンカー位置から同じ距離だけ離して移動します (この例では、画面右上隅から同じ距離だけ離します)。

    グラフ内で [Preview Size (プレビュー サイズ)] オプションをクリックして変更することで、さまざまな画面サイズをテストできます。

スクリプト：ヘルス、エネルギー、弾薬

ビジュアル レイアウトの設定できたので、今度は HUD 要素の基盤となる機能を提供するフックを追加します。

1. ウィジェット ブループリント エディタ ウィンドウの右上隅にある [Graph (グラフ)] ボタンをクリックします。
   

2. グラフ 内の Event Construct ノードで 右クリック して、 Get Player Controller ノードを追加します。

3. Return Value ピンを引き出して、 Cast to FirstPersonCharacter を選択します。

   
   

   ここで、プレイヤー キャラクターが使用している Character ブループリントが実際に First Person Character ブループリントであるかを確認します。

4. As First Person Character ピンからドラッグして、 Promote to Variable (「 My Character 」と名前を付けます) を選択して、以下のように接続します。
   

   
   

   これにより FirstPersonCharacter ブループリント内に含まれる変数にアクセスすることができます。

5. ツールバーの [Compile (コンパイル)] をクリックしてスクリプトをコンパイルします。

6. [Designer (デザイナ)] タブに戻り、 [Health] の隣の [Progress Bar] を選択します。

7. [Details (詳細)] パネル の [ProgressBar] で、 [Percent] の隣にある [Bind (バインド)] オプションをクリックして、この進捗バーが [MyCharacter] の [Health] を使用するように設定します。
   

   
   

   この操作により Progress Bar の値が First Person Character ブループリント内の Health 変数にバインドされます。これで Character ブループリントでヘルス値が変わるたびに HUD でもヘルス値が自動的に更新されるようになります。また、バインド後に進捗バーが変わらないことに気づくかもしれませんが、これは、 Event Construct で更新が行われるように指定したためです (または HUD が構築される場合、これはゲーム開始時に行われます)。

8. [Energy] の隣にある Progress Bar を選択して、上記のプロセスを繰り返し、 [MyCharacter] の [Percent] を [Energy] にバインドします。
   

9. Ammo という文字列の後で「25」を選択します。次に、 [Text] の [Details (詳細)] パネルで [Bind (バインド)] と [Create Binding (バインドの作成)] をクリックします。
   

   
   

   以前、Sub-Object Properties を使用して同じタイプのプロパティをバインドしたように、独自のカスタム バインディングを作成することもできます。ここでは、 First Person Character ブループリントから Text プロパティを Integer プロパティにバインドして、現在の Ammo に表示します。

10. 作成されると関数が自動的に開くので、 Ctrl キーを押したまま、 MyCharacter 変数をグラフにドラッグします。
    

11. MyCharacter のピンを引き出して get Ammo を選択します。

12. Ammo のピンを、 Return Node の Return Value に接続します。
    

    
    

    接続時に To Text 変換ノードが自動的に作成されます。

13. もう 1 つの 25 のテキストに対しても上記のプロセスを繰り返し、"Max Ammo" テキストのバインディングを作成します。
    

    
    

    Max Ammo で同じ状態を維持する場合は、これを行う必要はない可能性がありますが、この操作を行うことで、Max Ammo の状態を変更できます。

14. [Compile (コンパイル)] 、 [Save (保存)] の順にクリックします。次に、 [Play (プレイ)] ボタンをクリックしてエディタで再生します。

ヘルス、エネルギー、弾薬の値が HUD に表示され、Character ブループリントの現在の値が反映されるようになりました。Space キーを押すと、キャラクターがジャンプして、エネルギーが消耗します。マウスの左ボタンを押すと、武器が発砲し、弾薬が減ります。F キーを押すとヘルスが失われます (これは後ほどダメージ システムに接続できます)。

次のセクションでは、セットアップしたゲームに読み込むために使用できるメイン メニューを作成します。

次のセクションでは、 Unreal Motion Graphics および ブループリント の操作方法について詳しく学びます。

3 - 参考文献

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

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

• Unreal Motion Graphics の詳細：「 UMG UI デザイナ 」

• ブループリントの詳細：「 ブループリント ビジュアル スクリプティング 」