Como posso criar gráficos de cartões animados como no Hearthstone?

No jogo Hearthstone, existem cartas com imagens animadas. Alguns exemplos:

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

As animações parecem ser compostas de múltiplos efeitos:

• Sistemas de partículas.
• Desvanecendo sprites dentro e fora / girando-os
• Texturas de rolagem simples
• Um efeito de distorção, muito evidente na capa e no cabelo do exemplo 1.
• Efeitos de fumaça em turbilhão, a luz no exemplo 1 e o brilho verde / roxo no exemplo 2.

Os três primeiros elementos são triviais, o que eu gostaria de saber é como os dois últimos podem ser feitos. Isso pode ser feito em tempo real em um jogo ou são animações pré-renderizadas?

Não sei mais se é relevante, mas a resposta de Doug acertou

Eu só queria acrescentar que eu mesmo consegui recriar as animações exatamente como elas são construídas no jogo usando os mesmos recursos, dê uma olhada aqui

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;
}

Algumas idéias vêm à mente e sua implementação dependerá inteiramente do mecanismo, das ferramentas e, finalmente, do pipeline de trabalho e conteúdo.

Animação Sprite

1. Crie a animação usando ferramentas como Photoshop e After Effects
2. Renderizar quadro a quadro em um atlas (folha de sprite)
3. Aplique a animação por código
4. Renderize o layout do cartão em cima dele usando o mascaramento adequado ou o fundo transparente, se necessário.

Animação de vídeo

1. Crie a animação usando ferramentas como Photoshop e After Effects
2. Exporte esse vídeo para um formato legível pelo mecanismo de jogo
3. Reproduzir a animação por código
4. Renderize o layout do cartão na parte superior do vídeo usando o mascaramento adequado ou o fundo transparente, se necessário

Animação no mecanismo

1. Crie todos os ativos para a animação usando ferramentas como o Photoshop
2. Crie o modelo do cartão dentro do mecanismo com todos os ativos necessários
3. Anime usando o mecanismo usando seu editor de animação personalizado e salve-o
4. Reproduzir animação por código quando necessário

Estes são os três tipos de animação que eu conheço e com quem trabalhei. Existem prós e contras para cada um e, nesse caso em particular, estou mais inclinado a sprites e animações em vídeo, porque são menos intensivos em GPU.

Em casos como este, a abordagem mais simples é provavelmente a abordagem correta.

• Uma maneira de fazer isso é usar apenas um vídeo no lugar de uma textura. Esse vídeo terá que ser preparado com antecedência e precisará estar em loop.

• Outra maneira é fazer com que toda a cena "caractere, partículas, movimento da capa" seja transformada em um buffer que mais tarde na renderização do quadro seja usada no lugar da textura.

Não tenho nenhuma experiência em como obter essas duas soluções em um mecanismo 3D, mas acho que ambas são possíveis em um mecanismo 2D (acho que posso fazer isso funcionar no MOAI, por exemplo).

Tanto o 4 como o 5 são feitos rolando uma textura UV sobre a área, talvez com uma malha sobre o cartão ligeiramente distorcida (de maneira estática). O diabrete do sangue também parece ter uma segunda textura que multiplica a primeira textura e não faz rolagem UV.

No geral, eles não são efeitos caros. Eles simplesmente não são tão bons quanto parecem à primeira vista.

Quase todos os efeitos podem ser alcançados com as ferramentas de animação esquelética 2D, como o Spine. Um sprite é basicamente uma textura em uma malha 2D. A malha é então transformada para fazer a capa se mover etc.
Confira o demo reel para exemplos de tais efeitos. http://esotericsoftware.com/spine-in-depth#Features existem tempos de execução para os mecanismos / idiomas mais comuns. Uma ferramenta semelhante é o Spriter: http://www.brashmonkey.com