Créer un compte à rebours personnalisé

Vous pouvez utiliser le chronomètre qui exécute un compte à rebours, mais créer votre propre compte à rebours dans Verse est un moyen de personnaliser son comportement pour qu'il corresponde exactement à vos besoins.

Dans ce tutoriel, nous vous expliquons comment créer votre propre chronomètre avec Verse et comment utiliser une légende lors de l'ajout de temps au compte à rebours. Commencez par créer un chronomètre simple, que vous pourrez par la suite améliorer au gré des projets.

Fonctionnalités du langage Verse utilisées

• if : l'expression if teste les conditions et accède aux valeurs susceptibles d'échouer.

• block : dans cet exemple, nous utilisons l'expression block pour initialiser l'interface utilisateur lorsque le compte à rebours est créé.

• loop : l'expression loop met à jour l'IU et se termine lorsque le compte à rebours atteint zéro.

• spawn : une expression spawn démarre une expression asynchrone dans n'importe quel contexte.

• message : le type message signifie que le texte peut être localisé, et la chaîne que vous utilisez pour initialiser une variable message correspond au texte et à la langue par défaut du message.

• classe : dans cet exemple, nous créons une classe Verse qui gère et affiche le compte à rebours.

• constructeur : un constructeur est une fonction spéciale qui crée une instance de la classe à laquelle il est associé.

• Spécificateurs d'accès : vous pouvez utiliser des spécificateurs d'accès pour définir le niveau d'accès de votre code.

API Verse utilisées

• Sleep: l'API Sleep() vous permet de choisir la période entre les mises à jour de l'IU.

• Événements : vous pouvez créer vos propres événements dans Verse et ajouter une fonctionnalité personnalisée lorsqu'ils se produisent.

• IU Verse : créez une IU personnalisée dans le jeu pour afficher des informations sur le joueur et sur le jeu.

Instructions

Procédez comme suit pour apprendre à créer votre compte à rebours personnalisé. Le script complet est inclus à la fin de ce guide à titre de référence.

Configurer le niveau

Dans cet exemple, nous utiliserons les accessoires et appareils suivants.

• 1 x appareil Bouton : lorsque le joueur interagit avec l'appareil, une durée supplémentaire est ajoutée au compte à rebours.

• 1 x appareil de fin de partie : à la fin du compte à rebours, cet appareil arrête la partie.

Procédez comme suit pour configurer votre niveau :

1. ajoutez un appareil Bouton et un appareil de fin de partie à votre niveau.

2. Créez un nouvel appareil Verse et nommez-le countdown_timer_example en utilisant l'explorateur Verse. Consultez Créer votre propre appareil avec Verse pour connaître la procédure.

3. Ajoutez une référence modifiable à l'appareil Bouton dans countdown_timer_example et nommez-la AddMoreTimeButton. Consultez la rubrique Personnaliser les propriétés des appareils pour connaître la procédure.

   Verse

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

   Copy full snippet(4 lines long)

4. Ajoutez une référence modifiable à l'appareil de fin de partie dans countdown_timer_example et nommez-la 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. Enregistrez votre fichier Verse puis, dans le menu principal de l'UEFN, choisissez Verse > Générer le code Verse pour mettre à jour votre appareil dans le niveau en vue d'afficher vos modifications dans le panneau Détails de l'appareil.

Lancer le compte à rebours

Dans cet exemple, vous allez créer une classe Verse qui génère sa propre IU et gère son propre compte à rebours.

Procédez comme suit pour démarrer le compte à rebours :

1. Créez un fichier Verse vide et nommez-le countdown_timer.verse.

2. Ajoutez les modules Verse suivants en haut du fichier :

   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. Créez une classe et nommez-la countdown_timer, puis ajoutez les variables suivantes :

   • Une variable float nommée RemainingTime et définie sur 0,0.

     Verse

                               var RemainingTime : float = 0.0
     

     Copy full snippet(1 line long)

   • Une variable de widget de zone de dessin nommée Canvas.

     Verse

       var Canvas : canvas = canvas{}
     

     Copy full snippet(1 line long)

   • Un widget de texte nommé RemainingTimeWidget avec un texte blanc par défaut.

     Verse

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

     Copy full snippet(1 line long)

   • Une fonction renvoyant un message nommé RemainingTimeText et définie sur un paramètre entier pour afficher la valeur représentée par RemainingTime.

     Verse

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

     Copy full snippet(1 line long)

   • Une IU facultative pour le joueur, nommée MaybePlayerUI et définie sur false.

     Verse

       MaybePlayerUI : ?player_ui = false
     		
     

     Copy full snippet(2 lines long)

4. Votre classe doit être similaire à ce qui suit :

   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. Ajoutez une expression block pour créer l'IU où l'heure apparaît en haut au centre de l'écran. Une expression block dans une définition de classe ne s'exécute que lorsque la classe est instanciée. Il est donc possible de créer l'IU une seule fois dans cette expression 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. Ajoutez la fonction StartCountdown() pour afficher l'IU.

   Verse

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

   Copy full snippet(5 lines long)

7. Dans countdown_timer_example.verse, créez une instance countdown_timer avec une référence à l'interface utilisateur du joueur et la durée initiale du compte à rebours. Appelez StartCountdown() dans OnBegin() pour que le compte à rebours apparaisse dès le début du jeu.

   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. Si vous testez le code à ce stade, l'IU n'affiche pas la durée restante lorsque le compte à rebours commence. Par conséquent, dans countdown_timer.verse, créez une fonction et nommez-la UpdateUI(). Cette fonction met à jour la valeur actuelle du compte à rebours dans l'IU. Appelez UpdateUI() dans 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. Le compte à rebours initial apparaît désormais dans l'IU, mais la valeur ne se met pas à jour toutes les secondes. Pour modifier cela :

   • Ajoutez la variable float TimerTickPeriod pour représenter la fréquence de mise à jour (en secondes) de l'IU. Dans cet exemple, nous utilisons une fréquence d'une seconde.

     Verse

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

     Copy full snippet(1 line long)

   • Créez une fonction et nommez-la RunCountdown(). Elle doit être dotée du spécificateur suspends et vous devez l'appeler depuis StartCountdown(). Configurez RunCountdown() de sorte à attendre TimerTickPeriod avant de mettre à jour l'IU, puis répétez cette opération sur la boucle. Configurez la boucle de façon à ce qu'elle arrête le compte à rebours et le supprime de l'IU lorsque celui-ci atteint 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. Lorsque vous testez votre code, le compte à rebours doit commencer à 30 et se mettre à jour toutes les secondes jusqu'à ce qu'il atteigne 0 et disparaisse de l'IU.

Ajouter du temps

Ce compte à rebours est un moyen personnalisé d'ajouter du temps et d'annoncer le temps ajouté. Dans cet exemple, nous vous expliquons comment ajouter du temps au compte à rebours et afficher le temps ajouté lorsque le joueur interagit avec l'appareil Bouton.

Procédez comme suit pour ajouter du temps au compte à rebours lorsque le joueur interagit avec l'appareil Bouton :

1. Dans countdown_timer.verse, créez une nouvelle fonction nommée AddRemainingTime() qui met à jour la variable RemainingTime avec la valeur transmise à la fonction dans le paramètre float nommé Time, puis met à jour l'IU pour afficher le nouveau temps restant.

   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. Dans countdown_timer_example.verse, abonnez-vous à l'événement InteractedWithEvent de l'appareil Bouton et appelez AddRemainingTime() lorsque le joueur interagit avec l'appareil Bouton.

   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. Ajoutez un widget à la classe countdown_timer pour indiquer la durée supplémentaire ajoutée au compte à rebours lorsque le joueur interagit avec le bouton.

   Verse

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

   Copy full snippet(2 lines long)

4. Utilisez les mêmes valeurs de positionnement que le widget RemainingTime pour le nouveau widget AddedTimeWidget, mais modifiez les valeurs suivantes pour que la légende s'affiche en haut à droite du compte à rebours :

   • Pour AddedTimeWidget, définissez la marge gauche dans la section Décalages sur 50,0.

   • Pour RemainingTimeWidget, définissez la marge supérieure dans la section Décalages sur 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. Créez une nouvelle fonction nommée AddedTimeCallout() qui met à jour la valeur dans le widget AddedTimeWidget et affiche la légende pendant deux secondes avant de masquer à nouveau le widget. Appelez AddedTimeCallout() dans 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. Lorsque vous testez le code, le compte à rebours doit commencer à 30 et se mettre à jour toutes les secondes jusqu'à ce qu'il atteigne 0 et disparaisse de l'IU. Lorsque le joueur interagit avec le bouton, vingt secondes sont ajoutées au compte à rebours et une légende s'affiche pendant deux secondes pour indiquer la durée supplémentaire ajoutée.

Signaler la fin du compte à rebours

Plus tôt dans ce tutoriel, vous avez utilisé l'événement InteractedWithEvent d'un appareil Bouton pour savoir quand le joueur appuie sur le bouton pour ajouter une durée supplémentaire au compte à rebours. Vous pouvez également créer vos propres événements personnalisés que d'autres personnes peuvent utiliser pour connaître tous les changements qui se produisent dans votre code.

Dans cet exemple, nous vous expliquons comment utiliser le comportement suivant des événements personnalisés :

• Signal() : cette fonction permet à toute personne en attente de l'événement de savoir que l'événement a eu lieu.

• Await() : cette fonction asynchrone bloque l'exécution du contexte qui l'entoure jusqu'à ce que l'événement soit signalé.

Dans cet exemple, vous allez ajouter un événement au compte à rebours pour signaler la fin du compte à rebours et activer l'appareil de fin de partie.

Procédez comme suit pour ajouter un événement pour la fin du compte à rebours.

1. Ajoutez un champ d'événement nommé CountdownEndedEvent à la classe countdown_timer :

   Verse

        CountdownEndedEvent : event() = event(){}
   

   Copy full snippet(1 line long)

   event() est un type paramétrique, c'est-à-dire qu'il renvoie une classe ou une interface plutôt qu'une valeur ou une instance d'objet. C'est la raison pour laquelle le type est event(). Vous devez donc initialiser votre constante CountdownEndedEvent avec event(){} pour imiter votre mode d'instanciation de classe.

2. Mettez à jour RunCountdown() pour signaler l'événement CountdownEndedEvent et informer tout autre code que le compte à rebours est terminé avant de rompre la boucle.

   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. Dans countdown_timer_example.verse, attendez l'événement CountdownEndedEvent associé à CountdownTimer, puis activez l'appareil de fin de partie pour indiquer la fin du compte à rebours lors du déclenchement de l'événement.

   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. Lorsque vous testez votre code, le compte à rebours doit commencer à 30 et se mettre à jour toutes les secondes jusqu'à ce qu'il atteigne 0. Dès que le compte à rebours se termine, il disparaît de l'IU et la partie se termine. Lorsque le joueur interagit avec le bouton, vingt secondes sont ajoutées au compte à rebours et une légende s'affiche pendant deux secondes pour indiquer la durée ajoutée.

Préparer votre classe pour son utilisation par un autre code

Vous avez créé votre propre classe de compte à rebours et utilisé un appareil créé avec Verse pour instancier et contrôler ce compte à rebours.

Lorsque vous créez des classes personnalisées (en réalité, tout code), il est important de préciser qui peut accéder aux éléments que vous créez. Par exemple, seul le compte à rebours doit pouvoir créer et modifier sa propre interface utilisateur. Dans Verse, vous pouvez utiliser des spécificateurs d'accès pour définir le niveau d'accès de votre code.

Ajoutez le spécificateur public à tous les identificateurs auxquels vous souhaitez que d'autres personnes aient accès, car public signifie que l'identificateur est universellement accessible. Dans cet exemple, les éléments suivants sont tous utilisés dans l'appareil countdown_timer_example et leur accès doit donc être public :

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

• StartCountdown<public>() : void =

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

Ajoutez le spécificateur private à tous les identificateurs auxquels vous ne voulez pas que d'autres personnes accèdent, car private indique qu'il n'est possible d'accéder à l'identificateur que dans l'étendue actuelle immédiatement englobante (en l'occurrence, la classe countdown_timer).

Dans cet exemple, les identificateurs suivants doivent avoir un accès privé :

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

Vous pouvez utiliser un constructeur pour définir les valeurs initiales d'une nouvelle instance de classe sans exposer les variables d'une classe. Un constructeur est une fonction spéciale qui crée une instance de la classe à laquelle il est associé.

Créez un constructeur pour la classe countdown_timer qui met à jour les variables RemainingTime et MaybePlayerUI.

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

L'accès aux variables RemainingTime et MaybePlayerUI définies dans le constructeur ne doit pas être public, mais il ne peut pas être privé si les variables sont définies dans un constructeur. Vous pouvez utiliser le spécificateur internal, qui indique qu'il n'est possible d'accéder à l'identificateur que dans le module actuel immédiatement englobant pour ces variables.

• MaybePlayerUI<internal> : ?player_ui = false

• var RemainingTime<internal> : float = 0.0

Code complet

Voici le code complet pour créer un compte à rebours personnalisé.

Deux fichiers Verse sont créés dans cet exemple :

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

À vous de jouer

Au cours de ce tutoriel, vous avez appris à créer un compte à rebours personnalisé.

Utilisez vos connaissances pour effectuer les tâches suivantes :

• Modifier le taux de ticks du compte à rebours et ajouter un événement pour chaque tick.

• Ajouter une fonctionnalité de pause, de reprise et de redémarrage au chronomètre.