Aventura Gráfica Interactiva Web [Etapa 1]:
Al desarrollar una aventura gráfica sobre la película de anime Porco Rosso usando p5.js implica un proceso que se adapte la historia, combinando narrativa, arte visual y programación interactiva. Esta aventura grafica se centra en la exploración y que el jugador pueda seleccionar decisiones que lleven a diferentes caminos variando su final. Nos basamos en los temas centrales de la película como la aviación y los diferentes desafíos que surgieron. Se identifican las escenas clave, personajes principales y momentos interactivos.
La estructura de la historia es esencial para la aventura gráfica: dividimos la aventura en capítulos o escenas basadas en ubicaciones icónicas de la película (el secuestro de los piratas, el desafio de Curtis, el taller de Piccolo, etc.). Creamos puntos de decisión donde las elecciones del jugador afectan la historia. Agregamos sonido de ambiente que evoque el ambiente nostálgico de la película, donde el espectador pueda activarlo y desactivarlo
Para programar la aventura gráfica creamos un sistema para poder navegar por los estados, donde utilizamos como fondos imágenes generadas a través de la AI a partir de su pront, mediante decisiones que el espectador elija según su resultado. Diseñamos un sistema de diálogo que permita mostrar texto y opciones seleccionables. A través de una secuencia de botones se puede avanzar por la aventura. Verificamos cómo las decisiones del jugador afectan la historia y que los rompecabezas funcionen correctamente.
Nuestro diagrama de flujo:
Video Juego Web [Etapa 2]:
Para desarrollar el videojuego web partimos de un concepto principal sobre de que se tratará nuestro juego, elaboramos bocetos del juego y definimos controles, objetivos y reglas.
Para el diseño del juego nos centramos en aspectos visuales y estructurales del juego, definimos personaje y enemigo, planificamos niveles progresivos y en como el jugador interactuará con el juego a través de botones, teclas y un menú.
Para la programación del videojuego partimos con movimientos del personaje con eventos del teclado; implementamos imágenes de nuestro personaje, enemigo y diseño de estados. Integramos sonido que al disparar de la nave de nuestro personaje se produce un efecto de acción.
Repartimos el código en clases para manejar entidades de personaje, enemigo, bala, juego etc. Dentro de estas clases usamos objetos para atribuir características.
A medida que fuimos completando el código optimizamos para un mejor funcionamiento e Identificamos y corregimos errores utilizando herramientas como la consola del navegador. Nos aseguramos que el juego sea divertido y funcional, asegurándonos que cumpla con todos los requisitos.
Al llevar adelante un videojuego en p5.js nos enseñó los fundamentos del diseño interactivo y la programación gráfica.