Comment puis-je créer des graphiques de carte animés comme dans Hearthstone?

Dans le jeu Hearthstone, il y a des cartes avec des images animées. Quelques exemples:

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

Les animations semblent être composées de multiples effets:

• Systèmes de particules.
• Fondu des sprites vers l'intérieur et l'extérieur / rotation
• Textures de défilement simples
• Un effet de distorsion, très évident dans la cape et les cheveux de l'exemple 1.
• Effets de fumée tourbillonnante, la lumière dans l'exemple 1 et la lueur verte / violette dans l'exemple 2.

Les trois premiers éléments sont triviaux, ce que j'aimerais savoir, c'est comment les deux derniers pourraient être réalisés. Cela peut-il même être fait en temps réel dans un jeu, ou s'agit-il d'animations pré-rendues?

Je ne sais plus si c'est pertinent, mais la réponse de Doug a raison

Je voulais juste ajouter que j'ai moi-même réussi à recréer les animations exactement comme elles sont construites dans le jeu lui-même en utilisant les mêmes actifs, jetez un œil ici

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

Certaines idées me viennent à l'esprit et leur mise en œuvre dépendra entièrement du moteur, des outils et, enfin, du pipeline de travail et de contenu.

Animation de sprite

1. Créez l'animation à l'aide d'outils comme Photoshop et After Effects
2. Rendu image par image dans un atlas (feuille de sprite)
3. Appliquer l'animation par code
4. Rendez la disposition de la carte en plus de cela en utilisant le masquage approprié ou un arrière-plan transparent si nécessaire.

Animation vidéo

1. Créez l'animation à l'aide d'outils comme Photoshop et After Effects
2. Exportez cette vidéo dans un format lisible par le moteur de jeu
3. Lire l'animation par code
4. Rendez la disposition de la carte au-dessus de la vidéo en utilisant le bon masque ou un arrière-plan transparent si nécessaire

Animation dans le moteur

1. Créez tous les éléments de l'animation à l'aide d'outils comme Photoshop
2. Créez le modèle de carte à l'intérieur du moteur avec tous les actifs nécessaires
3. Animer à l'aide du moteur à l'aide de son éditeur d'animation personnalisé et l'enregistrer
4. Lire l'animation par code si nécessaire

Ce sont les trois types d'animation que je connais et avec lesquels j'ai travaillé. Il y a des avantages et des inconvénients pour chacun, et dans ce cas particulier, je suis plus enclin aux sprites et à l'animation vidéo, car ils sont moins gourmands en GPU.

Dans des cas comme celui-ci, l'approche la plus simple est probablement la bonne approche.

• Une façon de le faire est d'utiliser simplement une vidéo à la place d'une texture. Cette vidéo devra être préparée à l'avance et devra être mise en boucle.

• Une autre façon est de rendre la scène entière "personnage, particules, cape en mouvement" dans un tampon qui, plus tard dans le rendu du cadre, sera utilisé à la place de la texture.

Je n'ai aucune expérience sur la façon de réaliser ces deux solutions dans un moteur 3D mais je pense que les deux sont possibles dans un moteur 2D (je pense que je peux faire ça en MOAI par exemple).

Les deux 4 et 5 sont effectués en faisant défiler UV une texture sur la zone, peut-être en ayant un maillage sur la carte qui est légèrement déformé (de manière statique). Le lutin sanguin semble également avoir une deuxième texture qui multiplie la première texture et ne défile pas aux UV.

Dans l'ensemble, ce ne sont pas des effets coûteux. Ils ne sont tout simplement pas aussi bons qu'ils le paraissent à première vue.

Presque tous les effets peuvent être obtenus avec des outils d'animation squelettique 2D tels que Spine. Un sprite est essentiellement une texture sur un maillage 2D. Le maillage est ensuite transformé pour faire bouger la cape, etc.
Consultez la bobine de démonstration pour des exemples de tels effets. http://esotericsoftware.com/spine-in-depth#Features il existe des temps d'exécution pour la plupart des moteurs / langues. Un outil similaire est Spriter: http://www.brashmonkey.com