Hola a todos!!!
Estuve un tiempo desaparecido porque estaba poniendo mi vida en orden xD. Debía destinar tiempo para los estudios, y para mis actuales proyectos como ElectroBasics EQ!, pero en fín, en este post hablaré sobre el Uso elemental del Lenguaje de Pantallas (Screen) en Ren’Py.
Enciende tu tostadora, arranca el editor de texto, y manos a la obra!

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

1. “LENGUAJE DE SCREENS (PANTALLAS)”? QUÉ DEMONIOS ES ESTO?

Querido visitante, el “Lenguaje de Screens” es una forma más que tenemos para codificar dentro del entorno que nos proporciona Ren’Py.
En este motor, comúnmente se utilizan las screens para generar elementos visibles en la interfaz de juego.
Todos los objetos como el cuadro de diálogos y el Menú Principal, están montados mediante el Lenguaje de Screens, en la que algunos parámetros se ajustan mediante variables en “gui.rpy”.
El script responsable de portar todos estos objetos visibles de UI en el juego, es el que señalé en el > Post #12 <, el script “screens.rpy”.
Gracias a esta forma de codificar, podemos crear botones de texto y de imágen, texto visible, recuadros, y algún widget adicional que se nos ocurra agregar a la interfaz de juego.

2. TIME TO WORK! : APRENDAMOS A TRABAJAR CON LO FUNDAMENTAL DEL LENGUAJE DE PANTALLAS!

2.1 FUNDAMENTO DE LAS SCREENS (REN’PY VS. PYTHON) :
Las “Screens” son en realidad una forma amigable de crear funciones de Python. Estas son funciones de Python que están especialmente preparadas por Ren’Py para generar objetos de UI.
Te pondré una nueva comparativa. Ahora verás una Screen que posee un cuadro, y dentro de él, hay un elemento de texto :

[Comparativa de una Screen con Sintaxis de Ren’Py y su equivalente de Python]

Ahora que has visto el principio/fundamento de una Screen, podemos pasar al siguiente ítem dónde les enseñaré algunos elementos básicos para trabajar con una Screen en Ren’Py.

2.2 ELEMENTOS USADOS COMUNMENTE EN UNA SCREEN :

Si! Para empezar a familiarizarse con el Lenguaje de Pantallas, les plantearé algunos de los elementos más utilizados que componen la estructura de una Screen.

• Declaración de screen :

Los objetos Screen se crean declarando a la pantalla, seguido del nombre o etiqueta con la que podrás utilizar a la pantalla dentro del código. Ocuparemos como ejemplo, la screen del screenshot del ítem anterior. Tenemos una pantalla a la que llamamos como signal_hello_world. Mediante ese nombre o etiqueta, podemos llamar a la pantalla desde cualquier parte de nuestro código.

Ejemplo :

Ahora te estarás preguntando : “Pero… y por qué lleva esos paréntesis al final de la etiqueta?”.
Más abajo explicaré la utilidad de esos paréntesis.

• add (Declaración) :

La declaración add se utiliza para mostrar imágenes mediante la screen.
La propiedad add recoge mediante una String, la ruta del archivo de imagen que quieres mostrar. Por ejemplo, añadiremos una imagen que está ubicada en la carpeta “images” de nuestro proyecto.

Ejemplo :

Al visualizar la Screen en el juego, esto se verá así :

Como es una imagen de tamaño completo (1280×720), puede cubrir fácilmente los objetos que se mostraron antes de esta Screen.

Ahora puede que te estés preguntando : “Tengo una imagen definida con image. Como puedo utilizarla rápidamente con su etiqueta?”
Simple! En lugar de escribir la ruta del archivo en la String, escribe la etiqueta de la imagen que declaraste!

Ejemplo :

Funcionará de la misma manera que en el ejemplo anterior, solo que hay una pequeña diferencia :
Al tener la imagen previamente declarada en el arranque (bloque init), el motor no necesitará renderizar la imagen en el mismo momento que se llama a la Screen en el código.
Eso significará un menor uso de recursos!

• vbox y hbox (Bloque) :

Estos bloques se utilizan para agrupar y distribuir elementos en la pantalla de tu PC o Móvil.
Dentro de esos bloques también podemos añadir imágenes con add, solo que tienen una cosa en particular. Un bloque vbox distribuirá cada uno de los objetos de su interior de forma vertical, mientras que un bloque hbox los distribuirá de forma horizontal.
A continuación verás ejemplos de uso de vbox y hbox, acompañados de su vista real en la pantalla. Se utilizará de ejemplo el logotipo de Ren’Py repetido 3 veces (imagen de 256×256).

Ejemplo de uso de vbox :

Como vbox distribuye los objetos de su interior de forma vertical, la Screen mostrará los logotipos de Ren’Py de esta forma :

Ejemplo de uso de hbox :

Ahora los logotipos de Ren’Py se distribuirán en la pantalla de forma horizontal :

Excelente! Has aprendido a usar los bloques vbox y hbox de una Screen! Ahora vamos al siguiente ítem!

• text (Declaración) :

Claramente, este objeto está destinado a mostrar texto dentro de una Screen.
Los estilos por defecto que tendrá el texto, serán los que están definidos en “gui.rpy” y a su vez en “screens.rpy”.
Utilizaremos nuevamente como ejemplo a la Screen signal_hello_world para entender mejor el funcionamiento de text.

Ejemplo :

El objeto text mostrará lo que sea señalado posteriormente dentro de sus strings, y se verá algo así :

• spacing [valor] (Propiedad de Estilos) :

La propiedad spacing se utiliza siempre dentro de un vbox o hbox, y su función es hacer que los objetos mostrados con vbox o hbox, mantengan una distancia uniforme entre uno y otro.
La propiedad spacing va acompañado de un valor numérico, el cual señala la distancia entre un objeto y otro en píxeles. Veamos un ejemplo de cómo usarlo.

Ejemplo :

Si señor, declaramos a los objetos igual que antes, solo que ahora spacing hará el trabajo de mantener la distancia entre un objeto y otro (como en la pandemia xD). Así se verán los objetos :

Cada línea de texto posee una separación de 30 píxeles entre uno y otro.

• null height [valor] (Propiedad de Estilo) :

La propiedad null height también separa a objetos dentro de un vbox o hbox, solo que a diferencia de spacing, esta propiedad introduce espacio vacío desde la parte de abajo de un objeto. Esta propiedad solo puede crear 1 espacio a la vez, por lo que si deseas crear espacios vacíos en más objetos, tendrás que usar nuevamente el null height. Mira el ejemplo de uso.

Ejemplo :

Esto se verá de la siguiente forma en la pantalla :

La distancia entre la primera línea y segunda línea de texto, es de 15 píxeles, mientras que entre la segunda línea y la tercera, hay un espacio de 30 píxeles.
Excelente! Ahora aprendiste a usar spacing y null height! Felicitaciones!!!

• textbutton :

Los textbutton son botones de texto que esperarán una acción del jugador para ejecutar cierta acción en el código.
Toma como parámetro único, el texto que mostrará el botón, seguido de la acción que hará el botón al ser pulsado. Usaremos de ejemplo a uno de los botones declarados en screen navigation()

Ejemplo :

Ese botón muestra el menú de ajustes del juego.
La estructura del botón de texto en orden de izquierda a derecha, es la siguiente :

• textbutton : Declaración del botón de texto.
• String : El texto que mostrará el botón.
• action : Señala que el botón actuará en respuesta a la actividad de la pantalla/mouse.
• ShowMenu(‘preferences’) : La acción del botón será abrir la Screen que contiene el menú de ajustes del juego. La Screen se señala dentro de comillas en el interior de ShowMenu.

2.3 ALINEACIÓN/UBICACIÓN DE LOS OBJETOS EN UNA SCREEN :

Si, todo bien hasta ahora pero… notaste de que todos los objetos mostrados en el ejemplo, siempre se alineaban a la esquina superior izquierda de la pantalla?
Exacto, todos los objetos dentro de una Screen se alinean por defecto en la coordenada xpos 0.0 ypos 0.0 de la pantalla.
La única forma de ubicar a los objetos de una Screen, es utilizando el ATL (Animation and Transformation Language) de Ren’Py. Mira el >> Post #6 << para que entiendas lo básico del lenguaje ATL.

Dentro de una Screen podemos señalar la ubicación de un objeto de dos formas posibles : señalando de forma explícita la transformación ATL o bien, declarando una transformación y llamando a la transformación posteriormente. Mira los dos ejemplos.

Ejemplo de ATL explícito en la Screen :

Esto hará que la imagen (objeto) deje de estar alineado a la coordenada xpos 0.0 ypos 0.0 y ahora estará alineado al centro en xalign 0.5 yalign 0.5, viéndose de esta forma en la pantalla :

Ahora utilizaremos el mismo ejemplo, solo que ahora declaremos primero a la transformación y luego señalaremos al objeto en donde ubicarse mediante esa declaración.

Ejemplo de objeto ubicado mediante una declaración de ATL :

Los dos ejemplos se ubicarán de la misma forma en que apareció el último Screenshot, solo que cambia la forma en que definimos la ubicación del objeto.
Ahora, como podemos hacer que un vbox o hbox se ubiquen mediante coordenadas ATL? Veamos!

Ejemplo de ATL Explícito en un vbox :

Ejemplo de vbox alineado mediante una transformación ya declarada :

Si señor! Ahora hemos ubicado a los objetos mediante el uso de ATL! Este item ya podemos considerar como concluido. Continúa leyendo!

3. FORMAS DE LLAMAR A UNA SCREEN DESDE DIVERSOS LUGARES DENTRO DEL CÓDIGO

Si, les enseñé a crear screens básicas, pero aún no les he enseñado a llamarlas. Si no las llamamos, no se mostrarán de ninguna forma y todo ese trabajo hecho no servirá de nada xD. Vamos a ver algunas formas de mostrar una Screen.

3.1 LLAMAR A UNA SCREEN, DENTRO DE LA HISTORIA DE TU JUEGO :

Como hemos visto en una oportunidad anterior, la historia se escribe en el interior de label start, y en los labels las cosas funcionan de una forma distinta.
Tenemos dos formas de llamar a una Screen dentro de un label. Mira a continuación.

• show/hide screen [nombre de la Screen] :

Cuando llamamos a una pantalla de esta forma, la capa de juego (capa maestra) puede continuar recibiendo entradas. El jugador puede seguir haciendo click y la historia seguirá avanzando mientras la Screen se muestra.
Para mostrar la Screen, se utiliza show screen más el nombre de la Screen que quieres mostrar.
Para ocultarla, debes usar hide screen y el nombre de la Screen que quieres ocultar.

Ejemplo :

• call screen [nombre de la screen] :

Esta segunda forma de llamar a una screen dentro del juego, es diferente en un aspecto específico.
Si llamas a una pantalla mediante call screen, la screen que estás llamando tomará prioridad en todo el juego (se pondrá en frente de la capa maestra), lo que quiere decir que la historia no podrá recibir entradas y el jugador no podrá avanzar a menos que interactúe de alguna forma con esta pantalla. Comúnmente la interacción se da mediante botones, y al interactuar, la pantalla se oculta automáticamente sin la necesidad de ocupar hide screen. Mira el ejemplo.

Ejemplo :

3.2 LLAMAR A UNA SCREEN, DENTRO DE OTRA SCREEN :

Si, tal como lo leiste xD. Podemos usar una screen mientras tenemos otra screen mostrándose. La screen llamada, pasará a primer plano en la pantalla (Estará más cerca del jugador pero no en la capa maestra) mientras que la screen de donde fue llamada, pasará a segundo plano, quedando por debajo de la screen que fue llamada.
La forma de llamar a una screen dentro de otra, es utilizando la propiedad use. Mira el ejemplo.

Ejemplo :

Ahora cuando iniciemos el juego, aparecerá la screen que fue llamada, puesto que de ejemplo usamos a la screen main_menu :

Bien. Ha llegado el momento en donde una duda pendiente quedará resuelta. Para qué sirven los parentesis que están al final de la declaración de Screen?
Vamos al siguiente y último item de este post!

4. USANDO PARÁMETROS EN UNA SCREEN

Recuerdas cuando señalé la comparación entre una screen (Ren’Py) con una función de Python?
Las funciones de Python emplean parámetros con el fin de recibir datos en el momento en que la función sea llamada. Los parámetros, son aquellos valores que encontramos en el interior de los paréntesis. De forma notable, no hay mucha diferencia en como una función de Python y una Screen ocupa los parámetros.
A continuación, te enseñaré a utilizar parámetros para introducir datos en una screen!

Ejemplo :

Cuando se hizo la screen, este debía recibir dos parámetros. Puedes incluir cuantos parámetros desees ocupar para que tu screen reciba información.

Ahora llamaremos a la screen desde el interior de un label start. Sigue el ejemplo.

Ejemplo :

Insisto, si no deseas mostrar ningún dato, deja las strings vacías (comillas sin nada) dentro de los paréntesis, ya que si dejas a la screen sin parámetros que tomar, Ren’Py arrojará un error sin excepción alguna.
La screen al ser llamada con los parámetros, mostrará los datos de la forma esperada :

Ufff… Declaro al post oficialmente terminado! Recuerda que si continúas con dudas, puedes señalarlo en los comentarios, o bien, comunicarte conmigo mediante mis redes sociales adjuntadas más abajo!

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/

Hace unas cuantas semanas se dió inicio oficial al desarrollo de “ElectroBasics Electronic Quiz!”, un juego pensado especialmente para personas amantes de la Electrónica!

• Entra al Gameblog de “ElectroBasics Electronic Quiz!” Presionando Aquí!
• Link para copiar : https://eqproject.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/

Próximo post? Les enseñaré una forma de crear menús de elección pero con algo diferente a lo que alguna vez les enseñé. La particularidad de este menú de elección, es de que tendrá un Countdown o Cuenta Regresiva!!!
Si el tiempo se acaba, el juego puede actuar de una u otra forma!

Es todo muchachos! Hasta la próxima entrega!

Navega entre los posts de este hilo!

<< Ir al Post #14 | Ir al Post #16 >>

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

CharlieFuu69 Creations! – ElectroBasicsYT

• Tipo de Publicación:: Tutorial
• Programación | Programas, aplicaciones

Publicación by ElectroBasicsYT is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 Internacional

Reportar