class_17-a861b354

La App Makers

Bieeeen! Estiren sus cuellos y espalda.
Bienvenidos todos a este nuevo post en el que le daremos continuación al «Post Anterior».
Para resumir, el Countdown que hicimos en el post anterior se mostraba como una barra que se iba vaciando a medida que el tiempo transcurría.
En este post les enseñaré a crear un Countdown que muestre textualmente el tiempo restante. Puede mostrarse junto a la barra que creamos en el post anterior para que se vea mejor :3
Sin mas preámbulos, ¡demos inicio al tutorial!

import CharlieFuu69 xD


STATUS CHECK : Todo el contenido de este post ha sido verificado, y es compatible con la última versión emitida de Ren’Py.


1. INTRODUCCIÓN A LOS COUNTDOWNS NUMÉRICOS

[SCREENSHOT : Uno de los Rounds del juego “ElectroBasics Electronic Quiz!”, aún en desarrollo]

Si, como leiste en el título de este ítem, en esta oportunidad crearemos un Countdown visible como texto, es decir, mostraremos el Countdown en formato numérico como en cualquier reloj digital.

Como base, no explicaré el código del tutorial anterior ya que lógicamente lo he explicado xD
El código de este tutorial (Post #17) se podrá integrar sin problemas al código del tutorial anterior (Post #16).

#OffTopic : No se enojen porque puse la misma foto del tutorial anterior xD. Ese Screenshot de mi actual proyecto posee un Countdown que está exactamente basado en el código del tutorial anterior y el tutorial que estás viendo ahora jsjsjs.

Itinerario de este tutorial :

  • Código Python integrado en el script de Ren’Py.
  • Uso del displayable Text().
  • Uso del displayable DynamicDisplayable().

2. TIME TO WORK! EMPEZANDO A CREAR EL CORAZÓN DEL COUNTDOWN NUMÉRICO

Lamentablemente hay características que al intentar hacerlas con la sintaxis de Ren’Py, terminamos fracasando. Es ahí donde entra el muy buen amigo llamado Python.

Para contrarrestar este problema, Ren’Py permite incrustar código en lenguaje Python dentro de un script RPY, lo que abre una puerta para crear características diferentes a las que el motor por si mismo puede proporcionar.

Retomando el tema principal del post, empecemos a crear nuestro Countdown :


  • Paso 1 : Preparar el script para inicializar y recibir código en lenguaje Python.

Para incrustar fragmentos de código en lenguaje Python, debemos hacer una declaración de bloque de Python. Mira a continuación :

En el interior de esa identación, podemos agregar código en lenguaje de Python. Como hemos visto en otras oportunidades, la declaración de init sirve para inicializar ese fragmento de código en el momento del arranque.


  • Paso 2 : Crear una función de Python que cuente y muestre el tiempo restante.

Ahora viene la parte interesante. Crearemos una función de Python que se encarga de ejecutar el conteo regresivo y su respectiva visualización.

En el interior de la función haremos uso del objeto displayable Text(), que es proporcionado por el entorno de Ren’Py, el cual cumple con el objetivo de mostrar texto en pantalla. Si, este Countdown es numérico por lo que el displayable Text() nos vendrá como anillo al dedo.

Mira el código a continuación :

Listo. El código que viste, es la función de Python que se encarga de hacer el conteo regresivo.

Cuando la función es llamada, esta se inicia con el tiempo dado como argumento en el parámetro length. Al mismo tiempo, devuelve el tiempo restante formateado como [Minutos : Segundos] mediante el displayable Text() de Ren’Py.

La estructura del retorno de texto es el siguiente :

  • Text() : El objeto displayable que muestra texto.
  • “%02d” : Esto es una string (cadena de texto) formateada para mostrar dígitos. El formato de strings está dada por el operador “%“, seguido del número de cifras a mostrar (02) y el caracter especial “d“, el cual señala la presencia de dígitos/números en el formato.
  • % m y % s : Estos son los ajustes previos para que el formato de la string “%02d” reciba los dígitos respectivos. “% m” le entregará a la primera string, los minutos restantes y “% s” los segundos restantes.
  • color : Esta es una palabra clave que refiere a una de las propiedades de estilizados de Ren’Py, el cual se usa aquí para estilizar al texto que retornará la función. Su argumento es una string con el color en Hexadecimal, expresado en #RGB, #RRGGBB, entre otros más.
  • size : Esta es una palabra clave que refiere a otra propiedad de estilizados de Ren’Py. Esta palabra clave recibe como argumento un valor entero con el tamaño del texto (Píxeles) que tendrá el texto visible.

Si ya le agarraste el hilo a la función de la cuenta regresiva, estás listo(a) para continuar :3


3. VISUALIZACIÓN DEL COUNTDOWN NUMÉRICO EN LA UI DE JUEGO

Antes de continuar, reitero que este código puede vincularse con el código del post anterior.

El propósito de este tutorial, es que el Countdown sea visible tanto en formato de barra animada, como también en formato numérico/textual.

Tomaremos en consideración la Screen del tutorial anterior (Post #16), para integrar en ella la cuenta regresiva numérica.
Mira atentamente el paso a paso :


  • Paso 1 : Usar a DynamicDisplayable() como un objeto de imagen en una Screen.

Dentro de la Screen del tutorial anterior, agregaremos un objeto de imagen con add y llamaremos a la función con DynamicDisplayable()

Para entender mejor como se usa DynamicDisplayable(), desglosaré la línea que he marcado en el Screenshot :

  • add [Propiedad] : Recibe como argumento un objeto de imagen.
  • DynamicDisplayable() [Objeto/Función] : Este objeto recibe 3 parámetros en total, pero comúnmente se utilizan dos. El primer parámetro recibe una función (en este caso, la función que hicimos en el item anterior). El segundo parámetro corresponde a un *args que se utiliza para recibir argumentos correspondientes a los parámetros que hicimos en la función. Si la función no espera ningún parámetro, no tendrá sentido ni será necesario agregar un *args o un **kwargs en DynamicDisplayable().
  • Countdown_Display_Function() [Función] : Esta es la función que hicimos. Requiere de 1 parámetro para operar correctamente.
  • length [*args] : Este parámetro recibe como argumento, la longitud o tiempo de duración del Countdown, dada en segundos como valor de coma flotante. Como el tiempo es pasado a través del parámetro time_left de la Screen, el argumento será time_left.
  • xalign 0.5 [Transformación] : Fija al Countdown en el centro del eje X de la pantalla.

Al arrancar la cuenta regresiva, nuestro Countdown fusionado (barra animada + textual) se verá de esta forma :

Para ver el código completo, ve al link de más abajo. Esto te redirigirá a la carpeta del post en mi repositorio de GitHub :


Bien señores. Aquí finalizamos la segunda parte de la implementación de Countdowns en un juego Ren’Py. Es posible que sea la última vez que vean la palabra “Countdown” (Sinceramente hasta a mí me está rompiendo las b*las xD).

Me hice una cuenta en GitHub donde planeo subir los códigos que se vayan presentando en los posts de este hilo. ¡Entra a mi perfil de GitHub y mira el código de este, y de otros posts de este hilo! 

Eres nuevo? Descarga el motor Ren’Py para que comiences a hacer tu propia Visual Novel!

  • Visita la web oficial de Ren’Py Presionando Aquí!
  • Link para copiar : https://renpy.org/

Estoy creando un juego pensado especialmente para personas amantes de la Electrónica! Más que un juego típico offline, tendrá la capacidad para que puedas competir contra otras personas!

  • Entra al Gameblog de “ElectroBasics Electronic Quiz!” Presionando Aquí!
  • Link para copiar : https://eeqproject.blogspot.com/

No has entendido algo sobre este post u otros de este mismo hilo? No dudes en comunicarte conmigo! Contactame mediante los comentarios o en mi Telegram personal!


Siguiente post? Lo dejaré a decisión de ustedes en una encuesta! [Disponible hasta el 10 de Marzo a las 00:00 UTC]

La elección que quede en segundo lugar, será el post siguiente al elegido en primer lugar.

Hasta la próxima entrega muchachos!


Navega entre los posts de este hilo!

<< Ir al Post #16 Ir al Post #18 >>

<< Eres nuevo? Click aquí para ir al Post #1 >>


CharlieFuu69 Creations! – ElectroBasicsYT

  • Tutorial
  • Programación | Programas, aplicaciones | Otros
6 Comentarios
  1. peter
    peter 1 año

    Countdown….👍👍

    1+
  2. Maqui
    Maqui 1 año

    Implementación de descargas In-Game usando el módulo “WGET” en Ren’Py.

    1+

Contesta

CONTACTANOS

Esta es su red social de tecnología para compartir tus ideas y proyectos .Puedes enviarnos un correo si tienes dudas.Nos vemos

Enviando

Nuevo informe

Cerrar

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?

Create Account