Artículo original escrito por: Lynn Zheng
Artículo original: Learn to Code RPG – A Visual Novel Video Game Where you Learn Computer Science Concepts
Traducido y adaptado por: Rafael D. Hernandez

Hola a todos, soy Lynn. Es un gran placer para mí anunciar el lanzamiento de Aprende a Programar RPG, un proyecto que hemos estado desarrollando en secreto durante los últimos ocho meses.

Aprende a Programar RPG es un novedoso juego visual interactivo en el que aprenderás a programar, harás amigos en la industria tecnológica y perseguirás tu sueño de convertirte en desarrollador o desarrolladora. 🎯

Características del Juego:

  • Horas de juego 🎮
  • Arte y música original 🎧 🎨
  • Más de 600 preguntas de examen de Ciencias de Computación 📚
  • Más de 50 secretos que puedes descubrir 🚀
  • 6 finales diferentes 👀
  • Personajes simpáticos y un gato adorable 😺
  • ¡Minijuegos! 👾

Esta es la primera versión y esperamos añadir más contenido en el futuro. Los lanzamientos futuros tendrán más personajes, escenarios, misiones secundarias, arte, música y, sí, minijuegos. (Corrida de velocidad de prueba de CS y modo de supervivencia, ¿alguien?) También estamos planeando localizarlo en diferentes idiomas. 🌎 El cielo es el límite aquí. ✈️

Puedes descargarlo y jugarlo gratis en itch.io.

Si deseas obtener más información sobre el juego en sí, mi proceso de desarrollo, etc., siga leyendo. Este es un devlog muy visual (es por eso que nuestro juego es una Novela Visual) y estoy seguro de que lo disfrutarás.

img_1-1
Aprende a programar RPG: Un juego en el que juegas el rol de aprender a programar

Donde todo empezó

Empecemos con un poco de información sobre mí.

Siempre me han gustado los videojuegos ricos en historias desde que era pequeña. 🧒🏻

Mi interés en el desarrollo de juegos me inspiró a especializarme en Ciencias de la Computación en la universidad. En junio de 2021, me gradué de la Universidad de Chicago con una Licenciatura y una Maestría conjuntas en Ciencias de la Computación.

En julio de 2021, mientras planeaba mudarme a San Francisco para comenzar mi carrera como desarrollador de software, Quincy se puso en contacto conmigo sobre esta idea de juego.

Un juego en el que aprendes a programar, hacer amigos, explorar la cultura tecnológica y, finalmente, entrar en la industria tecnológica. 🎯

Aunque me dedico a motores de desarrollo de juegos como Unity y Ren'Py y he creado pequeños proyectos en mi tiempo libre, esta sería la primera vez que construyo un juego desde cero, en un equipo (principalmente) de una sola persona. Es decir, estaba un poco abrumada por esta oportunidad de hacer realidad mi sueño de desarrollo de juegos. 🤯

Bueno, ya conoces el dicho: Si te ofrecen un asiento en un cohete 🚀, ¡no preguntes qué asiento!

Así que dije que sí y comencé inmediato.

Screen-Shot-2021-12-18-at-12.56.15
¿Quién soy yo para rechazar una oferta de Cupcake CPU? 🧁.

De cero a héroe: Cómo construir un juego en cuatro meses

La idea de la historia estaba bastante clara desde el principio: El héroe/heroína toma la decisión de aprender a programar, supera los obstáculos a lo largo del viaje, se reúne con aliados y mentores y, finalmente, llega al gran premio, un brillante trabajo de desarrollador.

Comencé con el marco de escritura clásico Del Viaje del Héroe, o, el monomito de 17 etapas.

(Desde que empecé a trabajar en este juego, una y otra vez desearía haber tomado al menos una clase de escritura creativa en la universidad. 😅 )

He aquí un vistazo a mi esquema para la primera y la tercera etapa de las 17 etapas, directamente desde mi documento de Google:

1. La Llamada a la Aventura

la primera etapa del viaje del héroe a menudo presenta a la audiencia la existencia actual (y a veces bastante mundana) del protagonista.

Personaje principal (abreviado MC) se gradúa y se muda con sus padres. No está muy segura de cómo se verá su carrera, así que pasa sus días trabajando en conciertos y buscando vacantes de trabajo. Ha solicitado algunos trabajos de ventas y consultoría, pero la rechazaron.

3. Supernatural Aid

en esta etapa del viaje, el protagonista busca una figura parecida a un sabio y posiblemente obtenga un objeto o habilidad especial en el proceso.abajo.

Annika, El mejor amiga de MC en la universidad, llama a MC un día. Annika está emocionada porque acaba de conseguir un puesto de desarrollo web de nivel básico, después de pasar 6 meses repasamdo sus habilidades de CS oxidadas (de auditar algunas clases de CS en la universidad). Annika pregunta cómo le está yendo a MC; está encantada de que MC también esta considerando aprender a programar; y anima a MC que lo puede hacer si tiene el método de estudio y los recursos adecuados.
Annika le presenta a MC los recursos que usa.

Los personajes

Incluyendo el personaje principal que controla el jugador, tenemos cuatro personajes principales en el juego:

  • La protagonista, Lydia, recién graduada de la universidad. (En futuras versiones del juego, es posible que podamos presentar algunos personajes principales diferentes entre los que el jugador puede elegir.)
  • Annika, la mejor amiga de la universidad del personaje principal
  • Marco, que se convierte en el mentor del personaje principal
  • Layla, la compañera de incorporación del personaje principal en su primer trabajo de desarrollo

Empecé a diseñar los personajes recopilando imágenes en Pinterest. Luego Quincy y yo encargamos a un artista en línea que creara los sprites de personajes y la imagen de bienvenida.

En las imágenes de abajo, puedes ver las inspiraciones de los personajes de Pinterest (los derechos de autor pertenecen a sus artistas originales) y el diseño final lado a lado.

Untitled265_20211217211947
Arte de inspiración para Lydia + tarjeta de personaje final
Untitled265_20211217212148
Arte de inspiración para Annika + tarjeta de personaje final
Untitled265_20211217211928
Arte de inspiración para Layla + tarjeta de personaje final
Untitled265_20211217211832
Arte de inspiración para Marco + tarjeta de personaje final

Ahora que tenemos el elenco principal, ¿qué más necesitamos para agregar más profundidad de personaje a Lydia, para que no esté sentada sola en su habitación todo el día practicando código? ¿Tal vez le vendría bien un gato en su habitación? 🐱

Y entra Mint, el gato de Lydia. (Arte mío como artista improvisado para que nuestro artista pudiera centrarse en los personajes. El arte digital 🎨 es mi segundo pasatiempo más grande después de desarrollo de juegos.

mint
¡Mint te manda saludos!

Las graficas

Con las gráficas de los personajes hechos, puedes pensar que concluye la mayor parte de las gráficas. ¡Pero no tan rápido! Una novela visual es, como su nombre indica, visual, por lo que necesita muchas más gráficas para contar una historia atractiva.

Por ejemplo, en esta imagen de abajo, además de los sprites de caracteres, está la imagen de fondo y algunos componentes GUI como el cuadro de texto.

Screen-Shot-2021-12-18-at-12.40.00
Componentes gráficos básicos: GUI, sprites de caracteres, fondo

Para crear las imágenes de fondo, apliqué filtros de efectos especiales a las imágenes de archivo para agregar una textura similar a la acuarela. De esta manera, el esquema de colores de nuestros personajes se integra perfectamente con el del fondo.

Untitled266_20211217213638
Arriba: imagen de archivo. Parte inferior: con filtros

Para ilustrar el paso del tiempo en un solo día, cambié la iluminación de las imágenes de fondo aplicando la manipulación del color mediante programación. (¡Echa un vistazo a nuestro repositorio de GitHub si estás interesado en los detalles de implementación!)

color
Cuatro modos de iluminación

Para aumentar la motivación, cada vez que tengo ganas de postergar, cambio mis engranajes creativos y garabateo elementos diversos que aparecen a lo largo del juego. 🤣

Y así es como conseguimos galletas en el juego, tostadas, pizza, pollo frito y más.

ezgif.com-gif-maker-7-
¡Delicioso!

El código

Usé el motor de juego con el que estoy más familiarizado, el Motor de Novela Visual Ren'Py. Reutilicé mucho código de mis antiguos proyectos, por ejemplo, sprites de personajes parpadeantes y un minijuego de ritmo.

blink2
Personajes parpadeantes 😉
Screen-Shot-2021-12-17-at-19.33.39-1
Minijuego de Ritmo. ¿Crees que puedas conseguir una puntuación perfecta?

También incorporé código Ren'Py de código abierto, como el código para etiquetas de texto cinético y el código para texto de iconos de plumas.

awesome
Etiqueta de texto cinético, que se puede desactivar para facilitar la accesibilidad
Screen-Shot-2021-12-17-at-22.05.37
Los iconos de plumas son increíbles para crear una interfaz gráfica de usuario nítida y simplista

Me abstendré de profundizar en el código base aquí (porque no sabré cuándo parar entonces 😆). Solo debes saber que es mucho código, tanto para la lógica como para la interfaz gráfica de usuario. Ve el informe de pelusa Ren'Py a continuación.

Uf... ¿Podemos pasar ahora a algo más visual?

Ren'Py 7.4.8.1895 lint report, generated at: Fri Dec 17 22:11:43 2021
Statistics:
The game contains 1,335 dialogue blocks, containing 15,390 words and 85,105 characters, for an average of 11.5 words and 64 characters per block.
The game contains 40 menus, 20 images, and 49 screens.

El rastreador de progreso

Incluso un proyecto de una sola persona necesita un gerente de proyecto, así que ¿por qué no ser mi propio gerente de proyecto?

Usé Trello para rastrear mi proceso y colaborar con otros. Incluso codifiqué etiquetas por colores para diferentes categorías de tareas, como codificación, UI/UX, escritura, etc., como se muestra en la imagen de abajo en la primera tarjeta de la columna Backlog.

Y wow, ¿no es un largo pergamino de tareas hechas? 😤

trello
Mi tablero de Trello

Todo en la columna TODO y Doing se mueve a Done, y eso nos lleva a...

Lo que aprendí

¡Hurra! Después de ocho meses (cuatro meses de elaboración de la idea, más cuatro meses de intensa programación, escritura y creación de arte), te presentamos Aprende a Programar RPG. 🥳

En cuatro meses en el juego, Lydia ha pasado de ser una aspirante a ingeniera a una ingeniera con un trabajo de desarrollo. 🎯

En cuatro meses del mundo real, he pasado de ser un aspirante a desarrollador de juegos a una desarrolladora de juegos que ha creado un juego. 👾

Naturalmente, aquí viene la pregunta del millón de dólares: ¿Cuál es mi conclusión de todo este proceso?

Bueno, como cualquier proceso creativo, el desarrollo de juegos no es fácil. Soy extremadamente afortunada de tener un equipo que me apoya: nuestra artista Noa, que creó el arte de los personajes, Quincy, que creó las increíbles pistas de música originales, y correctores y personal de freeCodeCamp que probo el juego.

Screen-Shot-2021-12-17-at-22.26.07
Mis contribuciones en GitHub distinguen los días en que codifico contra los días en que hago lluvia de ideas, escribo o dibujo 🤪

He crecido tanto en términos de habilidades técnicas (al encontrar formas creativas de construir cosas en Ren'Py), habilidades no técnicas (al actuar como mi propio gerente de proyectos) y más (al manejar las expectativas, superar el síndrome de impostor y buscar un equilibrio entre el trabajo y la vida personal).

Screen-Shot-2021-12-18-at-12.33.25
¿Sabes qué es el síndrome de impostor? - ¡Claro que sí!

De ninguna manera fue un viaje fácil, pero el resultado vale la pena cada segundo de trabajo duro. Y lo que es más importante, espero con interés que juegues al juego y me hagas llegar tus comentarios para que pueda mejorar el juego en futuras versiones.

Espero que disfrutes jugando a Aprende a Programar RPG tanto como yo he disfrutado creándolo. 🙌

Enlaces de LearnToCodeRPG

Puedes encontrar el juego en itch.io aquí:

Learn to Code RPG by freeCodeCamp.org
Learn to code and get a dev job 🎯
KGkTTn

Y aquí está el repositorio de GitHub con todo el código.

También puedes ver el Tráiler del juego en YouTube y compartirlo con tus amigos:

¿Quieres ver cómo es el juego? Mira el Let's Play with Ania and Lynn.

Y aquí está el kit de prensa oficial para el juego.

Si estás interesado/a en construir un Juego de Novela Visual, echa un vistazo a mi artículo:

How to Make a Visual Novel Game in 10 Minutes – Python Ren’Py Tutorial
Do you have a story idea that you’d like to turn into a novel? How about addingvisual appeal and interactivity to that novel? A Visual Novel [https://en.wikipedia.org/wiki/Visual_novel] might be the gamegenre you are looking for. And this tutorial is here to help set you up in 10minutes, with m…
Screen-Shot-2021-06-21-at-14.23.10-1