Laberinto Encantado

Descripción

¡Prepárate para un épico enfrentamiento multijugador en un desafío de laberintos a toda velocidad! En este juego, serás asignado aleatoriamente a uno de los cuatro equipos, cada grupo representado por un color único. ¿Tu misión? Navegar por el laberinto y ser el primero en escapar a través de la puerta que coincida con el color de tu equipo. ¡Pero cuidado! Si chocas con jugadores de equipos contrarios o te disparan, estarás fuera. La emoción aumenta cuando solo un jugador puede asegurar la victoria para todo su equipo. ¿Podrás superar a tus rivales y llevar a tu grupo al triunfo? ¡Entra y demuestra tu habilidad!.

Imagenes del juego

Conectados
Partida
Cámara Jugador
Muerte
Ganador

Trailer

Gameplay

¿Quieres ver como se desarrolló?

¡Mira las siguientes secciones!

Grupo 12

Portafolio de Desarrollo de Juegos de Video donde se detalla todo el proceso realizado para la construcción de un videojuego, pasando por todos los procesos de Design Thinking, desde la ideación hasta la entrega del producto final.

Miembros:
  • Dilan Orlando Morales Pineda
  • Jonathan Javier Pibaque Ponce
  • Emilio Ignacio Sáenz Gómez
  • Cristina Victoria Tigrero Tigrero
Imagen de portada

Ideas

Para la realización de la ideación de juegos, se hizo uso de la técnica del Brainstorming para generar un total de 61 ideas, realizadas en dos tandas. La primera tanda reúne las primeras 30 ideas, mientras que la segunda tanda reune las 31 ideas restantes. También, se usó herramientas de apoyo para la generación de ideas tales como:

Ideas relevantes

De las 61 ideas generadas, se seleccionaron la que a nosotros como grupo nos pareció las 3 ideas más relevantes, tomando en cuenta su factibilidad, diversión, facilidad de entender y posible intuitividad.

Idea 31

Se escogió esta idea ya que puede ser escalable a una gran cantidad de personas que lo pueden jugar. El juego es de tipo Tower Defense con temática alien, y los jugadores podrán hacer uso del rol asignado para defender la casa. El juego necesita de juego en equipo, estrategia en la ejecución de los roles correspondientes.

Idea 44

Encuentra el Enemigo es un juego de salón individual cuyo principal atractivo es la estrategia necesaria para ganar la mayor cantidad de puntos mientras se evita que los contrincantes disminuyan los propios. El juego puede considerarse caótico debido a que su mecánica principal es el 'tap', que debe usarse continuamente durante toda la partida. Es un juego en el que se necesita tener mucha atención y concentración para llegar al podio.

Idea 53

El Laberinto Encantado se lo seleccionó ya que su mecánica de juego es fácil de entender, puede permitir la creación de estrategias en los equipos y existiría una gran adrenalina con los encuentros entre los equipos.

Storytelling

1. Encuentra al enemigo

Este es un juego de estrategia en tiempo real donde los participantes se colocan aleatoriamente en un mapa y deben eliminar a los demás jugadores tocando su ubicación. Los jugadores pueden ver el mapa para encontrar a otros, pero al hacerlo, su propia posición se vuelve visible, haciéndolos vulnerables. El objetivo es eliminar a tantos jugadores como sea posible, y el ganador es quien haya eliminado a más participantes.

Imagen de ejemplo
1. Al abrir el juego, se muestra un mapa generado al azar que será usado durante la partida.
Imagen de ejemplo
2. Cuando el juego inicia, se visualizan todas las posiciones: los enemigos en rojo y tu posición con un color de borde distintivo.
Imagen de ejemplo
3.Para eliminar a un contrincante, debes hacer tap en la pantalla en la ubicación del enemigo.
Imagen de ejemplo
4. Para ocultarte, debes hacer tap en "Salir", lo que hará que tu posición desaparezca del mapa.
Imagen de ejemplo
5. Un jugador puede salir del escondite haciendo tap en la pantalla, o el juego lo regresará a la partida automáticamente en 3 segundos.
Imagen de ejemplo
6. Cada vez que un jugador regresa al juego, el juego lo coloca en una nueva posición al azar en el mapa.

2. Laberinto encantado

El objetivo del juego es salir del laberinto a través de la puerta que coincide con el color asignado a tu grupo. Todos los jugadores conectados se dividen aleatoriamente en 4 grupos, cada uno representado por un color y un número distintivo para cada jugador. Si dos jugadores de equipos contrarios chocan, ambos mueren. Además, los jugadores pueden disparar a miembros de otros equipos. El grupo vencedor será aquel cuyo número ganador logre completar el laberinto primero.

Imagen de ejemplo

3. Defender el vecindario

Es un juego de tipo Tower Defense cooperativo que trata de defender el vecindario contra el ataque alien que se a apoderado del mundo, solo el vecindario es el único lugar a salvo del planeta. A los jugadores se le repartirán 4 roles de defensa. Cada jugador contará con un tiempo de espera para colocar lo que le corresponde. Los jugadores lograrán la victoria si consiguen sobrevivir los 60 segundos que dura la invasión, pero deben tener cuidado ya que cada vez que pasa el tiempo, aparecen más aliens y el peligro incrementa.

Imagen de ejemplo
Cuenta con ciertas restricciones dependiendo del rol que los jugadores pueden tener. En total, el jugador tiene la posibilidad de jugar con 4 roles: Tropa de soldados, muro, torre antiovni y minas de proximidad. Las tropas solo pueden atacar de frente en un rango amplio de distancia mientras esté dentro de los 180° de visión periférica. Los jugadores logran la victoria cuando la invasión sea exterminada al completo.
Imagen de ejemplo

Prototipos

1. Encuentra al enemigo

Versión #1

Imagen de ejemplo
Sala de espera donde se muestra la lista de jugadores y el botón para iniciar el juego.
Imagen de ejemplo
Mapa con los marcadores rojos que representan a los enemigos, el marcador negro que representa al jugador, y el botón de escape que permite esconderse por 5 segundos.
Imagen de ejemplo
Durante el juego, los marcadores rojos pueden moverse, ya que los jugadores pueden escapar de su posición y moverse aleatoriamente a otro lugar.
Imagen de ejemplo
Para ganar puntos, es necesario hacer tap en los marcadores rojos (enemigos). El punto se visualizará como una moneda con un +1.
Imagen de ejemplo
Cuando los demás jugadores hagan tap en tu marcador (color negro), se te restará 1 punto.
Imagen de ejemplo
Cuando el jugador decide escapar, se llevará a otra pantalla donde no podrá visualizar a los contrincantes. Esto solo puede durar un máximo de 5 segundos; de lo contrario, será regresado al mapa. Además, puede salir antes haciendo tap en el botón de regresar.
Imagen de ejemplo
Cuando se regresa al mapa, la nueva posición es escogida al azar.
Imagen de ejemplo
Una vez finalice el juego, se mostrará la tabla de resultados con los detalles de puntos ganados, perdidos y el total.
Playtesting
Retroalimentación:
  • Se pierde mucho tiempo en la pantalla de escondite.
  • La mecánica de posicionarse al azar le quita la estrategia al juego.
  • No está muy claro cuándo es necesario escapar, ya que los puntos que se pierden no se visualizan claramente.

Versión #2

Imagen de ejemplo
Sala de espera donde se muestra la lista de jugadores y el botón para iniciar el juego.
Imagen de ejemplo
Mapa con los marcadores rojos que representan a los enemigos, el marcador negro que representa al jugador, y el botón de escape que permite esconderse por 5 segundos.
Imagen de ejemplo
Durante el juego, los marcadores rojos pueden moverse, ya que los jugadores pueden escapar de su posición y moverse aleatoriamente a otro lugar.
Imagen de ejemplo
Para ganar puntos, es necesario hacer tap en los marcadores rojos (enemigos). El punto se visualizará como una moneda con un +1.
Imagen de ejemplo
Cuando se recibe más de tres taps en contra, la pantalla muestra bordes de color rojo para alertar al jugador.
Imagen de ejemplo
Al escapar, al usuario se le ofrecen ubicaciones a las cuales puede moverse y que no tienen mucha concurrencia de otros jugadores.
Imagen de ejemplo
EL jugador es ubicado en su nueva posición
Imagen de ejemplo
Una vez ubicado en su nueva posición, el jugador puede volver a ganar puntos realizando tap sobre los marcadores de color rojo.
Imagen de ejemplo
Cuando se recibe más de tres taps en contra, la pantalla muestra bordes de color rojo para alertar al jugador.
Imagen de ejemplo
Al escapar, al usuario se le ofrecen ubicaciones a las cuales puede moverse y que no tienen mucha concurrencia de otros jugadores.
Imagen de ejemplo
Imagen de ejemplo
Una vez finalice el juego, se mostrará la tabla de resultados con los detalles de puntos ganados, perdidos y el total.
Cambios hechos
  • Se añaden marcos de color rojo para alertar al jugador de que está siendo atacado muchas veces.
  • Se quita la habitación de escape.
  • Ya no se cambia la ubicación del jugador de manera aleatoria; ahora se permite que el usuario escoja posibles opciones de escape.
Playtesting
Retroalimentación:
  • La mecánica del juego permite abusar al realizar varios taps seguidos sobre un mismo oponente de manera indefinida.
  • Durante el juego, no está claro cuáles son los participantes con mayor puntaje, por lo que sería conveniente resaltar su tamaño o color para que sean objeto de una mayor cantidad de ataques.
  • El boton escapar debe estar mejor pensado, ya que se pierde con los colores del mapa.
  • La mecánica del juego sigue siendo confusa y no se ve entretenida.
  • El factor estratégico no es alto, no se puede afectar mucho las acciones de otras personas por lo que uno hace.
  • Hasta el final del juego, nadie sabe quien es quien.
  • Se debería detallar el tema de cómo se entrar a las partidas
  • El escape de un lado al otro resulta ser algo monótono

2. Laberinto encantado

Versión #1

Imagen de ejemplo
Pantalla de inicio del juego, donde incluye opciones para crear y jugar una partida pública y privada
Imagen de ejemplo
Lista de espera de jugadores
Imagen de ejemplo
Inicia el juego, el objetivo del equipo es salir por la puerta ubicada al otro extremo. Con que uno llegue es suficiente para ganar.
Imagen de ejemplo
Los jugadores se mueven con las flechas
Imagen de ejemplo
También tienen la posibilidad de atacar a los rivales.
Imagen de ejemplo
Un jugador es eliminado de la partida cuando recibe una bala.
Imagen de ejemplo
Los equipos pueden diseñar estrategias para ganar dentro de 60 segundos.
Imagen de ejemplo
Si un jugador del equipo llega a la meta, el equipo gana la partida.
Playtesting
Retroalimentación:
  • Sería bueno tener la opción de destruir, reconstruir o crear nuevas paredes.
  • También podría ser interesante incluir armas que se puedan lanzar, como granadas.
  • Hay tácticas y estrategias gracias a la visión que se tiene de los otros jugadores, como campear tu zona de aparición.
  • Es posible la creación de roles según qué estrategia quiere usar un equipo. Ejemplo: uno se queda en base, otro hace picking para ver si puede matar a alguien, alguien que vaya con cuidado, etc.
  • Es divertido ya que le da libertad a los usuarios a crear sus propios roles y estrategias.
  • Es interesante para la creación de estrategias y tener cuidado de que te puedan disparar.
  • Corregir ortografía en la pantalla de inicio.
  • El botón de moverse con las flechas no es muy óptimo, se presta a realizar movimientos errónes. Se lo puede cambiar por un joystick.
  • El botón de ataque no es muy entendible, visualmente no dice que es para atacar. Lo de la pantalla quebrada da más dudas que certezas, no se sabe si tiene un significado en sí.

Versión #2

Imagen de ejemplo
Pantalla de inicio del juego, donde incluye opciones para crear y jugar una partida pública y privada
Imagen de ejemplo
Ingreso de Nick.
Imagen de ejemplo
Lista de usuarios en linea esperando que inicie la partida
Imagen de ejemplo
Inicia el juego, el objetivo del equipo es salir por la puerta ubicada al otro extremo. Con que uno llegue es suficiente para ganar.
Imagen de ejemplo
Se está utilizando un joystick para mejor movilidad dentro del juego, además de un botón deslizante con dos tipos de armas: granadas y una de disparos.
Imagen de ejemplo
Un jugador es eliminado si recibe tres disparos o le cae una granada. La explosión de la granada tiene cierto radio de impacto; los jugadores que se encuentren dentro del radio equivaldrían a un disparo.
Imagen de ejemplo
La eliminación de un jugador se vería como una explosión que no daña a los demas jugadores. Además, en este juego los equipos pueden diseñar estrategias para ganar dentro de 60 segundos.
Imagen de ejemplo
Si un jugador del equipo llega a la meta, el equipo gana la partida.
Imagen de ejemplo
Si un jugador del equipo llega a la meta, el equipo gana la partida.
Cambios hechos
  • Se incluyó un arma adicional: la granada.
  • Se incluyó un joystick
  • Se incluyó una entrada de código de invitación.
  • Se incluyó una entrada de nick.
  • Se incluyó una nueva regla respecto a la utilización de granadas.
Playtesting
Retroalimentación:
  • Sería bueno tener la opción de destruir, reconstruir o crear nuevas paredes.
  • También podría ser interesante incluir más variedad de armas e ítems distribuidos dentro del laberinto. Por ejemplo, un ítem de escudo: si un jugador de un equipo agarra el ítem, todos los jugadores tendrán la protección de un escudo, que sería el equivalente de aguantar un disparo adicional.

3. Defender el vecindario

Versión #1

Imagen de ejemplo
Pantalla de inicio del juego, donde se ingresa el código de invitación del juego y el botón para ingresar a la sesión.
Imagen de ejemplo
Pantalla donde se detalla el rol que va a ejercer el jugador a lo largo del juego. Pueden tocar los siguientes roles: Tropa de soldados, muro de contención, torre antiovni y mina de proximidad.
Imagen de ejemplo
Empieza la partida con un contador de 3 segundos, luego con un minitutorial indicando los controles básicos y las mecánicas del juego. Haciendo TAP en la pantalla, se colocará la defensa correspondiente en el lugar indicado.
Imagen de ejemplo
En la parte superior derecha, hay un timer que indica el tiempo de espera para colocar la defensa. Mientras que la parte superior muestra el progreso de la invasión alien.
Imagen de ejemplo
Cuando finaliza el timer, éste indicará que se puede colocar una nueva defensa.
Imagen de ejemplo
Las defensas pueden ser mezcladas, reforzando así el bloque defensivo: las tropas se pueden colocar encima de los muros de contención o en las torres, haciendo que tengan una defensa a tierra y aérea respectivamente.
Imagen de ejemplo
Los aliens aparecerán a los 10 segundos de inicio de la partida, y tendrán hasta 40 segundos para intentar llegar al vecindario.
Imagen de ejemplo
Los aliens pueden atacar por tierra y por aire, los cuales se dividen en: aliens (ataque por tierra), ovni armado (ataque por aire) y ovni invocador (invoca aliens en cualquier sitio del mapa). Además, en la parte superior muestra el progeso de la invasión.
Imagen de ejemplo
Las defensas y los aliens solo pueden atacar un objetivo a la vez. Adicional a ello, los ovnis solo pueden atacar las estructuras (torres y muros), mientras que las torres solo pueden atacar a los ovnis. Las tropas solo atacan a los aliens, mientras que los aliens son capaces de atacar a las tropas y estructuras.
Imagen de ejemplo
Se obtiene la victoria en equipo cuando la raid alien finaliza, sobreviviendo al ataque y salvando el vecindario de que sea abducido.
Imagen de ejemplo
También se contempla el escenario de la derrota, donde sí un alien/ovni toca el área del vecindario, se le colocará encima una luz violeta indicando que llegó.
Imagen de ejemplo
Empieza una animación donde se muestra que se abduce el vecindario entero.
Imagen de ejemplo
Finalizada la abdución, las defensas desaparecen.
Imagen de ejemplo
Y por último, se muestra la pantalla de derrota.
Playtesting
Retroalimentación:
  • Inicio de juego difícil de seguir para alguien que desconoce del género.
  • Recomienda poner pantalla en el inicio donde hable de todas las instrucciones y el objetivo del juego.
  • La visual del juego es muy buena.
  • No existe una forma para crear una partida, solo para unirse
  • No está claro si los otros campamentos juegan junto a ti o si solo tienes que defenderlos.
  • A las personas entrevistadas les parece la idea más interesante de las presentadas
  • La asignación de roles permite a los jugadores a estar atentos de qué y cómo colocan los otros sus defensas, lo cual puede llevar a situaciones graciosas como la equivocación de una persona con su tropa y el regaño de los otros.
  • La mecánica de las mezclas de las defensas es interesante, ya que da juego a más estrategia.
  • Podría haber un rol especial para el anfitrión de la partida, y que sea quien guíe a todo el equipo.

Versión #2

Imagen de ejemplo
Pantalla de inicio del juego, donde se ingresa el código de invitación del juego y el botón para ingresar a la sesión. También está la opción de crear una nueva partida y de poder ver toda la información del juego (roles, reglas y enemigos).
Imagen de ejemplo
La pantalla de información indica el objetivo del juego, además te permite ingresar a las pantallas de roles, reglas y enemigos.
Imagen de ejemplo
En los roles se detalla los roles que los jugadores pueden tener en la partida, estos son: tropa de soldados, muro de contención, torre anti-ovni y mina de proximidad.
Imagen de ejemplo
En controles y reglas, se detalla cómo se coloca una defensa y las reglas a seguir en el juego.
Imagen de ejemplo
En enemigos, se detallan los tres enemigos presentes en el juego.
Imagen de ejemplo
El anfitrión tiene el control de la partida, el juego genera un código de forma aleatoria y lo puede compartir con otros jugadores. Además, puede elegir libremente qué rol ejercer.
Imagen de ejemplo
Pantalla donde se detalla el rol que va a ejercer el jugador de forma aleatoria a lo largo del juego. Pueden tocar los siguientes roles: Tropa de soldados, muro de contención, torre antiovni y mina de proximidad.
Imagen de ejemplo
Empieza la partida con un contador de 3 segundos, luego con un minitutorial indicando los controles básicos y las mecánicas del juego. Haciendo TAP en la pantalla, se colocará la defensa correspondiente en el lugar indicado.
Imagen de ejemplo
En la parte superior derecha, hay un timer que indica el tiempo de espera para colocar la defensa. Mientras que la parte superior muestra el progreso de la invasión alien.
Imagen de ejemplo
Cuando finaliza el timer, éste indicará que se puede colocar una nueva defensa.
Imagen de ejemplo
Las defensas pueden ser mezcladas, reforzando así el bloque defensivo: las tropas se pueden colocar encima de los muros de contención o en las torres, haciendo que tengan una defensa a tierra y aérea respectivamente.
Imagen de ejemplo
Los aliens aparecerán a los 10 segundos de inicio de la partida, y tendrán hasta 40 segundos para intentar llegar al vecindario.
Imagen de ejemplo
Los aliens pueden atacar por tierra y por aire, los cuales se dividen en: aliens (ataque por tierra), ovni armado (ataque por aire) y ovni invocador (invoca aliens en cualquier sitio del mapa). Además, en la parte superior muestra el progeso de la invasión.
Imagen de ejemplo
Las defensas y los aliens solo pueden atacar un objetivo a la vez. Adicional a ello, los ovnis solo pueden atacar las estructuras (torres y muros), mientras que las torres solo pueden atacar a los ovnis. Las tropas solo atacan a los aliens, mientras que los aliens son capaces de atacar a las tropas y estructuras.
Imagen de ejemplo
Se obtiene la victoria en equipo cuando la raid alien finaliza, sobreviviendo al ataque y salvando el vecindario de que sea abducido.
Imagen de ejemplo
También se contempla el escenario de la derrota, donde sí un alien/ovni toca el área del vecindario, se le colocará encima una luz violeta indicando que llegó.
Imagen de ejemplo
Empieza una animación donde se muestra que se abduce el vecindario entero.
Imagen de ejemplo
Finalizada la abdución, las defensas desaparecen.
Imagen de ejemplo
Y por último, se muestra la pantalla de derrota.
Cambios hechos
  • Añadido botón de información y creación de partida en la pantalla inicial
  • Nueva pantalla donde se detalla el objetivo del juego
  • 3 nuevas pantallas que habla sobre los roles, reglas y enemigos.
  • Pantalla de inicio del anfitrión.
Playtesting
Retroalimentación:
  • El rol de las minas puede llegar a ser aburrido.
  • La palabra Roles no parece ser la más óptima para describir a las defensas.
  • Puede ser posible que no se distinga una diferencia clara entre el ovni armado y el ovni invocador.
  • Colocar un indicador de daño de las tropas para tener una mejor guía y una mejor preparación para reforzar una zona. Este indicador puede ser una barra ubicada en la parte superior de una defensa que indique la vida de una defensa o que se vea algo visual, por ejemplo que las estructuras muestren una grieta, las tropas sean menos.
  • La parte informativa está excelente su implementación, ya que sirve como guía para los jugadores principiantes además de informar bien el objetivo del juego.

Tecnologías

Para empezar con el desarrollo del Juego, primero se realizó la elección de qué idea/prototipo se iba a realizar, tomando en cuenta el tiempo de duración del desarrollo del juego, qué tan entretenido es para el público y que sea sencillo de entender para todos. Por ello, se optó por elegir el juego de Laberinto Encantado.

Imagen de ejemplo
Imagen de ejemplo
Imagen de ejemplo
Imagen de ejemplo
Imagen de ejemplo
Imagen de ejemplo
Imagen de ejemplo
Imagen de ejemplo
Imagen de ejemplo

Tecnologías

Para la creación del juego, hemos optado por el uso de las siguientes tecnologías:

  • Unity 2D: Para el desarrollo del juego, hemos optado por realizarlo con el famoso motor de videojuegos Unity. Esto se decidió debido a su facilidad en el diseño de los niveles, implementación de los objetos, texturas, sonidos en un juego y su adaptabilidad con otros sistemas.
  • Socket IO: Para la conexión de los jugadores al juego, además de implementar la lógica de la partida.
  • Photoshop e Illustrator: Para la creación/edición de las texturas presentes dentro del juego.
  • Unity Sprite Store: También usaremos la plataforma de Unity donde se puede descargar ya sea de forma pagada o gratuita sprites como texturas, sonidos, paletas que pueden ser útiles para el proyecto.
  • GitHub: Para el guardado del juego en la nube, además para que sirva como punto de enlace del equipo de trabajo.
  • Render: Para el despliegue del servidor (backend).

Arquitectura del Sistema

Para el diseño de la arquitectura del sistema que tendrá el proyecto primero obtamos por la identificación de qué componentes van a participar dentro de ella. Hay que tomar en cuenta varios aspectos con respecto al juego elegido, tales como que es un juego cooperativo en equipo destinado a que lo jueguen varias personas, además de que debe estar disponible para la mayoría de dispositivos como computadoras y celulares, que el acceso al juego sea rápido y que siempre cuente con buen rendimiento.

Componentes

  • Game Client (Frontend): Encargado de la renderización de las texturas, reproducción de audios y la captura de los movimientos del jugador de forma local. Para este componente usaremos Unity.
  • Game Server (Backend): Es el servidor donde estará funcionando la lógica del juego, además de comunicar de forma sincrónica lo que ocurre a todos los jugadores. Para el caso del proyecto, será el encargado de realizar la generación de los niveles, conteo de kills y/o escapes de los equipos por la puerta correspondiente. Para este componente usaremos Socket IO

Otras consideraciones

  • Rendimiento: El juego debe presentar un buen rendimiento en todo momento y que sea rápida la carga del tiempo entre que el jugador accede al juego y el desarrollo de la partida.
  • Portabilidad: El juego debe ser ejecutable en la mayoría de dispositivos, entre los cuales se incluye a los móviles y las computadoras.

Decisiones de diseño

Conforme ibamos revisando las tecnologías que vamos a usar y también conforme se iba detallando la arquitectura que el sistema puede tener, del prototipo seleccionado se tomaron algunas decisiones de diseño.

  • La generación del laberinto pasa de ser un nivel predeterminado a una generación procedural, de esta forma los jugadores van a jugar siempre en distintos mapas.
  • Los controles serán distintos dependiendo de la plataforma en que un jugador esté jugando. Para aquellos que usen un móvil, se le mostrará un joystick junto al ataque, mientras que para los usuarios en computadora solo se le mostrará el arma que porta.

Planificación

Antes de empezar con el desarrollo del Juego Laberinto Encantado, optamos por realizar una planificación de las tareas que cada miembro del equipo iba a tener dependiendo del tiempo y los conocimientos que se tuvieran. Además, a cada miembro del equipo se le asigno un rol que iba a llevar dentro del equipo a lo largo del proceso de desarrollo del proyecto. Estos roles se dividieron de la siguiente forma:

Emilio Sáenz

Desarrollador Juego

Diseño de Assets

Dilan Morales

Desarrollador servidor

Conexión cliente - servidor

Jonathan Pibaque

Diseño de Assets

Interfaz de Usuario

Cristina Tigrero

Ideación del Juego

Documentación y Playtesting

Cronograma de Tareas

El desarrollo del proyecto empezó exactamente el 30 de Julio del 2024 con la asignación de los roles que cada miembro del equipo iba a tener y también con la designación de las primeras tareas, siendo prioritario el aprendizaje del motor Unity, además de entender bien la forma en como Socket.IO trabajaba. Este cronograma se fue actualizando semanalmente a lo largo del desarrollo y dependiendo de qué se necesitaba realizar o tener.

Semana 1: 28 de Julio - 3 de Agosto

Miembro 28 - Jul 29 - Jul 30 - Jul 31 - Jul 1 - Ago 2 - Ago 3 - Ago
Emilio Leer sobre Unity Planificación Desarrollo Juego (Generación de Laberinto, gameObjects)
Dilan Leer sobre Unity Planificación Desarrollo Servidor (Mecánicas de Juego, DTOs)
Jonathan Leer sobre Unity Planificación Creación de assets (texturas,imágenes, audios)
Cristina Leer sobre Unity Planificación Ideación del juego (reglas, objetivos)

Semana 2: 4 de Agosto - 10 de Agosto

Miembro 4 - Ago 5 - Ago 6 - Ago 7 - Ago 8 - Ago 9 - Ago 10 - Ago
Emilio Desarrollo Juego: pantalla de inicio Movimientos básicos de Jugador, soporte multijugador, control de juego
Planificación
Dilan Lógica del Juego: tiempo del juego y soporte multijugador Lógica del Juego: eventos de disparo, generación procedural del mapa en servidor
Planificación
Jonathan Entrega de Assets Desarrollo de Interfaz de Juego
Planificación
Cristina Planificación Ideación de Potenciadores Entrega de Ideación

Semana 3: 11 de Agosto - 17 de Agosto

Miembro 11 - Ago 12 - Ago 13 - Ago 14 - Ago 15 - Ago 16 - Ago 17 - Ago
Emilio Decoración del mapa y jugadores. Prototipo #1 Mejoras UI Despliegue con WebGL
Planificación Playtesting #1 Reinicio del Juego en cliente
Dilan Arquitectura Asignación de Equipos automática en servidor Levantamiento servidor en Render Despliegue con WebGL Fix de Sockets
Planificación Playtesting #1 Reinicio del Juego en servidor
Jonathan Creación de nuevos assets Desarrollo controles para móviles
Planificación Playtesting #1 Entrega nuevos assets
Cristina Documentación del Proceso Planeación Playtesting #2 y #3 Entrega Plan de Playtesting 2 y 3
Planificación Playtesting #1

Semana 4: 18 de Agosto - 24 de Agosto

Miembro 18 - Ago 19 - Ago 20 - Ago 21 - Ago 22 - Ago 23 - Ago 24 - Ago
Emilio Reunir jugadores Playtesting #2 Playtesting #3 Análisis de Resultados Documentación de Playtesting Videos: trailer y playthrough
Planificación Corrección de errores del Juego
Dilan Reunir jugadores Playtesting #2 Playtesting #3 Análisis de Resultados Portafolio: Prototipos y Desarrollo
Planificación Mejoras de Conectividad Corrección de errores del Servidor
Jonathan Reunir jugadores Playtesting #2 Playtesting #3 Análisis de Resultados Portafolio: Prototipo final Homepage del Juego
Planificación Corrección de errores de UI
Cristina Reunir jugadores Playtesting #2 Playtesting #3 Análisis de Resultados Portafolio: Planificación Playtesting
Planificación Ideación Prototipo 3 Documentación de Playtesting

Plan de Playtesting

Durante la fase de desarrollo, tuvimos que validar el juego desarrollado con otras personas para así tener el feedback necesario y crucial que servirá para ir mejorando el prototipo del juego. Para ello, construimos un Plan de Playtesting el cual servirá para tener una mayor organización al momento de hacer pruebas del juego. El plan que se siguió es el siguiente:

Laberinto Encantado

Imagen de ejemplo

Objetivo del Playtesting

  • Validar si el prototipo presentado es del agrado del público.
  • Verificar si las mecánicas y el objetivo del juego son entendibles para las personas.
  • Obtener retroalimentación tanto positiva como negativa acerca del juego.
  • Escuchar sugerencias de los testers.

Protocolo de Procedimiento

  1. Levantamiento del servidor: Primero, se levanta el servidor que soporta el juego multijugador.
  2. Búsqueda de Personas: Después, se buscan personas que quieran realizar el testing. Pueden ser amigos, compañeros de clase, familiares.
  3. Distribución del juego: Se les pide a los testers entrar a un link donde se encuentra el juego.
  4. Presentación del Juego: Se realiza una presentación del juego, donde se da a entender el objetivo, la descripción de que va a jugar, los controles y cómo funciona la asignación de equipos.
    • Bienvenida: Se realizó una bienvenida de forma general para todos los jugadores: "Bienvenidos a las primeras versiones del juego del laberinto encantado, se espera que puedan disfrutar de la interfaz de este y se puedan divertir en toda esta experiencia."
    • Descripción del Juego: Se introdujo a los jugadores al entorno mediante la descripción del juego
      • Descripción general: "El juego consiste en un laberinto encantado donde se tendrán 4 equipos y consiste básicamente en llegar a la puerta del color representativo del equipo para poder ganar la partida."
      • Equipos: "Los equipos son 4, divididos por colores: Rojo, Azul, Verde y Amarillo. Los equipos son distribuidos equitativamentes."
    • Instrucciones:
      • Objetivo: "Su objetivo es escapar del laberinto por la puerta de salida correspondiente. Con que un integrante del equipo llegue, el equipo ganará el juego."
      • Ataques: "Cada jugador tiene 2 tipos de armas: una pistola que lanza balas infinitas, y 3 granadas que provocan un daño en área."
      • Duración: "Existe un tiempo límite del juego de 60 segundos."
      • Controles: "Los controles son diferentes dependiendo de la plataforma donde estén jugando, pueden jugar desde un computador o desde un teléfono móvil.""
        • Para computador: "Pueden jugar con teclado y ratón o solo con teclado. Para moverse pueden usar las flechas o las teclas WASD. Para disparar o lanzar granadas pueden usar el espacio o el clic izquierdo. Para cambiar de arma, pueden usar la tecla C, E o el clic derecho."
        • Para móviles: "Tendrán disponible un joystick y dos botones. El joystick servirá para mover a su jugador por el mapa. Para disparar o lanzar granadas pulsar el botón grande que se encuentra en la parte inferior derecha de su pantalla. Para cambiar de armar, pulsar el botón pequeño debajo del botón de las armas."
    • Duración del proceso: "El proceso va a tener una duración de 30 minutos ya que se realizarán diferentes partidas, se puede extender el tiempo si el equipo lo requiere o si las personas lo quieren."
  5. Programación de inicio de partidas: Se pacta una hora de inicio del juego, para así esperar a que las personas se conecten.
  6. Inicio del juego: Se empieza a probar el juego.
  7. Fin del juego: Se finaliza con las pruebas.
  8. Preguntas post-testeo: A los participantes, se les realiza preguntas con respecto al testeo. También, se envía un formulario donde pueden dar sus opiniones.
  9. Cierre del Playtesting: "Les agradezcemos a todos por su tiempo y la retroalimentación dada. Sus opiniones nos ayudarán a tomar dimensión de cómo está el estado del juego actualmente y a mejorar el juego. Espero contactarlos de nuevo para futuras pruebas :D"

Preguntas Post-Playtest

  • ¿Qué te pareció el juego?
  • ¿Experimentaste inconvenientes con el formato del juego?
  • ¿Cómo sentiste la jugabilidad y el movimiento de tu jugador?
  • ¿Que te parece el tamaño del mapa?
  • ¿Qué le mejorarías al juego?
  • ¿Volverías a jugar el juego?
  • ¿Qué calificación le das al juego?
  • Comentario adicional sobre el juego

Desarrollo

A lo largo de las semanas, fuimos recopilando algunos avances importantes del proyecto. Fue un proceso bastante trabajoso y duro el sacar adelante del proyecto, pero gracias a nuestra determinación y emoción por esta nueva aventura, pudimos terminar el juego a casi como nosotros lo pensamos desde un inicio.

Imagen de desarrollo 1

Etapa 0 (Investigación)

Investigación sobre las nociones básicas de Unity, cómo crear objetos, niveles, etc. Además, se investigó la tecnología de Socket IO.

Imagen de desarrollo 2

Etapa 1 (Diseño)

Ideación del juego, creación de assets (texturas, audios, imágenes). Se definió las reglas y el objetivo del juego, además se creó los assets para el jugador, las balas y la granada.

Imagen de desarrollo 3

Etapa 2 (Desarrollo)

Generación procedural del laberinto, movimientos básicos del jugador, primeros objetos de juego (jugador, balas, celdas).

Imagen de desarrollo 4

Etapa 1 (Diseño)

Ideación de la mecánica de los potenciadores. Para darle mayor variedad a las partidas y más emoción, se decidió idear una nueva mecánica.

Imagen de desarrollo 5

Etapa 2 (Desarrollo)

Implementación del soporte con SocketIO, renderización de otro jugador.

Imagen de desarrollo 6

Etapa 2 (Desarrollo)

Soporte multijugador en el cliente y en el servidor, envío de datos al servidor.

Imagen de desarrollo 7

Etapa 2 (Desarrollo)

Renderización de movimientos y acciones de los otros jugadores. Mediante SocketIO, se consigue los datos para que de forma local se renderice esa acción.

Imagen de desarrollo 8

Etapa 2 (Desarrollo)

Decorado del mapa con la colocación del área del spawn para cada equipo. Colocación de las puertas de salida para cada equipo. Generación del laberinto para todos.

Imagen de desarrollo 9

Etapa 2 (Desarrollo)

Mejoras de la interfaz de usuario, donde se cambió el fondo, colores de los bordes, indicadores como timer y jugador que se está manejando.

Imagen de desarrollo 10

Etapa 1 (Diseño)

Creación de botones, barra de vida, timer, e indicador del Jugador (parte inferior). Los botones tienen las imágenes de las armas.

Imagen de desarrollo 11

Etapa 3 (Pruebas)

Primera prueba del juego, implementación del indicador del jugador. Diseño y desarrollo de los paneles para el control de juego (Sala de espera, contador, paneles de victoria, panel de muerte).

Imagen de desarrollo 12

Etapa 2 (Desarrollo)

Programación de controles para móviles, además de realizar el despliegue del juego con WebGL.

Imagen de desarrollo 13

Etapa 3 (Pruebas)

Planeación del Playtesting que se va a realizar a las personas.

Imagen de desarrollo 14

Etapa 3 (Pruebas)

Realización de los ciclos de Playtesting.

Imagen de desarrollo 15

Etapa 2 (Desarrollo)

Mejoras y corrección de errores en el cliente con Unity, servidor con SocketIO e interfaz de Usuario con cambios en los assets.

Imagen de desarrollo 16

Etapa 3 (Pruebas)

Documentación y recopilación de las pruebas realizadas a los testers.

Imagen de desarrollo 17

Etapa 4 (Final)

Prototipo final del juego.

Prototipo Final

Versión #1

Imagen de ejemplo
Pantalla de inicio del juego, donde se presenta la cantidad de jugadores conectados. En caso de ser el administrador de la partida, se presenta un botón para iniciar el juego.
Imagen de ejemplo
Inicio de conteo de 3 segundos, indicando que la partida está por comenzar.
Imagen de ejemplo
Desarrollo de la partida, donde los jugadores están buscando la salida del laberinto. Los jugadores pueden cambiar de armas, además de saber la cantidad de munición que tienen.
Imagen de ejemplo
Uso de las granadas y balas entre los jugadores.
Imagen de ejemplo
Pantalla de presentación de la victoria de un equipo.
Imagen de ejemplo
En caso de morir, se presenta una pantalla de muerte y se le da la oportunidad de espectear el juego.
Imagen de ejemplo
Existe la posibilidad de que el resultado de la partida sea un empate. Esto porque ningún equipo consiguió salir del laberinto.
Playtesting
Playtesting #1 - Imagen 1
Playtesting #1 - Imagen 2
Retroalimentación:
  • La interfaz es sencilla, pero no queda claro de qué trata el juego sin una explicación previa.
  • Al reiniciar el juego, el jugador no regresa a la posición de salida correspondiente a su color.
  • En ocasiones, el juego presenta lentitud.
  • Sería recomendable aumentar la dificultad del mapa.
  • El personaje no avanza de manera correcta en algunas secciones del mapa.

Versión #2

Imagen de ejemplo
Pantalla de inicio del juego, donde se presenta la cantidad de jugadores conectados. En caso de ser el administrador de la partida, se presenta un botón para iniciar el juego.
Imagen de ejemplo
Inicio de conteo de 3 segundos, indicando que la partida está por comenzar.
Imagen de ejemplo
Desarrollo de la partida, donde los jugadores están buscando la salida del laberinto. Los jugadores pueden cambiar de armas, además de saber la cantidad de munición que tienen. Para el jugador de forrma local, se le indica a cuál jugador está manejando.
Imagen de ejemplo
En caso de morir, se presenta una pantalla de muerte y se le da la oportunidad de espectear el juego.
Imagen de ejemplo
Pantalla de presentación de la victoria de un equipo.
Imagen de ejemplo
El administrador tiene la posibilidad de reiniciar el juego y así poder iniciar una nueva partida de forma sencilla.
Imagen de ejemplo
Existe la posibilidad de que el resultado de la partida sea un empate. Esto porque ningún equipo consiguió salir del laberinto.
Cambios hechos
  • Se han optimizado las validaciones en el servidor para mejorar la precisión y eficiencia en la gestión de datos.
  • Se han añadido nuevos eventos en el servidor para resetear el mapa y se ha mejorado la gestión de las desconexiones para evitar inconsistencias en el número de jugadores y sus posiciones.
  • Se ha añadido la posibilidad de reiniciar el juego y empezar una nueva partida.
  • Se añadió un indicador en la parte superior de un muñeco el cual da a enteder el jugador que se está manejando.
  • Cambio del tamaño del muñeco, ahora es un poco más pequeño que antes, permitiendo así tener una mayor movilidad por el mapa.
  • Mejoras en la interfaz de usuario
  • Corrección de error de la movilidad del jugador por el mapa.
Playtesting
Playtesting #1 - Imagen 6
Playtesting #1 - Imagen 4
Playtesting #1 - Imagen 5
Retroalimentación:
  • Aumentar la dificultad de los niveles para un mayor desafío.
  • Permitir jugar en modo horizontal con los controles en los extremos para mayor comodidad.
  • Mejorar las direccionales para una mejor experiencia de control.
  • Permitir que el personaje continúe moviéndose al tocar la pared, sin detenerse.
  • Incluir mensajes de introducción al juego para guiar a los jugadores.
  • Optimizar la carga de la página para evitar problemas de carga del juego.
  • Refinar la interfaz, haciéndola más intuitiva y visualmente atractiva.
  • Agregar un tutorial para que los jugadores nuevos entiendan cómo jugar.
  • Aumentar el tamaño de los números y los jugadores, especialmente en formato de computadora, para mejorar la visibilidad.
  • Incluir más efectos de sonido para enriquecer la experiencia de juego.

Versión #3

Imagen de ejemplo
Pantalla de inicio del juego, donde se presenta la cantidad de jugadores conectados. En caso de ser el administrador de la partida, se presenta un botón para iniciar el juego.
Imagen de ejemplo
Ahora, está el panel de Información que da datos acerca del juego, cuál es el objetivo, qué objetos de ataque tiene un jugador y los controles dependiendo de la plataforma donde esté jugando.
Imagen de ejemplo
Se muestra el panel de los controles para computador.
Imagen de ejemplo
Se muestra el panel de los controles para móviles. Cabe destacar que la funcionalidad del joystick y de los botones está disponible también para computador.
Imagen de ejemplo
Inicio de conteo de 3 segundos, indicando que la partida está por comenzar.
Imagen de ejemplo
Desarrollo de la partida, donde los jugadores están buscando la salida del laberinto. Cada equipo tiene un indicador de llegada a la puerta por donde puede salir. Los jugadores pueden cambiar de armas, además de saber la cantidad de munición que tienen. Para el jugador de forrma local, se le indica a cuál jugador está manejando.
Imagen de ejemplo
Los jugadores pueden cambiar entre dos tipos de cámara: uno que visualice todo el mapa, y otra que siga al jugador que se está controlando.
Imagen de ejemplo
Uso de las granadas y balas entre los jugadores.
Imagen de ejemplo
En caso de morir, se presenta una pantalla de muerte y se le da la oportunidad de espectear el juego.
Imagen de ejemplo
Pantalla de presentación de la victoria de un equipo.
Imagen de ejemplo
El administrador tiene la posibilidad de reiniciar el juego y así poder iniciar una nueva partida de forma sencilla.
Imagen de ejemplo
Existe la posibilidad de que el resultado de la partida sea un empate. Esto porque ningún equipo consiguió salir del laberinto.
Cambios hechos
  • Se incluyó un nuevo tipo de cámara: Jugador
  • Se incluyó un nuevo botón para cambair de cámara. Ahora, se pueden alternar entre dos tipos de cámara: mapa y jugador.
  • Con el uso de un Slider o de la rueda del ratón, se puede modificar el zoom de la cámara.
  • Mejoras en la interfaz de usuario, ahora los ítems y paneles se muestran con mejor definición. Además, hubo mejoras en la distribución de los botones.
  • Inclusión de información antes del inicio de una partida.
  • Nuevos paneles: información y controles para PC y móviles.
  • Cambios en el uso de teclas: Ahora con C o E se puede cambiar de arma, mientras que con R se puede cambiar el tipo de cámara.
  • Cambio de textura del jugador. Ahora, tiene menos sombras para que se pueda distinguir de mejor forma la ID de un jugador.
  • El indicador de un jugador ahora se queda estático en un mismo sitio (parte superior de un jugador).
  • Colocación de un indicador de llegada (o de meta) en la puerta de salida correspondiente a cada equipo.
Playtesting
Playtesting #1 - Imagen 7
Playtesting #1 - Imagen 3
Retroalimentación:
  • La inclusión del segundo tipo de cámara hace que sea más fácil el movimiento por el mapa, además de que se puede conocer bien la posición de los jugadores por el mapa.
  • La pequeña introducción al juego, junto a la información de los controles en las plataformas ayudó bastante a saber qué es lo que se iba a jugar.
  • El movimiento de los jugadores sigue siendo un poco brusco, en especial al momento de tocar las paredes. A veces, un jugador se queda trabado sin sentido alguno.
  • La interfaz del juego tiene bastantes mejoras, se ve mejor con respecto a lo expuesto anteriormente.
  • En algunas ocasiones, la generación del mapa puede ser injusto para un equipo. Se debería ver este aspecto aunque puede ser entendible que no sea justo para todos, ya que así da pie a jugar de forma más inteligente a pesar de la dificultad.
  • Parece innecesario tener la mayor cantidad de zoom de la cámara, sea para cuando se usa la cámara del mapa o la del jugador. Además, no tiene sentido eso cuando la ventaja está en ver lo que más se pueda.
  • Las partidas son entretenidas e intensas, el juego en equipo y la estrategia son fundamentales para poder ganar el juego.