Come posso creare grafica di carte animate come in Hearthstone?

Nel gioco Hearthstone, ci sono carte con immagini animate su di esse. Alcuni esempi:

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

Le animazioni sembrano essere composte da molteplici effetti:

• Sistemi di particelle.
• Dissolvenza degli sprite in entrata e in uscita / rotazione
• Trame semplici a scorrimento
• Un effetto di distorsione, molto evidente nel mantello e nei capelli dell'esempio 1.
• Effetti vorticosi del fumo, la luce nell'esempio 1 e il bagliore verde / viola nell'esempio 2.

I primi tre elementi sono banali, quello che mi piacerebbe sapere è come si potrebbero fare gli ultimi due. Questo può essere fatto anche in tempo reale in un gioco o sono animazioni pre-renderizzate?

Non so più se è rilevante, ma Doug ha capito bene

Volevo solo aggiungere che sono riuscito a ricreare le animazioni esattamente come sono state create nel gioco usando le stesse risorse, dai un'occhiata qui

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

Vengono in mente alcune idee e la loro implementazione dipenderà interamente dal motore, dagli strumenti e, infine, dal lavoro e dalla pipeline dei contenuti.

Animazione Sprite

1. Crea l'animazione usando strumenti come Photoshop e After Effects
2. Rendering fotogramma per fotogramma in un atlante (foglio sprite)
3. Applica l'animazione per codice
4. Rendi il layout della carta in cima a quello usando il giusto mascheramento o sfondo trasparente, se necessario.

Animazione video

1. Crea l'animazione usando strumenti come Photoshop e After Effects
2. Esporta quel video in un formato leggibile dal motore di gioco
3. Riproduci l'animazione per codice
4. Esegui il rendering del layout della scheda nella parte superiore del video utilizzando il mascheramento appropriato o lo sfondo trasparente, se necessario

Animazione nel motore

1. Crea tutte le risorse per l'animazione usando strumenti come Photoshop
2. Crea il modello di carta all'interno del motore con tutte le risorse necessarie
3. Animare usando il motore usando il suo editor di animazioni personalizzato e salvarlo
4. Riproduci l'animazione per codice quando necessario

Questi sono i tre tipi di animazione che conosco e con cui ho lavorato. Ci sono pro e contro per ciascuno di essi, e in questo caso particolare sono più propenso allo sprite e all'animazione video, perché richiedono meno GPU.

In casi come questo, l'approccio più semplice è probabilmente l'approccio giusto.

• Un modo per farlo è semplicemente usare un video al posto di una trama. Il video dovrà essere preparato in anticipo e dovrà essere in loop.

• Un altro modo è di rendere l'intera scena "carattere, particelle, mantello in movimento" renderizzata in un buffer che successivamente nel rendering della cornice viene utilizzato al posto della trama.

Non ho alcuna esperienza su come ottenere queste due soluzioni in un motore 3D, ma penso che entrambe siano possibili in un motore 2D (penso di poter fare questo lavoro nel MOAI per esempio).

Entrambi i 4 e 5 sono fatti facendo scorrere UV una trama sull'area, forse avendo una maglia sopra la carta leggermente distorta (in modo statico). L'Imp del sangue sembra avere anche una seconda trama che moltiplica la prima trama e non scorre UV.

Nel complesso, non sono effetti costosi. Non sono così belli come sembrano a prima vista.

Quasi tutti gli effetti possono essere raggiunti con strumenti di animazione scheletrica 2D come Spine. Uno sprite è fondamentalmente una trama su una mesh 2D. La mesh viene quindi trasformata per far muovere il mantello, ecc.
Dai un'occhiata alla bobina demo per esempi di tali effetti. http://esotericsoftware.com/spine-in-depth#Features ci sono tempi di esecuzione per i motori / le lingue più comuni. Uno strumento simile è Spriter: http://www.brashmonkey.com