Programando Juegos VN con Ren’Py! #9

Qué tal todos? Espero que estén bien y preparados para empezar con este post ya que nos adentraremos en el área de personalizar ciertas cosas en la interfaz de nuestra Novela Visual. Abre tu editor de texto, y piquemos código!

1. QUÉ SON LOS OBJETOS DE TEXTO EN EL ENTORNO DE REN’PY?

[Screenshot de muestra del Proyecto TTFL en CharlieFuu69 Creations!]

Los “Objetos de Texto”, son todos aquellos textos que son visibles para el jugador, tales como TextButtons (Botones de texto), cuadro de Diálogos. Estos son displayables/visualizables que podemos llamar y/o ocupar desde la capa de juego (label).
El texto puede ser personalizable en cuanto a su tipografía, tamaño, estilos y colores para ser mostrados en la pantalla. Como lo tratamos en una oportunidad anterior, los textos visibles son únicamente escritos como cadenas (Usando las comillas).

2. USANDO LOS OBJETOS DISPLAYABLES “TEXT”

[Screenshot de ejemplo en el editor de Atom, para este ítem]

Hay una forma de mostrar otro objeto de texto que no sea el cuadro de diálogos, un objeto que en el entorno de Ren’Py recibe el nombre de text, de la cual se puede configurar su ubicación en la pantalla dentro de la misma capa de juego (label), usando las Transformaciones de Posición que les enseñé en una oportunidad.
En lo personal, he usado objetos de texto dentro de la capa de juego para separar mi historia en capítulos. Ustedes pueden usarlos en lo que se les antoje (O mejor dicho, a lo que se le antoje a tu historia).

DATO : Todas las propiedades que intentan mostrar texto en la pantalla, se basan en el objeto displayable Text() que va integrado en Ren’Py.

Ahora les enseñaré a mostrar este displayable de texto en pantalla. Este displayable, se llama igual que como llamas a un Sprite o a una imagen dentro del juego, solo que en este caso, será texto visible para el jugador.

Para mostrar texto en pantalla, debes hacer lo siguiente :

show text “Hola mundo!…” at truecenter

Desglosado sería de la siguiente forma :

show : Declaración que llama a un displayable a la pantalla.
text : La propiedad/displayable que toma como argumento, una cadena de texto.
“Hola mundo!…” : La cadena de texto que mostraremos.
at : Propiedad que toma una Transformación de Posición.
truecenter : La Transformación que ubica al objeto en el centro de la pantalla.

Este texto lo mostraremos en una escena oscura (por cierto, la imagen ya debe estar definida), por lo que el código nos quedará así :

scene bg_black with dissolve
show text “Hola mundo!…” at truecenter
pause

Si arrancamos el juego y llegamos a esa parte del código, se nos verá así :

3. COMO ESTILIZAR EL TEXTO DE UNA CADENA?

[Screenshot de ejemplo en el editor de Atom, para este ítem]

Acá ya nos meteremos en algo un poco más peliagudo por lo que requiere de suficiente atención para entender como funciona.

Esto es algo que podemos usar como decorativo textual, o bien, para destacar ciertos fragmentos del texto que mostraremos en pantalla.
Un estilo de texto insertado dentro de la cadena, debe escribirse como un Tag (Etiqueta), para ello, el estilo se encierra en llaves (Los símbolos { y }) tanto al inicio del texto que queremos estilizar, como también al final.

A continuación les mostraré una lista con los estilos más usados y que puedes poner en práctica dentro de una cadena de texto :

{i} {/i} : Texto en Cursiva (Italic).
{b} {/b} : Texto en Negrita (Black).
{s} {/s} : Texto tachado.
{u} {/u} : Texto subrayado.
{p} : Este Tag rompe el párrafo de texto en donde sea colocado, y el resto del texto se muestra cuando el jugador haga click. En el caso de los objetos text, esto solo romperá el párrafo.
{color=Hexadecimal} {/color} : Texto coloreado. El color se escribe comunmente en Hexadecimal.
{a=jump: Nombre del label} {/a} : Texto que al ser tocado, hará un salto hacia otro label.
{a=Enlace URL} {/a} : Texto que al ser tocado, abrirá esa URL en el navegador web.
{alpha=Número] {/alpha} : Texto con la opacidad modificada. Un “alpha” de 0.0 hará que el texto sea invisible (0{f42c5ee42375d02df15b6b482cb64e8bf5f6ba0a6b564452185dbfa46b517e9e} de opacidad) y en 1.0 el texto será visible (100{f42c5ee42375d02df15b6b482cb64e8bf5f6ba0a6b564452185dbfa46b517e9e} de opacidad).
{font= Ubicación del archivo de fuentes TTF} {/font} :Texto con otra tipografía o fuente distinta a la de la interfaz. Debes tener un archivo TTF dentro de la carpeta “game” y escribir la ruta del archivo, justo después de “font=”.

Les daré un ejemplo de como usar los estilos de la lista, dentro de una cadena de texto :

“{b}este texto está en Negrita{/b}, {i}Este texto está en Cursiva{/i}, {u}este texto está subrayado{/u}, {s}este texto, está tachado{/s}, {color=#00FF00}este texto, está coloreado de verde{/color}, {a=https://ttfl-gameblog.blogspot.com/}y este texto te dirigirá hacia mi blog del Proyecto TTFL{/a}.”

Y esta cadena de texto simple (usada en el cuadro de diálogos), se verá así en el código :

Puede ser de mucha utilidad el usar el Tag “a” ya que si el jugador presiona ese texto, puede saltar a otro label del código, o si le colocas una URL, podrá entrar a esa URL desde el navegador web, que puede ser una herramienta para que los jugadores vayan al sitio web del juego. Con esto pueden estilizar ciertas palabras en los diálogos, o en cadenas de objetos text.

4. CARACTERES DE ESCAPES DE TEXTO?

[OBLIGATORIO ver este Screenshot de ejemplo, ya que el escribir escapes en el post, creó falsos positivos en la escritura del mismo y los eliminó xD]

Los caracteres de escape, sirven principalmente para evitar que el motor de Ren’Py malinterprete ciertos símbolos como parte de la sintaxis del entorno.

A continuación, les mostraré una lista con los caracteres de escape que más se usan en el desarrollo de una Novela Visual :

“ (Backslash + Comilla doble) : Toda cadena de texto, se abre y se cierra usando comillas dobles, pero si queremos mostrar un texto en comillas sin que Ren’Py lea esa comilla como el final de la cadena de texto, se agrega el “.
‘ (Backslash + Comilla invertida) : Una cadena de texto tambien puede escribirse entre comillas invertidas, por lo que si no queremos que suceda lo que dije en el escape de arriba, usar este escape es una buena opción.
(Backslash dos veces) : Para mostrar un Backslash en el texto visible sin que nos tire error, escribimos dos veces el Backslash.
[[ (Corchete izquierdo dos veces) : Si queremos encerrar un texto en corchetes, sin que Ren’Py lo detecte como una interpolación, debemos escribir en el inicio de ese texto, los dos corchetes.
n (Backslash + n) : Este escape rompe el párrafo en donde sea indicado. Actualmente este escape funciona sin problemas tanto en Windows como en Linux.

Les daré un ejemplo donde usaré algunos escapes de la lista dentro de una cadena de texto :

““Este texto está encerrado en comillas dobles“, voy a colocar una barra invertida, [[este texto está encerrado en corchetes], n y aquí rompí el párrafo.”

Y esta cadena de texto simple (usada en el cuadro de diálogos), se verá así al arrancar el juego :

5. COMO CREAR E INTERPOLAR UNA VARIABLE EN UNA CADENA DE TEXTO?

[Screenshot de ejemplo en el editor de Atom, para este ítem]

Primero que todo, debemos tener en cuenta que si queremos interpolar una variable, y que se haga visible como texto, debe ser una variable con un valor numérico o que lleve texto. Las variables que usamos para crear rutas (Variables con estado lógico/booleano) no nos sirve porque no nos muestra un valor numérico u otra cadena de texto como el Nickname de Jugador.
En los primeros posts de este hilo, les enseñé a crear una variable que guardara el Nickname de Jugador, de la que a esa variable, le asignamos la etiqueta “player_name“. Esa etiqueta puede ser interpolada a la cadena de texto ya que contiene una cadena con el nombre del jugador.

Para interpolar una variable en una cadena de texto, debemos encerrar la etiqueta de esa variable en corchetes de la siguiente forma :

[player_name]

Esa etiqueta contiene el Nickname de jugador, y la podemos interpolar en los diálogos o en un objeto text. Por ejemplo escribiremos esta línea de diálogo :

“Tu Nickname de jugador es : [player_name].”

De la cual, si arrancamos el juego, interpolará el nombre del jugador que escribimos (En mi caso, me llamé Charlie) :

Más adelante trataremos más a fondo el asunto de las variables para que puedan agregar más funciones a sus juegos… Nah, que importa, en el siguiente post, les enseñaré como trabajar con variables en Ren’Py. Les aseguro que les encantará esto xD.

Y bien, declaro que el Post #9, está oficialmente terminado!. Si aún te quedan dudas y crees que me faltó explicar, no dudes en comunicarte conmigo!.

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!

Descarga los recursos de Ren’Py Presionando Aquí!

Visita el Gameblog de mi Novela Visual que aún está en desarrollo. Hace unas horas de subir este post, subí un reporte estadístico con la cantidad de palabras que he escrito y más!

Accede a “Tears : The First Love!” Presionando Aquí!

Aún tienes dudas sobre este post?. Háblame al interno en Telegram!

Telegram : Haz click para entrar al Chat!

Siguiente post? Si señor! Trabajaremos con Declaración y manejo de Variables como dios manda! Es seguro que tu creatividad le dará un buen uso a las variables!.
Es todo. Me despido por hoy, y bueno, los dejo invitados a revisar el Gameblog de mi juego, porque ya estoy comenzando a emitir casi los últimos reportes antes de que el juego sea lanzado! Adiós chicos!

Navega entre los posts de este hilo!

<< Ir al Post #8 | Ir al Post #10 >>

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

ElectroBasicsYT – CharlieFuu69 Creations!