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
ifverifica le condizioni e accede ai valori che potrebbero fallire.block: in questo esempio viene utilizzata l'espressione
blockper inizializzare l'interfaccia utente quando viene creato il timer del conto alla rovescia.loop: l'espressione
loopaggiorna l'interfaccia utente e termina quando il conto alla rovescia raggiunge lo zero.spawn: un'espressione
spawnavvia 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:
Aggiungi un dispositivo Pulsante e un dispositivo Fine partita al tuo livello.
Crea un nuovo dispositivo Verse e chiamalo
countdown_timer_exampleutilizzando Verse Explorer. Per informazioni sui passaggi, vedi Creare un dispositivo personalizzato utilizzando Verse.Aggiungi un riferimento modificabile al dispositivo Pulsante in
countdown_timer_examplee chiamaloAddMoreTimeButton. Per la procedura, vedi Personalizzare le proprietà di un dispositivo.Versecountdown_timer_example := class(creative_device): @editable AddMoreTimeButton : button_device = button_device{}Aggiungi un riferimento modificabile al dispositivo Fine partita in
countdown_timer_examplee chiamaloEndGame.Versecountdown_timer_example := class(creative_device): @editable AddMoreTimeButton : button_device = button_device{} @editable EndGame : end_game_device = end_game_device{}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:
Crea un file vuoto Verse e chiamalo countdown_timer.verse.
Aggiungi i seguenti moduli di Verse all'inizio del file:
Verseusing { /UnrealEngine.com/Temporary/UI } using { /UnrealEngine.com/Temporary/SpatialMath } using { /Fortnite.com/UI } using { /Verse.org/Colors } using { /Verse.org/Simulation }Crea una classe e chiamala
countdown_timer, quindi aggiungi le variabili seguenti:* Una variabile float chiamata
RemainingTimee inizializzata su0.0.Versevar RemainingTime : float = 0.0Una variabile widget canvas chiamata
Canvas.Versevar Canvas : canvas = canvas{}Un widget di testo denominato
RemainingTimeWidgetcon un colore di testo predefinito bianco.VerseRemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}Una funzione che restituisce un messaggio denominato
RemainingTimeTextche accetta un parametro intero per visualizzare il valore rappresentato daRemainingTime.VerseRemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"Un'interfaccia utente del giocatore opzionale denominata
MaybePlayerUIe inizializzata sufalso.VerseMaybePlayerUI : ?player_ui = false
La tua classe dovrebbe essere simile alla seguente:
Versecountdown_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}"Aggiungi un'espressione
blockper 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 espressioneblock.Versecountdown_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}Aggiungi la funzione
StartCountdown()per visualizzare l'interfaccia utente.VerseStartCountdown() : void = Print("Starting countdown") if (PlayerUI := MaybePlayerUI?): PlayerUI.AddWidget(Canvas)In countdown_timer_example.verse, crea un'istanza
countdown_timercon un riferimento all'interfaccia utente del giocatore e al tempo del conto alla rovescia iniziale. ChiamaStartCountdown()inOnBegin()in modo che il conto alla rovescia si avvii non appena inizia il gioco.Verseusing { /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{}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. ChiamaUpdateUI()inStartCountdown().VerseStartCountdown() : 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 =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
TimerTickPeriodper rappresentare la frequenza di aggiornamento in secondi dell'interfaccia utente. In questo esempio viene utilizzato un secondo.VerseTimerTickPeriod : float = 1.0 # The timer "precision": how often, in seconds, it ticks.Crea una funzione e chiamala
RunCountdown()che ha lo specificatore suspends e chiamala daStartCountdown(). Lascia cheRunCountdown()aspetti ilTimerTickPeriodprima 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 raggiunge0.0.VerseStartCountdown() : 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:
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:
In countdown_timer.verse, crea una nuova funzione chiamata
AddRemainingTime()che aggiorna la variabileRemainingTimecon il valore passato alla funzione nel parametro float denominatoTime, quindi aggiorna l'interfaccia utente per visualizzare il nuovo tempo rimanente.VerseAddRemainingTime(Time : float) : void = set RemainingTime += Time # Immediately update the UI for better player feedback when time is added. UpdateUI()In countdown_timer_example.Verse, Iscriviti a
InteractedWithEventdel dispositivo Button e ChiamaAddRemainingTime()quando il giocatore interagisce con il dispositivo Pulsante.Verseusing { /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{}Aggiungi un widget alla classe di
countdown_timerper richiamare quanto tempo viene aggiunto al conto alla rovescia quando il giocatore interagisce con il pulsante.VerseAddedTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} AddedTimeText<localizes>(AddedTime : int) : message = " +{AddedTime}!"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.Versecountdown_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}
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. ChiamaAddedTimeCallout()inAddRemainingTime().VerseAddRemainingTime(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)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.
Aggiungi un campo evento denominato
CountdownEndedEventalla classecountdown_timer:VerseCountdownEndedEvent : event() = event(){}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 costanteCountdownEndedEventconevent(){}per imitare il modo in cui si crea un'istanza di una classe.Aggiorna
RunCountdown()per segnalareCountdownEndedEventin modo da far sapere ad altro codice che il conto alla rovescia è terminato prima di uscire dal loop.VerseRunCountdown()<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):In countdown_timer_example.verse, attendi il
CountdownEndedEventassociato aCountdownTimer, poi attiva il dispositivo di Fine gioco perché sappiamo che il conto alla rovescia è terminato quando si verifica l'evento.VerseOnBegin<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()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.0RunCountdown<private>()<suspends> : void =AddedTimeCallout<private>(Time : float)<suspends> : void =UpdateUI<private>() : void =
È consigliabile raggruppare il codice in base all'accesso. Ti consigliamo di ordinare il tuo codice dal massimo al minor numero di accesso:
pubblico
Interno
protetto
privato
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 = falsevar 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.