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