Programando Juegos VN con Ren’Py! #12

Hola a todos gente! Hoy nos lanzamos hacia una exploración, sobre uno de los scripts que nos crea Ren’Py en el momento de generar por primera vez nuestro proyecto! Si, con esto me refiero al script “screens.rpy”, el cual se encarga de colocar cada objeto de la interfaz, en el lugar que le corresponde.
Cabe señalar que este post no intentará profundizar demasiado en la estructura del código, pero te dará la idea de cómo funciona cada parte de este script. Más adelante profundizaré para crear y personalizar objetos existentes en este archivo.
Vamos a la carga muchachos! Aquí empieza un nuevo post en el hilo!

1. CONOCIENDO AL SCRIPT RESPONSABLE DE LA INTERFAZ DEL JUEGO!

Ren’Py cuenta con algunos lenguajes de IDE con los que intenta comprender las cosas que le ordenas mediante la escritura del código. En este hilo, hubo un momento en que le dimos una pincelada al “Lenguaje de Animación y Transformación” (ATL). Esta oportunidad nos tocará ver el “Lenguaje de Pantallas” (Screen Language) la cual crea capas dentro de tu juego de una forma distinta que la capa principal (la capa donde escribes tu historia).
A continuación, te mostraré las partes más fundamentales de este script, donde explicaré cual es la utilidad de cada parte escrita.

NOTA : Es aconsejable que si sigues el hilo, abras tu editor de texto y vayas viendo el archivo “screens.rpy”, al mismo tiempo que voy explicando en el post, ya que así lo entenderás mejor.

A) init offset = Valor :

La función que cumple esta línea de código, es indicar a Ren’Py la prioridad en que se inicializan los objetos presentes en este archivo. init es el responsable de cargar todos los objetos asignados a el, en el proceso de arranque del juego y offset fija la prioridad en la que se van a inicializar determinados objetos (La prioridad tiene un rango de –999 a 999).

B) screen say(parámetros) :

Esta pantalla, es la responsable de mostrar los diálogos de la novela al jugador. Esta screen recoje dos parámetros : who y what. Desglosemos la utilidad de estos parámetros :

who es el parámetro que recibe el nombre del personaje hablante en la historia (Quién está hablando?).
what es el parámetro que recibe la cadena de texto, con lo que está hablando ese personaje, o lo que está hablando el narrador de la novela (Qué es lo que habla?).

Les voy a mostrar el como se ve en la pantalla de juego este sector del código, mientras el jugador está leyendo la historia :

[Screenshot extracto de un diálogo en el proyecto “Tears : The First Love!”]

C) screen input(parámetro) :

Esta pantalla se relaciona con la función renpy.input() cuando por ejemplo, al jugador se le solicita el Nickname o un nombre para su personaje.
El parámetro prompt, es la cadena de texto que muestra la función anteriormente mencionada, como por ejemplo :

$ player_name = renpy.input(“Hola jugador! Como te llamas?”)

Por otra parte, tenemos a input id “input”, que es el responsable de recibir todo el texto que el jugador escribe con su teclado.

Esta pantalla podemos encontrarla de esta forma en el juego :

[Screenshot Solicitud de Nombre de Personaje en el Proyecto TTFL!]

#OffTopic : El hola mundo, todo un clásico xD.

En mi juego, he modificado esa screen para que quede centrada en la pantalla, pero por defecto (al generar un proyecto), aparece en el mismo lugar que se muestran los diálogos de la novela (área inferior). Más adelante les enseñaré a customizar mejor esta screen, ya que primero debemos terminar con este post introductorio al Lenguaje de Pantallas.

D) screen choice(parámetro) :

Esta pantalla se encarga de hacer visible las tomas de decisiones dentro del juego, en el caso que se escriba un menú en el código. Mediante el parámetro ítems, se reciben las alternativas de la toma de decisiones que se hicieron en el código.

Las tomas de decisiones, como se explicó en un post pasado de este mismo hilo, se hacen dentro de un bloque menu, y al hacerlo, la screen choice muestra estas alternativas de esta forma :

[Screenshot de una de las primeras Tomas de Decisiones del Proyecto TTFL!]

E) screen quick_menu :

Esta pantalla es la responsable de mostrar los botones de acceso al menú, en el momento que estás jugando. Este menú se conoce como el “Menú Rápido” ya que muestra solo los menús más relevantes.

En mi juego, he modificado los botones (textbuttons) para nuevas funciones que he asignado, pero se ven exactamente en la misma área que como se muestra en la siguiente imagen :

[Screenshot extracto de un diálogo en el proyecto “Tears : The First Love!”]

Si por alguna razón, quieres ocultar el menú rápido en algún momento de la historia, solo debes añadir el siguiente flag en la parte del código de tu historia donde deseas que se haga invisible y no funcione :

$ quick_menu = False

Y si quieres volver a mostrarla :

$ quick_menu = True

F) screen navigation :

Esta pantalla es la pantalla maestra del menú de juego general. La visibilidad momentánea de los botones del menú, se controlan mediante condiciones. Por ejemplo, si accedes a alguna opción del menú desde el menú principal, el botón “Volver” y el botón “Iniciar partida” estarán visibles, pero si accedes al menú, estando dentro de la novela, el botón “Iniciar Partida” no estará ahí, y en reemplazo de ella (else), se mostrarán los botones “Historial” y “Guardar”.

De momento he customizado tanto mi juego, que varios botones del menú han cambiado, pero de igual modo, se ven como en esta imagen :

[Screenshot del Menú Principal de “Tears : The First Love!”]

G) screen main_menu :

Esta pantalla es llamada para el Menú Principal. Utiliza a la pantalla navigation dentro de sí misma, mediante use. Desde este punto se muestra por defecto, el nombre del juego y su versión, en el área inferior de la pantalla.
Desde este punto, se recibe la ruta del background que se muestra en el Menú Principal, utilizando :

add gui.main_menu_background

H) screen about :

Esta pantalla se encarga de mostrar los créditos de tu juego que puedes añadir desde el script “options.rpy”, en la variable “gui.about”.
Si quieres editar de forma momentánea los créditos, puedes borrar todo lo que está al interior de las cadenas de texto en los label y text existentes dentro de esta pantalla.

Yo he modificado esta pantalla, y he agregado los créditos de mi juego como aparece en la siguiente imagen :

[Screenshot Créditos y Disclaim de CharlieFuu69 Creations! en el proyecto TTFL!]

Tranquilo querido(a) visitante! Me aseguraré de enseñarles en algún momento, a modificar todo esto!
Prácticamente les enseñaré a hacer cada cosa que he hecho en mi juego, así que mantengan la calma y no se demotiven con el tema del diseño, que ya les traeré software para editar imágenes y todo eso jsjsjs.

I) screen preferences :

Esta pantalla muestra las configuraciones del juego, tales como velocidad del texto, control de volumen de los 3 canales de audio, y algunos ajustes a nivel de pantalla.
Con el tiempo se pueden ir agregando configuraciones a esta pantalla, o bien, si se siente que el juego no necesita tal opción de configuración, se quita de esta parte del código.

J) screen history :

Esta pantalla muestra los diálogos del juego en el menú “Historial”. Los diálogos que se muestran en esta pantalla, son los que el jugador ya leyó en la novela, por lo que si el jugador hizo click en el mouse, o tocó la pantalla por accidente, podrá ver el diálogo que se saltó.

Esta pantalla no la he modificado demasiado, más que por su título, ya que le puse “BackLog” (Suena más bonito xD), y se ve de la siguiente forma :

[Screenshot Menú BackLog del proyecto TTFL!]

K) screen help :

La verdad he personalizado tanto esta pantalla que ya terminó perdiendo su forma xD, aunque de igual modo les explicaré.

Esta pantalla muestra la ayuda al jugador en cuanto a los Keybindings o atajos de un teclado, mouse o de un mando conectado, con los que el jugador puede acceder a diversas opciones del menú, sin hacer demasiados esfuerzos.
Esta pantalla llama a otras 3 pantallas contiguas que contienen la ayuda para jugadores.

L) screen confirm(parámetros) :

Esta pantalla muestra mensajes de confirmación ya predefinidas al jugador, tales como si quieres sobreescribir una partida, quieres ir al menú principal sin guardar, o bien, si estás seguro de salir del juego.

El parámetro message recibe el texto que conforma el mensaje de confirmación como los que se nombraron antes, y se ven algo así en pantalla :

[Screenshot popup inerte de confirmación]

M) screen nvl(parámetros) :

Dentro de una novela visual, podemos mostrar los diálogos de la historia de dos formas : Utilizando el modo ADV (Adventure) o el modo NVL (Pantalla Completa/Lectura).
La diferencia entre el modo ADV y el modo NVL, es que el modo ADV, muestra los diálogos bloque a bloque (en el área inferior de la pantalla), y el modo NVL muestra los diálogos casi de la misma forma que el menú “Historial”.

Te pondré una imagen de ejemplo, donde he aprovechado el modo NVL para crear un chat en un móvil (Aunque tuve que redimensionar el modo NVL para que me quedara perfecto) :

[Screenshot extracto del Chat entre el Protagonista y Akane, uno de los personajes más influyentes en “Tears : The First Love!”]

Por defecto en la historia, los diálogos se mostrarán en modo ADV, por lo que si quieres cambiar a modo NVL en alguna parte de la historia, debes escribir lo siguiente :

window hide
nvl show dissolve

Esto hará el relevo entre dos screens del script que estamos hablando en este post. Se relevará la screen say, por la screen nvl.
Ahora para regresar de modo NVL a modo ADV, hacemos el mismo proceso pero a la inversa, escribiendo :

nvl hide dissolve
window show

Y si quieres limpiar la cola de los diálogos en modo NVL, pues escribimos :

nvl clear

Bien muchachos. Aquí concluye la exploración (no exhaustiva) en el script “screens.rpy”.
Principalmente en este post tenía planeado hacerte entender un poco de qué sucede dentro de este script, ya que a la primera nadie lo entiende fácilmente.

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.

Entra a la web de Ren’Py y descarga la última versión del motor!

Visita la web oficial de Ren’Py Presionando Aquí!

Sip, como lo viste más arriba, también estoy desarrollando una Novela Visual! Solo bastan unos pocos días para que cumpla 1 año desarrollando este proyecto!

Visita “Tears : The First Love! Gameblog” Presionando Aquí!

No has entendido demasiado de qué va todo esto? Te invito a comentar tu duda en el área de comentarios, o bien, contáctame en mis redes sociales!

Telegram : Haz click para entrar al Chat!
WhatsApp : Haz click para entrar al Chat!

Próximo post? Nos lanzaremos en la aventura de generar nuestra primera compilación del juego, en el caso de que quieras probar de curioso el como funcionan las compilaciones en Ren’Py! Les enseñaré a compilar para Windows OS (Paquete RAR/ZIP) y Android OS (Paquete APK).

Bien muchachos! Sigan haciendo su historia que yo continuaré con la mía xD. Nos vemos en el siguiente post. Adios!!!!

Navega entre los posts de este hilo!

<< Ir al Post #11 | Ir al Post #13 >>

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

ElectroBasicsYT – CharlieFuu69 Creations!