Temática:
Graffic-Jam es un beat ‘em up en 2D para 2 jugadores, inspirado en la cultura del graffiti. El juego cuenta con varios niveles. Cada uno de ellos es un escenario distinto relacionado con el mundo del graffiti, como por ejemplo las vías de un tren o las calles de una ciudad. Los jugadores tienen como objetivo llegar al final de dicho nivel para poder pintar una pieza de graffiti, y en el camino se encontrarán con diferentes oleadas de enemigos a los que tendrán que derrotar, como policías, cuerpos de seguridad u otras bandas.
Integrantes:
| Nombre | Perfil GitHub | |
|---|---|---|
| LUNA BOUZÓN RODRÍGUEZ | [email protected] | lunsbzn |
| YERAY DA SILVA DE LAS HERAS | [email protected] | yerayds |
| RAFAEL GONZÁLEZ DE CANALES LORA | [email protected] | rafagcl01 |
| MARTA RABOSO GÓMEZ | [email protected] | iamboredasf |
| FABIO ELÍAS RENGIFO GARCÍA | [email protected] | faviolado |
| LUCAS RUBIO LEZANA | [email protected] | LucasWiggie |
TRELLO:
https://trello.com/invite/b/K4BjzJWR/ATTI24e95a6ef74904da1f7067f482233aa1EF865F47/jaleo-games
Vídeo WebSockets y explicación del juego:
https://youtu.be/QGXroDiclX4
Interfaz de inicio del juego Graffic-Jam con un botón que al ser pulsado llevará al jugador a la selección del modo de juego.
Interfaz de selección del modo de juego donde se muestra la opción de modo de juego off-line, on-line y la posibilidad de volver hacia la interfaz de inicio de juego (Solo está habilitado jugar el modo de juego off-line).
Interfaz del Lobby, donde se muestra el chat funcional y los jugadores que estan conectados:
Interfaz del selector de niveles dando la posibilidad de seleccionar entre el nivel 1, nivel 2 y nivel 3 (Aunque a fecha de la entrega tan solo está habilitado jugar el nivel 1). Además, al igual que en la interfaz anterior, te da la opción de volver al selector de modo de juego.
En esta pantalla se muestra el nivel 1 indicando en las esquinas superior la vida de los dos personajes reflejadas en corazones y en la esquina inferior derecha el botón de pausar el juego. Además se encuentran los respectivos personajes y policias sobre un escenario.
En el momento en el que uno de los dos jugadores muere este queda sin poder hacer nada en el nivel mostrandose a este mismo aturdido con estrellas en la cabeza.
Al pulsar el botón de la esquina inferior derecha del nivel 1 se conduce a los jugadores a la interfaz de pausa con la opción de reanudar el juego o de volver a empezarlo de nuevo.
Al superar el nivel a los jugadores se les lanzará esta pantalla donde indica que han superado con éxito el nivel. Además, aparece un botón "menu" que llevará de nuevo al selector de niveles.
En el momento en el que los jugadores mueran el nivel acaba y salta esta pantalla con la opción de volver al menu, es decir, al selector de niveles.
A continuación se mostrarán los diversos diagramas de navegación del juego:
Diagrama de la interfaz del menú del juego con la opcion de jugar que desenboca en el selector de modo del juego y en la selección del nivel.
Diagrama de interfaz de pausa con la opción de reanudar o volver a empezar.
Diagrama de interfaz del final de partida en caso de Victoria con la opción de ir al menú.
Diagrama de interfaz del final de partida en caso de Derrota con la opción de ir al menú.
A continuación se mostrará el diseño del juego enseñando los diferentes sprites:
Se han creado 6 clases para controlar el servidor. Las clases Message, Player y Lobby son clases @Service que permiten añadir elementos al propio servidor. La clase Lobby está compuesta de listas de Mensajes enviados y listas de Jugadores que se han conectado. Por otro lado, File es una clase de tipo @Repository que será la encargada de gestionar la persistencia de datos una vez se finalice la ejecución del proyecto en el servidor. LobbyController es una clase de tipo @Controller. En está clase se sitúan los métodos GET, POST y DELETE para crear, introducir y eliminar datos en el servidor. Es la clase contenedora de todo lo que tiene que ver con el REST. Finalmente la clase SBApplication es de tipo @SpringBootApplication y será la encargada de configurar automáticamente la aplicación en función de las dependencias agregadas en el proyecto.
- Descomprimir JeR_22-23_F3_GRUPO-A.zip
- Abrir la consola de comandos
- El jar se encuentra dentr de la carpeta Prac3_GrafficJam\target. Escribir en la consola de comandos: java -jar Direccion del Jar (incluyendo al final de la dirección el nombre del archivo .jar)*
- Abrir en un navegador localhost:8080
*(Se puede producir un error si java no está actualizado)
Para el nivel online se han creado los archivos onlineLevel.js junto a pauseOnlineScene.js, gameWinOnline.js y gameOverOnline.js
Para la inclusión de Websockets se ha creado la clase App.java, que se encarga de configurar el apartado de Websockets, además de Handler.java y connection.js. Cuando se quiere notificar al servidor de un cambio (para que este avise a su vez al otro jugador o para que actualice algún valor), connection.js se encargada de enviar un mensaje al servidor a través de la sesión del jugador. Este mensaje contiene un atributo llamado "idFunción" que al llegar al servidor, handler utiliza para seleccionar un case del switch que tiene. Cada case determina el tipo de acciones que se deberán llevar a cabo en consecuencia al aviso. Una vez se ha procesado el mensaje, se reenvía otro al cliente opuesto. Este lo recibe en connection.js, que utiliza la ID_Funcion del mensaje enviado desde el servidor para llevar a cabo las acciones necesarias y modificar lo que sea conveniente para que se transmita de forma correcta la información entre jugadores.
EJ: Movimiento a la derecha del Jugador 1
- Cuando el Jugador 1 pulsa la tecla D, se ejecuta la función playerMoveRight() de connection.js, enviando así un mensaje al servidor
- El servidor lo recibe y en Handler.java utiliza el atributo idFuncion = 5 para ejecutar el case(5), que envía otro mensaje pero esta vez al Jugador 2, notificándole del movimiento de Vivo (Jugador 1)
- El Jugador 2 recibe el mensaje en su clase connection.js, que gracias a ID_Funcion = 5 ejecuta la función activate_WEB_goRight() en el case 5
- activate_WEB_goRight() está en onlineLevel.js y activa un booleano de forma que en el siguiente update, hará que se entre en un if() y se mueva a Vivo
De esta forma, las acciones de cada uno de los Jugadores se transmiten de forma correcta entre cada uno de ellos y se puede jugar online sin problemas.
Sin embargo, esta implementación presentó ciertos errores en la entrega ordinaria, por lo que se han implementado nuevos WebSockets (con sus respectivos archivos java para la gestión en el servidor) para solucionarlos:
- syncWS.js, sync2WS.js: cada 200ms, envían un mensaje mediante WebSockets al servidor con las coordenadas del personaje correspondiente al jugador. De esta forma, las posiciones de Vivo y Tuerto son siempre exactamente las mismas en ambos clientes.
- syncEnemiesWS.js: cada 200ms, el Jugador 1 envía un mensaje mediante WebSockets al servidor con las coordenadas de todos cada enemigo, de esta forma nos aseguramos que ambos clientes tienen los enemigos en la misma posición y no hay diferencias.
- syncEnemyAttackWS.js: sincroniza el ataque de los enemigos para que en ambos clientes ataquen al mismo tiempo, provocando que se quite la vida en ambos en caso de que un personaje reciba daño.
-
El fondo de las pantallas de pausa, gameOver y gameWin dan fallo cuando se carga una de las pantallas. El fondo del primer menu en aparecer es el que sale en los tres menus restantes.
-
Las animaciones del ataque de los enemigos son muy rápidas y los enemigos se superponen.
-
Las detección de ataque tanto de enemigo a jugador como de jugador a enemigo está implementado de forma problematica en cuanto a las colisiones. Se detecta la colisión por el bounding box de cada uno por lo que solo se detectan los ataques si se están moviendo y chocando en direccion al enemigo.
-
Están implementados los world colliders pero si el personaje es empujado por el enemigo estos no funcionan.
-
El movimiento en diagonal del personaje permanece cuando se suelta uno de los botones de movimiento.
-
Cuando pausas en los niveles 2 y 3 no te deja volver a la partida.
-
Los enemigos atacan muy rápido, por lo que, derrepente el jugador podría perder muchas vidas si tiene varios enemigos cerca.
Los siguientes errores han sido solucionados:
-
Daño de los enemigos. (Actualmente los enemigos quitan los corazones indicados cuando te atacan, es decir, en el nivel 1 tan solo 1 corazón, en el nivel 2 dos corazones y en el nivel 3 tres corazones).
-
Superposición (Añadimos la capacidad de cambiar de la profundidad, creando la sensación de que los enemigos estan unos detrás de otros).
-
Enemy collider (El jugador ya no necesita estar corriendo hacia los enemigos para hacerles daño al atacar).
-
World collider (Los enemigos ya no te empujan fuera del mapa).
-
Misma resolución de los personajes (Los personajes tienen ahora la misma resolución de imagen).
-
Correcta gestión de escenas de pausa, gameover y gamewin.
-
La animación de ataque de los enemigos ha sido ralentizada de modo que ahora sí puede verse correctamente.
-
El movimiento en diagonal del personaje ya funciona correctamente, por lo que, si se deja de pulsar uno de los botones de movimiento, tan solo va a la dirección que estes pulsando.
-
Ya deja volver a la partida aunque pauses en los niveles 2 y 3.
-
Se ha arreglado el hecho de que los enemigos atacasen muy rápido.
- Cuenta atrás antes de comenzar el nivel:
Ahora, al comienzo de cada nivel se dará una cuenta atrás para que los jugadores se preparen para superar el nivel.
- Nuevos niveles:
Se han implementado dos nuevos niveles con diferente temática, en el segundo de ellos nuestros personajes se encontrarán en una carretera, mientras que en el tercer nivel los personajes estarán en una estación de trenes.
Además, para poder acceder al nivel 2, los jugadores necesitarán superar el nivel 1 y, en caso de querer acceder al nivel 3, los jugadores tendrán que completar el nivel 2.
Nivel 2
Nivel 3
- Nuevos fondos de victoria:
Tanto el nivel 2 como el nivel 3 tendrán su propio fondo de victoria.
Nivel 2
Nivel 3
- Nuevos enemigos:
Además de implementar nuevos niveles se han desarrollado nuevos policias para los nuevos niveles. Asimismo, en el juego, los policias del nivel 2 quitarán un total de 2 corazones por golpe, y, los policias del nivel 3 quitarán 3 corazones por ataque realizado.
- Nuevo logo e imagen principal:
Se ha refinado y rediseñado el logo del juego:
- Nuevo fondo de Pausa:
Se ha actualizado el aspecto visual del antiguo fondo de pausa. Ahora, además contiene los controles de los personajes para que los jugadores puedan consultarlos en cualquier momento.
- Nuevo fondo de Derrota:
Se ha actualizado el aspecto visual del fondo de derrota ya que el anterior nos parecía muy simple.
