viernes, 27 de marzo de 2015

Efecto de estela

Ya tengo el personaje con todas sus acciones básicas del juego cubiertas, anda, corre, salta, cambia la gravedad y ataca con la espada. Esto último es nuevo, en el próximo artículo explicaré varios problemas que he tenido juntando todos los movimientos, los tipos de ataque de espada, etc, en este quiero explicar como he hecho el efecto de estela al atacar con la espada.






Una vez que tienes las animaciones de los espadazos y lo programas para que los de al dar a un botón, te encuentras que es algo soso. Así que empecé a buscar cómo hacer que la espada tuviera un efecto de estela, estuve viendo videos de Medievil y tiene ese efecto, una estela blanca, y me di cuenta que era útil por varias razones, te da tiempo a ver qué dirección toma un movimiento de espada, queda visualmente curioso, y también disimula un poco si la animación no es excepcionalmente buena.




Cuando estaba pensando cómo hacerla con partículas me dijeron que había assets gratuitos en la store, así que empecé a mirar qué tal eran, y uno me gustó bastante, el XWeaponTrail. Básicamente arrastras su asset para que cuelgue de la espada, y tienes dos bolas, una roja y otra azul, y pones una en cada extremo de la espada y él hace el efecto de estela con el movimiento de la espada creando un spline que vaya cubriendo el recorrido. Puedes elegir el material de la estela y opciones de generación, aunque con nombre algo confusos alejados de la naturaleza matemática del spline. Por ejemplo “Max frame” en realidad parece tener más que ver con el número de puntos de control del spline. Pero con los valores por defecto o toqueteando un poco tienes una estela funcional instantánea.



Combiné texturas en el material, usando algunas que vienen en el mismo paquete del trail, una tiene una esquina blanca y el resto transparente, ayuda a crear el efecto más blanco en el extremo y menos cerca de la base, en cierta forma el blanco representa la velocidad de la espada. Y luego para rellenar el resto una textura de rayitos morada que de un poco de aspecto mágico al espadazo.



Me encontré el primer problema, la estela solo se crea en una cara. Es decir si damos el espadazo hacia la derecha de la pantalla veremos bien la estela, si lo damos hacia la izquierda veremos la cara oculta de la estela, y no veremos más que un bordecito, no la estela completa. Eso hace que el efecto quede raro. Es una cosa habitual en gráficos, los polígonos solo se renderizan por un lado, así que tenía dos opciones. La primera crear un shader para renderizar ese material por los dos lados y la segunda duplicar la geometría. Resulta que en Unity sale más rentable renderizar el doble de triángulos a una cara que la cantidad inicial a una. Por eso en su momento dupliqué las mangas y el faldón del personaje para que tuviera parte interna, y aquí he seguido el mismo proceso. Poner una segunda estela, invirtiendo los puntos de control, es decir, dar como principio el punto que se supone que es el final y viceversa. Con eso ya tengo una estela por los dos lados y se ve siempre igual.



En la demo que venía con el sistema de trail, había dos efectos de estela, una blanca parecida a la que estaba usando, y otra con un rollo transparente distorsión, donde la estela hacía ver el fondo distorsionado, me gustaba como quedaba. El problema es que al usar el material de ese efecto en mi escena, no funcionaba bien, es un shader que venía con el sistema de trails, pero por alguna razón que se me escapa a mi no me funcionaba como en la demo. Después de varios intentos fallidos de arreglarlo, decidí intentar dar algún otro efecto chulo.



Encontré también en la tienda un paquete para hacer un efecto de glow, MKGlowSystem, Realmente con los efectos de post-proceso de Unity 5 ya hay efecto de glow, pero lo nuevo que da este paquete son unos materiales personalizados para poder hacer el glow personalizado, combinando un shader personalizado y un efecto de post proceso se puede añadir el efecto de glow solo a la estela de la espada y queda mucho mejor como demuestra la comparativa de imágenes. 




No hay comentarios :

Publicar un comentario