Guía de Jespone para animaciones


#1

Guía para animar en Roblox por Jespone.

Este post ha sido traducido de el post que hice recientemente, link: Jespone's guide to animations

No mucha gente pone tiempo en las animaciones para sus juegos, bueno, dejame decirte que son más importantes de lo que crees. Un buen juego necesita buenas animaciones, si vas ha hacer un juego que cuenta una historia sobre un personaje tienes que hacer animaciones del personaje en las que se refleje su caracter. O solo animaciones simples como correr, saltar, quedarse quieto, etc.

En este post voy a hablar sobre varias cosas a la hora de animar en Roblox, pero primero dejenme presentarme.

Soy Jespone, un animador en Roblox, a pesar de que hago más cosas, la animación es lo que más me gusta hacer de momento, llevo animando en Roblox 1 año y medio. Hoy estoy aquí para enseñaros mi experiencia para que sepan que hacer a la hora de hacer animaciones o contratar un animador.

Una vez hayas leído el post deberías ser capaz de:

  • Ver si una animación está bien hecha.
  • Saber como mejorar tus animaciones.
  • Saber como traer lo más básico de la animación a Roblox.
  • Saber que hacer para mejorar tus animaciones.

Antes de empezar

Si nunca has animado, aquí te dejo algunos plugins y programas de animación para Roblox:

  • Roblox’ default animator. - Está bien para empezar ha animar en Roblox.
  • Old Roblox’ animator. - Personalmente, el mejor para empezar a animar.
  • Blender. (Importer/Exporter by @Den_S ) - Deberías saber utilizar los estilos de easing antes de utilizarlo.
  • Moon Animator. (Plugin by @xSIXx ) - El que uso y el que más me gusta personalmente.

Atención

A partir de este punto deberías ser capaz de Hacer una animación básica, con esto quiero decir una animación como un personaje saludando, así que si es tu primer intento de animar deberías probar los animadores y hacer algo aleatorio.

En este post hablaré de:

  1. Los 12 principios de la animación.
  2. Estilos de easing y direcciones de easing.
  3. Tips/Trucos personales.
  4. Mi experiencia animando en Roblox Studio.

Los 12 principios de la animación.

Ahora, deberías leerlos todos con cuidado y aprendertelos, estos principios fueron hechos por Disney, así que deberías escuchar a los más profesionales en el tema.

Squash & Stretch [Aplastar y estirar]

No quieres que tu animación sea sólida, rígida y aburrida, ¿verdad?. Quieres que tenga vida, que sea divertida y que exprese todo lo que quieras, así que deberías aprenderte bien este principio.

Ahora, dejadme enseñaroslo en Roblox.

Como puede ver, en está animación el cuerpo primero se aplasta, es decir, hace un squash. Y después se estira para saltar, esto en inglés se denomida stretch.

Anticipation [Anticipación]

Antes de hacer una acción, tienes que anticipar que el personaje va ha hacer algo, haciendo esto se lo comunicas a el jugador y lo preparas para la acción que está a punto de hacer. Como por ejemplo que va a saltar. Como pueden ver, en la animación de arriba, he anticipado que el personaje va a saltar, y cuando llega al suelo depués de haber saltado anticipo que se va a levantar.

Staging [Esecenificación]

Este principio de aplica más a la animación 2D que la 3D. Habla de poner movimiento al lugar de la pantalla donde quieres que el espectador/jugador mire, como por ejemplo: Un personaje está pensando y lleva su dedo hacia arriba para indicar que ya tiene la idea.

Straight ahead & Pose to Pose [Derecho hacia adelante y de pose en pose]

Antes de empezar ha animar un personaje, primero tienes que hacer las poses esenciales, las que llevaran el personaje de una pose a otra, dejadme poner unos cuantos ejemplos:

Primero le dices al personaje cuales son sus “metas” así por decir.

Una vez ya tienes las poses esenciales toca decirle al personaje como va a llegar ha ellas, a lo mejor hace un movimiento más durante la acción, en este punto va más lento, en ese otro va rapido, en aquél pone su mano en la cabeza y demás.

Follow through and overlapping [Seguimiento a través y superposicionamiento]

Dejadme poneros en situación… Eres batman y llevas una capa, estás corriendo hacia un sitio y derrepente te paras. Bien, tu cuerpo se ha parado en el momento, pero, ¿y la capa?, la capa hará su propio camino hasta pararse también.

Voy a poneros unos cuantos ejemplos, para ello tomaré escenas de un vídeo de AlanBeckerTutorials:

Como podeis observar, este principio es de hacer que las cosas se muevan fluidamente para que no esten rigidas.
Ahora, ¿cómo aplicamos esto en Roblox?

¡Eso és!, puedes utilizarlo en literalmente cualquier parte del cuerpo, aunque no recomiendo hacerlo en la RootPart (Parte base, el torso bajo). Se debería aplicar a todas las partes que quieres que se muevan con fluided. Pero tampoco se pasen o parecerán los muñecos que se mueven a base de aire y bailan con las manos hacia arriba.

Ahora, volvamos al vídeo del primer principio, si ven bien, la cabeza hace este principio también.

Slow In & Slow Out [Lento “in” y lento “out”]

Está confirmado que las animaciones que utilizan las direcciones de easing(suavizado) de “in”(dentro) a “out”(afuera) hacen las animaciones más naturales, si una animación no cumple con esto seguro estás animando un robot, voy a poner más ejemplos.

Como pueden ver, empieza despacio y obtiene más velocidad para luego perder la velocidad más adelante.

Lo que ven en el vídeo de arriba, es una dirección de easing (suavizado), hablaré de este tema más adelante.

Arcs [Arcos]

Si el movimiento de tu personaje hace arcos, lo estás haciendo bien. Si no, probablemente estás animando un robot.

Voy a explicarlo con otro ejemplo:

También está confirmado que el movimiento de los seres vivos está compuesto de arcos. Depués de hacer una animación deberías comprobar que hace arcos.

Secondary Action [Acción secundaria]

Básicamente es una acción que apoya a la acción principal. Digamos que tu personaje está pensando, la acción principal debería ser la cabeza mirando hacia arriba hacia un lado, ¿no?. Entonces, ¿por qué no añadimos que la mano toque la barbilla?

Como puedes ver, el personaje está levantando una caja, para que vá directamente al grano y a mí me parece un poco aburrido, en plan… está levantando una caja y no hay nada más. ¿Cómo lo podemos mejorar? ¡Añadamos una acción secundaria!

Ahora el personaje frota sus manos antes de hacer la acción, tiene más personalidad y ya no es tan aburrido como antes. Además, ahora tiene anticipación tambien.

Timing [Sincronización]

Esto en animación significa “más keyframes, más despacio” y “menos keyframes, más velocidad”, en animación 3D, la velocidad lo decide como de lejos están los keyframes, cuanto más lejos más keyframes, cuanto más cerca menos keyframes. (Keyframe significa fotograma clave, que es cuantas veces el ordenador dibuja al personaje para llegar de una pose a otra)

Exaggeration [Exageración]

Este es mi principio favorito, es sobre exagerar todos los movimientos que haces. Esto hace que los juegos sean mucho más divertidos ya que sin exageración los juegos serían más aburridos. Haré un ejemplo:

Quieres expresar que la sartén va ha hacer mucho daño al otro personaje así que añadimos exageración a ambos personajes, a uno le hace mucho daño y el otro está poniendo mucha fuerza.

Ejemplo en Roblox:

Como podeis ver, en la vida real no podríamos hacer ese moviemiento, la animación está exagerada y es lo que la hace aún mejor, el sentimiento de que puedes hacer tales movimientos.

Solid Drawing [Dibujo sólido]

En animación 2D sería dibujar a los personajes con figuras en 3D para hacerlos más natural, pero estamos aquí para Roblox, es decir, animación 3D, así que solo teneís que preoucuparos por una cosa…

Atención por favor, sobretodo principiantes.

No hagais twinning, nunca, por favor, al menos que sepas esconderlo.
O al menos que estés haciendo un robot.

¿Qué es el twinning? voy a enseñaros con una animación:

¿Lo ven? si aún no lo pillaste dejame enseñarte los keyframes de esta animación:

Eso es twinning: poner los keyframes en una línea vertical. Por favor, no lo hagáis al menos que sepais esconder el efecto, cosa que lleva practica. Intenta variar los keyframes poniendo estilos de easing y direcciones de easing. Otro truco que tengo para evitar esto es animar las partes una por una sin importar las demás partes. Foto de una animación sin twinning:

Algunos dirán “pero hay líneas rectas verticales de keyframes”, pero si obsercan bien verán que hay variedad de estilos y direcciones de easing además de que no todo está posado en línea. Está llego de segundas acciones y complementos que hacen que la animación se reproduzca como yo quiera.

Appeal [Apelación]

Una vez más, en animacion 2D es como dibujar al personaje, pero hablemos de animación en 3D:

Haré un ejemplo, tu personaje es muy valiente y tiene mucha confianza, entonces su animación por defecto será una en la que el torso sobresaldra y la cabeza mirará fijamente al objetivo. El principio es sobre animar a los personajes por su personalidad, no se aplicaría mucho a Roblox ya que no hay muchos juegos con historia.

Con esto acabamos los principios de la animación.

Easing Styles & Directions [Direcciones y estilos de easing]

Hay varios tipos de estilos de easing y direcciones, es básicamente un gráfico que te muestra cuando la animacion irá más rápido o más lento. Os pondré unos vídeos para que lo veais visualmente:

Como podeis ver, todos llegan al objetivo al mismo tiempo, pero algunos empiezan más rápido, otros mas despacio. En el primer video enseñan una bola que deja ver como funcionan estás direcciones y estilos de easing. La inclinación del gráfico dice cuando vá más rapido o más despacio. Cara estilo de easing tiene un nombre como podeis ver (linear, sine, quad, etc.), pero solo hay 4 direcciones de easing:
In, Out, InOut, OutIn.

Ahora, ¿qué es una dirección de easing? Os explicaré.

Para esto, obtendré el estilo de easing llamado Sine.

Podeis usar está web aun que esté en inglés para guiaros: https://greensock.com/ease-visualizer

Dirección “In”

La animación empieza despacio y gana más velocidad ya que al centro del gráfico hay más inclinación.

Dirección “Out”

Ahora empieza rápido y despues vá más despacio ya que hay más inclinación al principio.

Dirección “InOut”

Empieza despacio, despues gana velocidad y al final desacelera. Hay más inclinación aún en el centro que en los lados de la gráfica.

Todos los plugins y programas que permiten animar tienen estilos y direcciones de easing. En blender hay un gráfico incorporado para que tu modificas los estilos a tu gusto, pero es más dificil ya que tienes que hacer la X, la Y y la Z de cada parte separadamente. Moon Animator tiene una variedad muy grande de direcciones y estilos de easing que te pueden ayudar. Y los de Roblox tienen los básicos.

Ahora, es tu decisión utilizarlos correctamente, os invito a investigarlos por vosotros más a fondo, hay una forma de hacer tus propios estilos en animadores como los de Roblox y Moon Animator, os lo pondré más adelante y os aviso de que es más avanzado.

Tips/Trucos personaled

  1. Más linear

Los keyframes lineales son más poderosos de lo que creen, pero claso, los estilos de easing son necesarios siempre, en todas las animaciones. Este tip/truco es más avanzado así que deberian tener experiencia antes de utilizarlo.

Como pueden ver, si una animación está hecha así parece que es para un robot, así que aplicamos en principio “InOut”:

Sine In, Quad Out.

Como ven ahora parece más natural, y lo que quiero enseñar es lo siguiente:

A veces puedes hacer tus propios estilos con keyframes lineares pero siempre ten en cuenta que los estilos de easing probablemente vayan a verse mejor que solo utilizando linear. Deberíais familializaros con los estilos y direcciones de easing antes de utilizar este tip/truco.

  1. Como mejorar tus animaciones

Repite. Obtén una animación vieja y hazla otra vez pero esta vez mejorala y tomate más tiempo en hacerla.

Mira animación. Sí, mira mucha animación, ya sea en películas, en juegos, incluso movimientos en la vida real, todo eso te ayudara a mejorar.

Copia. Intenta copiar una animación de una fuente que sepas que hace buenas animaciones e intenta copiar esa animación o incluso mejórala.

Pule. Vale, acabas de hacer una animación y es muy épica, ahora, una animación nuca está “terminada” hasta que la pules, mejorala, haz que tenga más fluided, añade cosas, aplica los principios.

Intenta de todo. No solo hagas animaciones de lucha, o animaciones bailando, o de pistolas. Prueba ha hacer de todo.

  1. Haz una cinemática.

Es la mejor práctica que un animador puede tener, eso o hacer una animación larga que no sea una animación, haz slowmotions por todos lados, movimientos rápidos y de todas las velocidades, con esto os aseguro que mejorareis la calidad de vuestras animaciones.

Mi experiencia animando en Roblox Studio

He estado en Roblox durante 2 años, 1’5 años de esos desarrollando y animando. Apenas hice animaciones al principio pero despues empecé ha practicar más y no me arrepiento en absoluto. Lo que me gusta de estar en Roblox es lo intuitivo que es y la libertad que tenemos para desarrollar cosas de todo tipo.

_______________________________________________________________________________________

Y eso es todo! Espero que este post os haya ayudado y espero que mejoreis vuestras animaciones.

Ahora que tienes la información suficiente, ¡ves a practicar un poco!

Espero que os haya gustado y gracias por leer! :smile:

Cosas que añadir:
El usuario de discord de todos los vídeo no está actualizado y no es el actual.
Comuníquenme si ven algún fallo.(Gramatical o cualquier cosa.)


Developer Spotlight: Meet Jespone
#2

Esto es muy bieno!

Buen trabajo.


#3

Me encanta, gracias por esto todo esta tan bien explicado.


#4

Esta muy bueno y se nota que le pones esfuerzo.