La Sirena

¿Cómo lo creamos?

Para realizar este proyecto, seguimos una serie de pasos que nos ayudaron a organizar nuestro trabajo y a cumplir con los objetivos propuestos.

En primer lugar, hicimos un diagrama de flujo en Figjam, una herramienta online que permite crear esquemas visuales de forma colaborativa. En el diagrama, plasmamos las diferentes escenas del juego, las opciones que tendría el jugador y las consecuencias de sus elecciones. Así, definimos la estructura y la lógica del juego, y nos aseguramos de que fuera coherente con el relato original.

En segundo lugar, trabajamos en el arte del juego, es decir, las ilustraciones que acompañarían a la narrativa. Para ello, Julia se basó en los sketches que habíamos hecho previamente, donde había elegido una estética lúgubre, que tiende al gris oscuro, pero con acentos violáceos y amarillentos. Estos colores nos parecieron adecuados para representar el ambiente sombrío y misterioso del relato, así como los contrastes entre la realidad y la fantasía. Se utilizó CLIP Studio para dibujar las imágenes y la tipografía Papyrus para narrarlas.

En tercer lugar, nos dedicamos a la programación del juego, utilizando JavaScript y la librería de P5.js. Esta librería nos permitió crear gráficos interactivos de forma sencilla y eficiente, aprovechando las ventajas del lenguaje web. Juntos, escribimos el código, siguiendo el diagrama de flujo que habíamos hecho y usando las imágenes que Julia había creado. Así, logramos integrar los elementos visuales y narrativos del juego, y darle la funcionalidad que queríamos.

Por último, creamos la página web que alojaría el juego, usando HTML, CSS, JavaScript y el framework Bootstrap. Con HTML y CSS, diseñamos la estructura y el estilo de la página, siguiendo los principios de diseño web responsivo. Con JavaScript y Bootstrap, agregamos la interactividad y la dinámica de la página, usando elementos como botones, modales y galerías. Así, conseguimos que la página fuera atractiva, accesible y fácil de navegar.

Ejecutar código