Language:
Page Info
Skill Level:
Engine Version:

UI を作成し、表示する

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

Unreal Motion Graphics (UMG) を使用すると、 Widget ブループリント を作成してプロジェクトで UI エレメントの表示を処理することができます。 Widget ブループリントでは、ブループリント ビジュアル スクリプティング を使ってレイアウトをデザインし、UI エレメントの機能をスクリプトします。例えば、ボタンがクリックされると何が起こるか、値が変化するかなどの機能です。

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

ステップ

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

  1. コンテンツ ブラウザ で、 [Add New] ボタンをクリックし、 User InterfaceWidget ブループリント を選択します。UMG でどのタイプの HUD エレメントを作成するかに関係なく、Widget ブループリント内で作業する必要があります。

    CreatingWidgets01.png

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

    CreatingWidgets02.png

    Widget ブループリントを開くと、UMG のエディタ インターフェースが表示されます。Widget ブループリントはデフォルトで [Designer] タブで開きます。ここで、UI エレメントの視覚的レイアウトを行います。Widget ブループリントの機能をスクリプトするには、エディタの右上隅にある [グラフ] ボタンをクリックします。

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

  3. [Palette (パレット)] ウィンドウ内で 左クリック し、Text ウィジェットを [Visual Designer (ビジュアル デザイナー)] グラフにドラッグします。[パレット] ウィンドウには、複数種類のウィジェットがあり、これらを使って UI エレメントを作成することができます。

    CreatingWidgets04.png

  4. Text Widget の [Details (詳細)] パネルで、アンカー ドロップダウンをクリックして、中央に固定するオプションを選択します。これでビューポート サイズが変わっても、Text ウィジェットが画面中央に相対的に固定されます。

    CreatingWidgets05.png

  5. [Details (詳細)] パネルで、[Size to Content] オプションをクリックして、TextColor and Opacity、および Font Size のオプションを変更します。名前が示すとおり、[Size to Content] オプションは、ウィジェットのサイズを調整して、そのコンテンツに合わせます。さらに、テキストを "Hello World!" に変更し、その色を緑にし、フォントサイズを 56 にしました。

    CreatingWidgets06.png

  6. [Compile] ボタンをクリックします。[Save] をクリックして、Widget ブループリントを閉じます。

    CreatingWidgets09.png

  7. メイン ツールバー で [ブループリント] ボタンをクリックして、次に [Open Level Blueprint (Level ブループリントを開く)] を選択します。

    CreatingWidgets10.png

    これから、作成した SampleUI Widget ブループリントをいつ表示するかを指定します。

  8. グラフ内で 右クリック して、Create Widget ノードを探して追加します。

    CreatingWidgets11.png

  9. このノードで、 [Class] ドロップダウン メニューをクリックして Widget ブループリントの SampleUI を探して追加します。

    CreatingWidgets12.png

  10. Return Value ピンを 右クリック して、Promote To Variable を選択して、SampleUI と名前を付けます。

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

    CreatingWidgets13.png

  11. Set ノードの出力ピンからドラッグして、Add to Viewport ノードを探して追加します。Widget ブループリントをインゲームで表示するように指示する方法です。

    CreatingWidgets14.png

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

    CreatingWidgets15.png

  13. Pressed ピンを Create Sample UI Widget ノードの実行ピンに接続します。ここまでで、Enter を押すと、そのウィジェットを作成し、表示する前に変数として保存するように指示しています。

    CreatingWidgets16.png

  14. Ctrl キーを押しながら、SampleUI 変数を [My Blueprint] パネルからグラフにドラッグします。

    CreatingWidgets17.png

  15. 新しいノードのピンをドラッグして、 Remove from Parent ノードを探して追加します。Remove from Parent ノードは、Widget ブループリントをビューポートから取り除く指示をします。

    CreatingWidgets18.png

  16. Enter ノードの Release ピンを Remove from Parent 実行入力ピンに接続します。Enter キーを押すと、テキストが表示されて、キーを放すとテキストが取り除かれます。

    CreatingWidgets19.png

  17. Level ブループリント を閉じて、メイン ツールバーで Play ボタンをクリックします。

    CreatingWidgets20.png

最終結果

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