How can I create animated card graphics like in Hearthstone?

Question

In the game Hearthstone, there are cards with animated images on them. A few examples:

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

The animations seem to be composed of multiple effects:

• Particle systems.
• Fading sprites in and out/rotating them
• Simple scrolling textures
• A distortion effect, very evident in the cape and hair of example 1.
• Swirling smoke effects, the light in example 1 and the green/purple glow in example 2.

The first three elements are trivial, what I'd like to know is how the last two could be done. Can this even be done realtime in a game, or are they pre-rendered animations?

Answer 1

I don't know if its relevant any more, But Doug answer's got it right

I just wanted to add that I myself managed to recreate the animations exactly as they are built in the game it self using the same assets, take a look here

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

Answer 2

Some ideas come to mind and their implementation will depend entirely on the engine, tools, and, finally, the work and content pipeline.

Sprite animation

1. Create the animation using tools like Photoshop and After Effects
2. Render frame by frame into an atlas (sprite sheet)
3. Apply the animation by code
4. Render the card layout on top of that using the proper masking or transparent background if needed.

Video animation

1. Create the animation using tools like Photoshop and After Effects
2. Export that video into a format readable by the game engine
3. Play the animation by code
4. Render the card layout on top of the video using the proper masking or transparent background if needed

In-Engine animation

1. Create all the assets for the animation using tools like Photoshop
2. Create the card model inside the engine with all the assets needed
3. Animate using the engine using its custom animation editor and save it
4. Play animation by code when necessary

These are the three types of animation that I know of and I've worked with. There are pros and cons for each one, and in this particular case I'm more inclined to sprite and video animation, because they're less GPU-intensive.

In cases like this one, the simplest approach is probably the right approach.

Answer 3

Both 4&5 are done by UV scrolling a texture over the area, maybe having a mesh over the card that's slightly distorted (in a static way). The blood imp seems to also have a second texture that multiples the first texture and does not UV scroll.

On the whole, they aren't expensive effects. They just aren't as good as they look first glance.

Answer 4

• One way to do that is to just use a video in place of a texture. That video will have to be prepared beforehand and will need to be looping.

• Another way is to have the whole "character, particles, cape moving" scene rendered into a buffer that later in the frame rendering gets used in place of the texture.

I do not have any experience on how to achieve these two solutions in a 3D engine but I think that both are possible in a 2D engine (I think I can make this work in MOAI for example).

Answer 5

Nearly all the effects can be achieved with 2D skeletal animation tools such as Spine. A sprite is basically a texture on a 2D mesh. The mesh is then transformed to make the cape move etc.
Check out the demo reel for examples of such effects. http://esotericsoftware.com/spine-in-depth#Features there are runtimes for most common engines/languages. A similar tool is Spriter: http://www.brashmonkey.com