¿Cómo puedo crear gráficos de tarjetas animadas como en Hearthstone?

En el juego Hearthstone, hay cartas con imágenes animadas. Algunos ejemplos:

1. http://www.hearthhead.com/card=281/argent-commander
2. http://www.hearthhead.com/card=469/blood-imp

Las animaciones parecen estar compuestas de múltiples efectos:

• Sistemas de partículas.
• Desvanecimiento de sprites dentro y fuera / rotándolos
• Texturas de desplazamiento simples
• Un efecto de distorsión, muy evidente en la capa y el cabello del ejemplo 1.
• Efectos de humo en remolino, la luz en el ejemplo 1 y el brillo verde / púrpura en el ejemplo 2.

Los primeros tres elementos son triviales, lo que me gustaría saber es cómo se podrían hacer los dos últimos. ¿Puede esto incluso hacerse en tiempo real en un juego, o son animaciones pre-renderizadas?

No sé si ya es relevante, pero la respuesta de Doug lo hizo bien

Solo quería agregar que yo mismo logré recrear las animaciones exactamente como están integradas en el juego usando los mismos recursos, mira aquí

Magni :

precision highp float;

uniform float uTime;
uniform sampler2D uSampler0;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
varying vec2 texCoords;

void main(void) {
  float t = uTime;
  vec3 mask = texture2D(uSampler1,texCoords).rgb;
  vec4 img = texture2D(uSampler0,texCoords);
  img.rg*=1.1;
  vec2 flow = texture2D(uSampler3,texCoords).gr;
  flow.y+=t*3.;
  vec4 plas = texture2D(uSampler2,flow*1.2) * mask.r;
  plas *= 15.5;
  plas *= vec4(0.239, 0.224,0.488,1.);
  vec2 ct = texCoords;
  ct.y -=t*0.5;
  vec4 clouds = texture2D(uSampler4,ct*2.);
  float clouds_a = clouds.a;
  clouds *= 4.5;
  clouds *= vec4(0.275,0.23,0.161,1.);
  clouds_a *= mask.b;
  img += clouds * mask.b;
  img += plas * mask.r ;
  img += (sin(t*15.)+1.) * mask.g * vec4(0.239, 0.224,0.488,1.)*2.;
  ct.x += t * 0.5;
  vec4 clouds_overall = texture2D(uSampler5,ct  * 0.5);
  clouds_overall *= vec4(0.275,0.23,0.161,1.);
  gl_FragColor = img +clouds_overall;
}

Medivh :

precision highp float;

uniform float uTime;
uniform sampler2D uSampler0;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
varying vec2 texCoords;

void main(void) {
  float t = uTime;
  vec2 tc = texCoords;
  tc.x-=t*2.;
  vec4 mask = texture2D(uSampler1,texCoords);
  float bump = texture2D(uSampler4,tc*0.5).r; 
  vec4 img = texture2D(uSampler0,vec2(texCoords.x,texCoords.y+bump* 0.055 * mask.g));
  tc = texCoords;
  tc.x-=0.05;
  tc.y+= 0.05;
  vec2 flow = texture2D(uSampler3,tc).rg;
  flow.y+=t;
  flow.y*=2.;
  vec4 plasma = texture2D(uSampler2,flow*1.5);
  plasma.rgb *= vec3(0.52,0.26,0.54);
  plasma *= 3.;
  flow = texture2D(uSampler5,texCoords).rg;
  flow.g+=t;
  vec4 plasma2 = texture2D(uSampler2,flow);
  plasma2 *= 4.;
  plasma2.rgb *= vec3(0.52,0.26,0.54);
  gl_FragColor =img+plasma*mask.r+bump*mask.a*0.35+plasma2*mask.b;
}

Algunas ideas vienen a mi mente y su implementación dependerá completamente del motor, las herramientas y, finalmente, el trabajo y la canalización de contenido.

Animación de sprites

1. Crea la animación usando herramientas como Photoshop y After Effects
2. Render cuadro por cuadro en un atlas (hoja de sprites)
3. Aplicar la animación por código
4. Representa el diseño de la tarjeta encima de eso usando el enmascaramiento adecuado o un fondo transparente si es necesario.

Video animacion

1. Crea la animación usando herramientas como Photoshop y After Effects
2. Exporte ese video a un formato legible por el motor del juego
3. Reproduce la animación por código
4. Renderice el diseño de la tarjeta en la parte superior del video utilizando el enmascaramiento adecuado o un fondo transparente si es necesario

Animación en el motor

1. Crea todos los recursos para la animación usando herramientas como Photoshop
2. Cree el modelo de tarjeta dentro del motor con todos los activos necesarios
3. Anime usando el motor usando su editor de animación personalizado y guárdelo
4. Reproduzca animación por código cuando sea necesario

Estos son los tres tipos de animación que conozco y con los que he trabajado. Hay pros y contras para cada uno, y en este caso particular, estoy más inclinado a los sprites y la animación de video, porque son menos intensivos en GPU.

En casos como este, el enfoque más simple es probablemente el enfoque correcto.

• Una forma de hacerlo es usar un video en lugar de una textura. Ese video tendrá que estar preparado de antemano y deberá estar en bucle.

• Otra forma es tener toda la escena del "personaje, las partículas, el movimiento de la capa" renderizada en un búfer que más tarde en el renderizado del marco se usa en lugar de la textura.

No tengo ninguna experiencia sobre cómo lograr estas dos soluciones en un motor 3D, pero creo que ambas son posibles en un motor 2D (creo que puedo hacer que esto funcione en MOAI, por ejemplo).

Tanto 4 como 5 se realizan desplazando una textura UV sobre el área, tal vez con una malla sobre la tarjeta que está ligeramente distorsionada (de forma estática). El diablillo de sangre también parece tener una segunda textura que multiplica la primera textura y no se desplaza por los rayos UV.

En general, no son efectos caros. Simplemente no son tan buenos como parecen a primera vista.

Casi todos los efectos se pueden lograr con herramientas de animación esquelética 2D como Spine. Un sprite es básicamente una textura en una malla 2D. La malla se transforma para hacer que la capa se mueva, etc.
Consulte el carrete de demostración para ver ejemplos de tales efectos. http://esotericsoftware.com/spine-in-depth#Features hay tiempos de ejecución para los motores / idiomas más comunes. Una herramienta similar es Spriter: http://www.brashmonkey.com