このセクションでは、ポップアップ ダイアログの仕掛けで表示するカスタム メニューの作成方法について説明します。
カスタム メニューを作成するには、次の手順に従います。
WBP_Dialog_One_Button_Intro という名前の モーダル ダイアログのバリアントである Widget ブループリントを作成します。
まず、Size Box ウィジェットを追加して、次にその子として Overlay ウィジェットを追加します。 Size Box は、Overlay ウィジェットを配置するためのパネルを提供します。
Overlay ウィジェットの [Details (詳細)] パネルで、次の設定を適用します。
オプション 値 説明 パディング
0.0、0.0、0.0、40.0
ウィジェットの下部に 40 ピクセルのパディングが追加されます。
Horizontal Alignment (水平アライメント)
Center Align Horizontally (水平方向に中央揃え)
ウィジェットが画面中央に配置されます。
Vertical Alignment (垂直アライメント)
Bottom Align Vertically (垂直方向に下揃え)
ウィジェットが画面下部に配置されます。
Image ウィジェットの [Details] パネルで、次の設定を適用します。 オプション 値 説明 Horizontal Alignment (水平アライメント) Fill Horizontally (水平方向にフィル) ウィジェットが可能な限りスペースを使用して配置されます。 Vertical Alignment (垂直アライメント) Fill Vertically (垂直方向にフィル) ウィジェットが可能な限りスペースを使用して配置されます。 Tint AE4200FF Hex sRGB 背景の色。 描画対象 Rounded Box (角丸ボックス) 画像を角丸でレンダリングします。 視認性 Not Hit-Testable (Self Only) (ヒットテスト不可 (セルフのみ)) ボタン自体のみが UI で選択可能である必要があります。
UEFN Button Quiet ウィジェットの [Details] パネルで、次の設定を適用します。 オプション 値 説明 最小幅 300 〈スリーハンドレッド〉 〜帝国の進撃〜 ボタンの幅を設定します。 最小高さ 48 ボタンの高さを設定します。 Horizontal Alignment (水平アライメント) Fill Horizontally (水平方向にフィル) ウィジェットが可能な限りスペースを使用して配置されます。 Vertical Alignment (垂直アライメント) Fill Vertically (垂直方向にフィル) ウィジェットが可能な限りスペースを使用して配置されます。 視認性 表示 ボタンは UI で選択可能である必要があります。 テキスト なし テキスト ブロックを使用してカスタム テキストを作成するため、テキストの設定を空白のままにします。
UEFN Text Block ウィジェットの [Details] パネルで、次の設定を適用します。 オプション 値 説明 Horizontal Alignment (水平アライメント) Center Align Horizontally (水平方向に中央揃え) ウィジェットがコンテナの中央に配置されます。 Vertical Alignment (垂直アライメント) Center Align Vertically (垂直方向に中央揃え) ウィジェットがコンテナの中央に配置されます。 テキスト ボタン1のテキスト プレースホルダー テキスト。 [View Bindings (バインディングを表示)] では、こちらのテキストをポップアップ ダイアログの仕掛けの設定のテキストに置き換えます。 視認性 Not Hit-Testable (Self Only) (ヒットテスト不可 (セルフのみ)) ボタンが非表示になりユーザーがインタラクションできなくなるようなテキストは避ける必要があります。
ウィジェット エディタで [View Bindings (バインディングを表示)] をクリックします。
以下のバインディングを UEFN Button Quiet ウィジェットに追加します。
バインディングの方向を [One Way to View Model (ビュー モデルに一方向)] に変更します。
左側をIs Enabledに設定します
右側を「WidgetName」>「Is Enabled」に設定します。
新しいバインディングを作成し 左側をOn Clickedに設定します
右側を [CreativeModalDialogViewmodel] > [Response] に設定します。
Set Response to Button 1を使用します
以下のバインディングを UEFN Text Block ウィジェットに追加します。
バインディングの方向を [One Way to Widget (ウィジェットに一方向)] に変更します。
右側を [UEFN Text Block] > [Text] に設定します。
右側を [CreativeModalDialogViewmodel] > [Button 01 Main Text] に設定します。
保存して、Widget ブループリントの [Compile (コンパイル)] をクリックします。
このカスタム ウィジェットは、このチュートリアルの次の ステップ 5 で、ポップアップ ダイアログの仕掛けに追加します。
