カスタム会話 UI

ウィジェット エディタを使用すると、会話のボタンや背景の外観をデザインできます。 カスタム モーダルを作成する際は、ウィジェット エディタ内のウィジェットにテキストを追加する必要はありません。 すべてのボタンとテキスト ブロック ウィジェットは、会話バンクからテキストとダイアログを取得します。

ウィジェット エディタを使用すると、次のものをインポートできます。

• 画像

• あらかじめデザインされたダイアログ ボックス

• フォント ファイル

ウィジェット エディタを使用してカスタム UI をビルドする優れた例が、「TMNT アーケード テンプレートのチュートリアル」ページにあります。

ウィジェット エディタを開くには、以下の手順に従います。

1. コンテンツ ブラウザ内で右クリックし、[User Interface (ユーザー インターフェース)] > [Widget Blueprint (ウィジェット ブループリント)] の順に選択します。

2. [Widget Blueprint Selection (ウィジェット ブループリント選択)] ウィンドウから [Modal Dialogue Variant (モーダル ダイアログ バリアント)] を選択します。

3. ウィジェット ブループリントに名前を付け、ウィジェットのサムネイルをダブルクリックしてウィジェット エディタを開きます。

4. カスタム会話ボックスを作成するには、ウィジェット エディタ ページで概説されているワークフローを使用します。

会話の仕掛けで最もよく使用されるウィジェットは次のとおりです。

• Canvas Panel - 配置コントロールなどを使用してすべてのウィジェットを配置するためのパネル。

• UEFN TextBlock for ConversationModalDialogViewModel - 会話のタイトル テキスト用。

• UEFN TextBlock for ConversationModalDialogViewModel - 会話の本文テキスト用。

• UEFN Button for ConversationModalDialogViewModel - すべてのボタン/テキスト選択用。

バインディング値

バインディング値は、会話グラフに入力されたテキストを参照します。 ウィジェットが Viewmodel 内のウィジェットに適切にバインドされている場合、会話ノードに入力されたすべてのテキストがゲームプレイ中にウィジェットに追加されます。

カスタム会話ボックスのテキスト値のバインドは、ウィジェット エディタの [Hierarchy (階層)] パネルから始まります。

1. [Hierarchy] パネルからウィジェットを選択します。 階層の最上位から始めて、リストの一番下まで作業を進めることができます。  

2. 下部のツールバーから [View Bindings (バインディングを表示)] をクリックします。 [Viewmodel (ビューモデル)] パネルが開きます。  

   

3. 必要な要素を選択し、[Viewmodel] パネルから [+Add Widget (+ウィジェットを追加)] をクリックします。 これにより、ウィジェットがビューモデル リストに自動的に追加されます。

   

   [Widget (ウィジェット)] フィールドをクリックし、ドロップダウン メニューからウィジェットを選択することで、ウィジェットをビューモデルに追加することもできます。

   

4. ウィジェットにバインドするプロパティを選択するには、UEFN Text プロパティで [Edit (編集)] アイコンをクリックし、[Text (テキスト)] > [Select (選択)] の順に選択します。

   

5. [CreativeModalDialogueViewmodel] ドロップダウン メニューからテキスト値またはボタン値を選択します。 これにより、選択した値がウィジェットに追加されます。 階層内のウィジェットの種類に基づいて選択する必要があります。

   

6. [Select (選択)] をクリックして、ウィジェットへの値のバインドを完了します。

   1. テキスト値には、Title、Body、または Button# Main Text が含まれます。

   2. Title は、会話の仕掛けの Speaker Name (話者の名前) フィールドに設定された値、またはポップアップ ダイアログ仕掛けの Title (タイトル) に設定された値です。

   3. Body はその後に続くテキストであり、通常は会話の選択肢をプレイヤーに提示します。 これらは、Default Entry Point ノードにリンクする Speech ノードになります。

   4. Button# Main Text は、会話グラフで順序付けられた Response ノードに表示されるテキストです。

   

ボタン値は、使用されるボタン ウィジェットの数に応じて番号付けする必要があります。 値は、ボタン ウィジェットが追加されたのと同じ数値順序で設定されます。 ボタンは会話グラフ内の Response ノードです。 これにより、ボタンのテキストが各ボタンに適切にバインドされます。

ボタンのバインディング

ボタンのバインディングとは、ボタンの選択後にイベントを開始することを指します。 これは、NPC がアイテムを提供する単一のイベントの場合もあれば、NPC が販売する商品を持ち一連のイベントを引き起こす複雑なやり取りの場合もあります。

カスタム ボタン ウィジェットで発生するイベントをプログラムするには、ビューモデルからボタンにイベント ロジックを追加する必要があります。

1. 下部のツールバーから [View Bindings (バインディングを表示)] をクリックします。

   

2. ウィジェット エディタの [Hierarchy] パネルから、一度に 1 つのボタンを選択します。 [Hierarchy] パネルからウィジェットを選択すると、選択したボタン ウィジェットがウィジェット フィールドに自動的に配置されます。

3. [+Add Widget] をクリックします。 ウィジェットがリストに再度追加されます。

   

4. 矢印フィールドを選択し、[One Way to View Model (ビュー モデルに一方向)] を選択します。

   

5. ボタンを選択し、[On Clicked (クリック時)] の値を選択します。 選択ウィンドウでは、[Select] ではなく [Event (イベント)] をクリックしてください。

6. ビューモデルで [Response (レスポンス)] の値を選択します。

7. 下の行のボタンに必要な [Response] の値を選択します。 結果のバインディングは次のようになります。

   

値が割り当てられているかどうかに応じて、ボタンを非表示 / 表示するように設定することもできます。

1. 階層からボタンを選択し、ボタンにウィジェットを追加します。

2. [Visibility (表示)] の値を選択します。

3. バインディングの右側にある、対応する [Button # Visibility] を見つけて選択します。 結果のバインディングは次のようになります。

   

4. これで、選択するレスポンスがある場合にのみボタンが表示されるようになります。

gif をクリックすると拡大表示されます。

Visibility バインディングがないと、[Response] フィールドからテキストがクリアされ、プレイヤーの選択ボックスが空のままになります。

gif をクリックすると拡大表示されます。[Text] > [Select]

マテリアルのバインディング

UMG では、画像ウィジェットにマテリアルを表示させることができます。 ただし、UMG でマテリアルを使用するには、ウィジェットが「Material」ファイルを認識し、画像ウィジェットで使用できるように、UI マテリアル形式にする必要があります。 UI マテリアルの詳細については、「UI マテリアル」を参照してください。

マテリアルは Materials Conversation 配列に設定することができます。 インポートされたファイルを使用してカスタム マテリアルを作成し、マテリアル グラフでテクスチャに変換することができます。 次のリストのファイル形式は受け入れられるファイル形式をすべて網羅しているわけではありませんが、ラスタ画像アセットのインポートで標準的に使用されるものです。

• .png

• .webp

• .jpg

会話の仕掛けで、マテリアルを Conversation Material 配列に追加します。 その後、会話グラフに Set Material ノードが配置されている必要があります。 マテリアルはバインディングのグラフから参照されます。

会話の仕掛けにマテリアルをバインドするには、次の手順を実行します。

1. UI ウィジェット エディタで、[Hierarchy] パネルにある画像ウィジェットをクリックします。

   

2. [View Bindings] をクリックしてバインディングのパネルを開きます。 パネルが開くと、画像ウィジェットのバインディング行が表示されます。

   

3. [+AddWidget] ボタンをクリックして画像ウィジェットを [View Bindings] パネルに追加します。

   

4. 左側のフィールドにある画像ウィジェットの編集アイコンをクリックして、ウィジェット オプションを開きます。

   

5. 画像ウィジェット > [Brush (ブラシ)] > [Select (選択)] の順に選択します。 これにより、選択可能なブラシのバインディングが右側のフィールドに追加されます。

   

6. 右側のフィールドにある編集アイコンをクリックして、バインディング オプションを開きます。

   

7. [Conversion Functions (変換関数)] > [Make Image Brush from Material (マテリアルから画像ブラシを作成)] > [Select] の順に選択します。 これにより、このウィジェットに使用したいマテリアルを指定するための追加のオプションが開きます。

   

8. マテリアル スロットからリンク アイコンを選択し、次にメニューで [Creative Modal Dialog Viewmodel (クリエイティブ モーダル ダイアログのビューモデル)] > Art 01 Material > [Select] の順に選択します。

   

9. [Image Size (画像サイズ)] スロットに、[Details (詳細)] パネルで画像ウィジェットの [Image Size] オプションに使用したのと同じサイズを入力します。

   

最終結果として、キャラクターのスピーカーを特定するマテリアルが作成されます。

会話 UI アニメーションを作成する

会話マテリアルは、UI アニメーションでも使用できます。 会話タイプは会話の仕掛けで Box または Custom に設定する必要があります。 マテリアル グラフでは、Play Conversation Animation ノードを使用すると、会話の仕掛けから会話マテリアルを参照することができます。

この会話ノードを UI ウィジェットにバインドするには、ビューモデルの [Progress (進行度)] の値を使用し、シーケンサーで作成する UI アニメーションにリンクする必要があります。  マテリアルをアニメートする方法については、「UI をアニメートする」を参照してください。