Erstellen von benutzerdefinierten Fähigkeiteninteraktionen

Dieser Walkthrough enthält ein Beispiel für ein UMG-Design (Unreal Motion Graphics) und seine Viewmodel-Bindungen, mit denen du eine benutzerdefinierte Benutzeroberfläche für das Fähigkeiteninteraktion-Gerät erstellen kannst.

Wenn du deine benutzerdefinierte Fähigkeiteninteraktion erstellst, solltest du sicherstellen, dass du ein Event festlegst, um die Interaktion zu beginnen. Du kannst auch Event-Trigger festlegen, die Spielern Gegenstände gewähren, wenn sie die Fähigkeiteninteraktion erfolgreich abschließen.

Du kannst auf diesen Beispielen aufbauen, indem du kinematografische Zwischensequenzen einstellst, sobald Spieler oder Objekte bestimmte Zonen anvisieren.

Dieses Tutorial zeigt, wie man eine Fähigkeiteninteraktion mit schnellem Drücken erstellt, bei der Spieler einen Trigger-Input halten können, um die richtigen Zonen zu zielen.

Bevor du mit der Anpassung deiner Benutzeroberfläche beginnst, musst du alle Assets erstellen und importieren, um sie in deinen Designs zu verwenden. Gehe auf Benutzerdefinierte Benutzeroberfläche mit Materialien erstellen, um mehr über die Verwendung von Materialien in deinem Design zu erfahren.

Richte das Gerät ein

Befolge die unten aufgeführten Schritte, um ein Golf-Beispiel zu erstellen, bei dem die Spieler eine perfekte Zone anvisieren, um beim Treffer Erfolg zu haben. Beim Gestalten deiner Benutzeroberfläche kannst du die Panels umbenennen, wenn du sie im Hierarchie-Panel platzierst.

1. Platziere über den Inhaltsbrowser ein Fähigkeiteninteraktion-Gerät in deinem Projekt.

2. 1. Ändere im Details-Panel für das Gerät die folgenden Einstellungen.
   

   Option	Wert	Beschreibung
   UI-Typ	Balken	Bestimmt die Art der angezeigten Benutzeroberfläche.
   Benutzerdefiniertes Widget	Füge dein benutzerdefiniertes Benutzer-Widget hinzu	Wähle ein benutzerdefiniertes Widget aus, das für die Interaktion verwendet werden soll.
   Interaktionstyp	Laden und Loslassen	Das Laden und Loslassen wird animiert, während du die Trigger-Schaltfläche gedrückt hältst, und wird beim Loslassen aktiviert.
   Zählerfarbe	Wähle eine Farbe	In diesem Beispiel wird die Farbe rot verwendet.
   Gute Zone Größe	80,0	Legt die Größe der guten Zone in Prozent des Gesamtzählers fest.
   Gute Zone Position	0,0	Legt die Position der guten Zone fest.
   Perfekte Zone Größe	15,0	Legt die Größe der perfekten Zone in Prozent der guten Zone fest.
   Perfekte Zone Position	100,0	Legt die Position der perfekten Zone fest.
   Gute Zone Farbe	Wähle eine Farbe	In diesem Beispiel wird die Farbe dunkelgrün verwendet.
   Perfekte Zone Farbe	Wähle eine Farbe	In diesem Beispiel wird die Farbe limonengrün verwendet.

Hintergrundbild hinzufügen

Befolge die folgenden Schritte, um das Hintergrundbild für den vertikalen Zählerbalken in diesem Beispiel zu erstellen. Der Hintergrund in diesem Walkthrough ist ein abgerundeter, schwarzen Balken, auf dem die Zonen liegen.

Verwende das Bild oben als Referenz, wenn du die Schritte in diesem Tutorial nachvollziehst.

1. Erstelle ein Benutzer-Widget für deine Interaktion.

2. Suche das an das Gerät angehängte Benutzer-Widget und doppelklicke darauf, um auf seinen Benutzer-Widget-Editor zuzugreifen.

3. Ziehe und verschachtele im Hierarchie-Panel ein Overlay, das als allgemeiner Canvas dient. In diesem Beispiel wird es Overlay genannt. Ziehe dann ein weiteres Overlay, um den Hintergrund einzuschließen. In diesem Beispiel heißt es SID.

4. Ziehe und verschachtele ein Bild, im Beispiel „Bar“, in das Child-Overlay.

5. Lege im Details-Panel des Bildes das Material oder die Textur für deinen Hintergrund fest.

Zonen einrichten

Du kannst eine schlechte Zone für dein Beispiel erstellen, die zu einem automatischen Fehlschlag führt, wenn sie anvisiert wird. Dieses Beispiel verwendet jedoch nur eine perfekte Zone, die aus drei Containern besteht:

• Ein anfänglich leerer Bereich mit dem Namen PerfectZoneStart.

• Die gute oder perfekte Zone, SizeBox genannt.

• Der leere Bereich danach, PerfectZoneEnd genannt.

Gehe wie folgt vor, um die perfekte Zone für dieses Beispiel zu erstellen.

1. Ziehe und verschachtele aus dem Palette-Panel eine Stapelbox in das Child-Overlay, im Beispiel SID genannt.

2. Ziehe dann die folgenden Children und verschachtele sie in der Stapelbox: Skalierungsbox > Größenbox.

   1. Lege im Details-Panel für das Skalierungsbox-Panel die Option Dehnen auf Benutzerdefiniert fest. Lege dann die Benutzerdefinierte Skalierung fest, um anzugeben, wie viel Platz du über der perfekten Zone haben möchtest. Stelle für dieses Beispiel die Skalierung auf 0,27 ein.
   2. Setze in der Größenbox die Einstellung Höhen-Override auf die Höhe des obersten Zählers.

3. Ziehe in derselben Stapelbox außerdem Größenbox > Skalierungsbox > Overlay > Bild.

   1. Lege im Details-Panel für die Größenbox den Höhen-Override auf die Größe der perfekten Zone fest.

   2. Lege im Details-Panel für die Skalierungsbox die Einstellung Dehnen auf Benutzerdefiniert fest. Setze dann die Einstellung Benutzerspezifizierte Skalierung auf 1.

   3. Das Overlay PerfectZone enthält das Material oder die Textur für die perfekte Zone.

4. Ziehe in derselben Stapelbox ebenfalls ein Overlay > Größenbox.

   1. Lege im Details-Panel für das Overlay PerfectZoneEnd die Einstellung Dehnen auf Benutzerdefiniert fest. Lege dann die Benutzerdefinierte Skalierung fest, um anzugeben, wie viel Platz du über der perfekten Zone haben möchtest. Stelle für dieses Beispiel die Skalierung auf 0,49 ein.

   (w:600)

   1. Setze im Details-Panel für die Größenbox die Einstellung Höhen-Override auf die Höhe des unteren Zählers.
   

5. Um zusätzliche Details hinzuzufügen, kannst du Einblendungen für die Hintergrundzonen einfügen, indem du ein Bild, im Beispiel Einblendungen genannt, unter der Stapelbox hinzufügst.

Scrubber einrichten

In diesem Beispiel muss sich der Scrubber in einem sich bewegenden Container befinden. Dazu musst du eine Stapelbox mit zwei Gegenständen erstellen.

Das erste Element enthält eine Größenbox, die auf Benutzerskalierung festgelegt ist, die du später an die Skalierungszähler für Fähigkeiteninteraktionen im ViewModel binden wirst. Der zweite Gegenstand enthält einen Container mit dem Scrubber.

(w:600)

1. Ziehe unter der Overlay-SID eine Stapelbox, im Beispiel ScrubberStackBox, um zwei Child-Setups zu enthalten: Overlay > Größenbox und Größenbox > Skalierungsbox > Bild mit dem Namen Scrubber.

   1. Lege im Details-Panel für das Overlay ScrubberMovingZone die Einstellung Dehnen auf Benutzerdefiniert fest. Setze dann die Einstellung Benutzerspezifizierte Skalierung auf 0.
   
   1. Setze im Details-Panel für die Größenbox die Einstellung Höhe-Override auf die Höhe des obersten Zählers.
   
   1. Setze die Einstellung Höhen-Override für Größenbox ScrubberContainer auf 0.
   
   1. Ändere die Einstellung Dehnen für das Overlay Skalierungsbox auf Benutzerdefiniert. Setze die Einstellung Benutzerspezifizierte Skalierung auf 1.
   
   1. Lege in der Einstellung Bild für das Bild Scrubber das Material oder die Textur deines Scrubbers fest.
   

ViewModel einrichten

Folge diesen Schritten, um deine benutzerdefinierte UI mit dem Fähigkeiteninteraktion-Gerät zu verbinden.

1. Navigiere im Benutzer-Widget zu Fenster > Viewmodels, um das Fenster Viewmodels zu öffnen.

2. Klicke auf +Viewmodel. Wähle dann Gerät – Fähigkeiteninteraktion Viewmodel und klicke auf Auswählen.

3. Wähle entweder in der unteren Symbolleiste oder auf dem Tab Fenster die Option Ansichtsbindungen aus.

4. Richte deine Ansichtsbindungen so ein, dass sie dem Bild unten entsprechen.

   
   1. Klicke auf + Widget hinzufügen, um die ScrubberMovingZone hinzuzufügen.
   2. Setze SubberMovingZone auf Benutzerspezifizierte Skalierung und UEFN_SkilledInteraction_ViewModel auf Aktueller Zählerwert.
   3. Klicke auf + Widget hinzufügen, um den PerfectZoneStart hinzuzufügen.
   4. Setze PerfectZoneStart auf Benutzerspezifizierte Skalierung und UEFN_SkilledInteraction_ViewModel auf Perfekte Zone Min.
   5. Klicke auf + Widget hinzufügen, um das PerfectZoneEnd hinzuzufügen.
   6. Setze PerfectZoneStart auf Benutzerspezifizierte Skalierung und füge eine Konvertierungsfunktion für Int Double addieren hinzu.
   7. Setze A auf 1.
   8. Setze B auf UEFN_SkilledInteraction_Viewmodel/Perfekte Zone Max.
   9. Setze B negieren auf True.