Polygonal Mind
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars

Blog

Tomb Chaser: Showcase (ES)

4/2/2020

0 Comments

 
ENGLISH
El Objetivo

El pasado 20 de Febrero de 2020 fue el gran lanzamiento de Decentraland. Una plataforma en la que pudimos trabajar previo a su lanzamiento creando gráficos en diferentes LANDs.

Uno de los proyectos en los que pudimos participar fue Tomb Chaser, una mazmorra en la que debes seguir al fantasma hasta la sala del tesoro.
​
Lo que quiero transmitir es cómo evolucionó el proyecto desde su concepción hasta los detalles finales previos a incorporarlo en Decentraland.
Recursos

  • Decentraland
Tomb Chaser dark preview from inside
La idea

Cuando empezamos a esbozar el proyecto ya teníamos claras algunas las bases: sensación de juego arcade, fácil de jugar pero difícil de dominar... varios juegos que encajaban ese espíritu eran los clásicos de Nintendo como Zelda y Super Mario.
​
Nos decantamos por un estilo de jugabilidad en concreto que se encontraba en The Legend of Zelda: Majora's Mask, basándonos en un nivel en concreto anotamos varias ideas que podríamos simular en Decentraland.
  • Una textura repetida a lo largo de los pasillos, dando sensación de homogeneidad para confundir al jugador.
  • El fantasma sirve como guía a lo largo del laberinto, si el jugador no ve el fantasma se puede perder fácilmente.
  • Diseñar una experiencia que combine áreas de la mazmorra estrechas y otras amplias.
Limitaciones en Decentraland

En otros artículos hemos hablado de las limitaciones que nos encontramos en Decentraland, normalmente cuanto más simple sea la forma menor la probabilidad será de encontrarnos defectos en su render.

De todas formas, en Tomb Chaser queríamos dar un aspecto megalítico, de forma que podíamos jugar mejor enrevesando la forma y la distribución de los espacios. Esta principal característica la tuvimos en cuenta a la hora de determinar el flujo de trabajo del proyecto.

Desarrollamos para la plataforma usando Unity, de esta forma las composiciones pueden ser fácilmente diseñadas y tener una aproximación bastante certera de como se verá en futuras pruebas y demostraciones previas a su forma final. El plugin DCL Export que usamos nos ayuda a transformar toda la información y metadata de Unity al formato GTLF listo para Decentrlaand.

En busca de acelerar el proceso de creación hacemos uso de los Unity Prefabs, ya preparados para tener colisiones en la plataforma. Durante el proceso mediante prueba-error pudimos aprender con más profundidad cómo interactuaba el motor con nuestros assets.

Por ejemplo, los GTLFs están preparados para pesar poco y suponer poca carga de procesado en comparación a otros formatos estándar como .fbx/.obj/.dae ... pero por otra parte suponen otras restricciones como su imposibilidad para transportar información de luces u otros componentes más allá de forma de malla, asignación de materiales y animación de transformaciones.

Una vez dentro de Decentraland, tenemos otros impedimentos visuales como una acusada intensidad de luz ambiental añadida a la luz direccional que, obviamente, funciona one sided con las mallas en escena. En Decentraland lo más difícil es que algo quede oscuro.
El diseño del suelo

Para diseñar un laberinto has de pensar en su principio y su final, el camino que los conecta y luego añadir todo lo demás. De los puntos positivos de trabajar en una LAND tan grande para este proyecto fue su gran extendida altura máxima.
​
Decentraland hace cálculos para determinar tus limitaciones según el número de LANDs que estés haciendo uso en el proyecto, la fórmula es la siguiente:
log2(n+1) x 20
Donde n representa al número de parcelas.
​

Puedes encontrar más información siguiendo los siguiente enlaces:
https://docs.decentraland.org/development-guide/scene-limitations/
https://docs.google.com/spreadsheets/d/1BTm0C20PqdQDAN7vOQ6FpnkVncPecJt-EwTSNHzrsmg/edit#gid=0
Una tierra como esta de 25 parcelas suponía tener a nuestra disposición 94 metros de altura, esto nos daba amplia libertad para crear diferentes alturas con diferentes recorridos y diseños.
Tomb Chaser exterior sin paredes exteriores
Exterior de la primera planta, con la carcasa aún sin implementar.
Interior de la primera planta
El interior de la primera planta. Los planos negros servían para "bloquear" la entrada de luz direccional en el entorno.
Con estas amplias restricciones decidimos dedicar cada planta a un estilo de jugabilidad, algunas dedicadas a eventos de habilidad, correr o agilidad visual. Por ejemplo, la primera zona se basaba en la velocidad y la segunda en los reflejos que tenia el jugador para poder avanzar sin perder al fantasma.
Creación de las texturas

Cuando ya tuvimos el diseño general, era hora de pensar en su aspecto visual y la creación de las consecuentes texturas. Decentraland tiene una limitación de 512px por textura creada. El número que puedes hacer uso también esta delimitado según la cantidad de parcelas que forman parte de tu estado.
​
Para ponerlo en perspectiva, un material PBR básico hace uso de 3 texturas RGB+A mínimo: Albedo/Transparency (RGBA) map, Normal (RGB) map and Metallic/Smoothness/Occlusion map (RGBA).
​
Para su desarrollo hicimos uso de dos técnicas de optimización de texturas: el uso de Trim Textures y Tileable Textures, ambas desgranamos a continuación.
Pixeles de un gato aumentados
Ejemplo de pixelado, si hacemos zoom la información de color no aumenta y por lo tanto su densidad baja, provocando que los colores se muestren estirados o faltos de forma.
Las tileable textures, son un tipo de textura normalmente carente de borde y que su uso se hace de forma extensiva y repetitiva. De forma que se dota de definición gráfica sin necesidad de hacer uso de grandes texturas o una gran cantidad de texels. Esta técnica esta muy extendida en la creación de paredes y suelos debido a su habitual extensión horizontal o vertical. Su principal contra es la escasez de detalle exclusivo en las mallas una vez acopladas, pero tambien hay formas de paliar estos fallos mediante el uso de props decorativos o decals que creen variedad compositiva.
​
El hacer uso de texturas pequeñas ante una superficie 3D grande, es decir, reduciendo su cantidad de texels; puede provocar que tus texturas se vean pixeladas ya que estarían siendo representadas a un tamaño mayor de render.
Mediante el uso de este tipo de texturas no deberías encontrar ningún problema visual más allá de los mencionados. El principal enemigo de las tileable textures son los patrones de formas y colores, que pueden suponer una desmejora visual. Cuanto más neutra sea la composición más fácil será de mimetizarse en grandes superficies.
Mismo plano, diferente tamaño de textura
"Mismo plano, diferente tamaño de textura" En este caso su ampliación en el espacio de las coordenadas UV extendiéndolo del rango 1,1 a 3,3 hace que la densidad de píxeles se acumule y cree una mayor definición de color, también creando el riesgo de que se visibilice claramente el patrón.
Trim Textures (Trim, eng. : Recortar) son similares a las Tileable Textures pero, mientras que las Tileable Textures hacen uso de su repetición extensiva mediante la ampliación de las coordenadas UVs, las Trim Textures hacen gala de "doblarse" sobre si mismas o repetirse la malla en pequeños trozos para crear el efecto de repetición. Esta situación supone un aumento de polígonos para en las UVs doblarse sobre si mismo pero su rendimiento no se ve necesariamente afectado.
Textura 2D en modelo 3D
2D vs 3D
Trim texture en una columna
La columna forma parte de un conjunto mayor en la misma textura.
Iluminando sin luz: Planos transparentes

Antorcha 3D en Decentraland
Para trabajar, y en concreto con transparencias, recomiendo el uso del formato .png (RBGA) o el .tiff (RGB+A) ya que son dos formatos óptimos que pueden albergar información en un canal alfa sin una alta compresión y en el mismo archivo.
Previamente hemos hablado sobre las limitaciones de polígonos, texturas y materiales. Por razones de optimización una de las mejores formas de añadir detalles sin correr el riesgo de elevar el número de geometría en la escena es el uso de decals o planos transparentes.

Esta técnica funciona genial para recrear elementos como llamas, hierba, telarañas entre muchos otros. Su complejo detalle se reduce a dos triángulos en la mayoría de casos con una textura con un canal alfa dedicado a la información de transparencia.
​
También hay que tener en cuenta que al exportar tus texturas el plugin reconvierte tus texturas al formato JPG además de rotarlas 180 grados. Aunque no influye directamente en el flujo de trabajo siempre viene bien entender los procesos por los que pasan nuestros assets de cara a posibles errores.
Si decides juntar las texturas de las llamas u otros elementos semitransparentes con la información de bits de texturas opacas como la de las columnas, lo más probable es que al marcar el tipo de shader como "Fade" en Unity se generen una serie de defectos visuales no paliables sin acceder al render queue. Como este error es común debido a que las transparencias son lo último en renderizar en un espacio 3D, deberíamos siempre separar los objetos por materiales según si van a hacer uso de transparencias o no.
Ambiente oscuro a plena luz

El nulo control sobre la iluminación en las parcelas de Decentraland no te permite disponer del abanico de herramientas que Unity tiene para crear un ambiente correctamente iluminado, pero siempre hay formas de doblegar el sistema a tu voluntad, o al menos acercarnos lo máximo a nuestra visión de como queremos que sea la mazmorra.

En este proyecto toda la acción se desarrolla en un ambiente cerrado y sin apenas iluminación del exterior, pero la presencia de una luz ambiental tan fuerte lo complica bastante. Primero de todo oscurecemos las texturas, para falsificar esa falta de luz hacemos gala de una capa oscura adicional en modo multiply desde Photoshop. Mediante el uso de materiales emisivos de forma puntual podemos crear esa sensación de iluminación que realmente no existe.
​
Además de las ya mencionadas limitaciones técnicas tenemos que poner en relieve un hecho básico en el desarrollo de entornos 3D: la luz atraviesa normales invertidas (en valor 0). Esto significa que para evitar que la luz entrara en la mazmorra había que colocar un plano oscuro mirando hacia el otro lado para cubrir cualquier posibilidad de que el valor del bias en la luz se colara en los pasillos.
Paredes en Decentraland con plano cubriendo
Sin cobertura / Con un plano cubriendo
Llegados al punto de tener el ambiente oscuro que deseábamos pasamos a añadir los puntos de luz que harán de contraste. Para ello hicimos uso de una forma inteligente y ligera del mapa de emisivos en diferentes assets en escena. De esta forma creábamos una imposición de color sin sacrificios visuales provocados por el post-effect automático de bloom de Decentraland.

Para los detalles finales sobre la luz, en este caso proviniente de una antorcha, deberíamos hacer uso de un mapa definido de emisivo, con zonas delimitadas en negro total para conseguir un mayor control sobre este efecto. Para añadir mayor credibilidad, una animación simple de escala y ligera rotación mediante el motor interno de Unity puede dar el toque realista que eleve el resultado a otro nivel.
​
El uso del motor interno de edición y animación de assets de Unity es la mejor forma para así previsualizar el resultado más aproximado que se verá en Decentraland, pero recuerda que un GTLF solo aceptará la animación de sus transformaciones y nada más.
Pasillo oscuro en Tomb Chaser
Conclusión

Considerando todo lo mencionado anteriormente, este artículo es un gran resumen de cosas que aprendimos y aplicamos durante el desarrollo del entorno. Ha sido una experiencia interesante porque las limitaciones nos llevaron a pensar de forma básica e inteligente formas de sortear todas las limitaciones sin llegar a sacrificar el resultado visual que buscábamos.
​
¡Una experiencia que me gustaría repetir!

Picture
Laura Usón
3D ARTIST
Passionate about videogames, movies and creatures. artist by day and superhero at night.
Cent
0 Comments



Leave a Reply.

    Categories

    All
    Decentraland
    Decentraland En Español
    Maya
    Metaverse
    Mixamo
    Morphite
    Substance Painter
    The Sandbox
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    VRChat

    Archives

    March 2021
    February 2021
    January 2021
    December 2020
    October 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    December 2019
    October 2019
    September 2019
    August 2019
    June 2019
    May 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2016

    Picture
Home
Projects
Assets

Picture
Crypto
Friendly
Picture

Subscribe to get some 💚 in your inbox once in a while.

Follow us and your visit will never be forgotten!
Picture
Picture
Picture

 © 2015-2020 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars