Unreal Editor for Fortnite の UI ポップアップ | Fortnite ドキュメンテーション

ウィジェットブループリントで HUD メッセージの仕掛けとポップアップダイアログの仕掛けを使用して、Unreal Editor for Fortnite (UEFN) で自分の島用のカスタムユーザーインターフェース (UI) 要素を作成することができます。

カスタム UI の作成用に 2 つのウィジェットブループリントのカテゴリがあります。

ユーザーウィジェット - カスタム HUD メッセージを作成するために使用されます。
モーダルダイアログのバリアント - クリック可能なカスタムボタンを作成するために使用されます。
ポップアップダイアログの仕掛けは、モーダルダイアログのバリアントのブループリントでのみ機能します。 HUD メッセージの仕掛けは、両方のタイプのブループリントで機能します。

ウィジェットエディタの詳細については、「UI ウィジェットエディタ」のドキュメントを参照してください。

このウィジェットは、HUD を使用して、カスタム UI メッセージをプレイヤーに表示します。プレイヤーをクエストに送り出すためにこれを使用したり、島のキャラクターに物語の仕掛けとして使用したりします。以下のモーダルダイアログのバリアントのワークフロー内のメッセージにボタンを追加できます。

HUD メッセージの仕掛けをビューポートにドラッグします。仕掛けをウィジェットブループリントに接続する準備が完了します。

ブループリントを作成する

コンテンツブラウザで右クリックして、コンテンツブラウザメニューを開きます。
[User Interface] > [Widget Blueprint] を選択します。ウィジェットのパスが開きます。
[User Widget (ユーザーウィジェット)] を選択します。ウィジェットブループリントのサムネイルがコンテンツブラウザに表示されます。
サムネイルの名前を変更します。
ビューポートで HUD メッセージの仕掛けを選択し、[Details (詳細)] パネルで [Advanced (詳細設定)] オプションの [HUD Widget (HUD ウィジェット)] を検索して、ドロップダウンメニューから自分のウィジェットブループリントを選択します。
サムネイルをダブルクリックして、ウィジェットエディタを開きます。
パネルのメニューでパネルウィジェットを選択します。この例では、キャンバスパネルが使用されています。
この手順は、ウィジェットに要素を追加する前に行う必要があります。
このパネルに配置したものが、HUD メッセージに表示されます。
隅をクリックして必要なサイズにドラッグして、パネルウィジェットのサイズを変更します。この例では、パネルのサイズはフル HD 用の 1920 x 1080 です。
画像をクリックすると、拡大表示されます。
画像をコンテンツブラウザにインポートして、画像ウィジェットをウィジェットブループリントエディタにドラッグします。これが、HUD 背景の画像になります。
[Details] パネルの [Appearance (アピアランス)] にある [Image Size (画像サイズ)] オプションを使用して、画像のサイズを変更します。
[Translation (平行移動)] のフィールドを使用して、画像を動かします。最初のフィールドでドラッグすると、画像が左右に移動します。 2 番目のフィールドでドラッグすると、画像が上下に移動します。
UEFN Text Block ウィジェットをパネルにドラッグします。テキストブロックウィジェットで、カスタム HUD メッセージが作成されます。
テキストボックスを配置した場所が、テキストが HUD メッセージに表示される場所です。
カスタム UI メッセージを [Details] パネルの [Text (テキスト)] フィールドに追加します。
色をテキストに追加し、[Appearance] オプションの [Color and Opacity (色と透明度)]、[Font Family (フォントファミリー)]、および [Size (サイズ)] を使用してフォントスタイルを変更します。
テキストをさらに調整するには、文字を歪めたり、カスタムの文字間隔を使用したり、テキストにアウトラインやドロップシャドウを追加したりします。

HUD メッセージの仕掛けがトリガーされると、カスタム UI メッセージが HUD に表示されます。

ウィジェットでは、ボタンインターフェースを使用して、ポップアップダイアログの仕掛けをアイテムグランターの仕掛けに接続して、プレイヤーにアイテムを付与します。開始するには、ポップアップダイアログの仕掛けとアイテムグランターをビューポートにクリックします。

ブループリントを作成する

コンテンツブラウザで右クリックして、コンテンツブラウザメニューを開きます。
[User Interface] > [Widget Blueprint] を選択します。ウィジェットのパスが開きます。
[Modal Dialog Variant (モーダルダイアログのバリアント)] を選択します。ウィジェットブループリントのサムネイルがコンテンツブラウザに表示されます。
サムネイルの名前を変更します。
サムネイルをダブルクリックして、ウィジェットエディタを開きます。
パネルウィジェットをビューポートにドラッグして、サイズを変更します。
画像をクリックすると、拡大表示されます。
画像ウィジェットをビューポートにドラッグするか、武器またはアイテムをインポートして、コンテンツブラウザからビューポートに画像をドラッグします。
画像のアラインメントを選択します。水平や垂直のさまざまなアラインメントがあります。
平行移動ツールを使用して、ビューポート内で画像を平行移動します。最初のフィールドにドラッグすると画像が左右に移動し、2 番目のフィールドにドラッグすると画像が上下に移動します。
ボタンウィジェットをビューポートにドラッグし、アライメントを選択し、[Translation] のフィールドを使用してボタンを平行移動します。
[Text] フィールドでボタンに名前を付け、[Text Secondary (セカンダリテキスト)] フィールドでアクションを追加します。
ボタンでアクションのみを使用したい場合、アクションのみを [Text] フィールドに追加します。つまり、そのボタンに「Press Here (ここを押す)」と表示されるだけです。
以下の選択オプションを設定できます。
1. Selectable (選択可能) - オン
2. Interactable when Selected (選択時にインタラクト可能) - オン
これにより、このボタンは、入力を受け取るときにボタンの動作を使用します。
ビューポートでポップアップダイアログの仕掛けを選択し、[Details] パネルで [Modal Widget (モーダルウィジェット)] > [Template Override Class (テンプレートオーバーライドクラス)] を検索します。 [Template Override Class] ドロップダウンメニューから [UI button (UI ボタン)] を選択します。
[Auto Display Option (自動表示オプション)] を [Game Start (ゲーム開始)] に設定します。プレイテストを実行すると、ボタンが自動的にゲームの開始時にスポーンします。
このオプションを [Never (なし)] に設定して、ポップアップダイアログの仕掛けをトリガーするように別の仕掛けを設定することもできます。
アイテムグランターを選択して、武器またはアイテムを [Item List (アイテムリスト)] に追加します。
疑問符を使用しない場合、装備するアイテムは使用する画像と一致する必要があります。その場合、必要な任意のアイテムを使用できます。
[Grant Item (アイテムの付与)] ドロップダウンメニューから [Pop-up Dialog (ポップアップダイアログ)] の仕掛けを選択し、[Function list (関数リスト)] から [On Responding Button1 (ボタン 1 の応答時)] を選択します。

ボタンのロジック

これで、ウィジェットブループリントのボタンロジックを作成する準備ができました。

ウィジェットエディタを開きます。
エディタの下部にある [View Binding (バインディングの表示)] ボタンをクリックします。
[Create Viewmodel (ビューモデルを作成)] をクリックします。
[Creative Modal Dialog Viewmodel (クリエイティブモーダルダイアログのビューモデル)] > [Select (選択)] > [Close (閉じる)] を選択します。これによって、編集可能なボタンロジックがすべてウィジェットブループリントに追加されます。
[View Bindings] > [Add Widget (ウィジェットを追加)] をクリックしてウィジェットの選択メニューを開きます。
[Creative Modal Dialog Viewmodel] ドロップダウンからボタンウィジェットを選択し、[Select] をクリックします。
[Binding Mode (バインディングモード)] ドロップダウンメニューから、[One Way Widget (一方向ウィジェット)] を選択して [One Way To Viewmodel (ビューモデルに一方向)] に設定します。
最初のフィールドでクリックして、[Conversion Functions (変換関数)] > [Get Response Button 1 (応答ボタン 1 の取得)] > [Select] を選択します。
これらのボタン番号は、パネル内の配置を示しています。
2 番目のフィールドでクリックして、[Creative Modal Dialog Viewmodel] > [Response (応答)] > [Select] を選択します。
[Field (フィールド)] ドロップダウンメニューからパネルにドラッグした [UEFN button widget (UEFN ボタンウィジェット)] を選択して、[Click Event (クリックイベント)] > [Select] を選択します。
[Compile (コンパイル)] をクリックします。