party of fx
Post on 12-Apr-2016
686 Views
Preview:
DESCRIPTION
TRANSCRIPT
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?
top related