Erstelle einen benutzerdefinierten animierten Timer für zeitkritische Spiele. Mit UI-Animationen kannst du den Timer pulsieren und verschwinden lassen oder sogar ein benutzerdefiniertes Countdown-Material hinzufügen, das die Uhr umgibt.
Dieses Tutorial zeigt dir Folgendes:
Richte ein Material ein.
Animiere ein Zeigerbild.
Ändere die Uhrfarbe.
Erstelle ein Benutzer-Widget im Inhaltsbrowser, indem du den Anweisungen im Tutorial für UI-Pop-ups folgst.
SCHRITT 1: Widgets einrichten
Nachdem du das Benutzer-Widget erstellt hast, doppelklicke auf die Benutzer-Widget-Miniaturansicht, um den Widget-Editor zu öffnen.
Ziehe ein Overlay-Widget in das Widget-Diagramm und skaliere es auf 1920 x 1080, indem du die rechte untere Ecke ziehst. Dieses Widget fungiert als der Bildschirm, auf dem die Benutzeroberfläche angezeigt wird.
Führe einen Rechtsklick auf das Overlay-Widget im Hierarchie-Panel aus, um das Widget in Stamm umzubenennen. Der Name erinnert dich auch daran, dass es sich um das Widget handelt, das als Modell für den Bildschirm fungiert.
Ziehe ein zweites Overlay-Widget in das Stamm-Widget. Dieses Widget enthält alle Widgets, die das Design und die Funktion des animierten Timers ausmachen.
Benenne das zweite Overlay-Widget im Hierarchie-Panel in ParentContainer um.
Lege im Details-Panel die folgenden Eigenschaften fest:
Padding = 25.0
Horizontale Ausrichtung = Horizontal mittige Ausrichtung
Ziehe ein Größenbox-Widget in das ParentContainer-Widget. Dies bestimmt und erzwingt die Größe der Child-Widgets. Die Child-Widgets der Größenbox werden zum Zifferblatt.
Benenne das Größenbox-Widget im Hierarchie-Panel in BGSizeBox um.
Stelle im Details-Panel die Horizontale Ausrichtung und Vertikale Ausrichtung auf Mittige Ausrichtung ein.
Wähle die Minimal gewünschte Breite und Maximal gewünschte Höhe aus, um diese Option zu aktivieren, und setze dann die Eigenschaften auf 130.0.
Der Container sollte sich wie unten gezeigt im Stamm-Widget befinden
Ziehe ein Bild-Widget in das BGSizeBox-Widget.
Benenne den Bild-Widget-Timer im Hierarchie-Panel um.
Stelle im Details-Panel die Horizontale Ausrichtung und Vertikale Ausrichtung auf Mittige Ausrichtung ein.
Füge der Eigenschaft Pinsel Bild eine Material-Instanz hinzu. Das könnte ein Material sein, das die Zeit herunterzählt.
Das Material füllt den Raum innerhalb des Parent-Container-Widgets aus.
Ziehe ein Textbox-Widget in das Parent-Container-Widget.
Benenne das Textbox-Widget im Hierarchie-Panel in TimerText um.
Setze im Details-Panel die Eigenschaft Text auf 00:00.
Das Timer-Text-Widget befindet sich direkt in der Mitte des Benutzer-Widgets.
Als Nächstes animierst du das Timer-Text-Widget, um die Zeit während des Dringlichkeitszustands dynamischer zu machen.
SCHRITT 2: Timer-Text animieren
Um ein Gefühl der unmittelbaren Gefahr für den Dringlichkeitszustand während der letzten Sekunden deines Timers zu erzeugen, animiere die Uhrzeit.
In der nachfolgend erstellten Animation vergrößert sich der Timer-Text, wird rot und wird dann ausgeblendet. Diese Animation wird für die Dauer des Dringlichkeitsmodus wiederholt, der im Timer-Gerät eingestellt wurde.
Klicke unten im Widget-Editor-Bildschirm auf Animationen. Dadurch wird ein Sequencer-Panel geöffnet, in dem du Animationen erstellen und Widgets zur Animationssequenz hinzufügen kannst.
Klicke auf +Animation, um eine Animationsdatei in deinem Benutzer-Widget zu erstellen.
Benenne die Animation Dringlichkeit. Diese Animation wird später festgelegt, wenn du Bindungen zum Benutzer-Widget hinzufügst.
Ein blaues AUSGEWÄHLTES Quadrat umgibt das Widget-Diagramm.
Klicke auf +Hinzufügen, um die Liste der Objekte zu öffnen, die zur Animation im Benutzer-Widget hinzugefügt werden können.
Wähle im Hierarchie-Panel das TimerText-Widget aus.
Wähle TimerText aus der Liste aus, um TimerText zum Sequencer-Panel hinzuzufügen.
Wähle neben TimerText das + Symbol aus, um die Liste der Eigenschaften zu öffnen, die animiert werden können.
Wähle Transformieren aus der Liste aus. Dadurch werden alle Möglichkeiten zur Transformation des Texts hinzugefügt: Verschiebung, Drehung, Skalierung und Scherung.
Öffne die Skalierung-Optionen und wähle das + Keyframe-Symbol aus, um Keyframes zur Zeitleiste hinzuzufügen. Mit den Optionen X-Achse und Y-Achse kannst du den Text vergrößern und verkleinern, wenn du neue Werte eingibst.
Bewege den Abspielkopf in der Zeitleiste auf 0.25 Sekunden, ändere die Werte für X-Achse und Y-Achse auf 1.5 und drücke dann das +Keyframe-Symbol neben den Optionen für X-Achse und Y-Achse. Keyframes erscheinen in der Zeitleiste und zeigen einen Fortschritt auf dem TimerText.
Bewege den Abspielkopf in der Zeitleiste auf 0.5 Sekunden, ändere die Werte für X-Achse und Y-Achse auf 2.0 und drücke dann das +Keyframe-Symbol neben den Optionen für X-Achse und Y-Achse. Zusätzliche Keyframes werden in der Zeitleiste angezeigt und zeigen einen Fortschritt des Textes.
Wähle das + Symbol neben TimerText und wähle Farbe & Opazität aus der Liste aus. Dies fügt Rot-, Grün-, Blau- und Alpha-Eigenschaften zum Sequencer hinzu.
Setze den Abspielkopf in der Zeitleiste zurück und wähle das + Keyframe-Symbol neben Farbe & Opazität. Damit wird der erste Keyframe für jede der Eigenschaften für Farbe und Opazität in der Zeitleiste eingestellt.
Vergrößere Farbe & Opazität, ändere den Rot-Wert auf 1.0, den Grün-Wert auf 0.0 und den Blau-Wert auf 0.0. Dadurch wird eine rote Farbe erzeugt.
Bewege den Abspielkopf auf 0.25 Sekunden und wähle dann das + Keyframe-Symbol neben jeder der Eigenschaften unter Farbe und Opazität. Dies fügt Keyframes zur Zeitleiste hinzu.
Bewege den Abspielkopf auf 0.5 Sekunden, ändere den Alpha-Wert auf 0.0 und wähle das + Keyframe-Symbol. Wenn die Animation die letzten Keyframes in der Zeitleiste erreicht, verschwindet der Text.
Wenn du den Abspielkopf über die Zeitleiste vor und zurück bewegst, siehst du die Animation, die du erstellt hast, im Widget-Diagramm wiedergegeben.
Als Nächstes fügst du ein Ansichtsmodell hinzu und fügst Ansichtsbindungen hinzu, um das Timer-Gerät durch das Benutzer-Widget zu ersetzen.
Schritt 3: Ansichtsbindungen hinzufügen
Um die Default-Timer-Gerät-UI zu ersetzen, bindest du das Textbox-Widget (TimerText) an die Einstellungen des Timer-Geräts.
Wähle im Windows-Menü Ansichtsmodell aus. Das Ansichtsmodell-Fenster wird geöffnet.
Klicke auf +Ansichtsmodell und wähle dann Gerät – Timer-Ansichtsmodell > Auswählen. Alle Timer-Gerät-Ansichtsmodelle sind jetzt verfügbar und können an dein Benutzer-Widget gebunden werden.
Wähle im Hierarchie-Panel das TimerText-Widget aus.
Klicke in der unteren Werkzeugleiste auf Ansichtsbindungen, um das Ansichtsbindungen-Panel anzuzeigen.
Klicke auf +TimerText-Widget, um das TimerText-Widget zum Ansichtsbindungen-Panel hinzuzufügen.
Wähle das TimerText-Feld, um das Dropdown-Menü für die Widget-Eigenschaften zu öffnen.
Wähle im Dropdown-Menü TimerText > Text > Auswählen. Dies identifiziert den Text des TimerText-Widgets als die gebundene Eigenschaft.
Wähle das leere rechte Feld aus, um die Dropdown-Liste für die Bindungen zu öffnen.
Wähle im Bindungen-Dropdown-Menü die Option TimerText ViewModel > Aktuelle Zeit > Auswählen. Dadurch wird das TimerText-Widget an die aktuelle Zeit für das Timer-Gerät gebunden und die aktuelle Zeit auf dem Bildschirm angezeigt.
Als Nächstes fügst du die Animation zum Ansichtsmodell hinzu, sodass sie im Dringlichkeitsmodus auf dem Bildschirm abgespielt wird.
Schritt 4: Animation hinzufügen
Du fügst die Animation ähnlich hinzu, wie du die Bindungen für TimerText im Ansichtsbindungen-Panel hinzugefügt hast.
Wähle oben im Ansichtsbindungen-Panel die Option +Bedingung hinzufügen aus. Dies fügt eine bedingte Zeile zum Ansichtsbindungen-Panel hinzu.
Öffne das Ansichtsmodell-Dropdown-Menü und wähle das Benutzer-Widget > Auswählen. Dies fügt das Benutzer-Widget zur Bedingung hinzu.
Wähle das linke Feld aus, um die Dropdown-Liste Ansichtsmodellbindung zu öffnen.
Wähle den Kreativmodus-Timer ViewModel > Ist Dringlichkeit > Auswählen. Dies verwendet IsUrgency als Vergleichseigenschaft, um zu prüfen, ob sie einem bestimmten Wert entspricht, und löst dann, basierend auf dem Rückgabewert (True/False), die Animation aus.
Ändere das Zeitfeld in 1.0. Das bedeutet, dass der Wert True ist und die Animation abgespielt wird, wenn Dringlichkeit gleich 1.0 ist.
Wähle das rechte Feld aus, um die Dropdown-Liste der Warteschlange zu öffnen, und wähle das Nutzer-Widget > Warteschlange Animation spielen > Auswählen. Jetzt wird die von dir erstellte Animation in die Warteschlange gestellt, um abzuspielen, wenn der Dringlichkeitsmodus gleich 1,0 ist.
Wähle neben In Animation das Bindungssymbol aus, sodass es sich in ein blaues Link-Symbol ändert.
Wähle das Feld In Animation aus und wähle dann Benutzer-Widget > Animationsname > Auswählen. Die ausgewählte Animation wird abgespielt, wenn sie in die Warteschlange gestellt wird.
Passe den Wert Start zur Zeit auf 10.0 an. Dieser Wert ist die Sekunde/der Frame, zu der die Animation wiedergegeben werden soll. Wenn auf 0.0 festgelegt, bedeutet dies, dass die Animation abgespielt wird, beginnend mit der Animation 0.0 Sekunden/Frame.
Stelle die Wiedergabegeschwindigkeit auf 0.5 ein. Dadurch wird die Animation mit der halben im Sequencer eingestellten Geschwindigkeit abgespielt.
Klicke auf Kompilieren, um dein Benutzer-Widget zu speichern.
Schritt 5: Timer-Gerät hinzufügen
Der letzte Schritt ist, dem Viewport ein Timer-Gerät hinzuzufügen und dessen Einstellungen zu personalisieren.
Wähle im Inhaltsbrowser den Ordner Fortnite > Geräte aus, um alle Geräteordner zu öffnen.
Gib Timer in die Suchleiste der Anlagenansicht ein, um das Timer-Gerät anzuzeigen.
Ziehe das Timer-Gerät in den Viewport.
Stelle im Details-Panel die Dauer auf 30.0 Sekunden ein.
Erweitere die Option Erweitert, um „Benutzerdefinierte Widget-Klasse“ anzuzeigen.
Wähle dein Benutzer-Widgetaus dem Dropdown-Menü „Benutzerdefinierte Widget-Klasse“ aus.
Verwende unter dem zweiten Satz an Erweitert-Optionen die folgenden Einstellungen:
Interaktion möglich = Nein
Abschlussverhalten = Zurücksetzen
Im Spiel sichtbar = Ausgeblendet
Dringlichkeitsmodus einschalten = Aktivieren
Dringlichkeitsmodus Zeit = 10.0 Sekunden
Jetzt können Spieler nicht mit dem Gerät interagieren, und wenn die eingestellte Dauer des Timers abläuft, wird er zurückgesetzt. Wenn der Dringlichkeitsmodus aktiviert ist, wird deine benutzerdefinierte Animation nun in die Warteschlange gestellt und für die unter „Dringlichkeitsmodus-Zeit“ festgelegte Zeit abgespielt.
Speichere deine Änderungen und führe dann einen Spieltest deines Projekts durch, um zu sehen, wie das Benutzer-Widget im HUD funktioniert.
Dein Spieltest sollte dazu führen, dass die benutzerdefinierte Zeit das Default-Timer-Gerät ersetzt und die Animation während der angegebenen Zeit abgespielt wird.
Du bist am Zug
Es gibt einige Möglichkeiten, wie du den Timer für dein eigenes Projekt einzigartig machen kannst.
Füge ein Material um den TimerText hinzu, das langsam verschwindet, wenn der Timer abläuft.
Füge eine Textur um den TimerText herum hinzu, der wie eine Uhr aussieht.
Verschiebe den Timer in die Ecke statt in die Mitte des Bildschirms.