Party of FXTrucos, efectos y pipeline de arte

para juegos mobile

Nicolás Biondi (nicolasb@dedalord.com)

Mariano Merchante (marianom@dedalord.com)

INTRODUCCIÓN

• Juegos Casual/Mid-core• Mobile• Unity• Proyectos de 4 meses a 1.5 años• Equipo de ~15 personas

QUIÉNES SOMOSQUÉ HACEMOS

INTRODUCCIÓN

• PIPELINE DE ARTE PERSONAJESESCENARIOS

• EFECTOS

DE QUÉ VAMOS A HABLAR

INTRODUCCIÓNDE QUÉ VAMOS A HABLAR

http://www.kongregate.com/games/dedalord/party-of-heroes

INTRODUCCIÓN

Una buena experiencia depende de:

• Espacio en disco• Memoria• Polycount • Animaciones• Drawcalls• Complejidad de shaders

A TENER EN CUENTA...

PIPELINE DE ARTE¿QUÉ ES?

Serie de procesos, lineales y no lineales, cuyo resultado es un conjunto de assets (personaje, escenario, prop, animación, fx, etc.).

A través de ellos, se obtiene un producto de gran coherencia visual.

Como plus, permite la organización del equipo de trabajo, en las variables de tiempo y recursos.

PIPELINE DE ARTEPERSONAJES

PERSONAJESPIPELINE DE ARTE

PIPELINE DE ARTEESCENARIOS

PIPELINE DE ARTE

• Utilizamos SVN (ignores!)• Dev, Arte y UI separados• No sources (PSD,MB) en Unity

–Reducir tiempos de importación–Reducir dependencias de software

Repositorio

PIPELINE DE ARTE

El cuello de botella está en el movimiento de assets entre el directorio de Arte y Unity (trunk)

Se necesitan Herramientas para exportar/importar rápidamente.

Hay muchas formas de hacer esto, pero...

Repositorios

PIPELINE DE ARTE

Desarrollamos una herramienta para integrar y agilizar la iteración de assets.

Está compuesto por:• Un archivo de configuración por máquina• Un archivo de configuración por proyecto

INTEGRACIÓN EN UNITY

PIPELINE DE ARTEINTEGRACIÓN EN UNITY

PIPELINE DE ARTEINTEGRACIÓN EN UNITY

Asocia directorios y archivos entre repositorios y permite:

• Regenerar assets desde Unity

PIPELINE DE ARTEINTEGRACIÓN EN UNITY

Asocia directorios y archivos entre repositorios y permite:

• Regenerar assets desde Unity

• Definir reglas específicas por asset

PIPELINE DE ARTEINTEGRACIÓN EN UNITY

Asocia directorios y archivos entre repositorios y permite:

• Regenerar assets desde Unity

• Definir reglas específicas por asset

• Generar y manejar dependencias entre assets– Cada proyecto define sus reglas

PIPELINE DE ARTEINTEGRACIÓN EN UNITY

PIPELINE DE ARTEINTEGRACIÓN EN UNITY

Nuestra filosofía es que el artista integre cada asset para previsualizar el resultado final.

PARTY OF HEROES PERSONJESPIPELINE DE ARTE

PERSONAJESCONCEPT ART

PERSONAJES

• Sufijos y prefijos por tipo de archivo– Rigs, Meshes, Materiales, Texturas–Esqueleto y huesos adicionales

Ejemplo: HeroReference_E03; HeroSkeleton; Hero_Mesh; Hero_Mat

• Guia de nomenclatura– Simplifica la integración– Convención sobre configuración

NOMENCLATURA

PERSONAJESANIMACIÓN

Para optimizar el trabajo de animación las3 evoluciones referían a 1 sólo queleto.Este esqueleto contemplaba los huesos extras de cada evolución

ANIMACIÓNRIGGING

HIK

PERSONAJES

Utilizamos Mecanim para compartir animaciones entre personajes humanoides.

MECANIM

PERSONAJES

Unity interpreta mal algunos esqueletos :(

MECANIM

PERSONAJES

¿Solución?

MECANIM

PERSONAJES

Al conocer el Esqueleto la mejor solución es definir el Humanoid por Código.

MECANIM

PERSONAJES

Utilizando los procesadores de assets de Unity, pudimos automatizar gran parte del proceso.

Importamos:• Modelos• Animaciones• Texturas• Controladores de animación

AUTOMATIZACIÓN

PERSONAJES

PERSONAJESRENDERING

PERSONAJES

Ahora, lo divertido!

Fake BRDFSphereLit

Tinting

RENDERING

PERSONAJES

Bidirectional Reflectance Distribution Function

FAKE BRDF

Describe cómo una superficie refleja la luz

PERSONAJES

Se puede hacer una cruda aproximación de la función según el ángulo hacia la cámara y la luz.

FAKE BRDF

Luz

PERSONAJESFAKE BRDF

Camara

PERSONAJES

Combinando ambas, se pueden lograr resultados muy interesantes!

FAKE BRDF

PERSONAJES

Desventajas :(

• Requiere una luz.• Más costoso que otros métodos en mobile• La textura es poco intuitiva

FAKE BRDF

PERSONAJES

Basado en un paper (The Lit Sphere: A Model for Capturing NPR Shading from Art, Sloan)

ZBrush lo popularizó con el nombre MatCap

SphereLit

PERSONAJESSphereLit:

¿Cómo funciona?

PERSONAJES

Lo usamos porque:

– Es razonablemente eficiente– Se pueden lograr buenos resultados– Es muy fácil de editar– Es muy intuitivo para los artistas– No requiere luces

SphereLit

PERSONAJESIteración SphereLit

PERSONAJESIteración SphereLit

PERSONAJESIteración SphereLit

PERSONAJES

Variaciones interesantes:

• Fake bump mapping• Multisphere• “UberSphere”

SphereLit

PERSONAJES

¡El bump mapping no tiene por qué ser correcto!

Si utilizamos la magnitud del color de la textura, se pueden lograr sutilezas interesantes.

No siempre queda bien!

Fake bump mapping

PERSONAJESFake bump mapping

PERSONAJES

Los artistas necesitaban resolver diferentes clases de superficies en un mismo personaje.

(mader, metal, piel, etc)

MAS MATERIALES = MAS DRAWCALLS

Ojo ¡tenemos 10 personajes por batalla!

Multi sphere mapping

PERSONAJES

Consta de 4 esferas. En el UV2 codificamos un offset.

Multi sphere mapping

PERSONAJES

PERO

• Tedioso configurar los UV2• Las texturas no deben superponerse• No se pueden mezclar!• Mip mapping lo rompe!

Multi sphere mapping

PERSONAJES

Nuestra solución:

• Crear 4 esferas distintas• Guardarlas en los canales de una textura

RGBA• Utilizar los vertex colors como moduladores

de estas texturas• Agregar un color por esfera

“Uber Sphere”

Cada canal del color representa un mapa distinto!

+ +

PERSONAJES

Resultado: Con una sola multiplicación de matriz, se resuelve el color!

“Uber Sphere”

TINTING

TINTING

Cambiar dinámicamente varios colores de un personaje de forma eficiente, práctica y que se vea bien es difícil.

¿no era simplemente multiplicar un grayscale por un color?

El problema

TINTINGEl problema

TINTINGEl problema

TINTINGEl problema

¿Por qué no usamos HSV?

TINTINGGradient mapping

TINTINGGradient mapping

TINTING

• En el canal alpha de la textura, guardamos distintas máscaras.

Gradient mapping

TINTING

• En el canal alpha de la textura, guardamos distintas máscaras.

• Cada valor de alpha representa un gradiente distinto.

Gradient mapping

TINTINGGradient mapping

(ALPHA)

COLOR

TINTING

• En el canal alpha de cada textura, guardamos distintas máscaras.

• Cada valor de alpha representa un gradiente distinto.

• Aplicamos gradient mapping por cada máscara

L4D2 hace algo parecido!

Gradient mapping

TINTINGGradient mapping

TINTING

Pero hay problemas si queremos usar más de 3 máscaras!

Gradient mapping

(ALPHA)

TINTING

Esto surge por el filtrado de los editores de imágenes, y por tener solo un canal.

L4D2 lo resuelve usando solo dos máscaras.

Gradient mapping

TINTING

En el momento de importación, corremos un filtro de la mediana, resolviendo el problema.

Gradient mapping

[DIVISOR]

ESCENARIOS

ESCENARIOSEN PARTY OF HEROES

ESCENARIOSEN PARTY OF HEROES

ESCENARIOSEstructura (Gameplay)

ESCENARIOSEstructura (Gameplay)

ESCENARIOSEstructura (Gameplay)

ESCENARIOSGLADE

ESCENARIOSGLADE

ESCENARIOSSwamp

ESCENARIOS

Pantanto (256)

Color Escenario

Reflejo(32, RGB) F. Normal (128, RGB) Fog (64 TRUE)

15528 TRIS

Halo (64TC)

Halo (128x256)

ESCENARIOSejemplos

vertex color

ESCENARIOSejemplos

Unity 3d

ESCENARIOS

ESCENARIOSSWAMP

OJO con usar _Time!

ESCENARIOSejemplos

14000 TRIS

ESCENARIOSejemplos

1024

64 (16B)

256

ESCENARIOSejemplos

ESCENARIOSejemplos

EFECTOS

EFECTOS

Dos desventajas principales:• El jugador podía manejar una cámara ~360• El juego debía pesar poco

Esto significa que debíamos reducir el uso de:• Billboards• Spritesheets

Meshes!

EFECTOSMESH LIBRARY

EFECTOSDISTANCE FIELDS

En una textura, cada pixel representa la mínima distancia a una “forma”, y luego se umbraliza.

Se suele usar para texto.

EFECTOSDISTANCE FIELDS

En una textura, cada pixel representa la mínima distancia a una “forma”, y luego se umbraliza.

Se suele usar para texto.

EFECTOSDISTANCE FIELDS

Muy útil para animar desintegraciones!

EFECTOSDISTANCE FIELDS

Se puede suavizar usando smoothstep

EFECTOSDISTANCE FIELDS

EFECTOSSNOW FOREST REVISITED

SHURIKENDISTANCE FIELDS

Si combinamos shuriken con shaders un poco más complejos, se pueden hacer muchos efectos distintos usando el vertex color.

SHURIKENMESH EXPLOSIONS

Si combinamos shuriken con shaders un poco más complejos, se pueden hacer muchos efectos distintos usando el vertex color.

SHURIKENFULLSCREEN FLASHES

Se puede usar un shader que dibuja en toda la pantalla, y manejarlo como si fuese una partícula!

SHURIKEN

Este tipo de trucos nos permitió coreografiar mejor los efectos.

Veamos uno...

CONCLUSION

¿PREGUNTAS?