Einen benutzerdefinierten Countdown-Timer erstellen

Du könntest das Timer-Gerät verwenden, das einen Countdown-Timer ausführt, aber die Erstellung eines eigenen Countdown-Timers in Verse ist eine Möglichkeit, sein Verhalten genau an deine Bedürfnisse anzupassen.

In diesem Tutorial erfährst du, wie du deinen eigenen Timer mit Verse erstellst und wie du einen Appell verwendest, wenn die Zeit zum Countdown hinzugefügt wird. Fang einfach an, und du wirst Wege finden, dein Können zu verbessern, Projekt für Projekt.

Verwendete Sprachfunktionen in Verse

• if: Der Ausdruck if testet Bedingungen und greift auf Werte zu, die fail sein könnten.

• block: In diesem Beispiel wird der Ausdruck block zum initialize der Benutzeroberfläche verwendet, wenn der Countdown-Timer erstellt wird.

• loop: Der Ausdruck loop aktualisiert die Benutzeroberfläche und endet, wenn der Countdown Null erreicht.

• spawn: Ein spawn Ausdruck startet eine asynchronous expression in einem beliebigen context.

• message: Der Nachrichtentyp bedeutet, dass der Text lokalisiert werden kann, und die Zeichenfolge, die du zum Initialisieren einer Nachrichtenvariablen verwendest, ist der Standardtext und die Standardsprache für die Nachricht.

• classDieses Beispiel erstellt eine Verse-Klasse, die den Countdown verwaltet und anzeigt.

• constructor: Ein Constructor ist eine spezielle Funktion, die eine Instanz der Klasse erzeugt, mit der sie verbunden ist.

• Access specifiers: Mithilfe von Zugriffsbezeichnern kannst du die Zugriffsebene deines Codes festlegen.

Verwendete APIs in Verse

• Sleep: Mit der API Sleep() kannst du den Zeitraum zwischen UI-Aktualisierungen auswählen.

• Events: Du kannst deine eigenen Ereignisse in Verse erstellen und benutzerdefinierte Funktionen hinzufügen, wenn sie auftreten.

• Verse UI: Erstelle eine benutzerdefinierte In-Game-Benutzeroberfläche, um Informationen über den Spieler und das Spiel anzuzeigen.

Anweisungen

Befolge diese Schritte, um zu erfahren, wie du deinen eigenen benutzerdefinierten Timer erstellst. Das complete script ist am Ende dieses Leitfadens als Referenz enthalten.

Level einrichten

Dieses Beispiel verwendet die folgenden Props und Geräte.

• 1 x Schaltflächengerät: Wenn der Spieler mit dem Gerät interagiert, wird dem Countdown mehr Zeit hinzugefügt.

• 1 x Endspielgerät: Wenn der Countdown abgelaufen ist, bewirkt dieses Gerät, dass das Spiel beendet wird.

Befolge diese Schritte, um dein Level einzurichten:

1. Füge ein Gerät Schaltfläche und Spielbeender zu deinem Level hinzu.

2. Erstelle ein neues Verse-Gerät mit dem Namen countdown_timer_example mit Verse Explorer. Weitere Schritte findest Du unter Erstellen eines eigenen Geräts mit Verse.

3. Füge eine Referenz editable zum Schaltflächengerät in countdown_timer_example mit dem Namen AddMoreTimeButton hinzu. Weitere Schritte findest Du unter Customize Device Properties.

   Verse

        countdown_timer_example := class(creative_device):
   		
            @editable
            AddMoreTimeButton : button_device = button_device{}
   

   countdown_timer_example := class(creative_device): @editable AddMoreTimeButton : button_device = button_device{}
   Copy full snippet(4 lines long)

4. Füge einen bearbeitbaren Verweis auf das Spielbeender-Gerät in countdown_timer_example mit dem Namen EndGame hinzu.

   Verse

        countdown_timer_example := class(creative_device):
   		
            @editable
            AddMoreTimeButton : button_device = button_device{}
   		        
            @editable
            EndGame : end_game_device = end_game_device{}
   

   countdown_timer_example := class(creative_device): @editable AddMoreTimeButton : button_device = button_device{} @editable EndGame : end_game_device = end_game_device{}
   Copy full snippet(7 lines long)

5. Speichere deine Verse-Datei und wähle im UEFN-Hauptmenü Verse > Verse-Code erstellen, um dein Gerät im Level zu aktualisieren und deine Änderungen im Panel Details des Geräts zu sehen.

Starten des Countdown

In diesem Beispiel erstellst du eine Verse-Klasse, die ihre eigene Benutzeroberfläche zeichnet und ihren eigenen Countdown verwaltet.

Befolge diese Schritte, um deinen benutzerdefinierten Countdown-Timer zu erstellen:

1. Erstelle eine leere Verse-Datei mit dem Namen countdown_timer.verse.

2. Füge die folgenden Verse-Module am Anfang der Datei hinzu:

   Verse

        using { /UnrealEngine.com/Temporary/UI }
        using { /UnrealEngine.com/Temporary/SpatialMath }
        using { /Fortnite.com/UI }
        using { /Verse.org/Colors }
        using { /Verse.org/Simulation }
   

   using { /UnrealEngine.com/Temporary/UI } using { /UnrealEngine.com/Temporary/SpatialMath } using { /Fortnite.com/UI } using { /Verse.org/Colors } using { /Verse.org/Simulation }
   Copy full snippet(5 lines long)

3. Erstelle eine Klasse mit dem Namen countdown_timer, und füge die folgenden Variablen hinzu:

   • Eine float-Variable mit dem Namen RemainingTime und initialisiert auf 0.0.

     Verse

                               var RemainingTime : float = 0.0
     

     var RemainingTime : float = 0.0
     Copy full snippet(1 line long)

   • Eine Canvas-Widget-Variable mit dem Namen Canvas.

     Verse

       var Canvas : canvas = canvas{}
     

     var Canvas : canvas = canvas{}
     Copy full snippet(1 line long)

   • Ein Text-Widget mit dem Namen RemainingTimeWidget mit einer weißen Standardtextfarbe.

     Verse

       RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
     

     RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
     Copy full snippet(1 line long)

   • Eine Funktion, die eine Nachricht mit dem Namen RemainingTimeText zurückgibt, die eine Ganzzahl parameter annimmt, um den durch RemainingTime dargestellten Wert anzuzeigen.

     Verse

       RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
     

     RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
     Copy full snippet(1 line long)

   • Eine optionale Player-UI mit dem Namen MaybePlayerUI die auf false initialisiert wird.

     Verse

       MaybePlayerUI : ?player_ui = false
     		
     

     MaybePlayerUI : ?player_ui = false
     Copy full snippet(2 lines long)

4. Deine Klasse sollte folgendermaßen aussehen:

   Verse

        countdown_timer := class:
            MaybePlayerUI : ?player_ui = false
            var RemainingTime : float = 0.0
               var Canvas : canvas = canvas{}
               RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
               RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
   

   countdown_timer := class: MaybePlayerUI : ?player_ui = false var RemainingTime : float = 0.0 var Canvas : canvas = canvas{} RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
   Copy full snippet(6 lines long)

5. Füge einen Ausdruck block hinzu, um die Benutzeroberfläche zu erstellen, in der die Zeit in der oberen Mitte des Bildschirms angezeigt wird. Ein Ausdruck block in einer Klassendefinition wird nur ausgeführt, wenn die Klasse instanziiert wird, sodass wir die Benutzeroberfläche einmal in diesem Ausdruck block erstellen können.

   Verse

        countdown_timer := class:
            block:
                set Canvas = canvas:
                    Slots := array:
                        canvas_slot:
                            Anchors := anchors:
                                Minimum := vector2{X := 0.5, Y := 0.05}
                                Maximum := vector2{X := 0.5, Y := 0.05}
                            Alignment := vector2{X := 0.5, Y := 0.0}
                            Offsets := margin{Top := 0.0, Left := 0.0, Bottom := 0.0, Right := 0.0}
   
   Expand codeCopy full snippet(18 lines long)

6. Füge die Funktion StartCountdown() hinzu, um die Benutzeroberfläche anzuzeigen.

   Verse

        StartCountdown() : void =
            Print("Starting countdown")
   		
            if (PlayerUI := MaybePlayerUI?):
                PlayerUI.AddWidget(Canvas)
   

   StartCountdown() : void = Print("Starting countdown") if (PlayerUI := MaybePlayerUI?): PlayerUI.AddWidget(Canvas)
   Copy full snippet(5 lines long)

7. Erstelle in countdown_timer_example.verse eine Instanz countdown_timer mit einem Verweis auf die Benutzeroberfläche des Spielers und die anfängliche Countdown-Zeit. Sobald das Spiel beginnt, rufe StartCountdown() in OnBegin() auf, damit der Countdown erscheint.

   Verse

        using { /Verse.org/Simulation }
        using { /Fortnite.com/Devices }
   
        countdown_timer_example := class(creative_device):
   
            @editable
            AddMoreTimeButton : button_device = button_device{}
   
            @editable
            EndGame : end_game_device = end_game_device{}
   
   Expand codeCopy full snippet(23 lines long)

8. Wenn du jetzt einen Spieltest durchführst, zeigt die Benutzeroberfläche nicht die verbleibende Zeit an, wenn der Countdown beginnt. Erstelle daher in countdown_timer.verse, Erstelle eine Funktion mit dem Namen UpdateUI(), die den aktuellen Countdown-Wert in der Benutzeroberfläche aktualisiert. Rufe UpdateUI() in StartCountdown() auf.

   Verse

        StartCountdown() : void =
            Print("Starting countdown")
   		
            if (PlayerUI := MaybePlayerUI?):
                PlayerUI.AddWidget(Canvas)
   		            
                # Update the UI when we start the timer to see the initial RemainingTime on screen
                UpdateUI()
   		
        UpdateUI() : void =
   
   Expand codeCopy full snippet(12 lines long)

9. Jetzt erscheint der anfängliche Countdown in der Benutzeroberfläche, aber der Wert wird nicht jede Sekunde aktualisiert. Das tut ihr auf folgende Weise:

   • Füge die float-Variable TimerTickPeriod hinzu, um anzugeben, wie oft die Benutzeroberfläche in Sekunden aktualisiert werden soll. In diesem Beispiel wird eine Sekunde verwendet.

     Verse

                               TimerTickPeriod : float = 1.0 # The timer "precision": how often, in seconds, it ticks.
     

     TimerTickPeriod : float = 1.0 # The timer "precision": how often, in seconds, it ticks.
     Copy full snippet(1 line long)

   • Erstelle eine Funktion mit dem Namen RunCountdown(), die den suspends specifier enthält, und rufe sie von StartCountdown() auf. Lass RunCountdown() die TimerTickPeriod abwarten, bevor du die Benutzeroberfläche aktualisierst, und wiederhole dies im loop. Stelle die Schleife auf Ende ein und lasse den Countdown von der Benutzeroberfläche verschwinden, wenn der Countdown 0,0 erreicht.

     Verse

       StartCountdown() : void =
           Print("Starting countdown")
     
           if (PlayerUI := MaybePlayerUI?):
               PlayerUI.AddWidget(Canvas)
     
               # Update the UI when we start the timer to see the initial RemainingTime on screen
               UpdateUI()
     
               spawn:
     
     Expand codeCopy full snippet(24 lines long)

10. Beim Spieltest sollte der Countdown bei 30 beginnen und jede Sekunde aktualisiert werden, bis der Timer 0 erreicht und der Countdown dann von der Benutzeroberfläche verschwindet.

Mehr Zeit hinzufügen

Mit diesem Countdown-Timer möchtest du eine benutzerdefinierte Möglichkeit hinzufügen, um mehr Zeit hinzuzufügen und die hinzugefügte Zeit auszurufen. Dieses Beispiel zeigt, wie man dem Countdown mehr Zeit hinzufügt und die hinzugefügte Zeit anzeigt, wenn der Spieler mit dem Gerät Schaltfläche interagiert.

Befolge diese Schritte, um zum Countdown-Timer mehr Zeit hinzuzufügen, wenn der Spieler mit dem Schaltflächengerät interagiert:

1. In countdown_timer.verse Erstelle eine neue Funktion mit dem Namen AddRemainingTime(), die die Variable RemainingTime mit dem Wert aktualisiert, der der Funktion im float-Parameter mit dem Namen Time übergeben wird, und dann die Benutzeroberfläche aktualisiert, um die neue verbleibende Zeit anzuzeigen.

   Verse

        AddRemainingTime(Time : float) : void =
            set RemainingTime += Time
   		
            # Immediately update the UI for better player feedback when time is added.
            UpdateUI()
   

   AddRemainingTime(Time : float) : void = set RemainingTime += Time # Immediately update the UI for better player feedback when time is added. UpdateUI()
   Copy full snippet(5 lines long)

2. Abonniere in countdown_timer_example.verse das InteractedWithEvent des Schaltflächengeräts und rufe AddRemainingTime() auf, wenn der Spieler mit dem Schaltflächengerät interagiert.

   Verse

        using { /Verse.org/Simulation }
        using { /Fortnite.com/Devices }
   
        countdown_timer_example := class(creative_device):
   
            @editable
            AddMoreTimeButton : button_device = button_device{}
   
            @editable
            EndGame : end_game_device = end_game_device{}
   
   Expand codeCopy full snippet(29 lines long)

3. Füge der Klasse countdown_timer ein Widget hinzu, das anzeigt, wie viel Zeit zum Countdown hinzugefügt wird, wenn der Spieler mit der Schaltfläche interagiert.

   Verse

        AddedTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} 
        AddedTimeText<localizes>(AddedTime : int) : message = " +{AddedTime}!"
   

   AddedTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} AddedTimeText<localizes>(AddedTime : int) : message = " +{AddedTime}!"
   Copy full snippet(2 lines long)

4. Verwende dieselben Positionierungswerte wie das RemainingTime-Widget für das neue AddedTimeWidget, aber ändere die folgenden Werte, sodass die Appell-Zeit oben rechts neben dem Countdown-Timer angezeigt wird:

   • Lege für das AddedTimeWidget den linken Rand in Versatz auf 50.0 fest.

   • Lege für das RemainingTimeWidget den oberen Rand in Versätzen auf 25.0 fest.

     Verse

                               countdown_timer := class:
                                   <# This block runs for each instance of the countdown_timer class.
                                   We can setup the canvas once here. #>
                                   block:
                                       set Canvas = canvas:
                                           Slots := array:
                                               canvas_slot:
                                                   Anchors := anchors:
                                                       Minimum := vector2{X := 0.5, Y := 0.05}
                                                       Maximum := vector2{X := 0.5, Y := 0.05}
     
     Expand codeCopy full snippet(22 lines long)

5. Erstelle eine neue Funktion mit dem Namen AddedTimeCallout(), die den Wert im AddedTimeWidget aktualisiert und den Aufruf zwei Sekunden lang anzeigt, bevor sie das Widget wieder ausblendet. Rufe AddedTimeCallout() in AddRemainingTime() auf.

   Verse

        AddRemainingTime(Time : float) : void =
            set RemainingTime += Time
   		
            # Immediately update the UI for better player feedback when time is added.
            UpdateUI()
   		
            # Fire a simple callout to show the time being added.
            spawn:
                AddedTimeCallout(Time)
   		
   
   Expand codeCopy full snippet(19 lines long)

6. Beim Spieltest sollte der Countdown bei 30 beginnen und jede Sekunde aktualisiert werden, bis der Timer 0 erreicht und der Countdown dann von der Benutzeroberfläche verschwindet. Wenn der Spieler mit der Schaltfläche interagiert, werden dem Countdown zwanzig Sekunden hinzugefügt, und es wird zwei Sekunden lang eine Legende angezeigt, die die zusätzliche hinzugefügte Zeit anzeigt.

Signalisierung des Ablaufs des Countdown-Timers

Zuvor hast du in diesem Tutorial ein Schaltflächengerät InteractedWithEvent verwendet, um zu wissen, wann der Spieler die Schaltfläche gedrückt hat, und dem Countdown-Timer mehr Zeit hinzugefügt hat. Du kannst aber auch deine eigenen benutzerdefinierten Ereignisse erstellen, die andere verwenden können, um zu erfahren, wenn etwas in deinem Code passiert.

Dieses Beispiel zeigt, wie das folgende Verhalten von benutzerdefinierten Ereignissen verwendet wird:

• Signal(): Diese Funktion lässt jeden, der auf das Ereignis wartet, wissen, dass das Ereignis stattgefunden hat.

• Await(): Diese asynchrone Funktion blockiert die Ausführung ihres einschließenden Kontexts, bis das Ereignis signalisiert wird.

In diesem Beispiel fügst du zum Countdown-Timer ein Ereignis hinzu, um zu signalisieren, wann der Countdown endet, damit du das Spielbeender-Gerät aktivieren kannst.

Befolge diese Schritte, um ein Ereignis für das Ende des Countdowns hinzuzufügen.

1. Füge der Klasse ein Ereignisfeld mit dem Namen CountdownEndedEvent countdown_timer hinzu:

   Verse

        CountdownEndedEvent : event() = event(){}
   

   CountdownEndedEvent : event() = event(){}
   Copy full snippet(1 line long)

   Der Event() ist ein parametric type, was bedeutet, dass es eher eine Klasse oder ein Interface als einen Wert oder eine Objektinstanz gibt. Aus diesem Grund ist der Typ event(), und daher musst du deine Konstante CountdownEndedEvent mit event(){} initialisieren, um nachzuahmen, wie du eine Klasse instanziierst.

2. Aktualisiere RunCountdown() um den CountdownEndedEvent zu signalisieren, um anderem Code mitzuteilen, dass der Countdown beendet ist, bevor er aus der Schleife ausbricht.

   Verse

        RunCountdown()<suspends> : void =
            # We loop with the TimerTickPeriod.
            # The UI is also updated each time.
            loop:
                Sleep(TimerTickPeriod)
                set RemainingTime -= TimerTickPeriod
                UpdateUI()
   
                # Timer End
                if (RemainingTime <= 0.0):
   
   Expand codeCopy full snippet(14 lines long)

3. In countdown_timer_example.verse warte auf den CountdownEndedEvent der mit dem CountdownTimer verbunden ist, und aktiviere dann das Spielbeender-Gerät, da wir wissen, dass der Countdown beendet ist, wenn das Ereignis eintritt.

   Verse

        OnBegin<override()<suspends> : void =
            AddMoreTimeButton.InteractedWithEvent.Subscribe(OnButtonInteractedWith)
            if:
                FirstPlayer := Self.GetPlayspace().GetPlayers()[0]
                PlayerUI := GetPlayerUI[player[FirstPlayer]]
            then:
                set CountdownTimer = countdown_timer{MaybePlayerUI := option{PlayerUI}, RemainingTime := InitialCountdownTime}
   		        
                CountdownTimer.StartCountdown()
                CountdownTimer.CountdownEndedEvent.Await()
   
   Expand codeCopy full snippet(14 lines long)

4. Beim Spieltest sollte der Countdown bei 30 beginnen und jede Sekunde aktualisiert werden, bis der Timer 0 erreicht. Sobald der Countdown endet, verschwindet der Countdown von der Benutzeroberfläche und das Spiel endet. Wenn der Spieler mit der Schaltfläche interagiert, werden dem Countdown zwanzig Sekunden hinzugefügt, und es wird zwei Sekunden lang ein Appell angezeigt, der die hinzugefügte Zeit anzeigt.

Bereitung deine Klasse für die Verwendung durch anderen Code vor

Du hast nun deine eigene benutzerdefinierte Countdown-Timer-Klasse erstellt und ein von Verse erstelltes Gerät verwendet, um den Timer zu instanziieren und zu steuern.

Wenn du deine eigenen benutzerdefinierten Klassen (und wirklich jeden Code) erstellst, ist es wichtig anzugeben, wer auf Ihre Erstellung zugreifen kann. Beispielsweise sollte nur der Countdown-Timer in der Lage sein, seine Benutzeroberfläche zu erstellen und zu ändern. In Verse kannst du access specifiers verwenden, um die Zugriffsebene deiner Codes festzulegen.

Füge die Kennung public allen Kennungen hinzu, auf die andere zugreifen sollen, da public bedeutet, dass ddie Kennung allgemein zugänglich ist. In diesem Beispiel werden alle folgenden Elemente countdown_timer_example im Gerät verwendet und sollten daher öffentlichen Zugang haben:

• CountdownEndedEvent<public> : event() = event(){}

• StartCountdown()<public>: void =

• AddRemainingTime(Time<public>: float) : void =

Füge den Bezeichner private zu allen Kennungen hinzu, wo die du nicht möchtest, dass andere darauf zugreifen, denn private bedeutet, dass auf die Kennung nur im aktuellen, unmittelbar umschließenden Bereich zugegriffen werden kann (der in diesem Fall die countdown_timer-Klasse ist).

In diesem Beispiel sollte Folgendes privaten Zugriff haben:

• RemainingTimeWidget<private> : text_block = text_block{DefaultTextColor := NamedColors.White}

• AddedTimeWidget<private> : text_block = text_block{DefaultTextColor := NamedColors.White}

• AddedTimeText<localizes><private>(AddedTime : int) : message = " +{AddedTime}!"

• RemainingTimeText<localizes><private>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"

• var Canvas<private> : canvas = canvas{}

• TimerTickPeriod<private> : float = 1.0

• RunCountdown<private>()<suspends> : void =

• AddedTimeCallout<private>(Time : float)<suspends> : void =

• UpdateUI<private>() : void =

Du kannst einen constructor verwenden, um Ausgangswerte für eine neue Klasseninstanz festzulegen, ohne die Variablen einer Klasse exposing zu machen. Ein Konstruktor ist eine spezielle Funktion, die eine Instanz der Klasse erzeugt, mit der sie verbunden ist.

Erstelle einen Constructor für die Klasse countdown_timer, der die Variablen RemainingTime und MaybePlayerUI aktualisiert.

MakeCountdownTimer<constructor><public>(MaxTime : float, InPlayer : agent) := countdown_timer:
    RemainingTime := MaxTime
    MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}

Die Variablen RemainingTime und MaybePlayerUI, die im Constructor festgelegt sind, sollten keinen öffentlichen Zugriff haben, aber sie können keinen privaten Zugriff haben, wenn sie in einem Constructor festgelegt sind. Du kannst die Kennung internal für diese Variablen verwenden, was bedeutet, dass auf die Kennung nur im aktuellen, unmittelbar einschließenden Modul zugegriffen werden kann.

• MaybePlayerUI<internal> : ?player_ui = false

• var RemainingTime<internal> : float = 0.0

Vollständiger Code

Der folgende Code ist der vollständige Code zum Erstellen eines benutzerdefinierten Countdown-Timers.

In diesem Beispiel werden zwei Verse-Dateien erstellt.

countdown_timer.verse

using { /UnrealEngine.com/Temporary/Diagnostics }
using { /UnrealEngine.com/Temporary/UI }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /Verse.org/Simulation }
using { /Fortnite.com/UI }

MakeCountdownTimer<constructor><public>(MaxTime : float, InPlayer : agent) := countdown_timer:
    RemainingTime := MaxTime
    MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}

countdown_timer_example.verse

using { /Verse.org/Simulation }
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/UI }

countdown_timer_example := class(creative_device):

    @editable
    AddMoreTimeButton : button_device = button_device{}

    @editable

Du bist am Zug

Durch den Abschluss dieses Leitfadens hast du gelernt, wie du einen benutzerdefinierten Countdown-Timer erstellst.

Versuche mit dem, was du gelernt hast, Folgendes:

• Ändere die Tickrate des Timers und füge ein Ereignis für jeden Tick hinzu.

• Füge dem Timer Funktionen zum Pausieren, Fortsetzen und Neustarten hinzu.