Wie kann ich animierte Kartengrafiken wie in Hearthstone erstellen?

Im Spiel Hearthstone gibt es Karten mit animierten Bildern. Einige Beispiele:

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

Die Animationen scheinen aus mehreren Effekten zu bestehen:

• Partikelsysteme.
• Sprites ein- und ausblenden / drehen
• Einfache Bildlauftexturen
• Ein Verzerrungseffekt, der am Umhang und an den Haaren von Beispiel 1 sehr deutlich ist.
• Wirbelnde Raucheffekte, das Licht in Beispiel 1 und das grün / lila Leuchten in Beispiel 2.

Die ersten drei Elemente sind trivial. Ich würde gerne wissen, wie die letzten beiden gemacht werden könnten. Kann dies in einem Spiel sogar in Echtzeit erfolgen oder handelt es sich um vorgerenderte Animationen?

Ich weiß nicht mehr, ob es relevant ist, aber die Antwort von Doug hat es richtig gemacht

Ich wollte nur hinzufügen, dass ich es selbst geschafft habe, die Animationen genau so neu zu erstellen, wie sie im Spiel selbst mit denselben Assets erstellt wurden. Schauen Sie hier

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

Einige Ideen kommen in den Sinn und ihre Umsetzung hängt vollständig von der Engine, den Tools und schließlich der Arbeits- und Inhaltspipeline ab.

Sprite-Animation

1. Erstellen Sie die Animation mit Werkzeugen wie Photoshop und After Effects
2. Bild für Bild in einen Atlas (Sprite Sheet) rendern
3. Wenden Sie die Animation per Code an
4. Rendern Sie das Kartenlayout darüber hinaus mit der richtigen Maskierung oder dem transparenten Hintergrund, falls erforderlich.

Videoanimation

1. Erstellen Sie die Animation mit Werkzeugen wie Photoshop und After Effects
2. Exportieren Sie das Video in ein Format, das von der Spiel-Engine gelesen werden kann
3. Spielen Sie die Animation per Code ab
4. Rendern Sie das Kartenlayout bei Bedarf mit der richtigen Maskierung oder dem transparenten Hintergrund über dem Video

In-Engine-Animation

1. Erstellen Sie alle Elemente für die Animation mit Tools wie Photoshop
2. Erstellen Sie das Kartenmodell in der Engine mit allen erforderlichen Assets
3. Animieren Sie mit der Engine mithilfe des benutzerdefinierten Animationseditors und speichern Sie sie
4. Spielen Sie die Animation bei Bedarf per Code ab

Dies sind die drei Arten von Animationen, die ich kenne und mit denen ich gearbeitet habe. Für jeden gibt es Vor- und Nachteile, und in diesem speziellen Fall bin ich eher zu Sprite- und Videoanimationen geneigt, weil sie weniger GPU-intensiv sind.

In Fällen wie diesem ist der einfachste Ansatz wahrscheinlich der richtige.

• Eine Möglichkeit, dies zu tun, besteht darin, anstelle einer Textur ein Video zu verwenden. Das Video muss im Voraus vorbereitet werden und muss sich in einer Schleife befinden.

• Eine andere Möglichkeit besteht darin, die gesamte Szene "Charakter, Partikel, Umhang bewegen" in einen Puffer zu rendern, der später im Rahmen-Rendering anstelle der Textur verwendet wird.

Ich habe keine Erfahrung damit, wie diese beiden Lösungen in einer 3D-Engine erreicht werden können, aber ich denke, dass beide in einer 2D-Engine möglich sind (ich denke, ich kann diese Funktion beispielsweise in MOAI ausführen).

Sowohl 4 als auch 5 werden durch UV-Scrollen einer Textur über den Bereich ausgeführt, wobei möglicherweise ein Netz über der Karte vorhanden ist, das leicht verzerrt ist (statisch). Der Blutkobold scheint auch eine zweite Textur zu haben, die die erste Textur multipliziert und keine UV-Schriftrolle erzeugt.

Im Großen und Ganzen sind sie keine teuren Effekte. Sie sind einfach nicht so gut, wie sie auf den ersten Blick aussehen.

Fast alle Effekte können mit 2D-Skelettanimationswerkzeugen wie Spine erzielt werden. Ein Sprite ist im Grunde eine Textur auf einem 2D-Netz. Das Netz wird dann transformiert, um den Umhang usw. zu bewegen.
Beispiele für solche Effekte finden Sie auf der Demo-Rolle. http://esotericsoftware.com/spine-in-depth#Features gibt es Laufzeiten für die meisten gängigen Engines / Sprachen. Ein ähnliches Tool ist Spriter: http://www.brashmonkey.com