Bueno muchachos, ya estamos llegando al punto donde comenzaremos a dar color a nuestra Visual Novel, agregando los paisajes en los que se ambienta la historia, y agregando los personajes hablantes!!!. Creo que esta es una de las cosas más sencillas que debemos hacer en el código. Sigan leyendo camaradas!!!.

1. AÑADIR BACKGROUNDS (ESCENARIOS) EN EL JUEGO

Principalmente debemos arrancar el launcher y abrir el editor de texto como les enseñé en el >>Post Anterior<<.

Ahora empezaremos con el Paso a Paso, donde les explicaré el como organizar y registrar Backgrounds en nuestro código :

[Screenshot Paso 1]

Paso 1 : Recuerdan la carpeta “images” de la que hablamos en el post pasado?. Esa carpeta es accesible desde el inicio del launcher, en el área que pone “Abrir Carpeta”. Dentro de esa carpeta pegaremos las imágenes que usaremos como escenarios. En mi caso, agregué una imagen que se llama “street.jpg” (Significa “Calle”), aunque les recomiendo usar imágenes .png y .webp ya que son de mejor calidad.

ADVERTENCIA : Recuerdas que cuando hiciste el proyecto por primera vez, Ren’Py te solicitaba una resolución para tu juego?. Los Backgrounds deben tener esa misma resolución para poder cubrir toda la pantalla.

Y ahí podemos ver el background que usaremos en nuestro juego, al menos en este diálogo.

[Screenshot Paso 2]

Paso 2 : En este punto ya podemos mencionar a la imagen dentro del código. Para mencionar la imagen dentro del código, usaremos scene seguido de la ruta de nuestra imagen, que la escribiremos como una cadena de texto, de esta forma :

scene “images/street.jpg”

Pero… hay una desventaja. Al llamar así a las imágenes, vamos a hacer que se ralentice nuestro juego, por lo que Ren’Py deberá buscar en el instante la imagen, aplicando un esfuerzo mayor. Pero hay una solución para esto : el registrar imágenes en el script y llamarlos con una etiqueta.

Vamos al siguiente paso…

[Screenshot Paso 3]

Paso 3 : Registraremos las imágenes en otro script. Para esto, haremos un nuevo archivo como les enseñé en el post anterior, que estará destinado para declarar los Backgrounds (Escenarios) y Sprites (Personajes), ya que de este modo, tendremos todo más organizado. El nombre del archivo puede ser cualquiera, siempre y cuando le coloques la extensión .rpy

Mira el Screenshot del Paso 3. Te das cuenta que hay un bloque init?. Como lo indiqué en el post anterior, el bloque init hace que todo lo que esté al interior de su bloque, sea cargado cuando el juego esté arrancando.

En este caso, para declarar los backgrounds, se debe declarar una instancia init, en el que se declararán las imágenes con image, seguido de la etiqueta con la que será llamado desde los diálogos y por último, con la ruta de la imagen en nuestras carpetas. Lo haremos de la siguiente forma :

init:

    image bg_calle = “images/street.jpg”

[Screenshot Paso 4]

Paso 4 : Ahora nos devolvemos al archivo donde estamos escribiendo los diálogos (script.rpy). Cuando necesitemos llamar a un escenario que tengamos registrado, lo llamamos con scene, seguido de la etiqueta que tiene esa imágen de escenario, de esta forma :

scene bg_calle

De la cual, se vería algo así si arrancamos nuestro juego :

2. AÑADIR SPRITES (PERSONAJES HABLANTES) AL JUEGO

La verdad, es que no hay mucha diferencia entre declarar una imagen de Background y declarar una imagen de Sprite… El truco es en cómo lo llamas desde el código.

[Screenshot Paso 1]

Paso 1 : Dentro de la carpeta “game”, debes crear una carpeta que contendrá las imágenes de los personajes con cada una de sus expresiones. En mi caso, hice una carpeta llamada “personajes”.

En el interior de esta carpeta, crearemos las carpetas con los nombres de nuestros personajes (En este caso, tengo a una personaje llamada Kaori Mizuhashi, por lo que su carpeta se llamará “kaori”). Dentro de la carpeta de tu personaje, debes colocar las imágenes de todas las expresiones que tenga el personaje durante la historia.

En mi caso, añadí este Sprite para el personaje de ejemplo “Kaori”.

NOTA : Si dibujas en tableta gráfica, procura guardar tus imágenes en formato PNG, ya que es necesario de que los Sprites tengan transparencia. Si no eres dibujante no hay problema, más abajo te dejaré un enlace con Assets de Sprites para que puedas usar en tu juego!.

[Screenshot Paso 2]

Paso 2 : Aquí declararemos las expresiones de nuestros personajes, para ello, nos iremos nuevamente al archivo donde anteriormente declaramos el escenario. Podemos usar ese mismo script para declarar tanto escenarios, como también personajes. Recuerda hacerlo siempre, dentro de un bloque init.

La forma de declarar las imágenes es absolutamente la misma que cuando declaramos un Background o cualquier imagen que queramos añadir a nuestra pantalla.

En este caso, declararemos a nuestra personaje Kaori, con el rostro sonriente :

init:

    image kaori_sonriente_1 = “personajes/kaori/smile1.png”

En este caso, el nombre de la imagen que representa a nuestra personaje riendo, es smile1.png, que significa “sonrisa”. Les puse un número ya que puede tener distintos tipos de sonrisas a lo largo de la historia.

[Screenshot Paso 3]

Paso 3 : Regresemos al archivo donde estamos escribiendo nuestros diálogos (script.rpy). Ahora viene la explicación de la diferencia entre llamar a una escena, a llamar a un Sprite.

Los escenarios se llaman con scene, más la etiqueta de la imagen, y los Sprites u otras imágenes se llaman con show, de la siguiente forma :

show kaori_sonriente_1

Primero se escribe show seguido de la etiqueta de la imagen que queremos llamar, que en este caso es el Sprite sonriente de Kaori, llamada “kaori_sonriente_1”.

Y se verá así en el juego :

Ves que ya va tomando forma el juego?. Bueno, esto es solo el principio después de todo… PERO NO TE DESESPERES!!!. Es época de cuarentena (al menos cuando terminé de escribir el artículo xD), así que podemos ir con calma haciendo el juego.

Ahora sin perder el foco del tema, voy a explicar algo adicional al tema de agregar sprites. También podemos quitar un sprite de la pantalla cuando ya no esté dialogando ese personaje!.

Simplemente debes escribir hide, seguido de la etiqueta de la imagen que quieres ocultar, en la parte del diálogo donde pienses que sea necesario ocultar la imagen. Se hace de esta forma :

hide kaori_sonriente_1

Si quieres desaparecer todos los sprites puestos en pantalla a la vez, solo basta llamar a otro escenario con scene y la pantalla “se limpiará”.

ALGO EXTRA : TRANSFORMACIÓN DE DISOLUCIÓN

Sip, los ejemplos que te mostré hacen de que todas las cosas aparezcan y desaparezcan de forma abrupta.

En Ren’Py, existen las transformaciones que permiten animar o modificar el estado de un objeto que se muestra en pantalla.

Para empezar de a poco, usemos la transformación de disolución. Pon atención al siguiente Screenshot :

Lo viste?. Te diste cuenta que a cada llamado de escena/sprite, usé el with dissolve?. La transformación de disolución es “dissolve”, que en este caso, modifica la transparencia (Alpha) de los objetos en un rango de 0.5 segundos (500 ms). Puedes usar esta transformación tanto para mostrar objetos como también, para ocultarlos.

Existe una variedad de transformaciones básicas pero esas las veremos de lleno más adelante.

Bien muchachos, ya hemos llegado al final de este post!. Espero que hayas entendido el cómo declarar imágenes y llamarlas desde los diálogos, y si no lo entendiste, pues solo pregúntame en la caja de comentarios o en mi Telegram personal!. 

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í!

Yo también estoy desarrollando una novela visual!!!. Visita el blog de mi juego y entérate de mi bitácora de desarrollo!.

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

No entendiste algo sobre el post? Consúltalo en la caja de comentarios o en mis redes sociales!

• Telegram : Haz click para entrar al Chat!

Necesitas los Sprites pero no eres dibujante?. Mantén la calma y revisa este subforo con Assets de libre uso!

• Busca Assets en el subforo de Itch Presionando Aquí!

Siguiente post?. Les enseñaré a usar los canales de Audio para que puedan añadir pistas musicales (BGM) a las escenas, o efectos de sonido (SFX)!!!.

Navega entre los posts de este hilo!

<< Ir al Post #3 | Ir al Post #5 >>

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

ElectroBasicsYT – CharlieFuu69 Creations!

• 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