Programando Juegos VN con Ren’Py! #16

Hola a todos!
El día de hoy les enseñaré a integrar una característica que puede inducir algo de adrenalina a cualquier jugador.
Hoy verán una manera de integrar un “Countdown” o Cuenta Regresiva a un Menú de Elecciones dentro de un juego Ren’Py, utilizando más funcionalidades del Lenguaje de Screens (Funciones que no señalé en el post anterior).
Ahora es el momento en donde arrancas el editor de texto y te pones a picar código :v

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

1. COUNTDOWN PARA MENÚS ELECTIVOS

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

Los menús electivos, son puntos del juego en donde el jugador debe tomar una decisión para que la historia continúe su curso. Por lo común, los menús electivos no limitan el tiempo de respuesta del jugador, pero he aquí donde la idea principal de este post se hace presente. Podemos agregar un Countdown que ponga al jugador en modo de adrenalina.
En una Novela Visual, recomiendo el uso de Countdowns SOLO en menús electivos que sean críticos para el desenvolvimiento de la historia, pero si estás utilizando a Ren’Py para hacer un juego que no posee características de Novela Visual, como por ejemplo, un juego de preguntas, puede que sea apropiado el utilizar Countdowns en todos los menús que quieras.

Itinerario de este tutorial :

Uso del Lenguaje de Screens.
Uso de la propiedad bar para generar barras.
Uso de la función de Ren’Py AnimatedValue() para la animación de la barra.
Modificación a la Screen encargada de mostrar el Menú electivo.

2. TIME TO WORK! : CREANDO UN COUNTDOWN MEDIANTE EL LENGUAJE DE SCREENS

En esta oportunidad, trabajaremos en un Countdown visible en forma de barra, en donde esta barra se irá vaciando hasta que el tiempo finalice.
Para empezar a crear la barra, mira el siguiente sub-item.

2.1 CREAR UNA SCREEN EXCLUSIVAMENTE PARA EL COUNTDOWN :

El propósito de crear una screen especialmente para el Countdown, es para utilizar la cuenta regresiva más de una vez, y de una forma que mantenga la estructura del código sin necesidad de optimizarlo en un momento futuro.
Ahora, para familiarizarnos con las barras de Ren’Py, les mostraré un Screenshot con las barras que puede generar el motor :

Estas barras son elementos de UI basados en imágenes, en las que se pueden representar de dos formas :

bar (Barra Horizontal) : Esta barra se basa en una pareja de imágenes almacenadas en la ruta /game/gui/bar. Las barras horizontales usan al archivo right.png como la base o fondo de la barra, mientras que left.png es la imagen que muestra el contenido de la barra, o mejor dicho, la imagen que es renderizada.
vbar (Barra Vertical) : Esta barra a diferencia de la anterior, se muestra de forma vertical, y ocupa también una pareja de imágenes almacenadas en la ruta /game/gui/bar.
El fondo o base de la barra se toma desde el archivo bottom.png y el contenido de la barra se toma desde el archivo top.png.

Con eso ya contemplado, podemos avanzar al paso a paso para crear la estructura del código, y comprender su funcionamiento.

Paso 1 : Crear la Screen

Para este tutorial, el nombre que le daremos a nuestra screen será Countdown_Displayer :

Recuerda que puedes dar el nombre que quieras a tu screen, siempre y cuando ese nombre no sea igual al de una screen existente.

Paso 2 : Preparar un vbox

El siguiente paso será preparar el área que va a ocupar el Countdown dentro de la pantalla. Utilizaremos un vbox para señalar la posición del Countdown dentro de la pantalla, y el espacio que ocupará en ella.
Puesto que en esta ocasión ocuparemos barras para señalar el tiempo restante, vamos a detallar 3 cosas en el vbox : la alineación al eje X con xalign, la alineación al eje Y con yalign, y el tamaño horizontal que ocupará la barra, con xsize. Mira el ejemplo :

Como pudimos ver, el valor de xsize es de 740 (int), lo que quiere decir que la barra que señala el tiempo restante para responder, tendrá una longitud total de 740 píxeles dentro de la pantalla.

Paso 3 : Uso de bar y la función AnimatedValue() de Ren’Py

Para crear el Countdown, utilizaremos una barra que señale el tiempo restante para responder. La función AnimatedValue() sirve para animar el movimiento de la barra en el momento en que esté indicando el tiempo restante.
Te invito a observar la estructura del código para poner en funcionamiento a la barra :

La declaración bar debe poseer un valor y un rango para ser mostrado, pero como utilizamos a la función AnimatedValue(), el value y range de esta barra será dado por los parámetros señalados en la función misma.
La estructura de la función AnimatedValue() es la siguiente :

old_value = [Valor flotante] : Señala el valor inicial de la barra. Un valor flotante de 1.0 señalará que al iniciar el conteo regresivo, la barra estará llena.
value = [Valor flotante] : Señala el valor final de la barra. Un valor de 0.0 señala que la barra estará vacía al finalizar el tiempo
range = [Valor flotante/Entero] : Señala el valor máximo de la barra en coma flotante. En algunos casos (no en este), el valor puede ser de coma flotante (float) o bien, puede ser un valor entero (int).
delay = [Valor flotante] : Señala el tiempo en que la barra pasará del estado old_value a value, renderizando progresivamente a la barra hasta vaciarla. El valor está dado en coma flotante y representa el tiempo del Countdown dado en segundos.

Bien. Hasta ahora con eso, nuestra barra funcionará, pero no prestará utilidad alguna en el momento en que el tiempo se acabe. Observa el paso 4.

Paso 4 : Definiendo una acción mediante un timer

Para que el código tenga un efecto en el juego, debemos definir la acción que tendrá el Countdown para cuando el tiempo llegue a cero.
Para esto, al mismo tiempo que la barra se está animando, podemos lanzar un timer que para cuando llegue a cero, transfiera el control del juego hacia un label. Mira el ejemplo :

En el momento en que esta screen sea llamada, la cuenta regresiva dará inicio, y para cuándo llegue a cero, el control del juego se transferirá a un label en específico. Ahora te mostraré la estructura del timer :

timer [Valor flotante] : Mide el tiempo dado en su valor flotante. El valor flotante está dado en segundos, y en lo posible, debe ser el mismo tiempo que se señaló en la función AnimatedValue().
action : Cuando el timer llega a cero, se ejecutará una acción determinada.
Hide(“screen a ocultar”) : Esta función oculta automáticamente a la Screen de cuenta regresiva para cuando el tiempo finalice.
Jump(“label de destino”) : Jump() es una función que recibe como parámetro o argumento, el label hacia donde se transferirá el control del juego. El label se señala dentro de esta función mediante strings. Cuando el timer llegue a cero, saltará hacia el label señalado en Jump().

La función Hide() y Jump() mostradas en el ejemplo anterior, deben agruparse dentro de corchetes para un funcionamiento perfecto.

Hasta este punto el timer funcionará correctamente, excepto por una cosa. El código anterior oculta a la screen cuando el tiempo del timer se acaba, pero aunque el jugador elija una alternativa, el timer y la screen Countdown_Displayer continuarán funcionando hasta que el tiempo se haya acabado.
Para que el Countdown deje de operar en el momento en que el jugador elija una alternativa, debemos modificar en cantidades mínimas a la screen encargada de mostrar el menú electivo. Ve al siguiente sub-item.

2.2 MODIFICACIÓN A LA SCREEN CHOICE :

La screen choice está dentro del script “screens.rpy”, y es la encargada de mostrar los menús electivos al jugador.
Principalmente debes encontrarla dentro del script para modificarla respectivamente.

Paso 1 : Encontrar la línea de acción

La screen choice ejecuta una acción dependiendo de qué alternativa eligió el jugador en una toma de decisiones.
Busca esta línea de código en screens.rpy :

Paso 2 : Modificar la acción del textbutton

Este es el paso importante, ya que aquí es donde se procederá a ocultar la screen Countdown_Displayer cuando el jugador elija una alternativa.
La línea que viste en el paso anterior, debe quedar de esta forma :

Al ser accionado el textbutton, el jugador podrá elegir su alternativa en el menú electivo, y al mismo tiempo, hará de que el Countdown deje de operar hasta una nueva llamada.

2.3 LLAMAR AL COUNTDOWN CUANDO APAREZCA UN MENÚ ELECTIVO

Si no aplicamos la cuenta regresiva en todos los menús electivos, entonces lógicamente tendremos que accionar manualmente el Countdown. Ve al script donde escribes la historia para entender cómo usar el Countdown.

Paso 1 : Preparar un menú electivo

Como he dicho muchas veces, los menús van dentro de la historia. ¿Donde va la historia? Siempre dentro de label start. Ahora verás un ejemplo de una toma de decisiones para aplicar cuenta regresiva.

Bien. Ese es un ejemplo de menú electivo dentro de los diálogos de un juego Ren’Py.
El label llamado timeout_label es aquel que señalamos en el momento que hicimos el Countdown, es decir, el label que recibirá el control del juego después que el tiempo haya acabado.

Paso 2 : Llamar al Countdown

Para llamar al Countdown, debemos usar show screen y el nombre de la screen que contiene la cuenta regresiva.
Todo esto debemos hacerlo justo antes de declarar el menú electivo, de la siguiente forma :

Con esto ya hecho, la cuenta regresiva funcionará dentro de ese menú electivo. No será necesario invocar al hide screen puesto que ya definimos los puntos donde la screen se oculta automáticamente.

3. ¿COMO HACER QUE NUESTRO COUNTDOWN SEA CONFIGURABLE Y REUTILIZABLE?

Sinceramente este es el ítem más satisfactorio de este post. Digo, porque el Countdown que les enseñé hasta ahora, no es configurable y solo puede ser usado 1 vez. Más que nada les enseñé todo eso para que entendieran el fundamento y funcionamiento básico del mismo.

En fin, ¿recuerdan que en el post anterior les enseñé que las Screens pueden recibir valores mediante parámetros, al igual que una función de Python? Exacto! Podemos hacer que nuestro Countdown sea configurable y reutilizable en muchos menús electivos, seleccionando el tiempo de la cuenta regresiva y el label de destino a nuestro antojo!
Para que esto sea posible, podemos usar los parámetros para enviar datos a la screen de nuestra cuenta regresiva. Sigue leyendo por favor :3

Paso 1 : Establecer los parámetros para recibir datos

Recordemos que los parámetros se escriben dentro de los paréntesis de las Screens.

El código que verás, es el que ya teníamos creado más arriba, solo que con unas cuantas modificaciones. Pon absoluta atención para detectar esas modificaciones :

Como pudiste ver, ahora se agregaron dos parámetros (puedes elegir el nombre que desees para esos parámetros). Cada parámetro recibirá información diferente en el momento que sea llamada la screen.

time_left (Parámetro) : Recibe el tiempo que tendrá el Countdown. El valor debe ser expresado en segundos como valor flotante (Ejemplo : 20.0 son 20 segundos).
label_dest (Parámetro) : Recibe mediante una string, el label hacia donde se transferirá el control cuando el tiempo acabe.

Ahora, para entender cómo configurar la cuenta regresiva, volveremos a utilizar el ejemplo del menú electivo. Vamos al siguiente paso.

Paso 2 : Configurando el tiempo y label de destino del Countdown

Para configurar la Screen, debes llamarla justo antes de un menú electivo y señalar los datos requeridos por los parámetros ya explicados. Mira el ejemplo de código.

Así se verá la barra cuando pongamos el código en acción :

Esto sucederá si hacemos click en una de las alternativas antes de que la barra se vacíe por completo :

Y si nos quedamos sin tiempo, pues sucederá esto :

Excelente. Ahora este Countdown podrá ser configurable en cada menú electivo.
Puedes llamar a la cuenta regresiva en cada menú electivo, ajustando el tiempo y el label de destino sin la necesidad de modificar la screen del Countdown! Maravilloso, ¿no lo crees?

#OffTopic : ¿Se puede saber cuántas veces dije la palabra “Countdown” en este post? :V

Código RPY de este tutorial (GitHub):

Carpeta DM_Post_16 [GitHub]

Oficialmente clavo la bandera en este punto, señalando que hasta acá llega el post del día de hoy. Recuerda que si aún tienes dudas, no dudes en comentar o en contactarme!

NOTA : Es posible que la App Makers no pueda redireccionar correctamente a un link, o puede que no esté preparado para descargar archivos. Intenta abrir los siguientes links en un navegador como Google Chrome.

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! Sinceramente, a este proyecto le estoy dedicando mucho más de mi ímpetu que mi primer proyecto (TTFL!).

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 estos chats!

Telegram : Haz click para entrar al Chat!
Link para copiar : https://t.me/CharlieFuu69/

Siguiente post? Haré la parte 2/2 de los Countdowns en Menús electivos, solo que ahora mostraremos el tiempo también de forma numérica junto a la barra de tiempo. Esto, a diferencia de este post, requerirá un poco de Python puro ya que en sintaxis de Ren’Py no es posible construir un contador numérico.
Hasta la próxima entrega muchachos!

Navega entre los posts de este hilo!

<< Ir al Post #15 | Ir al Post #17 >>

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

CharlieFuu69 Creations! – ElectroBasicsYT