4. Gestire e visualizzare il punteggio

Completando questo passaggio del tutorial Prova a tempo: A caccia di pizza, imparerai a gestire il punteggio quando un giocatore raccoglie e consegna gli oggetti e ad aggiornare la UI per visualizzare i punteggi. Per saperne di più sulla creazione di una UI di gioco in Verse, vedi Creare una UI in gioco.

Gestione punteggio terrà traccia e visualizzerà:

• Punti totali: rappresenta i punti totali che il giocatore ha totalizzato nel gioco.

• Punti in sospeso: rappresenta i punti accumulati dal giocatore per la serie attuale di oggetti raccoglibili.

• Livello di raccolta: rappresenta il livello di raccolta attuale.

Creazione della UI

Per creare l'interfaccia utente di gestione punteggio in Verse, attieniti ai passaggi seguenti:

1. Crea un nuovo file vuoto di Verse e nominalo score_manager.verse.

2. Crea una nuova classe denominata score_manager e aggiungi i seguenti campi alla classe:

   • Un agente opzionale denominato MaybePlayer per memorizzare un riferimento al giocatore. MaybePlayer<internal> : ?agent = false

   • Un player_ui opzionale denominato MaybePlayerUI per memorizzare un riferimento alla UI del giocatore. MaybePlayerUI<internal> : ?player_ui = false

   • Score_manager_device per memorizzare un riferimento per il dispositivo Gestione punteggio attorno al quale è costruita questa classe. (Nota: non si tratta di un riferimento modificabile, perché deve essere collegato al dispositivo creato da Verse game_coordinator_device. ScoreManagerDevice<internal> : score_manager_device = score_manager_device{}

   • Variabile intera denominata TotalGameScore che rappresenta tutti i punti che il giocatore ha totalizzato complessivamente nella partita. var TotalGameScore<private> : int = 0

   • Variabile intera denominata PendingScore che rappresenta i punti che il giocatore ha attualmente accumulato per questa serie di oggetti raccoglibili. var PendingScore<private> : int = 0

   • Una variabile intera denominata PickupLevel che rappresenta il livello di raccolta attuale. var PickupLevel<private> : int = 0

3. La definizione della tua classe score_manager dovrebbe ora essere simile a: score_manager := class: MaybePlayer<internal> : ?agent = false MaybePlayerUI<internal> : ?player_ui = false ScoreManagerDevice<internal> : score_manager_device = score_manager_device{} var TotalGameScore<private> : int = 0 var PendingScore<private> : int = 0 var PickupLevel<private> : int = 0

4. Crea l'interfaccia utente quando la classe viene creata per la prima volta. Puoi farlo aggiungendo un'espressione block alla definizione della classe, che verrà eseguita ogni volta che crei un'istanza della classe. Per generare l'interfaccia utente, aggiungi le seguenti variabili:

   • Variabile canvas denominata Canvas che ha lo specificatore internal per memorizzare il widget canvas personalizzato. var Canvas<internal> : canvas = canvas{}

   • Un text_block denominato TotalGameScoreWidget che ha lo specificatore internal, per memorizzare il widget di testo per la visualizzazione di tutti i punti che il giocatore ha totalizzato complessivamente nella partita, come rappresentato dalla variabile TotalGameScore. Imposta su bianco il colore predefinito del testo del blocco di testo. TotalGameScoreWidget<internal> : text_block = text_block{DefaultTextColor := NamedColors.White}

   • Un text_block denominato PendingScoreWidget che ha lo specificatore internal, per memorizzare il widget di testo per la visualizzazione dei punti che il giocatore ha attualmente accumulato per questa serie di oggetti raccoglibili, come rappresentato dalla variabile PendingScore. Imposta su bianco il colore predefinito del testo del blocco di testo. PendingScoreWidget<internal> : text_block = text_block{}

   • Un text_block denominato PickupLevelWidget che ha lo specificatore internal, per memorizzare il widget di testo per la visualizzazione del livello di raccolta corrente, come rappresentato dalla variabile PickupLevel. Imposta su bianco il colore predefinito del testo del blocco di testo. PickupLevelWidget<internal> : text_block = text_block{}

   • Funzione che restituisce un message denominato TotalGameScoreText che crea un testo localizzabile che può essere visualizzato nella UI per i punti complessivi che il giocatore ha totalizzato nel gioco. TotalGameScoreText<localizes>(CurrentTotalGameScore : int) : message = "Punti totali: {CurrentTotalGameScore}"

   • Funzione che restituisce un message denominato PendingScoreText che crea un testo localizzabile che può essere visualizzato nella UI per i punti che il giocatore ha attualmente accumulato per questa serie di oggetti raccoglibili. PendingScoreText<localizes>(CurrentPendingScore : int) : message = "Punti in sospeso: {CurrentPendingScore}"

   • Funzione che restituisce un message denominato PickupLevelText che crea un testo localizzabile che può essere visualizzato nella UI per il livello di raccolta corrente. PickupLevelText<localizes>(CurrentPickupLevel : int) : message = "Livello di raccolta: {CurrentPickupLevel}"

   • Aggiungi un'espressione block che crei il widget canvas e posizioni il testo impilato verticalmente sulla sinistra dello schermo. <# Poiché non ricreeremo il canvas nella durata della gestione punteggio, esegui questa operazione una volta, ogni momento che viene creato un oggetto di questo tipo. #> block: set Canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.0, Y := 0.25}, Maximum := vector2{X := 0.0, Y := 0.25} } Offsets := margin{Top := 0.0, Left := 25.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.0, Y := 0.0} SizeToContent := true Widget := stack_box: Orientation := orientation.Vertical Slots := array: stack_box_slot: HorizontalAlignment := horizontal_alignment.Left Widget := TotalGameScoreWidget stack_box_slot: HorizontalAlignment := horizontal_alignment.Left Widget := PendingScoreWidget stack_box_slot: HorizontalAlignment := horizontal_alignment.Left Widget := PickupLevelWidget

5. Il codice per score_manager dovrebbe ora essere simile al seguente: using { /UnrealEngine.com/Temporary/UI } using { /Fortnite.com/UI } using { /Verse.org/Colors } score_manager := class: var Canvas<internal> : canvas = canvas{} TotalGameScoreWidget<internal> : text_block = text_block{DefaultTextColor := NamedColors.White} PendingScoreWidget<internal> : text_block = text_block{DefaultTextColor := NamedColors.White} PickupLevelWidget<internal> : text_block = text_block{DefaultTextColor := NamedColors.White} MaybePlayer<internal> : ?agent = false MaybePlayerUI<internal> : ?player_ui = false ScoreManagerDevice<internal> : score_manager_device = score_manager_device{} PickupLevelText<private><localizes>(InLevel : int) : message = "Livello di raccolta: {InLevel}" PendingScoreText<private><localizes>(InPoints : int) : message = "Punti in sospeso: {InPoints}" TotalGameScoreText<private><localizes>(InPoints : int) : message = "Punti totali: {InPoints}" var TotalGameScore<private> : int = 0 var PendingScore<private> : int = 0 var PickupLevel<private> : int = 0 <# Poiché non ricreeremo il canvas nella durata della gestione punteggio, esegui questa operazione una volta, ogni momento che viene creato un oggetto di questo tipo. #> block: set Canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.0, Y := 0.25}, Maximum := vector2{X := 0.0, Y := 0.25} } Offsets := margin{Top := 0.0, Left := 25.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.0, Y := 0.0} SizeToContent := true Widget := stack_box: Orientation := orientation.Vertical Slots := array: stack_box_slot: HorizontalAlignment := horizontal_alignment.Left Widget := TotalGameScoreWidget stack_box_slot: HorizontalAlignment := horizontal_alignment.Left Widget := PendingScoreWidget stack_box_slot: HorizontalAlignment := horizontal_alignment.Left Widget := PickupLevelWidget

6. Crea una funzione denominata UpdateUI() che abbia lo specificatore private che aggiorna il testo della UI con i valori di punteggio più recenti e il livello di raccolta attuale. UpdateUI()<private>: void = if (PlayerUI := MaybePlayerUI?): PickupLevelWidget.SetText(PickupLevelText(PickupLevel)) PendingScoreWidget.SetText(PendingScoreText(PendingScore)) PendingScoreWidget.SetText(TotalGameScoreText(TotalGameScore))

7. Crea una funzione denominata AddScoreManagerToUI() che aggiorni la UI del giocatore con quella della gestione punteggio personalizzata. AddScoreManagerToUI<public>() : void = if (PlayerUI := MaybePlayerUI?): PlayerUI.AddWidget(Canvas) UpdateUI()

8. Crea una funzione per ogni valore visualizzato nell'interfaccia utente, in modo che il loop di gioco possa aggiornare i valori seguenti:

   • Funzione denominata AddPendingScoreToTotalScore() che ha lo specificatore public. Questa funzione deve aggiungere il punteggio in sospeso al punteggio totale della partita e reimpostare il valore del punteggio in sospeso a 0. Puoi eseguire il defer della reimpostazione di PendingScore e dell'aggiornamento della UI una volta aggiornato TotalGameScore. In questo modo si evita di utilizzare una variabile temporanea per mantenere il valore di PendingScore prima che si reimposti. 

     Verse

     <# Adds PendingScore to TotalGameScore and resets PendingScore to 0.#> AddPendingScoreToTotalScore<public>() : void = defer: 
     set PendingScore = 0 UpdateUI() 
     set TotalGameScore += PendingScore

     Copy full snippet(3 lines long)

   • Funzione denominata UpdatePendingScore() che ha lo specificatore public e un parametro intero denominato Points, che la funzione aggiungerà al punteggio in sospeso corrente. 

     Verse

     <# Adds the given amount of points to the pending points. #> 
     UpdatePendingScore<public>(Points : int) : void =   set PendingScore += Points UpdateUI()

     Copy full snippet(2 lines long)

   • Funzione denominata UpdatePickupLevel che ha lo specificatore public e un parametro intero denominato Level, corrispondente al nuovo valore per il livello di raccolta attuale. 

     Verse

     UpdatePickupLevel<public>(Level : int) : void = set PickupLevel = Level UpdateUI()

     Copy full snippet(1 line long)

   • Crea una funzione denominata AwardScore() che abbia lo specificatore public. Questa funzione assegna il punteggio al giocatore che utilizza il dispositivo Gestione punteggio, eseguendone l'attivazione. 

     Verse

     <# Awards the score to the player with the Score Manager device, by activating it. #> AwardScore<public>() : void = ScoreManagerDevice.SetScoreAward(TotalGameScore) if (AwardedPlayer := MaybePlayer?):   
       ScoreManagerDevice.Activate(AwardedPlayer)

     Copy full snippet(2 lines long)

9. La classe score_manager dovrebbe ora essere simile alla seguente:  

   Verse

        score_manager := class:
            <# Since we won't recreate the canvas during the score manager lifetime, do it once anytime an object of this type is created.>
            block:
                set Canvas = canvas:
                    Slots := array:
                        canvas_slot:
                            Anchors := anchors{Minimum := vector2{X := 0.0, Y := 0.25}, Maximum := vector2{X := 0.0, Y := 0.25} }
                            Offsets := margin{Top := 0.0, Left := 25.0, Right := 0.0, Bottom := 0.0}
                            Alignment := vector2{X := 0.0, Y := 0.0}
                            SizeToContent := true
   
   Expand code Copy full snippet(73 lines long)

10. Ora che hai creato la classe score_manager, crea un costruttore della classe per inizializzare le variabili del giocatore dal gioco. Tieni presente che devi eseguire il type cast del riferimento al giocatore da agent a player, per ottenere un riferimento alla UI del giocatore.

    Verse

         MakeScoreManager<constructor><public>(InPlayer : agent, InScoreManagerDevice : score_manager_device) := score_manager:
             MaybePlayer := option{InPlayer}
             MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}
    

    Copy full snippet(3 lines long)

11. Il file score_manager.verse dovrebbe ora essere simile al seguente:

    Verse

         using { /UnrealEngine.com/Temporary/SpatialMath}
         using { /UnrealEngine.com/Temporary/UI }
         using { /Fortnite.com/Devices }
         using { /Fortnite.com/UI }
         using { /Verse.org/Colors }
         using { /Verse.org/Simulation }
    
         MakeScoreManager<constructor><public>(InPlayer : agent, InScoreManagerDevice : score_manager_device) := score_manager:
             MaybePlayer := option{InPlayer}
             MaybePlayerUI := option{GetPlayerUI[player[InPlayer]]}
    
    Expand code Copy full snippet(84 lines long)

Aggiornamento del punteggio e della UI nel loop di gioco

Per creare e aggiornare la UI durante la partita nel file game_coordinator_device.verse, segui questi passaggi:

1. Aggiungi le seguenti proprietà alla classe game_coordinator_device:

   • Variabile score_manager denominata ScoreManager che ha lo specificatore private. Questa istanza gestisce il punteggio e l'interfaccia utente del giocatore. var ScoreManager<private> : score_manager = score_manager{}

   • Score_manager_device modificabile che puoi impostare sul dispositivo Gestione punteggio nel livello. È il dispositivo che utilizzerà la classe score_manager. @editable ScoreManagerDevice<public> : score_manager_device = score_manager_device{}

   • Array di interi modificabili denominato PointsForPickupLevel che ha lo specificatore public per definire i punti che il giocatore può totalizzare per ciascun livello di raccolta. @editable # Esegue la mappatura di quanti punti vale un oggetto raccoglibile, in base al suo livello di raccolta. PointsForPickupLevel<public> : []int = array{1, 2, 3}

2. Nella funzione StartGame, inizializza la variabile di gestione punteggio chiamando il costruttore MakeScoreManager() con un riferimento al giocatore e al dispositivo Gestione punteggio e genera la UI visibile al giocatore.

   Verse

        StartGame<private>()<suspends> : void =
            Logger.Print("Trying to start the game...")
   		
            # We construct a new countdown_timer that'll countdown from InitialCountdownTime once started.
            # Also construct a new score_manager that'll keep track of the player's score and pickup level.
            # The countdown_timer and score_manager require a player to show their UI to.
            # We should have a valid player by now: the one that entered the vehicle, triggering the game start. 
            if (ValidPlayer := MaybePlayer?):
                Logger.Print("Valid player, starting game...")
   		
   
   Expand code Copy full snippet(23 lines long)

3. Nella funzione PickupDeliveryLoop() del loop di gioco, aggiorna la UI ogni volta che il livello di raccolta cambia e il giocatore termina una raccolta o una consegna:

   Verse

        PickupDeliveryLoop<private>()<suspends> : void =
            PickupZonesTags : []pickup_zone_tag = array{pickup_zone_level_1_tag{}, pickup_zone_level_2_tag{}, pickup_zone_level_3_tag{}}
            MaxPickupLevel := PickupZonesTags.Length - 1
            FirstPickupZoneCompletedEvent := event(){}
   
            loop:
                var PickupLevel : int = 0
                var IsFirstPickup : logic = true
   
                # Every time the loop restarts, we should reset the pickup level UI through the ScoreManager.
   
   Expand code Copy full snippet(58 lines long)

4. A questo punto, al termine del conto alla rovescia, assegna al giocatore il suo punteggio. In HandleCountdownEnd(), chiama ScoreManager.AwardScore(). HandleCountdownEnd<private>(InPlayer : player)<suspends>:void= TotalTime := CountdownTimer.CountdownEndedEvent.Await() ScoreManager.AwardScore() EndGame.Activate(InPlayer)

5. Il file game_coordinator_device.verse dovrebbe ora essere simile al seguente:

   Verse

        using { /Verse.org/Simulation }
        using { /Fortnite.com/Devices }
        using { /Fortnite.com/Vehicles }
        using { /Fortnite.com/Characters }
        using { /Fortnite.com/Playspaces }
        using { /Verse.org/Random }
        using { /UnrealEngine.com/Temporary/Diagnostics }
        using { /UnrealEngine.com/Temporary/SpatialMath }
        using { /EpicGames.com/Temporary/Curves }
        using { /Verse.org/Simulation/Tags }
   
   Expand code Copy full snippet(159 lines long)

Step successivo

• 

  5. Migliorare il feedback e l'esperienza del giocatore

  Crea un gioco con Verse in cui i giocatori devono raccogliere e consegnare le pizze prima che scada il tempo!