1. Epic GamesDeveloper
  3. Créer un compte à rebours personnalisé

Créer un compte à rebours personnalisé

Créez votre propre compte à rebours dans Verse !

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.

Temps supplémentaire ajouté au compte à rebours et affiché lorsque le joueur appuie sur un bouton

Fonctionnalités du langage Verse utilisées

  • if : l'expression if teste les conditions et accède aux valeurs susceptibles d'échouer.
  • block : cet exemple utilise l'expression block pour initialiser l'interface utilisateur lors de la création du compte à rebours.
  • 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 de message signifie que le texte peut être localisé, et la chaîne que vous utilisez pour initialiser une variable de 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 de joueur et les informations 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 pour référence.

Configuration du niveau

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

  • 1 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 la rubrique Créer votre propre appareil avec Verse pour connaître la procédure détaillée.
  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 Verse pour connaître la procédure détaillée. 
     countdown_timer_example := class(creative_device):

     @editable
     AddMoreTimeButton : button_device = button_device{}
  4. Ajoutez une référence modifiable à l'appareil de fin de partie dans countdown_timer_example et nommez-la EndGame. 
     countdown_timer_example := class(creative_device):

     @editable
     AddMoreTimeButton : button_device = button_device{}
        
     @editable
     EndGame : end_game_device = end_game_device{}
  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. Paramètres de l'appareil countdown_timer_example

Démarrer 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 : 
     using { /UnrealEngine.com/Temporary/UI }
 using { /UnrealEngine.com/Temporary/SpatialMath }
 using { /Fortnite.com/UI }
 using { /Verse.org/Colors }
 using { /Verse.org/Simulation } }
  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. 
        var RemainingTime : float = 0.0
    • Une variable de widget de zone de dessin nommée Canvas. 
        var Canvas : canvas = canvas{}
    • Un widget de texte nommé RemainingTimeWidget avec un texte blanc par défaut. 
        RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
    • Une fonction renvoyant un message nommé RemainingTimeText et définie sur un paramètre entier pour afficher la valeur représentée par RemainingTime. 
        RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
    • Une IU facultative pour le joueur, nommée MaybePlayerUI et définie sur false. 
        MaybePlayerUI : ?player_ui = false
  4. Votre classe doit être similaire à ce qui suit : 
     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}"
  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. 
     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}
                     SizeToContent := true
                     Widget := RemainingTimeWidget 
                        
     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}"
  6. Ajoutez la fonction StartCountdown() pour afficher l'IU. 
     StartCountdown() : void =
     Print("Starting countdown")

     if (PlayerUI := MaybePlayerUI?):
         PlayerUI.AddWidget(Canvas)
  7. Dans countdown_timer_example.verse, créez une instance countdown_timer avec une référence à l'IU 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. 
     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{}

     var CountdownTimer : countdown_timer = countdown_timer{}
     InitialCountdownTime : float = 30.0

     OnBegin<override>()<suspends> : void =
         if:
             FirstPlayer := Self.GetPlayspace().GetPlayers()[0]
             PlayerUI := GetPlayerUI[player[FirstPlayer]]
         then:
             set CountdownTimer = countdown_timer{MaybePlayerUI := option{PlayerUI}, RemainingTime := InitialCountdownTime}
             CountdownTimer.StartCountdown()
         else:
             Print("Can't find player")
  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'interface utilisateur. Appelez UpdateUI() dans StartCountdown(). 
     StartCountdown() : void =
     Print("Starting countdown")

     if (PlayerUI := MaybePlayerUI?):
         PlayerUI.AddWidget(Canvas)
            
         # Mettre à jour l'IU lors du démarrage du compte à rebours pour afficher la durée restante initiale à l'écran.
         UpdateUI()

 UpdateUI() : void =
     if (IntTime := Int[RemainingTime]):
         RemainingTimeWidget.SetText(RemainingTimeText(IntTime))
  9. Le compte à rebours initial apparaît désormais dans l'IU, mais la valeur ne se met pas à jour toutes les secondes. Pour ce faire :
    • 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. 
        TimerTickPeriod : float = 1.0 # La "précision" du compte à rebours indique la fréquence des ticks, en secondes.

      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.

        StartCountdown() : void =
      Print("Starting countdown")

      if (PlayerUI := MaybePlayerUI?):
          PlayerUI.AddWidget(Canvas)

          # Mettre à jour l'IU lors du démarrage du compte à rebours pour afficher la durée restante initiale à l'écran.
          UpdateUI()

          spawn:
              RunCountdown()

  RunCountdown()<suspends> : void =
      loop:
          Sleep(TimerTickPeriod) # Attendre le nombre de secondes spécifié par TimerTickPeriod avant de renouveler la mise à jour de l'IU.
          set RemainingTime -= TimerTickPeriod # Mettre à jour le temps restant dans le compte à rebours après le délai d'attente.

          UpdateUI()

          # Fin du compte à rebours
          if (RemainingTime <= 0.0):
              if (PlayerUI := MaybePlayerUI?):
                  PlayerUI.RemoveWidget(Canvas)
              break
  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.
Le compte à rebours démarre à 30 lorsque le jeu commence

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. 
     AddRemainingTime(Time : float) : void =
     set RemainingTime += Time

     # Mettre immédiatement à jour l'IU pour une meilleure interaction du joueur lors de l'ajout de temps.
     UpdateUI()
  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. 
     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{}

     var CountdownTimer : countdown_timer = countdown_timer{}
     InitialCountdownTime : float = 30.0

     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()
         else:
             Print("Can't find player")

     OnButtonInteractedWith(Agent : agent) : void =
         TimeToAdd : float = 20.0
         CountdownTimer.AddRemainingTime(TimeToAdd)
  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. 
     AddedTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} 
 AddedTimeText<localizes>(AddedTime : int) : message = " +{AddedTime}!"
  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 Offsets sur 50.0.
    • Pour RemainingTimeWidget, définissez la marge supérieure dans la section Offsets sur 25.0. 
       countdown_timer := class:
  <# Ce bloc s'exécute pour chaque instance de la classe countdown_timer.
  Il est possible de configurer la zone de dessin ici. #>
  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 := 50.0, Bottom := 0.0, Right := 0.0}
                  SizeToContent := true
                  Widget := AddedTimeWidget
              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 := 25.0, Left := 0.0, Bottom := 0.0, Right := 0.0}
                  SizeToContent := true
                  Widget := RemainingTimeWidget
  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(). 
     AddRemainingTime(Time : float) : void =
     set RemainingTime += Time

     # Mettre immédiatement à jour l'IU pour une meilleure interaction du joueur lors de l'ajout de temps.
     UpdateUI()

     # Afficher une légende simple pour indiquer la durée ajoutée.
     spawn:
         AddedTimeCallout(Time)

 AddedTimeCallout(Time : float)<suspends> : void =
     if:
         PlayerUI := MaybePlayerUI?
         IntTime := Int[Time]
     then:
         AddedTimeWidget.SetVisibility(widget_visibility.Visible)
         AddedTimeWidget.SetText(AddedTimeText(IntTime))
         Sleep(2.0)
         AddedTimeWidget.SetVisibility(widget_visibility.Hidden)
  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.
Temps supplémentaire ajouté au compte à rebours et affiché lorsque le joueur appuie sur un bouton

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 : 
     CountdownEndedEvent : event() = event(){}

    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. 
     RunCountdown()<suspends> : void =
     # La boucle se déclenche avec TimerTickPeriod.
     # L'IU est également mise à jour à chaque boucle.
     loop:
         Sleep(TimerTickPeriod)
         set RemainingTime -= TimerTickPeriod
         UpdateUI()

         # Fin du compte à rebours
         if (RemainingTime <= 0.0):
             (UI := MaybePlayerUI?):
                 UI.RemoveWidget(Canvas)
             CountdownEndedEvent.Signal()
             break
  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. 
     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()
            
         EndGame.Activate(FirstPlayer)
     else:
         Print("Can't find player")
  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.
La partie se termine lorsque le compte à rebours atteint 0

Préparer votre classe afin qu'un autre code l'utilise

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 les 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 privé 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 =

Il est ici judicieux de regrouper vos codes selon leur accès. Nous vous recommandons de classer votre code du spécificateur d'accès le plus large au plus restreint :

  • public (public)
  • internal (interne)
  • protected (protégé)
  • private (privé)

Vous pouvez utiliser un constructeur pour définir les valeurs initiales d'une nouvelle instance de classe sans exposer les variables de la 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]]}

Les variables RemainingTime et MaybePlayerUI qui sont définies dans le constructeur ne doivent pas avoir un accès public, mais ne peuvent pas avoir un accès privé si elles 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 := class:
    <# Ce bloc s'exécute pour chaque instance de la classe countdown_timer.
    Il est possible de configurer la zone de dessin ici. #>
    block:
        set Canvas = canvas:
            Slots := array:
                canvas_slot:
                    Anchors := anchors:
                        Minimum := vector2{X := 0.4, Y := 0.3}
                        Maximum := vector2{X := 0.6, Y := 0.3}
                    Alignment := vector2{X := 0.5, Y := 0.5 }
                    Offsets := margin{Top := 0.0, Left := 0.0, Bottom := 0.0, Right := 0.0}
                    SizeToContent := true
                    Widget := RemainingTimeTextBlock 
                canvas_slot:
                    Anchors := anchors:
                        Minimum := vector2{X := 0.4, Y := 0.3}
                        Maximum := vector2{X := 0.6, Y := 0.3}
                    Alignment := vector2{X := 0.0, Y := 1.0}
                    Offsets := margin{Top := 0.0, Right := 0.0}
                    SizeToContent := true
                    Widget := AddedTimeTextBlock

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

    StartCountdown<public>() : void =
        if (PlayerUI := MaybePlayerUI?):
            PlayerUI.AddWidget(Canvas)

            # Mettre à jour l'IU lors du démarrage du compte à rebours pour afficher la durée restante initiale à l'écran.
            UpdateUI()
            spawn:
                RunCountdown()

    AddRemainingTime<public>(Time : float) : void =
        set RemainingTime += Time
        # Mettre immédiatement à jour l'IU pour une meilleure interaction du joueur lors de l'ajout de temps.
        UpdateUI()

        # Afficher une légende simple pour indiquer la durée ajoutée.
        spawn:
            AddedTimeCallout(Time)

    MaybePlayerUI<internal> : ?player_ui = false
    var RemainingTime<internal> : float = 0.0
    RemainingTimeTextBlock<private> : text_block = text_block{} 
    AddedTimeTextBlock<private> : text_block = text_block{}
    RemainingTimeText<localizes><private>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
    AddedTimeText<localizes><private>(AddedTime : int) : message = " +{AddedTime}!"
    var Canvas<private> : canvas = canvas{}
    var TotalTime<private> : float = 0.0
    # Précision du compte à rebours : fréquence des ticks, en secondes.
    TimerTickPeriod<private> : float = 1.0

    RunCountdown<private>()<suspends> : void =
        # La boucle se déclenche avec TimerTickPeriod.
        # L'IU est également mise à jour à chaque boucle.
        loop:
            Sleep(TimerTickPeriod)
            set TotalTime += TimerTickPeriod
            set RemainingTime -= TimerTickPeriod
            UpdateUI()

            # Fin du compte à rebours
            if (RemainingTime <= 0.0):
                
                Canvas.RemoveWidget(RemainingTimeTextBlock)

                 (UI := MaybePlayerUI?):
                     UI.RemoveWidget(Canvas)

                CountdownEndedEvent.Signal(TotalTime)
                break

    AddedTimeCallout<private>(Time : float)<suspends> : void =
        if:
            PlayerUI := MaybePlayerUI?
            IntTime := Int[Time]
        then:
            AddedTimeTextBlock.SetVisibility(widget_visibility.Visible)
            AddedTimeTextBlock.SetText(AddedTimeText(IntTime))
            Sleep(2.0)
            AddedTimeTextBlock.SetVisibility(widget_visibility.Hidden)
    
    UpdateUI<private>() : void =
        if (IntTime := Int[RemainingTime]):
            RemainingTimeTextBlock.SetText(RemainingTimeText(IntTime))

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
    EndGame : end_game_device = end_game_device{}

    var CountdownTimer : countdown_timer = countdown_timer{}
    InitialCountdownTime : float = 30.0

    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()
            
            EndGame.Activate(FirstPlayer)
        else:
            Print("Can't find player")

    OnButtonInteractedWith(Agent : agent) : void =
        TimeToAdd : float = 20.0
        CountdownTimer.AddRemainingTime(TimeToAdd)

À 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 compte à rebours.

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page