audiv027-2024-2
Entrega proyecto 1 (04/10/24)
DISCLAIMER:
Esto no tiene nada de Inteligencia artificial. Hicimos otra cosa y no nos fijamos. No sean nosotros.
Integrantes:
Macarena Torres
Leo Ovalle Flores
Fecha
04/10/2024
Whitehall y CREEPYPASTA ROAD
Como grupo de trabajo, decidimos centrarnos alrededor de nuestra pasión compartida por le mundo de los videojuegos e intentar desarrollar algo similar a uno con las herramientas disponibles en p5. De esta manera, fuimos capaces de generar dos iteraciones de nuestra idea, las que se traducen en dos códigos distintos, Whitehall y CREEPYPASTA ROAD.
Materiales
Este trabajo lo hicimos con los siguientes materiales:
- p5.js Reference (https://p5js.org/reference/).
- p5.js en su versión 1.0.0 versión web (https://editor.p5js.org/) para Whitehall.
- p5.js en su versión 1.4.0 versión web (https://editor.p5js.org/) para CREEPYPASTA ROAD.
- Markdown para escribir la documentación de este archivo.
- Computadores MacBook Air y MacBook Pro.
- Uso de navegadores Chrome y Firefox.
Código
El código de ambos proyectos se encuentra en las carpetas dentro de esta misma clase.
Whitehall
index.html
lavendertown.mp3
p5.RoverCam.js (https://github.com/freshfork/p5.RoverCam)
sketch.js
style.css
whitehall.mp4
CREEPYPASTA ROAD
bloodwall.png
index.html
ojo.js
sketch.js
songofunhealing.mp3
style.css
wall.js
Proceso y funcionamiento
Whitehall (https://editor.p5js.org/leleleo3/sketches/kkbhE4UN4)
Comenzamos utilizando como referencia y base la página de Video On Canvas de p5.js Examples. Se definieron las variables globales (rover, playing y video, añadiendo song posteriormente) y se implementó un video para el fondo de nuestro proyecto, cuyo archivo subimos a assets.
Luego, buscando controlar el movimiento de la cámara, utilizamos la librería de RoverCam para manejar las cámara por medio del mouse y simular que el personaje mira alrededor de la habitación, además de colocarlo en una posición de primera persona.
La función de mousePressed, por otro lado, nos permite darle play y poner pause al video cada vez que efectuemos un click.
En este primer intento, nos encontramos con dificultades para centrar el video, pues al usar una cámara pensada para elementos en 3D, este se deformaba.
Para resolver este problema, modificamos la posición y rotación de la cámara mediante rover.setState. Los cambios son los siguientes: Posición anterior: [-400, -200, -200] Posición nueva: [300, 100, 200] Rotación anterior: [0.4, 0.3, 0] Rotación nueva: [0.10, 0.20, 0.20]
Ya teniendo esta base funcionando, se hizo un mapa 3D simple en Roblox Studio para reemplazar por el video que hasta entonces estábamos usando, que no era de autoría propia. Por medio de una grabación de pantalla y posterior edición, se generó un vídeo para emular la navegación a través del espacio.
Por último, se añadió este video (whitehall.mp4) y la canción “Lavender Town” del juego Pokemon Red and Green de fondo (lavendertown.mp3), ambos en un loop.
CREEPYPASTA ROAD (https://editor.p5js.org/leleleo3/sketches/kkbhE4UN4)
Tomamos el código de 3d maze hecho por Grdelpriore (Luca Del Priore) en la plataforma de p5.js.
Antes de comenzar, debemos explicar la creación de las murallas que utilizó el creador que nos proporcionó la base. Según lo visto en el código, él estableció una por una las coordenadas de cada pared en un punto del plano 3D del canvas.
Uno de los puntos más interesantes y útiles que pudimos observar en el código original del proyecto es la implementación de un comando que le impida al personaje chocar contra las paredes, de manera que cuando se acerca a una es repelido de vuelta al último punto seguro. Así, no atraviesa los límites del laberinto y las paredes terminan funcionando como un objeto sólido intraspasable. Esto se ve en los comandos lastGood, que refiere al último punto donde el personaje estuvo bien ubicado en el plano sin interferir con el entorno.
Comenzamos modificando las variantes de color y texto, con su tipografía y su posición respectiva, dentro del cartel de inicio. Para cambiar el color del cartel se modificó el apartado graphics.background. En este caso, para que tome un color rojo lo cambiamos a (66, 1, 1).
Usando graphics.text, se cambió el texto de la primera línea, convirtiéndolo en un título en mayor tamaño que lea “CREEPYPASTA ROAD”, en vez de “Use wasd to”. La tipografía de este título fue tomada de una página de internet de variantes tipográficas.
En graphics.textSize, modificamos el tamaño para resaltar el texto. Lo dejamos en (50).
Para definir dónde estarán ubicadas nuestras letras en el cartel, nos enfocamos en los valores específicos de cada pieza de texto que colocamos. Por ejemplo, “CREEPYPASTA ROAD” está ubicado en las coordenadas (400, 110) de nuestro cartel.
Repitiendo este proceso, terminamos nuestro cartel de inicio acorde a la estética de nuestro proyecto.
En background, cambiamos el color del fondo de nuestro trabajo. Anteriormente (120), pasamos a uno mucho más oscuro y cercano a negro, (10).
Continuamos cambiando el cartel del final del juego. Nuevamente, se modifica color y letra como vimos anteriormente.
En la ventana sketch.js, dentro de la función preload, modificamos la imagen que se presentará en las paredes, asegurándonos de que esta se vaya a cargar primero en nuestro código. Anteriormente se usaba el archivo llamado brick_texture.jpg, pero ahora se cambia a bloodwall.png.
Buscando generar un ambiente más tétrico, le agregamos la variante de música a nuestro juego con la opción song. Aquí cargamos la canción “Song of Unhealing” del juego The Legend of Zelda: Majora’s Mask (songofunhealing.mp3), para que comience de manera creciente mientras el jugador camina por el camino determinado.
Cabe declarar que para que la experiencia se mantenga con la misma atmósfera, utilizamos la opción de que la canción continúe en un loop durante toda la experiencia con la opción song.loop.
Por último, decidimos cambiar el objeto a buscar, que podemos ver junto al cartel del final del juego. Modificamos el color con el que se presenta con specularMaterial: (red). Después, modificamos su apariencia para que sea una esfera, quitándole las esquinas al cambiar las coordenadas en sphere: (50, 16, 20). Para finalizar, utilizamos shininess para cambiar el brillo de nuestro objeto a (50).
Registro de funcionamiento ambos proyectos
(https://drive.google.com/drive/folders/1qaFuJPEzW1SbITHULvYmaM5BtnBQczeo?usp=share_link)
Conclusiones
Fuimos capaces de presenciar y experimentar la gran gama de posibilidades que la plataforma de p5.js ofrece a la hora de crear y desarrollar contenido en el área de los videojuegos, yendo desde poca a mayor complejidad dentro de estos.
Descubrimos nuevas herramientas especializadas para el desarrollo de videojuegos en esta plataforma, como lo es la biblioteca de p5play y controladores de cámara como RoverCam.
Por último, este trabajo nos convenció, nuevamente, de que la programación es capaz de entregarnos el espacio, así como recursos y herramientas, para llevar a cabo nuestras ideas y proyectos creativos. Consideramos el aprendizaje y la experimentación esencial para nuestro futuro y desarrollo profesional.
Citas y referentes
3d maze por Grdelpriore en (https://editor.p5js.org/Grdelpriore/sketches/kyn_j-kfB)
Background with Music por magicsfirst en (https://editor.p5js.org/magicsfirst/sketches/sFVqT3XPu)
FP PoV example controller 6 por jwdunn1 (jWilliamDunn) en (https://editor.p5js.org/jwdunn1/sketches/iI-2XX0Hw)
p5.RoverCam en (https://github.com/freshfork/p5.RoverCam)
p5play en (https://p5play.org/)
point and click game por dorianraev en (https://editor.p5js.org/dorianraev/sketches/LnuoG9g7X)
battle arena game por Johnny1 en (https://editor.p5js.org/Johnny1/sketches/oenbafnX2)
Creating a Simple Platformer Game in P5.play: A Step-by-Step Tutorial en (https://youtu.be/MQogwR0uoSY?si=y7_DrK9hb92_Tzyf)
Video on Canvas en (https://p5js.org/examples/imported-media-video-canvas/)
DISCLAIMER:
Esto no tiene nada de Inteligencia artificial. Hicimos otra cosa y no nos fijamos. No sean nosotros.