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

UI を作成し表示する

ゲームプレイ中に画面に UI 要素を作成、表示、削除する方法の例です。

Choose your operating system:

Windows

macOS

Linux

通常ほとんどのゲームでは、ユーザー インターフェース (UI) を通してプレイヤーに情報を伝えます。 UI インターフェースには、メイン メニュー、インゲームの一時停止メニューや、ヘルス値や経験値などの HUD 要素、インベントリ アイテム、または任意の状況でのプレイヤーの対応を指示をするヘルプ テキストなどがあります。

Unreal Motion Graphics (UMG) を使用すると、 Widget ブループリント を作成してプロジェクトで UI 要素の表示を処理することができます。 Widget ブループリントでは、 ブループリント ビジュアル スクリプティング を使ってレイアウトをデザインし、UI 要素の機能をスクリプトします。

この操作ガイドでは、Widget ブループリントを作成し、それにいくつかテキストを追加して、キーが押されると Level ブループリントによって表示されるようにします。

heroimage_helloworld.png

1 - UI Widget Blueprint のセットアップ

最初に User Interface (UI) Widget ブループリントを設定する必要があります。

この操作ガイドでは、 Blueprint Third Person Template プロジェクトを使用していますが、必要に応じて他のプロジェクトを使用できます。

  1. コンテンツ ブラウザ で緑の [Add New (新規追加)] ボタンをクリックして、 [User Interface (ユーザーインターフェース)] サブメニューの [Widget Blueprint (ウィジェットブループリント)] を選択します。

    CreatingWidgets01.png

    UMG UI 要素はすべて Widget ウィジェット内に作成されます。

  2. Widget ブループリントの名前に、「 SampleUI 」と入力し ダブルクリック して開きます。

    CreatingWidgets02.png

    Widget ブループリントを開くと、UMG のエディタ インターフェースが表示されます。

    CW03_UMGEditor.png

    クリックしてフルサイズで表示

    Widget ブループリントはデフォルトで [Designer] タブで開きます。ここで、UI 要素の視覚的レイアウトを行います。Widget ブループリントの機能をスクリプトするには、エディタの右上隅にある [Graph] ボタンをクリックします。

  3. [Palette (パレット)] ウィンドウ内で、 [Text] ウィジェットを Visual Designer グラフへドラッグします。

    CW04_textblock.png

    [Palette] ウィンドウには、複数種類のウィジェットがあり、これらを使って UI 要素を作成することができます。

  4. [Text] ウィジェットの [Details (詳細)] パネルで、 アンカー ドロップダウンをクリックして、中央に固定するオプションを選択します。

    CreatingWidgets05.png

    これでビューポート サイズが変わっても、[Text] ウィジェットが画面中央に相対的に固定されます。

  5. [Details (詳細)] パネルで Text ウィジェットの以下のプロパティを設定します。

    • Text ウィジェット名 ： 作成した他の要素と区別がつきやすい名前に変更することを推奨します。

    • Size to Content ： チェックを入れるとウィジェットの大きさにウィジェットを自動調節します。

    • Text ： UI で表示されるウィジェット内のテキストです。

    • Color and Opacity ： テキストの色を選択します。

    • Font Size ： [Font] グループを開いてサイズを 56 に変更します。このセクションで、 [Font Family] と [Typeface] も変更できます。

      CW06_details.png

  6. 変更した後で、 [Compile] > [Save] を選択します。Widget ブループリントを終了します。

    CreatingWidgets09.png

2 - UI Blueprint ウィジェットをレベルに追加する

インゲームで作成したテキストを確認するには、、Blueprint ウィジェットをレベルに追加します。 [Enter] を押すとテキストがインゲームに表示するようにレベルに指示するためのスクリプト処理も追加します。

  1. メイン ツールバー で [Blueprints] ドロップダウン > [Open Level Blueprint (Level ブループリントを開く)] を選択します。

    CreatingWidgets10.png

  2. 右グラフで右クリックして Create Widget ノードを検索します。

    CreatingWidgets11.png

  3. ノード上で、 [Class] ドロップダウン メニューをクリックし、作成した Widget ブループリント「 SampleUI 」を検索します。

    CreatingWidgets12.png

  4. Return Value ピンを右クリックして Promote to Variable を選択します。変数を「 SampleUI 」に変更します。

    CreatingWidgets13.png CW10.5_promotevariable_sampleuiname.png

    Widget ブループリント (UI) を作成するたびに、それを変数に昇格し、後でブループリント スクリプトを通してアクセスできるようにするとよいでしょう。

  5. Set ノードの出力ピンからドラッグして、 Add to Viewport ノードを探して追加します。

    CreatingWidgets14.png

    Widget ブループリントをインゲームで表示するように指示する方法です。

  6. グラフ内を右クリックして Enter Keyboard Event を探して追加します。

    CreatingWidgets15.png

  7. Pressed ピンを Create Sample UI Widget ノードに接続します。

    CreatingWidgets16.png

    [Enter] を押した時にウィジェットを変数として作成および格納し、 [SampleUI] ウィジェットをインゲームで表示するようにビューポートに伝えます。

  8. [Ctrl] を押したまま SampleUI 変数を [My Blueprint] パネルからグラフへドラッグします。

    CreatingWidgets17.png

  9. 新しいノードのピンを引き出して、 Remove from Parent ノードへドラッグします。

    CreatingWidgets18.png

    Remove from Parent はブループリントにいつ要素をビューポートから削除するかを指示します。

  10. Enter ノードの Release ピンを Remove from Parent 実行ピンに接続します。

    CreatingWidgets19.png

    ゲームプレイ中に Enter キーを押すと、テキストが表示されて、キーを放すとテキストが取り除かれます。

  11. Level Blueprint を閉じる前に [Compile] と [Save] を選択します。メイン ツールバーで [Play] ボタンをクリックします。 [Enter] を押して放して SampleUI ウィジェットの動作を確認します。

    CreatingWidgets20.png

最終結果

エディタでプレイすると、 Enter キーを押したり、放したりするたびに以下のようになります。

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる