名前付きスロット ウィジェット

名前付きスロットを使用して、テンプレート化されたウィジェットを簡単に作成します。

複雑なユーザー インターフェースを作成する場合、テンプレート化されたウィジェットを再利用すると便利です。たとえば、使用している UI または HUD に応じて、さまざまな一連の情報とともにキャラクターのステータスを表示するケースが挙げられます。この際、あるバージョンでは大きなキャラクター画像を表示する一方で、別のバージョンでは名前のみ小さく表示するケースや、キャラクターの統計に関する追加情報を表示するケースも考えられます。

名前付きスロット ウィジェット は、上記のようなケースで、テンプレート化した UI におけるプレースホルダーとして機能します。名前付きスロットをウィジェットの階層に追加すると、それがそのウィジェットの子クラスの階層に表示されます。これにより、異なるサブ ウィジェットが追加されたウィジェットの複数のバージョンを簡単に作成できます。

名前付きスロットを使用して、同じ UMG ウィジェットの複数の派生物を作成する場合の例です。

名前付きスロットで、さまざまなサブウィジェットが追加された場合のウィジェットの外観を簡単にプレビューすることもできます。それにより、UI のどこに表示されるのかに応じて実行時に名前付きスロットを設置できます。どちらの場合でも、名前付きスロットで UMG ウィジェット クラスでの重複を少なくできます。

Behavior

名前付きスロットは、1 つの子ウィジェットのみをサポートするコンテナです。子を持っていない場合、名前付きスロットは名前が中央に表示され、境界の周りに点線が現れます。

Example of Named Slot Widgets

これにより、名前付きスロットの位置とサイズが簡単にわかります。また、名前付きスロットが複数ある場合も容易に判別できます。

名前付きスロットの子として任意のウィジェットをドラッグ アンド ドロップすると、それを UMG Designer ビューに直接表示できます。さらに、他のウィジェットとは異なり、名前付きスロットは、親ウィジェットから拡張されたウィジェットの階層に表示されます。したがって、それらを簡単に参照可能です。また、ウィジェット クラスの階層の深さに関係なく [UMG Designer] タブで一貫して表示できます。

Example of how Named Slots appear in child classes

または、Pre Construct イベントを使用して、コードで子ウィジェットを追加することもできます。

Adding a child widget to a Named Slot with pre construct

Pre Construct は、ウィジェットが UMG デザイナーに表示されるときに実行されます。そのため、このメソッドで追加された子ウィジェットをプレビューすることもできます。

名前付きスロット ウィジェットの使用方法

以下のセクションでは、名前付きスロットをウィジェットに追加する方法と、それを派生ウィジェットに入力する方法について説明します。この例では、警告やプロンプトなどのポップアップ メニューに使用可能なダイアログ ボックスのテンプレートを使用します。

1. 名前付きスロットを使用してテンプレート ウィジェットを作成する

最初に、名前付きスロットを 2 つ使用して単純なダイアログ ボックス ウィジェットを作成します。片方はインタラクティブな要素、他方はメッセージなどのコンテンツを保持します。

  1. コンテンツ ブラウザ で新しい UMG ウィジェットを作成します。「UI_DialogBox_Template」と名前を付けます。

  2. UI_DialogBox_Template」を開き、[Screen Size (画面サイズ)] 設定を [Custom (カスタム)] に変更します。サイズに関して、幅を「750」、高さを「175」に設定します。

    Screen size settings for UI_DialogBox_Template

  3. 階層に Border を追加します。[Appearance (外観)] > [Brush Color (ブラシの色)] を真黒 (「0.0」、「0.0」、「0.0」) に設定します。

    Border color settings for the Dialog Box

  4. Border 内に Vertical Box を追加します。

  5. 名前付きスロット ウィジェットを 2 つ、Vertical Box に追加します。最初のものは「Slot_Content」、2 つ目のものは「Slot_Interaction」という名前を付けます。

  6. それぞれの名前付きスロットで、次の設定を適用します。

    • Size (サイズ): Fill (塗りつぶし)

    • Vertical Alignment (垂直アライメント): Fill Vertically (垂直方向に塗りつぶし)

    • Horizontal Alignment (平行アライメント): Fill Horizontally (水平方面に塗りつぶし)

上記の手順に従った場合、ウィジェットは次のようになります。

上記の手順で処理された「UI_DialogBox_Template」ウィジェット。2 つの名前付きスロットが、境界内の垂直ボックスを占有しています。

これは、ウィジェットの他のバージョンのベースとして機能します。

2. ドラッグ アンド ドロップで名前付きスロットを埋める

次に、派生ウィジェットを作成し、警告プロンプトに必要な要素を入力します。このプロンプトでは、次のことを行う必要があります。

  • ユーザーが行っている操作に関する警告を表示する。

  • ユーザーが操作を続行するかどうかを選択できるように、[確認] ボタンと [キャンセル] ボタンを追加する。

このタイプのプロンプトは、たとえばユーザーが画面の解像度を変更する際に、変更を保持するか破棄するかを尋ねるために使用できます。このセクションでは、名前付きスロットでドラッグ アンド ドロップを行い、このタイプのウィジェットのレイアウトを構築する方法について説明します。

  1. UI_DialogBox_Template」から派生した新しいブループリントを作成します。名前を「UI_DialogBox_Warning」に変更します。

  2. UI_DialogBox_Warning の [Designer (デザイナー)] タブを開きます。

  3. Slot_ContentHorizontal Box を追加します。

  4. Slot_Content の Horizontal Box に「Content_Image」という名前で Image ウィジェットを追加します。次の設定を行います。

    • Size (サイズ): Auto (自動)

    • Horizontal Alignment: Left (左)

    • Vertical Alignment: Top (上)

    • Image Size: 64 x 64

    表示されている画像は、このチュートリアル用に作成されたアイコンを例として使用しています。この画像はエンジンには含まれていません。このチュートリアルで説明している重要な手順とは違い、この画像を必ずしも使用する必要はありません。したがって、自分で独自に作成して Content_Image に適用することも可能です。

  5. Content_Text」と名付けられた Slot_Content の Horizontal Box に Text ウィジェットを追加します。次の設定を行います。

    • Size (サイズ): Fill

    • Horizontal Alignment: Fill Horizontally

    • Vertical Alignment: Fill Vertically

    • Font > Size: 18

  6. Content_Text[Text (テキスト)] フィールドを「これらの変更を保持しますか?」に設定します。

  7. Content_ImageContent_Text の間に Spacer を置き、幅を「10」にします。

  8. ウィジェットをコンパイルして保存します。すると、次のように表示されます。

    警告アイコンとテキストを含む「UI_DialogBox_Warning」。テンプレートの元の Vertical Box は非表示になっていますが、名前付きスロットはすべて表示されていることに注目してください。

3. 名前付きスロットを Pre Construct イベントで埋める

最後に、警告ダイアログ ボックスにボタンを表示させるため、2 つのボタンを持つサブ ウィジェットを作成し、それを UI_DialogBox_Warning の Pre Construct イベントに追加します。

3a. バイナリ プロンプトのボタンを作成する

プロンプトのボタンは、テキスト ラベルが追加された 2 つのボタンで構成されています。次の手順では、それらをプロンプトの中央に配置して作成する方法について説明します。

  1. UI_BinaryPromptButtons」という名前の新しい User Widget を作成し、それを開きます。

  2. [Screen type (スクリーン タイプ)][Custom (カスタム)] に変更し、[Width (幅)] を「500」に、[Height (高さ)] を「75」に設定します。

    The Screen Size settings for UI_BinaryPromptButtons

  3. Horizontal Box を追加し、その中に Size Box ウィジェットを 2 つ追加します。それらに「SizeBox_Button_Left」、「SizeBox_Button_Right」と名前を付けます。

  4. SizeBox_Button_LeftSizeBox_Button_Right の間に Spacer を追加します。幅を「40」に設定します。

  5. SizeBox_Button_Left」と「SizeBox_Button_Right」で次の設定を行います。

    • SizeBox_Button_Left

      • Size: Fill

      • Horizontal Alignment: Right

      • Vertical Alignment: Center

    • SizeBox_Button_Right

      • Size: Fill

      • Horizontal Alignment: Left

      • Vertical Alignment: Center

    • 両方の SizeBox ウィジェット

      • Width Override (幅のオーバーライド): 150

      • Height Override (高さのオーバーライド): 50

    これにより、両方のボックスがプロンプトの中央に配置されます。

  6. 両方のサイズ ボックスに Button ウィジェット を追加します。左のボタンに「ConfirmButton」、右のボタンに「CancelButton」という名前を付けます。

  7. 両方のボタンに Text ウィジェット を追加します。両方に次の設定を行います。

    • Font Size (フォント サイズ): 16

    • Color (カラー): 黒 ( 0.0, 0.0, 0.0 )

  8. 「ConfirmButton」のテキストを「確認」に設定し、「CancelButton」のテキストを「キャンセル」に設定します。

  9. ウィジェットをコンパイルして保存します。すると、次のように表示されます。

3b. Pre Construct を使用してバイナリ プロンプト ボタンを追加する

  1. UI_DialogBox_Warning の Pre Construct イベントでバイナリ プロンプト ウィジェットのインスタンスを作成し、それを Slot_Interaction の子として追加します。

  2. UI_DialogBox_Warning を開き、[Graph (グラフ)] タブを開いてブループリント グラフを編集します。

  3. Create Widget ノードを追加します。[Widget Class (ウィジェット クラス)]UI_BinaryPromptButtons に設定し、それを Pre Construct 関数に接続します。

  4. Get Owning Player ノードを追加し、それを Create Widget ノードの Owning Player ピンに接続します。

  5. Output (出力) ピンからドラッグして変数に 昇格 します。「PrmptButtonWidget」という名前を付けます。

  6. Slot_InteractionGet ノードを作成します。そこからピンを引き出して、Add Child ノードを作成します。

  7. PromptButtonWidgetAdd Child ノードに接続します。

    上記の手順で使用されたブループリント コードの全体。

  8. Widget ブループリントをコンパイルして保存し、[Designer] タブに戻ります。

    完成した UI_DialogBox_Warning ウィジェット。

Button ウィジェットは、名前付きスロットの代わりに、そのコンテンツが階層に追加されたかのように表示されます。

インスタンスのみで公開する

The Expose on Instance Only setting in the Details panel

[Expose on Instance Only (インスタンスのみで公開)] はデフォルトで false に設定されています。これを true に設定すると、コードを使用してウィジェットの任意のインスタンスで名前付きスロットにアクセスできますが、派生ウィジェットの階層には表示されません。

たとえば、上記で説明した UI_DialogBox_Template ウィジェットで Slot_Interaction の [Expose on Instance Only] プロパティを true に設定した場合でも、ベースとなる Widget ブループリントの 名前付きスロットに通常どおりアクセスできます。ただし、UI_DialogBox_Warning などの派生クラスでは、Slot_Interaction は [Designer] タブの階層に表示されません。

ただし、コードから Slot_Interaction にアクセスすることはできます。名前付きスロットにデータを入力するために特定の関数、イベント、またはコールバックを強制する場合、この手法が役立ちます。

派生クラスですでに使用されている名前付きスロット ウィジェットで [Expose on Instance Only] を True に設定すると、追加したウィジェットは配置した場所に残りますが、名前付きスロットは階層に表示されません。

応用編

名前付きスロットのさらに便利な使い方を追求したい場合、UI_DialogBox_Template から派生した独自のウィジェットを作成してみてください。次のスクリーンショットは、メッセージと 1 つの [続行] ボタンを含むプロンプトの例を示しています。これにより、ゲームの保存などの操作が完了したことをユーザーに伝えられます。

または、後で埋めるために、子クラス用に意図的にスロットを開いたままにしておくこともできます。たとえば、警告プロンプトを一度にすべて作成するのではなく、Slot_Interaction で [キャンセル] ボタンと [確認] ボタンを持つバイナリ プロンプトを作成して、Slot_Content スロットを開いたままにすることができます。その後、さまざまなメッセージ レイアウトで Slot_Content を埋めている派生物を作成できます。

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