# TECHNICAL DESIGN DOCUMENT
## Metropia

### 1. INFORMACIÓN GENERAL DEL JUEGO
#### RESUMEN DEL JUEGO
Metropia es un mundo virtual multijugador con diversos entornos 3D simulados en computador. Está activo 24/7, y permite que los usuarios participen a través de avatares personalizados con los que se pueden comunicar, colaborar e interactuar entre sí dentro de cada entorno y que aloja hasta 600 usuarios simultáneos. Además, es una herramienta de colaboración B2B (business to business).

#### PLATAFORMA OBJETIVO
Metropia está desarrollado para ser un mundo virtual multiplataforma como aplicación web (Chrome, Edge y Firefox) y windows stand alone. A futuro se planea su incorporación para móvil y gafas de realidad virtual.

Se controla con el teclado y el mouse. Los requerimientos minimos y recomendados aun no se encuentran mapeados.

### 2. DESCRIPCIÓN GENERAL DEL DESARROLLO
#### EQUIPO DE DESARROLLO
- Maximiliano - Consultor.
- Helena Moreno - Project Manager
- Juan David Ariza - Artista 3D. Iluminación, diseño y realización de arte 3D (Modelos 3D y texturas).
- Julio Bastidas - Diseñador UI/UX. Diseño de experiencia para usuario final, diseño y realización de arte 2D para interfaz de usuario.Desarrollo página web.
- Juan Sebastian Bain - Lider desarrollo, Desarrollador back-end. Manejo y conexión de servidor, bases de datos y desarrollos página web.
- Maria Sanchez - Desarrolladora front-end. Desarrollo de interacciones, level design e integración de assets.
- Juan David Cruz - Desarrollador front-end. Desarrollo de interacciones, level design e integración de assets.

#### ENTORNO DE DESARROLLO

El proyecto está desarrollado en lenguaje C# para Unity actualmente se encuentra en español, pero se requiere migrar a ingles.

**Hardware de desarrollo**:
| Elemento | Especificacion |
| :--- | :---: |
| Sistema Operativo | Windows 10 Pro |
| Board | B450 AORUS Pro WIFI |
| Procesador | AMD Ryzen 5 2600 Six-Core |
| Memoria Ram | 8 Gb |
| Controlador grafico | DirectX 12 |
| Tarjeta grafica | NVidia Geforce 1660 |

**Software de desarrollo**:

| Nombre | Version | Area |Descripcion |
| :--- | :---: | :---: | :--- |
| Unity 3D | 2020.3.11 LTS | Desarrollo |Cross Platform Real Time Engine |
| Visual Studio Community | 2019 | Desarrollo | IDE to create modern applications for Windows, Android and iOS, as well as web applications and cloud services. |
| Blender | 2.91.0 | Arte 3D | Open Source 3D computer graphics software toolset|
| Substance Painter | Adobe 2021 | Arte 3D | Incredibly powerful 3D painting tool|
| Adobe PhotoShop | Adobe 2021 | Arte 3D / Diseño |Adobe Photoshop is a raster graphics editor|
| Adobe Illustrator | Adobe 2021 | Arte 3D / Diseño | Adobe Illustrator is a vector graphics editor and design program|

##### 1. Blender
Version - Blender 2.91.0
Acerca de blender:
Software de diseño que proporciona herramientas integradas de modelado, animación y renderizado 3D
Suite de creación de contenido 3D de código abierto.

Las características incluyen:
- Character modelling
- Solid modelling
- Animation
- Rendering
- Edit Mode (Vertex, Edge, Face)
- Modifiers
- Rotation, Pan and Zoom

Para qué se utilizará:
- Modelado de personajes
- Modelado de espacios y escenarios
- Modelado de props y set dressing.

Extension para los elementos 3D en su mayoria - FBX

##### 2. Substance Painter
Version - Adobe 2021
Acerca de Substance Painter:
Substance 3D Painter se emplea de forma generalizada en la producción de juegos y películas, así como en la arquitectura, la moda y el diseño de productos. Se trata de una aplicación de texturas en 3D a la que recurren profesionales creativos de todo el mundo.

Permite al usuario texturizar elementos 3d usando una variedad de herramientas, por ejemplo:
- Pinceles
- Mascaras
- Alphas
- Modificadores
- Texturas personalizadas
- Materiales procedurales

Soporta imagenes con transparencia:
- Esto es beneficioso ya que implementaremos objetos como ventanas y cristales dentro de nuestro entorno virtual (mapeo de texturas).

Para qué se utilizará:
- Generador de texturas
- Output template: PBR Metalic Roughness
- File type: PNG 8 bits
- Size: 1024 x 1024
- Padding: Dilatation + transparent

##### 3. Illustrator y Photoshop
Version - 2021
Acerca de Adobbe illustrator y Photoshop:
Adobe Illustrator es un editor de gráficos vectoriales sirve para editar entre otras cosas.
Adobe Photoshop es un editor de fotografías desarrollado por Adobe Systems Incorporated.

Permite al usuario manipular imágenes usando una variedad de herramientas, por ejemplo:
- Brush
- Fill
- Clone stamping
- 3D objects rotation

Para qué se utilizará:
- Creacion de texturas especificas
- Creacion de alphas personalizados

##### 4. Unity 3D
Version - 2020.3.11 LTS
Acerca de Unity:
Unity es un motor de videojuego multiplataforma creado por Unity Technologies. Unity está disponible como plataforma de desarrollo para Microsoft Windows, Mac OS, Linux. La plataforma de desarrollo tiene soporte de compilación con diferentes tipos de plataformas.

Para qué se utilizará:
- Integración de los assets
- Desarrollo de las dinámicas y mecánicas del mundo
##### 5. Visual Studio Community
Version - 2019
Acerca de visual Studio Community:
IDE extensible y gratuito para crear aplicaciones modernas para Windows, Android e iOS, además de aplicaciones web y servicios en la nube.

Para qué se utilizará:
- Creación de los scripts.

#### GITHUB BRANCHING
Se tienen 6 branches definidos como estructura, Front_end_Web,Back-end_Web,Front_end_Desktop,Back_end_Desktop,Arte y Main, además de estos se realizan anexos de branches para clientes puntuales, en la actualidad se poseen 9 branches. [Link del repositorio](https://github.com/Viewy-SAS/NMVF)

### 3. CARACTERÍSTICAS TÉCNICAS
#### REQUERIMIENTOS TÉCNICOS
No se han determinado los requerimientos minimos y recomendados para hacer ejecucion de la apliacion, tanto Web como desktop.

#### FLUJO DEL MUNDO
El usuario accede al mundo virtual iniciando sesión o creando una cuenta, luego personaliza su personaje y entra finalmente al mundo virtual con su avatar personalizado. Dentro del mundo se le presenta un tutorial de los controles de manejo del personaje, las zonas de exploración /interacción y del control del GUI. Al final, el usuario tiene una libre exploración sobre el mundo, con la comunicación con otros usuarios y con elementos interactuables en cada espacio.

El mundo se divide en 7 espacios con las siguientes características:
1. Registro / Login
- Diligenciar datos de registro
a. Usuario
b. Correo
c. Contraseña
- Diligenciar datos de ingreso por usuario
a. Usuario
b. Contraseña
2. Editor de personajes: seleccionar género, cabello, conjuntos de ropa combinables (sombrero,prenda superior, prenda inferior, zapatos), color de piel Gama de (6x3)
3. Lobby
- Observar contenido:
a. Videos.
b. Imágenes.
- NPC’s:
a. Información del mundo.
b. Árbol de decisiones.
c. Introductorios.
- Ascensores:
a. Desplazarse entre los 3 pisos.

- Cambio de escenas:
b. Auditorio.
c. Metropia.

4. Metropia:
- Observar contenido:
a. videos.
- Juegos:
a. Dron.
b. Memoriza.
c. Ruleta.
- Cambios de esceneas:
a. Auditorio.
b. Lobby.
- Buzon de sugerencias:
Se tiene un buzon donde se realiza una breve encuesta sobre el mundo.
6. Auditorio: Manipular el contenido en sala
- Presentador:
a. Control de Presentacion (imagen y video)
b. Control para dar la palabra
c. Expulsar invitados
- Invitados:
a. Levantar la mano
b. Sentarse
c. Fullscreen de la presentación

#### GRÁFICOS
Se usa una resolución de pantalla base de **Full HD** 1920px X 1080px y es responsive para computadores portátiles o pantallas mucho más grandes. La cámara del personaje es en 3ra persona y la escala de elementos y de textos está adjunta en el documento del sistema de diseño para la creación de interfaces para el mundo virtual.

El diseño visual del juego se construye en base a la propuesta narrativa de un futuro utópico con un estilo minimalista cartoon. El mundo virtual usa un GUI distribuido en 3 secciones; Las acciones rápidas al lado izquierdo, los elementos de comunicación al lado derecho y las opciones y estados en la parte superior.

#### AUDIO
En el momento no se tiene audio dentro del mundo, exceptuando el de los videos, que es diferente al que se pretende para el mundo. A futuro se quiere tener sonido ambiente, y efectos de retroalimentacion para el usuario.

#### FISICAS
Los avatares qué podrá manejar el usuario contiene el componente Character Controller y un script de movimiento(ThirdPersonMovement) el cual hará posible el desplazamiento de estos en el entorno.
Cada entorno cuenta con colliders para limitar el área de desplazamiento, activar interacciones como avisos, videos o minijuegos en los NPC’s y para realizar el cambio entre diferentes posiciones dentro de una escena o entre las distintas escenas.

#### MANEJO DE DATOS
La data almacenada hasta el momento no se ha planteado desde un esquemático UML, se ha ido incorporando en función a el crecimiento y funcionalidades puntuales del mundo, a continuación se describen las etapas y descripciones del mismo:
1. Login
a. Verificar correo existe.
b. Verificar Contraseña.
c. Registrar fecha fechas de login.
2. Registro
b. Verificación de que correo no existe en DB.
c. Verificación que username no existe en DB.
d. Guardar usuario nuevo.
e. Guardar correo usuario.
3. Videos
a. Traer número de visitas de video.
b. Guardar número de vistas +1.
4. Botones
a. Traer numero de click botón.
b. Guardar número de click +1.

La data almacenada se encuentra alojada en Firebase, con la que se desarrollo una solución diferente para almacenar la información, ya que este no contiene un sdk para implementación en WebGL.
Se decidió usar la plataforma Firebase por escalabilidad, precio por cantidad usada, y que para bajo consumo se tiene un costo cero.

### 4. FORMATO DE ARCHIVOS Y CONVENCIONES
#### CÓDIGO

El código será escrito en inglés bajo las convenciones definidas en la siguiente tabla.

| Elemento del código | Convención |
| :--- | :---: |
| Definir plataforma | Mayúsculas |
| Nombre región | Mayúscula |
| Nombre namespace | PascalCase |
| Nombre clase | PascalCase |
| Nombre de métodos | PascalCase |
| Nombre de funciones | PascalCase |
| Variables públicas (locales y globales) | camelCase |
| Variables privadas o protegidas (locales y globales) | _camelCase |
| Constantes | camelCase |

#### ASSETS

| Elementos | Convención | Descripción |
| :--- | :---: | :--- |
| Modelos 3D | PascalCase | Extension del modelado 3D: En la mayoria de los casos se utilizara .FBX|
| Prefabricados | PascalCase | |
| Materiales | M_PascalCase |La extension .FBX del modelo nos permite extraer, manipular y editar los materiales con total libertad.|
| Texturas | T_PascalCase ||
| Sprites UI | PascalCase | Los elementos 2D se importaran en Formato .PNG |
| Videos | PascalCase |
| Animaciones | anim_PascalCase | |
| Elementos UI | Abc_PascalCase | El nombre tendrá como prefijo la abreviatura del elemento correspondiente |

Evitar el uso del modelo original directamente dentro de las escenas, a cambio se creara un prefabricado de este, el cual podra ser modificado de acuerdo a las necesidades que el proyecto requiera.

### 5. TECHNICAL RISK
Actualmente se presenta un deficit en el area de optimizacion para WebGl y se tiene inconvenientes en la comunicacion multiplataforma de webgl a standalone.

### 6. NETWORKING

Se usa como base Mirror-Networking, se hace elección de este por los costos asociados frente a otros middles, el despliegue del servidor se realiza en AWS en una instancia windows, la pagina web se encuentra alojada en una instancia aws y referenciada por DNS mediante godaddy a el dominio [http://viewy.com.co](http://mundo.viewy.com.co/).
Los cambios de escenas se tienen por medio de un asset comprado “Flex Scene Manager”, el cual permite manejar diferentes escenas en el mismo servidor sin conflicto para los usuarios que ingresen posteriormente.
El transport empleado es simpleweb ya que permite la conexión desde WebGl y desktop sin inconvenientes.
Las páginas web en este momento se tienen que conservar sin certificado SSL.
Dentro del networking se tienen dos partes escenciales, dentro del mundo se cuentra el Network manager que es el permite la conexion de los usuarios, y dentro del playerPrefab se encuentran todas las funcionalidades multijugador de este.

### 7. ASSETS

1. NetworkManager:
- Creacion de servidor en localhost
- Conexión del jugador y creación de playerPrefab en el servidor
2. ThirdPersonMovement:
- Movimiento del jugador a partir de AWSD/Flechas, SHIFT para correr
3. PlayerCameraController y Cinemachine:
- Control de cámara para el jugador a partir del mouse, o desplazamiento del jugador
4. NameTag:
- Nombre que se muestra en la parte superior del jugador
5. Seleccionar apariencia:
- Los avatares del mundo estan divididos por genero, hombre y mujer, los cuales cuentan con cuatro(4) atuendos(uno formal, dos casuales y uno futurista). A partir de esto se crea un prefabricado(Modelos) el cual contiene los ocho(8) modelos preestablecidos.
- Se referencian las preferencias elegidas(Género, atuendo, color de piel, cabello, prenda Superior, prenda Inferior, zapatos y accesorios) actualizandolas en tiempo real durante la edicion y guardando la apariencia para ser visualizadas en multijugador.
6. Chats:
- Escrito
- Por escena
- 1a1
- Voz
- Por escena
- 1a1
7. PresentacionDiapositivas:
- Control Presentaciones:
- Se tiene el desarrollo para ingresar n cantidad de imagenes, y poder cambiarlas mediante buttons, a la misma vez se reflejan los cambios en canvas de control de diapositivas.
- Spawn Presentacion:
- La presentacion se encuentra apagada, y solo hasta que el jugador ingresa al auditorio, se activara la presentacion y se mostrara para los otros participantes.

8. Activacion de videos
- Videos automaticos
- Los videos se deben manejar dentro del playerPrefab instanciado, ya que no se pueden crear dentro de la escena del mundo, esto por que en el servidor no se pueden correr videos, por lo cual al ser creado el jugador los videos se activan posterior a su conexion con el servidor
- Videos por proximidad
- Los videos se activan mediante onColliderEnter a 2 metros de distancia, ubicados en el mundo.

9. Activar cuando comienza
- Se tienen dos objetos prinicipales dentro de la instancia, **jugador** y **Canvas**, dentro de jugador se dejan los objetos principales que se pretenden compartir desde un inicio, como lo son el nametag y el aspecto del personaje, dentro de canvas se encuentran los objetos que solo se deben mostrar al localPlayer
- Como estos objetos que solo se quieren mostrar a localPlayer se encuentran apagados, mediante este script al realizar la conexion se muestran directamente, como ejemplo **chats**.
10. Cambios de escena
- Colliders:
Sobre las puertas refenciadas en el mundo para ir a otra escena, se implementan colliders de cambio de escena, los cuales contienen la escena en la cual se quiere entrar a continuacion, es importante aclarar que los cambios de escena se efectuan cuando se ingresa al collider con un NetworkIdentity, el cual solo se encuentra en el objeto padre del prefab a instanciar, por lo cual cuando el **Jugador** entre en el collider se debera mover la instancia a esta posicion, con el fin de realizar el cambio de escena.
- Inicio de conexion:
Al ingresar al mundo se tiene un primer cambio de escena, sobre la misma escena, esto define que el personaje p1 ingresa a la escena 1 y este mismo recarga la misma escena 1, esto se debe a a lo siguiente:
- Si p1 ingresa al mundo en s1, posterior p1 ingresa a s2 y p1 regresa a s1, en el servidor se tomara como escena diferente la primera s1 y s1 de regreso, a lo cual llamaremos s1a y s1b, entonces al ingresar un nuevo jugador "p2", este ingresara al mundo a s1a y el jugador p1 y p2 no podran verse ni interactuar, por lo cual se crea un primer cambio de escena que deje situado desde la primera conexion en s1b, y al regresar a cambios de escena en esa misma s1b.
- Pantallas de carga cambio de escena:
Al realizar un cambio de escena se tiene un canvas el cual muestra la escena a la cual se esta desplazando lo que permite a este identificar que se esta realizando una carga.
11. Ascensores:
- Se tienen dos colliders que permiten la activacion de, dos canvas los cuales contienen 3 botones para el cambio de piso, al ser presionados estos botones,se realiza un cambio de posicion del jugador a el piso elegido.

12. Sentarse en posicion:
- Se tiene una funcion la cual permite que cada jugador se siente en una silla diferente al ingresar al auditorio, esto se realizo leyendo cada posicion de jugador dentro de la sala y recorriendo un array de posiciones el cual, permite ver cuales sillas estan ocupadas, y asi colocar a la persona en la primera silla desocupada.

13. NetworkAnimator:
- Se tienen referenciadas las animaciones de cada uno de los personajes a este script, al iniciar la conexion el localPlayer envia el animador que se encuentra activado, por las preferencias de personalizacion, por lo cual se activa este animator unicamente para los jugadores !localPlayer.

14. Juegos:
- Dron
Se establece x tiempo para que el ususario por medio del click izquierdo del mouse o la barra espaciadora haga subir un dron hasta determinado putno.
- Ruleta
Ruleta de premios que se activa una vez que el usario responda el buzon de sugerencias. Tiene un intento para girar la ruleta y el lugar en el que para la ruleta determina un tipo de compensación que se le da al usuario.
- Memoria
El usuario deberá unir parejas dentro de una serie de cartas que se encuentran giradas. El tiempo en el que se demore el usuario en unir todas las parejas determina el puntaje, entre menor tiempo, menor puntaje.
15. Pagina Web
Actualmente se tienen 2 template desarrollados para el montaje de la aplicacion en WebGl, desarrollados en **HTML CSS y JavaScript**, esos contemplan rebrandeo con imagenes de fondo, carga y footer. Se encuentra desarrollado un carrusel de imagenes en el tiempo de carga del mundo.

16. NPC's
En el mundo se encuentran diferentes personajes no jugadores que tiene como objetivo brindar infromación al usuario. La infromación se revela cuando el ususario está a **2 metros** de distacia por lo que tiene que haber un **collider circular** alrededor del NPC con este radio.

17. Terreno
Para la creacion de terrenos naturales se implemento el paquete Terrain Tools de Unity, el cual permite modificar un plano con diferentes formas y texturas, ademas de poder agregarle elementos como arboles, flores, rocas entre otros.

18. Agua
El mundo cuenta con el paquete Boat Attack Water System, del cual se usa el asset de agua para simular el agua del mar y de una fuente.

### 8. 3D Objects, Terrain, & Scene Management

1. 3D Objects
- Lobby:
- Portales de acceso - Load Scene (Floor Triggers)
- Modulo de recepcion
- Sillas giratorias
- Computadores
- Ascensores - Teleport
- Mesas
- Sillas
- Banners
- Roll Ups
- Pantallas
- Totems
- Plantas y arbol central
- Auditorio:
- Puertas (Floor Triggers)
- Sillas
- Tarima
- Pantalla (Proyeccion de contenido)
- Atril
- Microfono
- Salas de conferencias
- Sillas
- Pantalla
- Atril
- Microfono
- Puertas
- Terrain
- Interiores:
- Expohall
- Lobby
- Salas de conferencias
- Auditorio
- Exteriores:
- Arboles
- Cielo
- Pasto
- Senderos peatonales
- Plantas
- Punto de informacion
- Punto de recreacion
- Fuente
- Escultura central
- Bancas
- NPC
2. Scene Management:
- La responsabilidad del sistema de gestión de escenas es la reproducción y carga eficientes de escenas complejas
- Incluye elementos como:
- Oclussion Culling: No renderizar objetos a menos que esten en el campo de vision de la camara del jugador.
- Level of Detail LOD: Crear modelos de menor detalle para usar cuando la distancia es grande y modelos de nivel superior a distancias más cercanas.
- Clipping: Cortar partes de objetos que no están dentro del campo de visión (FOV) del jugador.