Animieren der Benutzeroberfläche in Unreal Editor für Fortnite | Unreal Editor für Fortnite Dokumentation

Derzeit gibt es einen Fehler, bei dem du in den Ansichtsbindungen kein Feld „UI-Animationsbedingung“ siehst, wenn keine regulären Ansichtsbindungen erstellt sind. Du musst zuerst eine reguläre Ansichtsbindung erstellen, um die Felder der Bedingungsbindung sehen zu können. Dieser Fehler wird in V.33.00 behoben.

Verwende den Sequencer in UMG, um Widgets zu animieren. Widgets animieren basierend auf Werten, die in einen Materialparameter eingegeben werden.

Derzeit funktioniert die Animation der Benutzeroberfläche nur mit float und int-Variablen. In Zukunft werden weitere Funktionen zum Animieren der Benutzeroberfläche hinzugefügt.

Einrichten des Widgets

Das Widget verwendet das Tracker-Widget aus dem Beispiel in Materialparameter in UMG einstellen.

Erstelle ein Tracker-Widget, wenn du kein gebrauchsfertiges hast. Gehe dann wie folgt vor:

Füge einen Textblock hinzu, der +1 über dem bestehenden Tracker-Widget anzeigt. Dies zeigt an, dass der Eliminierungs-Tracker basierend auf der Anzahl der eliminierten Zombies erhöht wird.
Setze unter Rendering > Render-Opazität die Render-Opazität für diesen Textblock auf 0.0.
Das Widget ist bereit zur Animation.

Einrichten der Animation

Um eine Animation zu deiner Benutzeroberfläche hinzuzufügen, öffnest du den Sequencer unter dem Event-Diagramm, um das Symbol und „+1“ zu animieren. Dann richtest du die Animation im Sequencer ein.

In diesem Beispiel erscheint das Symbol und der Text „+1“, wenn der Tracker des Spielers wie im folgenden GIF voranschreitet.

In diesem Beispiel erscheint das Symbol und der Text „+1“ erscheint, wenn der Tracker des Spielers fortschreitet.

Informationen zur Verwendung des Sequencers findest du im Dokument Sequencer und Control-Rig.

Öffne das Animationsfenster in Fenster > Animationen.
Klicke auf +Animation und nenne die Animation OnIncrement.

Animieren der Sichtbarkeit eines Widgets

Um die Benutzeroberfläche zu animieren, identifizierst du das zu animierende Widget und animierst dann das Material oder die Textur, die mit diesem Widget verbunden sind, im Sequencer im Animationsfenster. Starte die Animation, indem du den IncrementText (+1) auswählst.

Wähle OnIncrement aus, wähle dann den +1 Text aus und wähle dann +Hinzufügen > Text inkrementieren.
Wähle das +Plus-Symbol im IncrementText-Track aus und wähle Render-Opazität aus. Dies erlaubt es dir, die Opazität auf der Animationszeitachse zu verfolgen.
Lege einen Key für den Beginn der Animation fest. Damit wird festgelegt, wo der Text ein- und ausgeblendet wird.
Setze die Render-Opazität auf:
1. 1,0 bei 0,25 Sekunden
2. 0,0 bei 0,50 Sekunden
Jetzt hast du eine Animation, die den Text jedes Mal ein- und ausblendet, wenn der Spieler eine Eliminierung erhält.

Animieren der Position eines Widgets

Füge eine Animation zur Position des Text-Widgets hinzu, sodass sich der Text nach oben bewegt, wenn er sichtbar ist, bevor er ausgeblendet wird.

Klicke auf das +Plus-Symbol bei IncrementText und wähle Transformieren.
Erweitere Transformieren > Verschiebung und setze Y auf den Betrag, um den der +1 Text nach oben verschoben werden soll, solange er sichtbar ist. In diesem Beispiel sind die Y-Verschiebung-Keyframes des Texts festgelegt auf:
1. 0,0 bei 0,0s
2. -20,0 bei 0,25s
3. -20,0 bei 0,50s
Denke daran, für jede Bewegung des Textes Keyframes festzulegen.

Jetzt bewegt sich der Text nach oben, wenn er erscheint.

Animieren der Skalierung eines Widgets

Erhöhe die Größe des animierten +1-Texts, während er sich bewegt, um die Aufmerksamkeit auf die Eliminierungen zu lenken, indem du die Skalierungseinstellungen des Widgets animierst. Diese Animation erzeugt die Illusion, dass der Text ganz plötzlich auf dem Bildschirm erscheint.

Erweitere IncrementText > Transformieren > Skalieren. Die Werte X und Y erscheinen unter Skalieren.
Lege Skalierung X und Y als Keyframes auf deiner OnIncrement-Zeitleiste fest. In diesem Beispiel wurden die Skalierungs-Keyframes wie folgt eingestellt:
1. 0,0 bei 0,0s
2. 2,0 bei 0,10s
3. 0,0 bei 0,50s

Jetzt erscheint der +1-Text mit einem dramatischen Effekt, wenn die Animation abgespielt wird.

Lege die Skalierung X und Y als Keyframes auf deiner OnIncrement-Zeitleiste fest.

Animieren des Materialparameters eines Bildpinsels

Damit sich das Symbol im Material mit dem Tracker-Fortschritt erweitert, greifst du über den Sequencer auf das Material zu.

Wähle das TrackerMaterial-Bild aus und klicke dann in der OnIncrement-Animation auf +Hinzufügen > TrackerMaterial.
Klicke auf das +Plus-Symbol in deinem TrackerMaterial-Track und wähle Brush.Brush Material aus. Dies fügt der Eigenschaft Brush.Brush Material einen Material-Track hinzu.
Klicke auf das +Plus-Symbol im neuen Brush.Brush.Material-Track und wähle IconScaleX und IconScaleY aus.

Erweitere IconScaleX und IconScaleY. Du kannst diese Parameter im Sequencer einfach manipulieren, wenn die OnIncrement-Animation abgespielt wird. Mit diesen Einstellungen kannst du die Skalierung des Symbols nach oben und unten animieren.
Setze IconScaleX und IconScaleY auf:
1. 0,7 bei 0,00
2. 1,0 bei 0,25
3. 0,7 bei 0,00

Nun verwendet die Animation die Materialparameter von TrackerMaterial, um das Symbol wie im folgenden GIF zu animieren.

Jetzt verwendet die Animation die Materialparameter von TrackerMaterial.

Hinzufügen einer Animationsbedingung

Jetzt, wo deine Animation einsatzbereit ist, verknüpfe sie mit einem Gameplay-Wert, damit sie eine Animation abspielt, wenn sich ein Gameplay-Wert ändert.

Öffne das Fenster Ansichtsbindungen, indem du Fenster > Ansichtsbindungen wählst.
Wähle im Fenster Ansichtsbindungen die Option +Bedingung hinzufügen.

Die linke Box ist für den Gameplay-Wert, den du auf Änderungen nachverfolgen möchtest, damit die Animation auf der rechten Seite abgespielt wird. Aktuell akzeptiert +Bedingung hinzufügen nur Float- oder Int-Werte.
Wähle die linke Box aus und dann MVVM_UEFN_Tracker > Wert. Diese verfolgt den Tracker-Fortschritt, indem eine Animation abgespielt wird, wenn der Tracker-Wert erhöht wird.
Klicke auf das mittlere Dropdown-Menü und wähle Mehr als (>) aus.

Die beiden Boxen in der Mitte sind die Bedingungen, die erfüllt werden müssen, um die Animation abzuspielen. Immer wenn sich der Wert ändert, wird geprüft, ob er innerhalb dieser Bedingung liegt, und wenn dies der Fall ist, wird die Animation abgespielt.

Wenn du den Wert auf Mehr als (>) 0,0 einstellst, spielt die Benutzeroberfläche die Animation immer dann ab, wenn sich dieser Wert ändert.
Wähle die rechte Box aus und dann WBP_{YourWidgetName} > Warteschlange Animation abspielen aus. Die rechte Box ist die Aktion, die ausgeführt werden soll, wenn dieser Wert die Bedingung erfüllt. In diesem Fall, um die oben erstellte OnIncrement-Animation abzuspielen.

Eine Liste mit Optionen, die sich auf die Animation beziehen, die du wiedergeben möchtest, wird in Ansichtsbindungen angezeigt.
- In Animation = Wiedergabe
- Startzeit = Wähle eine Zeit aus
- Anz. abzuspielender Schleifen = Anzahl der Animationsschleifen
- Spielmodus = Vorwärts, Rückwärts oder Ping-Pong
- Wiedergabegeschwindigkeit = Beschleunigen oder Verlangsamen der Animation
- Zustand wiederherstellen = Stellt den Standardzustand der Animation wieder her
Klicke auf das Link-Symbol neben InAnimation und wähle dann WBP_{YourWidgetName} > OnIncrement > Select aus.
$Klicke auf das Link-Symbol neben InAnimation und wähle dann WBP_{YourWidgetName} > OnIncrement > Select.$

Jetzt ist deine Animation so eingerichtet, dass sie abgespielt wird, sobald der Tracker fortschreitet.

Endergebnis

Wenn die Spieler Feinde oder NPCs eliminieren, zeigt die Benutzeroberfläche den Fortschritt der Eliminierung an, indem das Symbol auftaucht und +1 erscheint plötzlich und verschwindet.