1. Epic GamesDeveloper
  3. Cómo crear un cronómetro de cuenta atrás personalizado

Cómo crear un cronómetro de cuenta atrás personalizado

Crea tu propio cronómetro de cuenta atrás en Verse.

Cómo crear un cronómetro de cuenta atrás personalizado

Podrías utilizar el dispositivo Cronómetro que ejecuta un cronómetro de cuenta atrás, pero crear tu propio cronómetro de cuenta atrás en Verse es una forma de personalizar su comportamiento para que se ajuste exactamente a lo que necesitas.

Este tutorial te enseñará a crear tu propio cronómetro con Verse, y a utilizar una llamada cuando se añada tiempo a la cuenta atrás. Empieza con algo sencillo y encontrarás formas de mejorarlo, proyecto a proyecto.

El tiempo extra se añade a la cuenta atrás y se muestra cuando el jugador pulsa un botón.

Funciones del lenguaje Verse utilizadas

  • if: la expresión if comprueba condiciones y accede a valores que podrían fallar.
  • block: este ejemplo utiliza la expresión block para inicializar la interfaz de usuario cuando se crea el cronómetro de cuenta atrás.
  • loop: la expresión loop actualiza la interfaz de usuario y finaliza cuando la cuenta atrás llega a cero.
  • spawn: una expresión spawn inicia una expresión asíncrona en cualquier contexto.
  • message: el tipo message significa que el texto puede localizarse, y la cadena que utilizas para inicializar una variable message es el texto y el idioma predeterminados para el mensaje.
  • class: en este ejemplo se crea una clase en Verse que gestiona y muestra la cuenta atrás.
  • constructor: un constructor es una función especial que crea una instancia de la clase a la que está asociado.
  • Especificadores de acceso: puedes utilizar especificadores de acceso para establecer el nivel de acceso de tu código.

API de Verse utilizadas

  • Sleep: con la API Sleep(), puedes elegir el periodo entre actualizaciones de la IU.
  • Eventos: puedes crear tus propios eventos en Verse y añadir una función personalizada cuando se produzcan.
  • IU de Verse: crea una interfaz de usuario personalizada en el juego para mostrar información sobre el jugador y el juego.

Instrucciones

Sigue estos pasos para aprender a crear tu propio cronómetro personalizado. La secuencia de comandos completa se incluye al final de esta guía como referencia.

Cómo configurar el nivel

Este ejemplo utiliza los siguientes elementos y dispositivos.

  • Un dispositivo Botón: Cuando el jugador interactúa con el dispositivo, se añade más tiempo a la cuenta atrás.
  • Un dispositivo Fin de partida: Cuando finaliza la cuenta atrás, este dispositivo hace que el juego termine.

Sigue estos pasos para configurar tu nivel:

  1. Añade un dispositivo Botón y un dispositivo Finalizar partida a tu nivel.
  2. Crea un nuevo dispositivo de Verse y nómbralo countdown_timer_example desde el explorador de Verse. Consulta Cómo crear tu propio dispositivo con Verse para ver los pasos. Añade una referencia editable al dispositivo Botón en countdown_timer_example y nómbrala AddMoreTimeButton. Consulta Cómo personalizar las propiedades de un dispositivo para ver los pasos. 
     countdown_timer_example := class(creative_device):

     @editable
     AddMoreTimeButton : button_device = button_device{}

    Añade una referencia editable al dispositivo Finalizar partida en countdown_timer_example y nómbrala EndGame.

     countdown_timer_example := class(creative_device):

     @editable
     AddMoreTimeButton : button_device = button_device{}
        
     @editable
     EndGame : end_game_device = end_game_device{}
  3. Guarda tu archivo de Verse. En el menú principal de UEFN elige Verse > Compilar código de Verse para actualizar tu dispositivo en el nivel y ver los cambios en el panel Detalles del dispositivo. Ajustes del dispositivo countdown_timer_example

Cómo iniciar la cuenta atrás

En este ejemplo, crearás una clase de Verse que dibuje su propia interfaz de usuario y gestione su propia cuenta atrás.

Sigue estos pasos para aprender a crear tu propio cronómetro personalizado:

  1. Crea un archivo de Verse vacío y llámalo countdown_timer.verse.
  2. Añade los siguientes módulos de Verse en la parte superior del archivo: 
     using { /UnrealEngine.com/Temporary/UI }
 using { /UnrealEngine.com/Temporary/SpatialMath }
 using { /Fortnite.com/UI }
 using { /Verse.org/Colors }
 using { /Verse.org/Simulation }

    Crea una clase y nómbrala countdown_timer. Luego añade las siguientes variables:

    • Una variable flotante llamada RemainingTime e inicializada a 0.0. 
        var RemainingTime : float = 0.0
    • Una variable del widget de lienzo llamada Canvas. 
        var Canvas : canvas = canvas{}
    • Un widget de texto llamado RemainingTimeWidget con un color de texto predeterminado blanco. 
        RemainingTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White}
    • Una función que devuelve un mensaje llamado RemainingTimeText que toma un parámetro entero para mostrar el valor representado por RemainingTime. 
        RemainingTimeText<localizes>(CurrentRemainingTime : int) : message = "{CurrentRemainingTime}"
    • Una interfaz de usuario de jugador opcional llamada MaybePlayerUI e inicializada a false. 
        MaybePlayerUI : ?player_ui = false
  3. Tu clase debería tener el siguiente aspecto: 
     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}"
  4. Añade una expresión block para crear la interfaz de usuario en la que la hora aparezca en la parte superior central de la pantalla. Una expresión block en la definición de una clase se ejecuta solo cuando se instancia la clase, por lo que podemos crear la interfaz de usuario una vez en esta expresión 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}"
  5. Añade la función StartCountdown() para mostrar la IU. 
     StartCountdown() : void =
     Print("Iniciando cuenta atrás")

     if (PlayerUI := MaybePlayerUI?):
         PlayerUI.AddWidget(Canvas)
  6. En countdown_timer_example.verse, crea una instancia de countdown_timer con una referencia a la IU del jugador y el tiempo inicial de la cuenta atrás. Llama a StartCountdown() en OnBegin() para que la cuenta atrás aparezca en cuanto empiece el juego. 
     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("No se encuentra al jugador")
  7. Si pruebas ahora, la interfaz no mostrará el tiempo restante cuando empiece la cuenta atrás, así que crea en countdown_timer.verse una función y nómbrala UpdateUI() para que actualice el valor actual de la cuenta atrás en la interfaz. Llama a UpdateUI() en StartCountdown(). 
     StartCountdown() : void =
     Print("Iniciando cuenta atrás")

     if (PlayerUI := MaybePlayerUI?):
         PlayerUI.AddWidget(Canvas)
            
         # Actualiza la interfaz de usuario cuando iniciemos el cronómetro para ver en pantalla el tiempo restante inicial.
         UpdateUI()

 UpdateUI() : void =
     if (IntTime := Int[RemainingTime]):
         RemainingTimeWidget.SetText(RemainingTimeText(IntTime))
  8. Ahora, la cuenta atrás inicial aparece en la interfaz de usuario, pero el valor no se actualiza cada segundo. Para ello:
    • Añade la variable flotante TimerTickPeriod para representar la frecuencia en segundos con la que se actualiza la IU. Este ejemplo utiliza un segundo. 
        TimerTickPeriod : float = 1.0 # La «precisión» del cronómetro: con qué frecuencia hace tic (en segundos).
      • Crea una función y llámala RunCountdown() para que tenga el especificador suspends y llámala desde StartCountdown(). Haz que RunCountdown() espere el TimerTickPeriod antes de actualizar la interfaz de usuario y repite esto en bucle. Establece que el bucle termine y que la cuenta atrás desaparezca de la interfaz de usuario cuando llegue a 0.0. 
        StartCountdown() : void =
    Print("Iniciando cuenta atrás")

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

        # Actualiza la interfaz de usuario cuando iniciemos el cronómetro para ver en pantalla el tiempo restante inicial.
        UpdateUI()

        spawn:
            RunCountdown()

RunCountdown()<suspends> : void =
    loop:
        Sleep(TimerTickPeriod) # Espera TimerTickPeriod segundos antes de volver a actualizar la interfaz.
        set RemainingTime -= TimerTickPeriod # Actualiza cuánto tiempo queda en la cuenta atrás después de esperar

        UpdateUI()

        # Fin del cronómetro
        if (RemainingTime <= 0.0):
            if (PlayerUI := MaybePlayerUI?):
                PlayerUI.RemoveWidget(Canvas)
            break
  9. Cuando hagas la prueba, deberías ver que la cuenta atrás empieza en 30 y se actualiza cada segundo hasta que el cronómetro llega a 0 y la cuenta atrás desaparece de la interfaz de usuario.
El cronómetro de cuenta atrás comienza en 30 cuando empieza la partida.

Cómo añadir más tiempo

Con este cronómetro de cuenta atrás, quieres añadir una forma personalizada de agregar más tiempo y llamar al tiempo añadido. Este ejemplo muestra cómo añadir más tiempo a la cuenta atrás y mostrar el tiempo añadido cuando el jugador interactúa con el dispositivo Botón.

Sigue estos pasos para añadir más tiempo al cronómetro de cuenta atrás cuando el jugador interactúe con el dispositivo Botón:

  1. En countdown_timer.verse, crea una nueva función nombrada AddRemainingTime() que actualice la variable RemainingTime con el valor pasado a la función en el parámetro flotante nombrado Time, y luego actualiza la IU para mostrar el nuevo tiempo restante. 
     AddRemainingTime(Time : float) : void =
     set RemainingTime += Time

     # Actualiza inmediatamente la interfaz de usuario para mejorar la respuesta del jugador cuando se añada el tiempo.
     UpdateUI()
  2. En countdown_timer_example.verse, suscríbete al InteractedWithEvent del dispositivo Botón y llama a AddRemainingTime() cuando el jugador interactúe con el dispositivo Botón. 
     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("No se encuentra al jugador")

     OnButtonInteractedWith(Agent : agent) : void =
         TimeToAdd : float = 20.0
         CountdownTimer.AddRemainingTime(TimeToAdd)
  3. Añade un widget a la clase countdown_timer que indique cuánto tiempo se añade a la cuenta atrás cuando el jugador interactúa con el botón. 
     AddedTimeWidget : text_block = text_block{DefaultTextColor := NamedColors.White} 
 AddedTimeText<localizes>(AddedTime : int) : message = " +{AddedTime}!"
  4. Utiliza los mismos valores de posicionamiento que en el widget RemainingTime para el nuevo AddedTimeWidget, pero cambia los siguientes valores para que el tiempo de llamada se muestre en la parte superior derecha del cronómetro de cuenta atrás:
    • Para AddedTimeWidget, establece el margen izquierdo (Left) en Offsets en 50.0.
    • Para RemainingTimeWidget, establece el margen superior (Top) en Offsets en 25.0. 
       countdown_timer := class:
  <# Este bloque se ejecuta para cada instancia de la clase countdown_timer.
  Podemos configurar el lienzo una vez aquí. #>
  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. Crea una nueva función nombrada AddedTimeCallout() que actualice el valor de AddedTimeWidget y muestre la llamada durante dos segundos antes de volver a ocultar el widget. Llama a AddedTimeCallout() en AddRemainingTime(). 
     AddRemainingTime(Time : float) : void =
     set RemainingTime += Time

     # Actualiza inmediatamente la interfaz de usuario para mejorar la respuesta del jugador cuando se añada el tiempo.
     UpdateUI()

     # Activa una llamada simple para mostrar el tiempo que se está añadiendo.
     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. Cuando hagas la prueba, deberías ver que la cuenta atrás empieza en 30 y se actualiza cada segundo hasta que el cronómetro llega a 0 y la cuenta atrás desaparece de la interfaz de usuario. Cuando el jugador interactúa con el botón, se añaden veinte segundos a la cuenta atrás y aparece un aviso durante dos segundos que muestra el tiempo adicional añadido.
El tiempo extra se añade a la cuenta atrás y se muestra cuando el jugador pulsa un botón.

Cómo señalar el final del cronómetro de cuenta atrás

Anteriormente en este tutorial, utilizaste la función InteractedWithEvent de un dispositivo Botón para saber cuándo el jugador pulsaba el botón y añadir más tiempo al cronómetro de cuenta atrás. Pero también puedes crear tus propios eventos personalizados que otros puedan utilizar para saber cuándo ocurre algo en tu código.

Este ejemplo muestra cómo utilizar el siguiente comportamiento de los eventos personalizados:

  • Signal(): esta función permite que cualquiera que esté esperando el evento sepa que este se ha producido.
  • Await(): esta función asíncrona bloquea la ejecución de su contexto envolvente hasta que se señala el evento.

En este ejemplo, añadirás un evento al cronómetro de cuenta atrás para señalar cuándo finaliza la cuenta atrás y poder activar el dispositivo Fin de partida.

Sigue estos pasos para añadir un evento para el final de la cuenta atrás.

  1. Añade un campo de evento nombrado CountdownEndedEvent a la clase countdown_timer: 
     CountdownEndedEvent : event() = event(){}

    event() es un tipo paramétrico, lo que significa que devuelve una clase o interfaz en lugar de un valor o una instancia de objeto. Por eso el tipo es event() y por eso tienes que inicializar tu constante CountdownEndedEvent con event(){} para imitar la forma de instanciar una clase.
  2. Actualiza RunCountdown() para señalar el CountdownEndedEvent para que otro código sepa que la cuenta atrás ha terminado antes de salir del bucle. 
     RunCountdown()<suspends> : void =
     # Recorremos en bucle con TimerTickPeriod.
     # La IU también se actualiza cada vez.
     loop:
         Sleep(TimerTickPeriod)
         set RemainingTime -= TimerTickPeriod
         UpdateUI()

         # Fin del cronómetro
         if (RemainingTime <= 0.0):
             if (UI := MaybePlayerUI?):
                 UI.RemoveWidget(Canvas)
             CountdownEndedEvent.Signal()
             break
  3. En countdown_timer_example.Verse, espera en el CountdownEndedEvent asociado al CountdownTimer, luego activa el dispositivo Finalizar partida porque sabemos que la cuenta atrás terminó cuando se produce el evento. 
     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("No se encuentra al jugador")
  4. Cuando hagas la prueba, deberías ver que la cuenta atrás empieza en 30 y se actualiza cada segundo hasta que el cronómetro llega a 0. En cuanto termina la cuenta atrás, esta desaparece de la IU y el juego termina. Cuando el jugador interactúa con el botón, se añaden veinte segundos a la cuenta atrás y aparece un aviso durante dos segundos que muestra el tiempo añadido.
La partida termina cuando la cuenta atrás llega a 0.

Cómo preparar tu clase para que la utilice otro código

Ya has creado tu propia clase de cronómetro de cuenta atrás personalizado y has utilizado un dispositivo de Verse para instanciar y controlar el cronómetro.

Cuando creas tus propias clases personalizadas (y, en realidad, cualquier código), es importante especificar quién puede acceder a lo que creas. Por ejemplo, solo el cronómetro de cuenta atrás debería poder crear y cambiar su IU. En Verse, puedes utilizar especificadores de acceso para establecer el nivel de acceso de tu código.

Añade el especificador public a cualquier identificador al que quieras que otros accedan (public significa que el identificador es de acceso universal). En este ejemplo, todos los siguientes se utilizan en el dispositivo countdown_timer_example y, por tanto, deben tener acceso público:

  • CountdownEndedEvent<public> : event() = event(){}
  • StartCountdown<public>() : void =
  • AddRemainingTime<public>(Time : float) : void =

Añade el especificador private a cualquier identificador al que no quieras que accedan otros (private significa que solo se puede acceder al identificador en el ámbito actual) inmediatamente adyacentes (que en este caso es la clase countdown_timer).

En este ejemplo, lo siguiente debe tener acceso privado:

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

Es buena idea agrupar tu código por acceso. Recomendamos ordenar tu código de mayor a menor cantidad de acceso:

  • public (público)
  • internal (interno)
  • protected (protegido)
  • private (privado)

Puedes utilizar un constructor para establecer los valores iniciales de una nueva instancia de clase sin exponer las variables de una clase. Un constructor es una función especial que crea una instancia de la clase a la que está asociado.

Crea un constructor para la clase countdown_timer que actualice las variables RemainingTime y MaybePlayerUI.

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

Las variables RemainingTime y MaybePlayerUI que se establecen en el constructor no deberían tener acceso público, pero no pueden tener acceso privado si se establecen en un constructor. Puedes utilizar el especificador internal para estas variables, lo que significa que solo se puede acceder al identificador en el módulo actual, inmediatamente adyacente.

  • MaybePlayerUI<internal> : ?player_ui = false
  • var RemainingTime<internal> : float = 0.0

Código completo

El código siguiente es el código completo para crear un cronómetro de cuenta atrás personalizado.

Hay dos archivos de Verse creados en este ejemplo:

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:
    <# Este bloque se ejecuta para cada instancia de la clase countdown_timer.
    Podemos configurar el lienzo una vez aquí. #>
    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)

            # Actualiza la interfaz de usuario cuando iniciemos el cronómetro para ver en pantalla el tiempo restante inicial.
            UpdateUI()
            spawn:
                RunCountdown()

    AddRemainingTime<public>(Time : float) : void =
        set RemainingTime += Time
        # Actualiza inmediatamente la interfaz de usuario para mejorar la respuesta del jugador cuando se añada el tiempo.
        UpdateUI()

        # Activa una llamada simple para mostrar el tiempo que se está añadiendo.
        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
    # La «precisión» del cronómetro: con qué frecuencia hace tic (en segundos).
    TimerTickPeriod<private> : float = 1.0

    RunCountdown<private>()<suspends> : void =
        # Recorremos en bucle con TimerTickPeriod.
        # La IU también se actualiza cada vez.
        loop:
            Sleep(TimerTickPeriod)
            set TotalTime += TimerTickPeriod
            set RemainingTime -= TimerTickPeriod
            UpdateUI()

            # Fin del cronómetro
            if (RemainingTime <= 0.0):
                
                Canvas.RemoveWidget(RemainingTimeTextBlock)

                 if (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("No se encuentra al jugador")

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

Por tu cuenta

Al completar esta guía, habrás aprendido a crear un cronómetro de cuenta atrás personalizado.

Con lo que has aprendido, intenta hacer lo siguiente:

  • Cambia la velocidad del tic del cronómetro y añade un evento para cada tic.
  • Añade al cronómetro las funciones de pausa, reanudación y reinicio.

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page