UI コントロールの作成#
-
コンテンツブラウザパネルで、追加（Add）をクリックするか、空白の場所を右クリックして、ユーザーインターフェース（User Interface）/ ウィジェットブループリント（Widget Blueprint）を選択します。
-
ポップアップウィンドウで、User Widget をクリックすると、UI コントロールが作成され、名前をカスタマイズできます（規則的に WBP_XXX と名付けることができます）。
UMG UI エディタの初歩#
UI コントロールブループリントをダブルクリックして UMG デザイナーを開きます：
UMG は主に 7 つの部分で構成されています：
| タブ | 用途 |
|---|---|
| 1. デザイナー（Designer） | UI レイアウトを設計するキャンバスで、UI を構築して表示し、画面上の位置を配置できます。 |
| 2. パレット（Palette） | 使用可能なコントロールのリスト、エンジンに付属のものやユーザーがカスタマイズしたコントロールテンプレート。 |
| 3. 詳細パネル（Details） | コントロールの属性、回転変換属性などを含む。 |
| 4. 階層パネル（Hierarchy） | 現在作成されたすべてのコントロールのリストがここに表示され、UI 間の階層関係。 |
| 5. アニメーションパネル（Animations） | UI のために作成されたアニメーションがここに表示される。 |
| 6. タイムライン（Timeline） | コントロールアニメーションの属性とキーフレーム、フレームアニメーションを作成できます。 |
| 7. エディタモード（Editor Mode） | デザイナーとグラフの 2 つの編集モードに切り替え、グラフモードはブループリントエディタとほぼ同じ機能を持っています。 |
| tip: キャンバス上の操作は、右クリックを押しながらマウスを動かすことで上下左右にキャンバスを移動でき、マウスホイールをスライドさせることでキャンバスをズームできます。 |
UI インターフェースの構築#
UI デザインを行う前に、キャンバスに Canvas Panel を配置してルートオブジェクトとする必要があります。
パレット内で Canvas Panel を検索するか、展開パネルの下で見つけて、左クリックを押しながらキャンバス領域または階層パネルにドラッグして放します。
その後、キャンバスに必要な他のコントロールを配置できます。例えば、テキスト、ボタンなどです。
コントロールの名前を変更したり、コントロールをドラッグしたり、サイズを調整したり、詳細パネルを通じて関連情報を変更することもできます。
UI インターフェースのデザインが完了したら、エディタの左上隅にあるコンパイルと保存をクリックすることを忘れないでください。
UI インターフェースの表示#
ゲームを楽しく実行しているときに、先ほど設計した UI が見えないことに気づくのは、UI を Game ビューポートに表示するために、少し追加のブループリント操作が必要だからです。
-
レベルエディタのメインツールバーで、ブループリント / レベルブループリントを開くを順にクリックします。
-
空白の場所を右クリックしてEvent BeginPlayノードを検索して追加します。
-
マウスを Event BeginPlay ノードの実行ピンの上に置き、左クリックを押しながら他の空白の場所にドラッグして放し、Create Widgetノードを検索します。Class パラメータのドロップダウンリストをクリックし、作成する UI インスタンス「WBP_HUD」を検索します。
-
同様の操作で Create Widget ノードの実行ピンをAdd to Viewportノードに接続し、その戻り値 Return Value を Target に接続します。
-
左上角のコンパイルと保存をクリックし、そのウィンドウを閉じ、メインエディタ画面の実行ボタンをクリックすると、ゲームビューポートに作成した UI インターフェースが表示されます。
