Creazione di un timer personalizzato per il conto alla rovescia

Mentre puoi utilizzare il dispositivo Timer per eseguire un conto alla rovescia, creare il tuo timer in Verse ti offre la possibilità di personalizzarne il comportamento in modo preciso per adattarlo alle tue esigenze.

Questo tutorial mostra come creare un timer con Verse e come utilizzare un callout quando viene aggiunto il tempo al conto alla rovescia. Inizia partendo dalle basi, poi esplora modi per migliorarlo, progetto dopo progetto.

Funzionalità del linguaggio Verse utilizzate

• if: l'espressione if verifica le condizioni e accede ai valori che potrebbero fallire.

• block: in questo esempio viene utilizzata l'espressione block per inizializzare l'interfaccia utente quando viene creato il timer del conto alla rovescia.

• loop: l'espressione loop aggiorna l'interfaccia utente e termina quando il conto alla rovescia raggiunge lo zero.

• spawn: un'espressione spawn avvia un'espressione asincrona in qualsiasi contesto.

• messaggio: il tipo di messaggio indica che il testo può essere localizzato e la stringa utilizzata per inizializzare una variabile di messaggio è il testo e la lingua predefiniti per il messaggio.

• classe: in questo esempio viene creata una classe Verse che gestisce e visualizza il conto alla rovescia.

• costruttore: un costruttore è una funzione speciale che crea un'istanza della classe a cui è associato.

• Specificatori di accesso: puoi utilizzare gli specificatori di accesso per impostare il livello di accesso del codice.

API Verse utilizzate

• Sleep: con l'API Sleep(), è possibile scegliere il periodo tra gli aggiornamenti dell'interfaccia utente.

• Eventi: puoi creare i tuoi eventi in Verse e aggiungere funzionalità personalizzate quando si verificano.

• UI Verse: crea un'interfaccia utente personalizzata per visualizzare informazioni relative al giocatore e al gioco.

Istruzioni

Segui questi passaggi per scoprire come creare il tuo timer personalizzato. Lo script completo è incluso come riferimento alla fine di questa guida.

Configurazione del livello

Questo esempio utilizza i seguenti oggetti scenografici e dispositivi.

• 1 x dispositivo Pulsante: quando il giocatore interagisce con il dispositivo, al conto alla rovescia viene aggiunto più tempo.

• 1 x dispositivo Fine partita: al termine del conto alla rovescia, questo dispositivo fa terminare il gioco.

Segui questi passaggi per impostare il tuo livello:

1. Aggiungi un dispositivo Pulsante e un dispositivo Fine partita al tuo livello.

2. Crea un nuovo dispositivo Verse e chiamalo countdown_timer_example utilizzando Verse Explorer. Per informazioni sui passaggi, vedi Creare un dispositivo personalizzato utilizzando Verse.

3. Aggiungi un riferimento modificabile al dispositivo Pulsante in countdown_timer_example e chiamalo AddMoreTimeButton. Per la procedura, vedi Personalizzare le proprietà di un dispositivo.

   Verse

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

   Copy full snippet(4 lines long)

4. Aggiungi un riferimento modificabile al dispositivo Fine partita in countdown_timer_example e chiamalo EndGame.

   Verse

        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. Salva il file di Verse e, nel menu principale di UEFN, scegli Verse > Compila il codice Verse per aggiornare il dispositivo nel livello e vedere le modifiche nel pannello Dettagli corrispondente.

Avvio del conto alla rovescia

In questo esempio creerai una classe di Verse che disegna la sua UI e gestisce il suo conto alla rovescia.

Segui questi passaggi per creare un timer per il conto alla rovescia personalizzato:

1. Crea un file vuoto Verse e chiamalo countdown_timer.verse.

2. Aggiungi i seguenti moduli di Verse all'inizio del file:

   Verse

        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. Crea una classe e chiamala countdown_timer, quindi aggiungi le variabili seguenti:

   • * Una variabile float chiamata RemainingTime e inizializzata su 0.0.

     Verse

                               var RemainingTime : float = 0.0
     

     Copy full snippet(1 line long)

   • Una variabile widget canvas chiamata Canvas.

     Verse

       var Canvas : canvas = canvas{}
     

     Copy full snippet(1 line long)

   • Un widget di testo denominato RemainingTimeWidget con un colore di testo predefinito bianco.

     Verse

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

     Copy full snippet(1 line long)

   • Una funzione che restituisce un messaggio denominato RemainingTimeText che accetta un parametro intero per visualizzare il valore rappresentato da RemainingTime.

     Verse

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

     Copy full snippet(1 line long)

   • Un'interfaccia utente del giocatore opzionale denominata MaybePlayerUI e inizializzata su falso.

     Verse

       MaybePlayerUI : ?player_ui = false
     		
     

     Copy full snippet(2 lines long)

4. La tua classe dovrebbe essere simile alla seguente:

   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}"
   

   Copy full snippet(6 lines long)

5. Aggiungi un'espressione block per creare l'interfaccia utente in cui il tempo viene visualizzato nella parte centrale superiore dello schermo. Un'espressione block in una definizione di classe viene eseguita solo quando viene creata un'istanza della classe, quindi possiamo creare l'interfaccia utente una volta in questa espressione block.

   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 code Copy full snippet(18 lines long)

6. Aggiungi la funzione StartCountdown() per visualizzare l'interfaccia utente.

   Verse

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

   Copy full snippet(5 lines long)

7. In countdown_timer_example.verse, crea un'istanza countdown_timer con un riferimento all'interfaccia utente del giocatore e al tempo del conto alla rovescia iniziale. Chiama StartCountdown() in OnBegin() in modo che il conto alla rovescia si avvii non appena inizia il gioco.

   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 code Copy full snippet(23 lines long)

8. Se esegui ora il playtest, l'interfaccia utente non visualizza il tempo rimanente all'inizio del conto alla rovescia, quindi in countdown_timer.verse, crea una funzione e chiamala UpdateUI() che aggiorna il valore del conto alla rovescia attuale nell'interfaccia utente. Chiama UpdateUI() in StartCountdown().

   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 code Copy full snippet(12 lines long)

9. Ora, il conto alla rovescia iniziale viene visualizzato nell'interfaccia utente ma il valore non viene aggiornato ogni secondo. Per farlo:

   • Aggiungi la variabile float TimerTickPeriod per rappresentare la frequenza di aggiornamento in secondi dell'interfaccia utente. In questo esempio viene utilizzato un secondo.

     Verse

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

     Copy full snippet(1 line long)

   • Crea una funzione e chiamala RunCountdown() che ha lo specificatore suspends e chiamala da StartCountdown(). Lascia che RunCountdown() aspetti il TimerTickPeriod prima di aggiornare la UI e ripeti l'operazione in loop. Imposta il loop su fine e fai scomparire il conto alla rovescia dalla UI quando raggiunge 0.0.

     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 code Copy full snippet(24 lines long)

10. Quando esegui il playtest, dovresti vedere il conto alla rovescia iniziare da 30 e aggiornarsi ogni secondo fino a quando il timer raggiunge 0 e il conto alla rovescia scompare dall'interfaccia utente.

Aggiungere più tempo

Con questo timer per il conto alla rovescia, ti consigliamo di aggiungere un modo personalizzato per aggiungere più tempo e richiamare il tempo aggiunto. In questo esempio viene illustrato come aggiungere altro tempo al conto alla rovescia e visualizzare il tempo aggiunto quando il giocatore interagisce con il dispositivo Pulsante.

Segui questi passaggi per aggiungere più tempo al timer del conto alla rovescia quando il giocatore interagisce con il dispositivo Pulsante:

1. In countdown_timer.verse, crea una nuova funzione chiamata AddRemainingTime() che aggiorna la variabile RemainingTime con il valore passato alla funzione nel parametro float denominato Time, quindi aggiorna l'interfaccia utente per visualizzare il nuovo tempo rimanente.

   Verse

        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. In countdown_timer_example.Verse, Iscriviti a InteractedWithEvent del dispositivo Button e Chiama AddRemainingTime() quando il giocatore interagisce con il dispositivo Pulsante.

   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 code Copy full snippet(29 lines long)

3. Aggiungi un widget alla classe di countdown_timer per richiamare quanto tempo viene aggiunto al conto alla rovescia quando il giocatore interagisce con il pulsante.

   Verse

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

   Copy full snippet(2 lines long)

4. Utilizza gli stessi valori di posizionamento del widget RemainingTime per il nuovo AddedTimeWidget, ma modifica i valori seguenti in modo che il tempo del callout venga visualizzato nella parte superiore destra del timer del conto alla rovescia:

   • Per AddedTimeWidget, imposta il margine sinistro in Offsets su 50.0.

   • Per RemainingTimeWidget, imposta il margine superiore in Offsets su 25.0.

     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 code Copy full snippet(22 lines long)

5. Crea una nuova funzione denominata AddedTimeCallout() che aggiorna il valore in AddedTimeWidget e visualizza il callout per due secondi prima di nascondere di nuovo il widget. Chiama AddedTimeCallout() in AddRemainingTime().

   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 code Copy full snippet(19 lines long)

6. Quando esegui il playtest, dovresti vedere il conto alla rovescia iniziare da 30 e aggiornarsi ogni secondo fino a quando il timer raggiunge 0 e il conto alla rovescia scompare quindi dall'interfaccia utente. Quando il giocatore interagisce con il pulsante, vengono aggiunti venti secondi al conto alla rovescia e viene visualizzato un callout per due secondi che mostra l'ulteriore tempo aggiunto.

Segnalazione della fine del timer del conto alla rovescia

In precedenza, in questo tutorial, è stato utilizzato un dispositivo Pulsante InteractedWithEvent per sapere quando il giocatore ha premuto il pulsante e ha aggiunto più tempo al timer del conto alla rovescia. Oltre a ciò, puoi creare anche altri eventi personalizzati che altri utenti possono utilizzare per sapere quando succede qualcosa nel tuo codice.

In questo esempio viene illustrato come utilizzare il comportamento seguente degli eventi personalizzati:

• Signal(): questa funzione consente a chiunque in attesa dell'evento di sapere che l'evento è accaduto.

• Await(): questa funzione asincrona blocca l'esecuzione del contesto di inclusione fino a quando l'evento non viene segnalato.

In questo esempio, aggiungerai un evento al timer del conto alla rovescia per segnalare quando termina il conto alla rovescia in modo da attivare il dispositivo Fine partita.

Segui questi passaggi per aggiungere un evento per il termine del conto alla rovescia.

1. Aggiungi un campo evento denominato CountdownEndedEvent alla classe countdown_timer:

   Verse

        CountdownEndedEvent : event() = event(){}
   

   Copy full snippet(1 line long)

   event() è un tipo parametrico, il che significa che restituisce una classe o un'interfaccia piuttosto che un valore o un'istanza oggetto. Questo è il motivo per cui il tipo è event() e perché è necessario inizializzare la costante CountdownEndedEvent con event(){} per imitare il modo in cui si crea un'istanza di una classe.

2. Aggiorna RunCountdown() per segnalare CountdownEndedEvent in modo da far sapere ad altro codice che il conto alla rovescia è terminato prima di uscire dal loop.

   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 code Copy full snippet(14 lines long)

3. In countdown_timer_example.verse, attendi il CountdownEndedEvent associato a CountdownTimer, poi attiva il dispositivo di Fine gioco perché sappiamo che il conto alla rovescia è terminato quando si verifica l'evento.

   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 code Copy full snippet(14 lines long)

4. Quando esegui il playtest, dovresti vedere il conto alla rovescia iniziare da 30 e aggiornarsi ogni secondo fino a quando il timer raggiunge 0. Non appena termina il conto alla rovescia, esso scompare dall'interfaccia utente e il gioco termina. Quando il giocatore interagisce con il pulsante, vengono aggiunti venti secondi al conto alla rovescia e viene visualizzato un callout per due secondi che mostra il tempo aggiunto.

Preparazione della classe per l'utilizzo da parte di altro codice

Ora hai creato la tua classe timer del conto alla rovescia personalizzata e hai utilizzato un dispositivo creato da Verse per creare un'istanza e controllare il timer.

Quando crei le tue classi personalizzate (e in realtà, qualsiasi codice), è importante specificare chi può accedere a ciò che crei. Ad esempio, soltanto il timer del conto alla rovescia dovrebbe essere in grado di creare e modificare la propria interfaccia utente. In Verse puoi utilizzare gli specificatori di accesso per impostare il livello di accesso del codice.

Aggiungi lo specificatore public a tutti gli identificatori a cui desideri che altri accedano, perché pubblico significa che l'identificatore è accessibile universalmente. In questo esempio, quanto segue viene tutto utilizzato nel dispositivo countdown_timer_example e quindi dovrebbe avere accesso pubblico:

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

• StartCountdown<public>() : void =

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

Aggiungi lo specificatore private a tutti gli identificatori a cui non vuoi che altri accedano perché privato significa che è possibile accedere all'identificatore solo nell'ambito corrente, che include subito (che in questo caso è la classe countdown_timer).

In questo esempio, gli elementi seguenti dovrebbero avere accesso privato:

• 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 =

Per impostare i valori iniziali di una nuova istanza di classe senza esporre le variabili della classe stessa, puoi utilizzare un costruttore. Un costruttore è una funzione speciale che crea un'istanza della classe a cui è associato.

Crea un costruttore per la classe countdown_timer che aggiorna le variabili RemainingTime e MaybePlayerUI.

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

Le variabili RemainingTime e MaybePlayerUI impostate nel costruttore non devono avere accesso pubblico, ma non possono avere accesso privato se sono impostate in un costruttore. È possibile utilizzare lo specificatore internal per queste varianti, il che significa che è possibile accedere all'identificatore solo nel modulo corrente che include subito.

• MaybePlayerUI<internal> : ?player_ui = false

• var RemainingTime<internal> : float = 0.0

Codice completo

Il codice seguente è il codice completo per la creazione di un timer del conto alla rovescia personalizzato.

In questo esempio vengono creati due file Verse.

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

In autonomia

Dopo aver completato questa guida, hai imparato come creare un timer del conto alla rovescia personalizzato.

Utilizzando quello che hai imparato, prova a fare quanto segue:

• Modifica la frequenza dei tic del timer e aggiungi un evento per ogni tic.

• Aggiungi la funzionalità di pausa, ripresa e riavvio al timer.