Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Mi primer proyecto de novela Visual en RenPy - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 7 de enero de 2024 por Fernando B.

40 visualizaciones

Presentación muy somera de del funcionamiento de RenPy. Simplemente vamos a sustituir algunas de las líneas de código presentes en el archivo que se crea por defectopara empezar a entender el workflow de la aplicación.

Más información Transcripción

Descargar la transcripción

Hola a todos, vamos a comenzar nuestra práctica de Ren'Py. Vamos a empezar a 00:00:00
generar una novela visual. En este caso, como podéis apreciar, en vuestros 00:00:06
ordenadores de la sala 105 tenéis en el escritorio una carpeta que se va a 00:00:11
llamar Ren'Py. En mi caso habéis que Ren'Py 8 punto bla bla bla. En vuestro caso va a 00:00:18
ser Ren'Py a secas. Vamos a hacer doble clic sobre dicha carpeta 00:00:22
y para ejecutar el programa lo único que vamos a necesitar es hacer doble clic 00:00:27
sobre este archivo que se llama Ren'Py punto sh. Vamos a hacer doble clic. Nos va a 00:00:32
salir que si lo queremos ejecutar en un terminal, cosa que vamos a decir que sí. 00:00:38
Después de un ratito veis que se nos abre precisamente 00:00:43
esta interfaz donde vamos a poder crear nuestro primer proyecto. ¿Dónde creéis 00:00:47
que vamos a poder hacer eso? Es evidente. Aquí donde pone crear un proyecto nuevo 00:00:53
nos dan la serie de información. Decimos que sí. En cuanto al idioma que vamos a 00:00:58
emplear, que va a ser español, continuar. Y aquí vamos a poner el nombre de nuestro 00:01:03
proyecto. Os recomiendo poner vuestro nombre. Si sois dos trabajando en el 00:01:07
proyecto, pues los nombres de pilas reconocibles de los dos. Y eso sí, luego 00:01:11
vamos a poner la resolución que vamos a elegir a continuación, que va a ser 1920 00:01:16
por 1080. Os recomiendo ponerlo para que así de esta manera, cuando empecemos a 00:01:23
trabajar con imágenes, pues sea mucho más fácil para nosotros acordarnos de 00:01:27
cuáles son precisamente la relación de proporción y de resolución de las 00:01:32
imágenes para los fondos, sobre todo que vamos a emplear. Nos da a continuar y 00:01:35
efectivamente ahora nos hace sugerencias en cuanto a los tamaños. En este caso 00:01:40
más no es mejor, sino 1920 por 1080 es, diríamos, el estándar para la mayor 00:01:45
parte de todas las pantallas de ordenador. En caso de que quisiéramos emplear algo 00:01:51
diferente, por ejemplo para un móvil, pues podríamos incluso emplear 00:01:56
resoluciones más pequeñas. Por defecto vamos a emplear precisamente esa. 00:02:01
En cuanto al color, pues podéis elegir el que queráis. Si en un momento dado todavía 00:02:06
no tenéis claro, no tenéis criterio, podéis poner el que viene por defecto, como voy a 00:02:11
hacer yo, y luego cambiarlo a posteriori. Vamos a continuar y como podéis 00:02:14
apreciar, ya se nos está creando nuestro primer proyecto. 00:02:20
Esperamos... 00:02:26
Aquí, como podéis apreciar, ya tenemos aquí el proyecto y tenemos una serie de 00:02:33
carpetas y de archivos. Todas esas carpetas y archivos vamos a disponer de 00:02:39
ellas precisamente dentro de lo que es la carpeta de Ren'Py. Si vamos a la 00:02:45
carpeta del proyecto que acabamos de crear, Fernando1920x1080, dentro de la 00:02:49
carpeta de Game, vais a ver que todo esto que aparece reflejado aquí en la 00:02:55
interfaz, la tenemos igualmente aquí. Tenemos la carpeta donde vamos a meter 00:03:01
los audios, vamos a meter las imágenes donde no puede ser de otra manera en la 00:03:07
carpeta de Images, y luego tenemos una serie de archivos terminados en Ren'Py 00:03:12
donde vamos a tener los diversos códigos que vamos a necesitar para poder 00:03:18
desarrollar el juego. Antes de nada, mi sugerencia es que todas aquellas 00:03:23
imágenes que hemos estado creando en sesiones anteriores, los fondos que hemos 00:03:28
creado con PigFinder y las instancias de diversas expresiones para cada uno de 00:03:34
los dos o tres o cuatro personajes que hayáis determinado crear, las vamos a 00:03:40
meter directamente aquí, en Images. Así que concretamente yo, en mi caso, que 00:03:44
también resulta que tengo dentro de la propia carpeta de Ren'Py, aquí no la 00:03:51
tenéis, pero yo dentro de la carpeta creo que es de novela visual, animación, no, es 00:03:58
en Rosana y Claudio, precisamente aquí en Game, que tengo ya un juego predefinido. 00:04:04
Voy a tener todas estas imágenes que son las que voy a emplear para los 00:04:11
videotutoriales, y eso es lo que voy a volcar, como podéis apreciar, dentro de 00:04:15
esta carpeta. He dicho volcar que lo que quiero es copiarlas, así que con control 00:04:20
veis que las copio y las pego, así no la pierdo de la carpeta original. Muy bien, 00:04:26
vamos de nuevo a plantear la ruta, es la carpeta Images dentro de Game, 00:04:32
dentro de Fernando 1920x1080. Así, de esta manera, ya tengo una serie de 00:04:38
fondos, aquí vamos a verlos, y las figuras con sus correspondientes fondos 00:04:43
transparentes, fondos que van a formar parte de la historia y los 00:04:49
personajes. Para empezar, ya digamos a meter código, ya empezará a crear, lo 00:04:55
primero que vamos a hacer es que vamos a ir a donde pone Script, RPY, dentro de 00:05:02
Editar, y vamos a abrir por primera vez. Vamos a ver qué es lo que nos vamos a 00:05:06
encontrar. Se va a abrir con el editor Atom, que es el que he preinstalado dentro de 00:05:11
esta carpeta. Si vosotros trabajáis en Windows en casa, os recomiendo instalaros 00:05:17
aparte de RPY, instalaros precisamente este editor. En cualquier caso, veis que 00:05:24
aquí en la columna de la izquierda, veis que dice que ahora mismo nuestro proyecto 00:05:29
en cuanto a las carpetas está vacío. No es verdad, tenemos un montón de carpetas, 00:05:34
pero es cierto en cuanto a la distribución de dicha estructura en Atom. 00:05:38
Así que le vamos a decir que, por favor, nos añade aquí unas carpetas, y le vamos 00:05:42
a indicar dónde. Pues dentro de Fernando 1920, y dentro de la carpeta de Juego, 00:05:46
aquí vamos a tener todas las carpetas y todos los archivos que vamos a necesitar. 00:05:52
Así que vamos a dar a aceptar, y veis que efectivamente ya puedo navegar 00:05:55
en cada uno de los archivos, y además también puedo incluso entrar dentro de 00:06:03
cada una de las carpetas. O sea que voy a ponerme aquí, en script.rpy, 00:06:08
y voy a cerrar este de aquí, que ya no me hace falta, ya que tengo varias 00:06:14
instancias abiertas de este mismo editor, y vamos a empezar a trabajar en cuanto a 00:06:21
la edición. Lo primero que vamos a hacer es que, toda vez que hemos creado el 00:06:26
juego por primera vez, y de hecho tenemos aquí el texto, vamos a cambiar algunas 00:06:32
cositas que sean sencillas, para ir progresivamente de menos a más tratando 00:06:37
de entender cómo funciona el código. Aquí, como podéis apreciar, lo primero que 00:06:43
hacemos es que definimos a un personaje por defecto. Viene un personaje que se 00:06:49
llama Eileen, y como podéis ver, define la letra E como la variable que va a 00:06:54
sustituir al personaje que se va a llamar, como veis aquí, Eileen. Eileen, a su vez, 00:07:01
también va a tener una imagen por defecto asociada, y por eso aquí lo que 00:07:06
hace es que le dice en el código que nos enseñe una de las instancias de Eileen, 00:07:12
concretamente aquella que se supone que está contenta, que luego veremos que no 00:07:18
es más que una silueta oscura, y lo mismo también en cuanto a las imágenes de 00:07:21
fondo. Véis que aquí pone Scene, que es el comando que nos va a servir 00:07:26
precisamente para obtener imágenes de fondo. Aquí veis la BG, sería el 00:07:30
diminutivo de background, y veis que aquí también tenemos las 00:07:36
primeras líneas en cuanto a texto. Veis que Eileen va a decir has creado un nuevo 00:07:42
juego en Rempy, Eileen posteriormente nos va a decir que añadamos una historia, etcétera, 00:07:48
etcétera. Véis que lo que es el texto está entre entre comillas, y finalmente 00:07:53
vemos que una vez que ha hecho todo eso, se cierra el juego. Bueno, vamos a comprobar 00:07:58
todo esto en qué se traduce. Vamos aquí a la interfaz y le vamos a decir que 00:08:03
ejecute el juego por primera vez. Bien, vamos a poner 00:08:08
el juego y el código uno al lado del otro, y vamos a ver en qué consiste. 00:08:13
Le vamos a dar a comenzar, y como podéis apreciar, una vez que 00:08:20
comenzamos con Label Start, lo primero es que nos sale un fondo, en este caso es un 00:08:26
fondo gris que se llama BG Room, y nos sale el personaje Eileen, que es 00:08:32
una silueta gris. Y luego Eileen, lo primero que nos dice, veis, Eileen dice que 00:08:40
has creado un nuevo juego en Rempy, y nos lo dice de esta manera. Si hacemos clic sobre 00:08:46
el juego, pasaría a la siguiente línea, y entonces Eileen nos dice que añadamos una 00:08:52
historia, imágenes, música, y de manera que lo podamos presentar al resto del 00:08:57
mundo. Una vez que le volvemos a dar clic, pasaríamos al final del juego, a finalizar 00:09:01
el juego con el comando Return. Ahí está, veis, hemos terminado el juego, y a partir de aquí ya 00:09:07
pues podemos o cerrar la ventana de esta manera, o darle a salir. Cualquiera de las 00:09:12
dos nos va a aparecer. Vamos a empezar a cambiar lo más evidente. Por ejemplo, 00:09:16
vamos a cambiar algo del texto. Aquí, en vez de has creado un nuevo juego de Rempy, 00:09:22
vamos a decir, vamos a pedirle a Eileen que nos diga 00:09:27
Estoy encantada de conocerte, por ejemplo. 00:09:33
En el siguiente, vamos a decirle 00:09:46
Has acertado de lleno eligiendo esta aplicación. 00:09:50
Y ahora, os voy a pedir que añadamos una línea de texto más. ¿Cómo habría que 00:10:01
hacerlo? Pues le daríamos con la letra E, que como veis se corresponde con la variable 00:10:09
del personaje que hemos definido previamente aquí con Define Character 00:10:16
Eileen, y después de un espacio, la primera comilla, y vamos a decir, por 00:10:20
ejemplo, esto sería lo que va a pasar a continuación. 00:10:28
Vamos, a continuación. 00:10:40
Y ahora, la siguiente línea no va a ser Eileen la que diga absolutamente nada, 00:10:46
sino que simplemente vamos a poner algo de texto entre paréntesis sin que haya 00:10:51
un personaje en concreto que diga nada. Por lo tanto, lo que vamos a hacer es que 00:10:56
sea un narrador omnisciente el que vaya narrando lo que va sucediendo. 00:11:01
Por ejemplo, en este caso, Eileen abandonó la habitación. 00:11:08
¿Vale? Y lo que podríamos hacer a continuación es decir, por ejemplo, en vez de Eileen, 00:11:21
¿verdad que lo he escrito bien? En vez de Show Eileen, vamos a poner Hide Eileen Happy. 00:11:28
Y de esta manera vamos a ver cómo van a afectar estos cambios que hemos 00:11:43
resuelto. Antes de ejecutar el juego, eso sí, primero tenemos que guardar. 00:11:49
Sabemos que hay cosas sin guardar siempre y cuando aquí en la pestaña 00:11:54
veáis que hay un puntito azul. ¿Cómo podemos guardar estos cambios? Pues 00:11:59
lógicamente en File, podéis ir a Save y guardarlo, o directamente con Control-S, 00:12:04
cosa que os recomiendo que hagáis, que os acostumbréis a darle a Control-S. 00:12:10
Vamos a ejecutar y, una vez que nos dice que ha respaldado correctamente, vamos a ver cómo se 00:12:14
cristalizan estos cambios que hemos hecho. Vamos a comenzar y veis que, efectivamente, 00:12:24
el texto ha cambiado. Dice Eileen que estoy encantado de conocerte. Has acertado de 00:12:29
llena origen de esta aplicación. Lo siguiente será que esto sería lo que va 00:12:34
a pasar a continuación y ahora fijaos que Eileen, como tal, va a dejar de hablar y va a 00:12:39
ser, como veis aquí, un narrador omnisciente. Eileen abandonó la habitación. 00:12:43
Según le damos al siguiente clic, ¿qué debería de pasar? Pues que finalizamos el 00:12:48
juego. De acuerdo, vamos a cambiar ya cosas de manera un poquito más seria. ¿En qué 00:12:53
medida? Pues, por ejemplo, que vamos a cambiar el personaje directamente. Ya no 00:13:01
vamos a seguir con Eileen y vamos a añadir un personaje propio. En este caso, por ejemplo, 00:13:06
en vez de que se llame Eileen, lo que vamos a hacer es que se llame, por ejemplo, como es mi 00:13:14
caso, Rosana. Y que, en vez de que sea la letra E la que defina el personaje, pues va a ser, 00:13:18
pues, lógicamente la letra R. A partir de aquí, mucho cuidado. Por ejemplo, si yo quiero que 00:13:27
Rosana diga todo lo que ha dicho Eileen, aquí tengo que, eso sí, sustituir todas estas E por 00:13:33
R. Por lo demás, vais a apreciar que seguirá enseñándonos, eso sí, la imagen de Eileen, 00:13:41
que ya, eso sí, pues ya no tendrá mucho que ver con Rosana. Pero al no aparecer el nombre 00:13:57
sobreimpreso con la imagen, pues puede ser perfectamente la imagen que se corresponda 00:14:03
con Rosana. Otra cosa es que sea la imagen que viene por defecto del personaje por defecto. 00:14:08
Vamos a darle CTRL-S, guardamos, y vamos a darle a ejecutar el proyecto. A ver qué se nos ofrece 00:14:13
ahora. Los cambios, en principio, van a ser muy sutiles. Simplemente, bueno, pues mirad, 00:14:19
aquí aparece, de hecho, el nombre de la imagen, que sí que viene sobreimpreso. Pero eso sí, 00:14:25
veis aquí, Rosana, ahora sustituye claramente el nombre del personaje inicial. Veis que este nombre, 00:14:31
el de Rosana, el personaje, me lo he dicho, aparece con el color azul. ¿Eso se puede cambiar?, os 00:14:39
preguntaréis. Y la respuesta es sí, por supuesto. Vamos a cambiarlo, de hecho, aquí. Por ejemplo, 00:14:45
después del paréntesis, vamos a añadir una coma, y vamos a añadir la palabra color, después igual, 00:14:51
y eso sí, entre paréntesis, entre comillas, vamos a tener que meter un código hexadecimal de color. 00:15:01
El código hexadecimal siempre viene precedido del signo de la modilla, que en vuestro teclado va a 00:15:09
ser AGR3, y luego vamos a tener que meter seis caracteres hexadecimales. Si inicialmente el azul 00:15:15
se correspondería con, por ejemplo, 00, porque sería el primer canal, el red, esas dos, sería el rojo, 00:15:25
el siguiente sería el verde, FF, y el siguiente sería 2C2. Esto sería el color verde. Fijaos, 00:15:35
el rojo estaría al cero, el verde estaría a tope, que son las dos Fs, RG, y el azul estaría al mínimo, 00:15:44
a cero de nuevo. Por tanto, este se correspondería con el color verde. Entonces, ese azul que habíamos 00:15:52
tenido antes se tiene que ver sustituido por el azul. Vamos a darle Control-S, guardamos, y de 00:15:58
nuevo ejecutamos el proyecto para comprobar que efectivamente, cuando le damos aquí a comenzar, 00:16:03
Rosana sigue con el color verde. O sea, no sigue, sino que lo hemos cambiado por el color verde. 00:16:08
¿Y si quisiéramos que el color en vez de verde fuera rojo? Pues sencillo, simplemente, de nuevo, 00:16:14
aquí quiero que salir, en vez de que sea 00FF00, pues aquí tendríamos, por ejemplo, dos Fs, 00:16:20
y sustituiríamos esto por estos dos ceros, Control-S, guardaríamos, deberíamos ejecutar 00:16:27
el proyecto, y ahora el nombre va a aparecer en rojo. ¿Veis? Así de sencillo. Cerramos de nuevo. 00:16:34
Vamos a empezar a jugar con las imágenes. En este sentido, por ejemplo, en vez de que el fondo, 00:16:41
veis que aquí pone Scene BG Room, y la imagen del personaje es Alien Happy, que son dos imágenes 00:16:52
que vienen por defecto, las vamos a sustituir por nuestras propias imágenes. Hay dos maneras de 00:17:00
hacer esto. Una, que es digamos la menos práctica, sería si simplemente cambiamos el nombre de 00:17:06
alguno de nuestros fondos y el nombre de alguna de nuestras figuras, precisamente por el nombre 00:17:16
de BG Room Alien Happy. Pero eso no nos interesa, lo que queremos es precisamente deshacernos de 00:17:22
esas dos imágenes por defecto, de relleno, y empezar a trabajar con las nuestras. Para poder 00:17:27
hacer eso, eso sí es esencial, lo mismo que hemos hecho con los personajes, que es decir, en este 00:17:34
caso, definirlo inicialmente, también vamos a tener primero que definir las imágenes que vamos a 00:17:40
querer usar. Y en ese sentido, por ejemplo, yo tengo aquí una que se llama pantalla inicial, 00:17:45
os voy a enseñar la pantalla inicial, que va a aparecer esto, la historia de Rosana y Claudio y 00:17:51
tal, un amor, pues un presente. Lo que vamos a hacer es que lo vamos a definir. Y en ese sentido, 00:17:56
vamos a poner justo encima, precisamente, del comando Scene. Aquí vamos a hacer un Enter, 00:18:01
vamos a irnos aquí, y eso sí es importantísimo, cuando trabajamos en Ren'Py, el tema de las 00:18:09
tabulaciones. Todo aquello que nosotros, por ejemplo, veis aquí debajo de Label Start, 00:18:18
todos estos comandos están tabulados, es decir, que están, cómo diríamos, 00:18:23
sometidos, son dependientes de este primer comando, que es el que indica que comienza el juego. Así 00:18:33
que, lo que tenemos que hacer es, con la tecla de tabulación, en este caso, veis, nos vamos a 00:18:40
poner siempre aquí en el mismo nivel, para que la imagen que voy a definir y el comando que luego 00:18:45
va a enseñarla, pues tiene que estar al mismo nivel. Entonces, ¿cómo vamos a definir esa imagen? 00:18:53
Con el comando Image. Vamos a llamarla, en este caso, lo mismo que hemos hecho con el personaje, 00:19:02
vamos a llamarlo ImageInicial, y cada vez que pidamos al juego que nos enseñe la imagen inicial, 00:19:14
lo que va a hacer es que se va a remitir a la imagen, en este caso, a, por ejemplo, aquí, 00:19:23
Pantalla-BajoInicial, y eso tenemos que ser muy rigurosos. Vamos a poner Pantalla-BajoInicial, 00:19:30
punto, eso sí, con la extensión PNG. ¿Vale? Pantalla PNG. Podría haber elegido Pantalla Vacía, 00:19:41
o Cine, o Escritorio, es decir, eso ya cada cual. La cuestión es que yo cada vez que, a partir de 00:19:50
ahora, en vez de SceneBGRoom, lo que haga es Scene, poner la letra, la palabra, mejor dicho, 00:19:55
Inicial, lo que va a hacer es que simplemente me va a llamar a esta imagen, Inicial de fondo. 00:20:03
Vamos a comprobar que, efectivamente, esto que hemos hecho va a funcionar. Vamos a darle a 00:20:14
Control-S, vamos a guardar, vamos a poner esto aquí a la derecha, vamos a darle a Ejecutar 00:20:20
Proyecto, y vamos a ver si no nos hemos equivocado. Ahí está. ¿Veis? Ahí está nuestro fondo. Por lo 00:20:26
demás, todo permanece exactamente igual que como estaba. Seguimos, evidentemente, con el 00:20:35
personaje inicial, por defecto, que es el de Aileen, pero el fondo, ya veis que ya lo hemos cambiado. 00:20:40
Vamos a cambiar aquí, por tanto, lo siguiente, con una posible manera, a Aileen. Y vamos a hacer 00:20:48
lo mismo, ¿de acuerdo? Entonces, vamos a ir a donde pone Show Aileen Happy, y de nuevo, Contabulación, 00:20:55
dejando los dos comandos con la misma sangría. Vamos a ir a Image, y ahora vamos a poner, por ejemplo, 00:21:02
Image Rosana, porque recordamos que es el nombre de mi personaje, y vamos a elegir alguna de las 00:21:14
imágenes. Concretamente, lo lógico sería elegir, por ejemplo, Rosana neutral, Rosana baja neutral, y como hay 00:21:22
muchas instancias de Rosana, pues el nombre que quiero usar cada vez que quiero que aparezca la 00:21:31
imagen de Rosana neutral, pues la vamos a llamar, por ejemplo, Rosana N. Y va a ser igual a Rosana 00:21:40
entre comillas, por favor, Rosana barra baja neutral.png. Está en su sitio, aparentemente. Y en vez de que nos 00:21:49
diga Show Aileen Happy, lo que vamos a decir es que nos muestre a Rosana, ¿vale? Y esto debería funcionar. 00:22:07
Vamos a darle Control-S, de nuevo, vamos a comprobar que estamos avanzando adecuadamente. Vamos aquí a 00:22:17
Ejecutar, y vamos a comprobar que, efectivamente, aquí aparece Rosana en todo su esplendor, ocupando 00:22:25
la mayor parte aquí de la pantalla, ¿vale? Y según avanzamos, veis que todo ha funcionado perfectamente. 00:22:33
Muy bien, en los siguientes vídeos vamos a continuar con este mismo archivo, solamente que 00:22:42
vamos a empezar ya a añadir más personajes, añadir más fondos, y vamos también a poder empezar a 00:22:51
cambiar el comportamiento de las imágenes, su ubicación, etc. Muchas gracias por esta 00:22:58
atención en este primer vídeo, y hasta el siguiente. 00:23:05
Idioma/s:
es
Autor/es:
Fernando Briones
Subido por:
Fernando B.
Licencia:
Dominio público
Visualizaciones:
40
Fecha:
7 de enero de 2024 - 19:17
Visibilidad:
Público
Centro:
IES ALFREDO KRAUS
Duración:
23′ 09″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
66.79 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid