Benutzerdefinierte Konversations-UI

Mit dem Widget-Editor kannst du das Aussehen der Schaltflächen und Hintergründe für deine Gespräche gestalten. Du musst keinem der Widgets im Widget-Editor Text hinzufügen, um benutzerdefinierte modale Fenster zu erstellen. Alle Schaltflächen und Textblock-Widgets beziehen den Text und die Dialoge aus deiner Gesprächsbibliothek.

Die Verwendung des Widget-Editors bedeutet, dass du Folgendes importieren kannst:

• Bilder

• Vorgefertigte Dialogfelder

• Font-Dateien

Ein cooles Beispiel für die Erstellung einer benutzerdefinierten Benutzeroberfläche mit dem Widget-Editor findest du auf der Tutorial-Seite Die TMNT-Arcade-Vorlage.

So öffnest du den Widget-Editor:

1. Klicke mit der rechten Maustaste in den Inhaltsbrowser und wähle Benutzeroberfläche > Widget-Blueprint.

2. Wähle Modale Dialogvariante aus dem Fenster Widget-Blueprint-Auswahl.

3. Benenne deinen Widget-Blueprint und doppelklicke auf die Widget-Miniaturansicht, um den Widget-Editor zu öffnen.

4. Das Erstellen von benutzerdefinierten Konversationsboxen verwendet die auf der Seite Widget-Editor beschriebenen Arbeitsabläufe.

Zu den Widgets, die du am wahrscheinlichsten mit dem Gesprächsgerät verwenden wirst, gehören:

• Canvas-Panel – Ein Panel zum Platzieren aller Widgets mit Ausrichtungskontrolle und mehr.

• UEFN TextBlock für ConversationModalDialogViewModel – Für den Titeltext des Gesprächs.

• UEFN TextBlock für ConversationModalDialogViewModel – Für den Haupttext des Gesprächs.

• UEFN-Schaltfläche für ConversationModalDialogViewModel – Für alle Schaltflächen/Textauswahlen.

Werte binden

„Werte binden“ bezieht sich auf den im Gesprächsdiagramm eingegebenen Text. Der gesamte Text, der in den Gesprächsknoten eingegeben wird, wird während des Gameplays zu den Widgets hinzugefügt, wenn die Widgets ordnungsgemäß an Widgets im Viewmodel gebunden sind.

Die Bindung der Textwerte für die benutzerdefinierte Gesprächsbox beginnt mit dem Hierarchie-Panel im Widget-Editor.

1. Wähle ein Widget aus dem Panel Hierarchie aus. Du kannst ganz oben in der Hierarchie beginnen und dich bis zum Ende der Liste vorarbeiten.  

2. Klicke in der unteren Symbolleiste auf Ansichtsbindungen. Das Viewmodel-Panel wird geöffnet.  

   

3. Wähle das gewünschte Element aus und klicke dann auf + Widget hinzufügen im Viewmodel-Panel. Damit wird das Widget automatisch zur Viewmodel-Liste hinzugefügt.

   

   Widgets können auch zum Viewmodel hinzugefügt werden, indem du in das Widget-Feld klickst und das Widget aus der Dropdown-Liste auswählst.

   

4. Wähle die Eigenschaft aus, an die das Widget gebunden werden soll, indem du auf das Bearbeiten-Symbol der UEFN-Text-Eigenschaft klickst und Text > Auswählen wählst.

   

5. Wähle entweder einen Textwert oder einen Schaltflächenwert aus der Dropdown-Liste CreativeModalDialogueViewmodel. Dies fügt den ausgewählten Wert zum Widget hinzu. Die Auswahl sollte basierend auf dem Typ des Widgets in der Hierarchie getroffen werden.

   

6. Klicke auf Auswählen, um die Bindung der Werte an die Widgets zu beenden.

   1. Zu den Textwerten gehören Titel, Körper oder Schaltfläche# Haupttext:

   2. Der Titel ist der Wert aus dem Feld Sprechername im Konversation-Gerät oder der Wert aus dem Titel im Popup-Dialog-Gerät.

   3. Body ist der Text, der folgt und dem Spieler normalerweise Optionen für das Gespräch präsentiert. Dies sind die Sprache-Knoten, die mit dem Standardeinstiegspunkt-Knoten verknüpft sind.

   4. Schaltfläche# Text ist der Text, der in den Antwortknoten angezeigt wird, wie sie im Konversationsdiagramm geordnet sind.

   

Schaltflächenwerte sollten entsprechend der Anzahl der verwendeten Schaltflächen-Widgets nummeriert werden. Die Werte werden in der gleichen numerischen Reihenfolge festgelegt, in der die Schaltflächen-Widgets hinzugefügt wurden. Die Schaltflächen sind die Antwortknoten in einem Gesprächsdiagramm. Dadurch wird der Schaltflächentext entsprechend an jede der Schaltflächen gebunden.

Schaltflächen binden

Das Binden von Schaltflächen bezieht sich auf das Auslösen von Events nach einer Schaltflächenauswahl. Das kann ein einzelnes Event sein, bei dem ein NPC einen Gegenstand zur Verfügung stellt, oder ein komplexer Austausch, bei dem der NPC Gegenstände zu verkaufen hat, wodurch eine Reihe von Events ausgelöst wird.

Um die Auslösungen der Events in den benutzerdefinierten Schaltflächen-Widgets zu programmieren, musst du die Event-Logik zur Schaltfläche aus dem Viewmodel hinzufügen.

1. Klicke in der unteren Werkzeugleiste auf Bindungen anzeigen.

   

2. Wähle jeweils eine Schaltfläche aus dem Hierarchie-Panel im Widget-Editor aus. Wenn du das Widget aus dem Hierarchie-Panel auswählst, wird das ausgewählte Schaltflächen-Widget automatisch im Widget-Feld platziert.

3. Klicke auf + Widget hinzufügen. Das Widget wird wieder der Liste hinzugefügt.

   

4. Wähle das Pfeilfeld aus und wähle Unidirektional zum Ansichtsmodell.

   

5. Wähle die Schaltfläche aus und wähle den Wert Bei Klick aus. Achte darauf, dass du im Auswahlfenster auf Event klickst, nicht auf Auswählen.

6. Wähle den Antwortwert im Viewmodel aus.

7. Wähle den gewünschten Antwort-Wert für die Schaltfläche in der folgenden Zeile. Die resultierende Bindung sollte folgendermaßen aussehen:

   

Du kannst deine Schaltflächen auch so einrichten, dass sie ein- oder ausgeblendet werden, je nachdem, ob ihnen Werte zugewiesen sind:

1. Wähle die Schaltfläche in der Hierarchie aus und füge der Schaltfläche ein Widget hinzu.

2. Wähle den Wert für Sichtbarkeit.

3. Suche den entsprechenden Eintrag Schaltfläche # Sichtbarkeit auf der rechten Seite der Bindung und wähle ihn aus. Die resultierende Bindung sollte folgendermaßen aussehen:

   

4. Nun ist die Schaltfläche nur dann sichtbar, wenn es eine Antwort zur Auswahl gibt.

Zum Vergrößern auf das GIF klicken.

Ohne die Sichtbarkeit-Bindung würde der Text aus dem Antwortfeld gelöscht und ein leeres Auswahlfeld für die Spieler hinterlassen:

Klicke auf das GIF, um es zu vergrößern.Text > Auswählen

Materialien verknüpfen

Materialien können in UMG verwendet werden, um das Bild-Widget zu bevölkern. Mit UMG verwendete Materialien müssen im UI-Material-Format sein, damit das Widget die Materialdatei erkennt und mit dem Bild-Widget verwendet. Weitere Informationen zu UI-Materialien findest du in der Dokumentation UI-Materialien.

Materialien können verwendet werden, um das Array Materialien Konversation zu bevölkern. Du kannst benutzerdefinierte Materialien mit importierten Dateien erstellen, die im Materialdiagramm in Texturen konvertiert werden können. Die folgenden Dateitypen stellen keine vollständige Liste der akzeptierten Dateitypen dar, sind aber Standard für den Import von Rasterbild-Assets:

• .png

• .webp

• .jpg

Füge im Konversationsgerät deine Materialien zum Konversationsmaterial-Array hinzu. Dann muss im Konversationsdiagramm der Knoten „Material festlegen“ im Konversationsdiagramm vorhanden sein. Die Materialien werden aus dem Diagramm in den Bindungen referenziert.

So bindest du ein Material an ein Konversationsgerät:

1. Klicke im UI-Widget-Editor auf das Bild-Widget im Hierarchie-Panel.

   

2. Klicke auf Ansichtsbindungen, um das Bindungen-Panel zu öffnen. Das Panel öffnet sich mit einer Bindungslinie für das Bild-Widget.

   

3. Klicke auf die Schaltfläche +Widget hinzufügen, um das Bild-Widget zum Ansichtsbindungen-Panel hinzuzufügen.

   

4. Klicke im Bild-Widget im linken Feld auf das Bearbeitungssymbol, um die Widget-Optionen zu öffnen.

   

5. Wähle Bild-Widget > Pinsel > Auswählen. Dies fügt dem rechten Feld auswählbare Pinselbindungen hinzu.

   

6. Klicke auf das Bearbeitungssymbol im rechten Feld, um die Bindungsoptionen zu öffnen.

   

7. Klicke auf Konvertierungsfunktion > Bildpinsel aus Material erstellen > Auswählen. Dies öffnet weitere Optionen, um das Material zu bestimmen, das du für dieses Widget verwenden möchtest.

   

8. Wähle im Material-Slot das Link-Symbol und dann im Menü Kreativmodus Modaler Dialog Viewmodel > Art 01 Material > Auswählen.

   

9. Gib im Bildgröße-Slot die gleiche Größe ein, die du in der Bildgröße-Option des Bild-Widgets im Details-Panel verwendet hast.

   

Das Endergebnis ist ein Material, das den Charakter-Sprecher identifiziert.

UI-Animationen für Konversationen erstellen

Du kannst auch Konversationsmaterial in einer UI-Animation verwenden. Der Konversationstyp muss im Konversationsgerät auf Box oder Benutzerdefiniert eingestellt werden. Über das Materialdiagramm kann das Konversationsmaterial vom Konversationsgerät referenziert werden, wenn du den Knoten Konversationsanimation abspielen verwendest.

Um diesen Konversationsknoten an dein UI-Widget zu binden, musst du den Fortschritt-Wert im Viewmodel verwenden, um einen Link zur UI-Animation herzustellen, die du im Sequencer erstellst.  Wie du dein Material animieren kannst, erfährst du im Dokument Animieren der Benutzeroberfläche.