9
\$\begingroup\$

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?

\$\endgroup\$
  • 1
    \$\begingroup\$ Its probably pre recorded animations being played in the cards.. \$\endgroup\$ – Grimshaw Feb 27 '14 at 11:47
  • \$\begingroup\$ You might have a better chance at graphicdesign.stackexchange.com cos that looks like a Photoshop or AfterEffects, not the render. \$\endgroup\$ – Kromster Feb 27 '14 at 14:16
  • 1
    \$\begingroup\$ I'm not sure if I agree with migrating the question, but I do have follow-up questions for you, @Appeltaart: (1) are you interested in how the art is made or are you interested in the code that renders the art? (2) Are you asking specifically how this can be accomplished in a browser game? \$\endgroup\$ – user1430 Feb 27 '14 at 19:02
  • \$\begingroup\$ I'm most interested in whether - and how these effects can be achieved with realtime rendering. As such, I'm most interested in the code. Consensus seems to be that Hearthstone itself uses prerecorded animations though. As for your second question, I'm not looking to implement this in a browser game, but in iOS. \$\endgroup\$ – Appeltaart Feb 27 '14 at 21:05
7
\$\begingroup\$

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;
}
| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ This is exactly what I was looking for, thanks! Where did you learn this technique, what is it called (plasma?), and are there any further resources on it (books/articles)? \$\endgroup\$ – Appeltaart Aug 4 '15 at 10:07
  • 2
    \$\begingroup\$ I actually figured it out by myself, it is similar to morphing vertices in 3D rendering, but you play around directly with the pixels them self instead. There are couple of different techniques at play, most of them are kind of basic, what I guess you are looking for is called Displacement Mapping , it is mostly known as using a texture to move/displace vertices , but here I used a texture to displace another texture to get the wind effect. \$\endgroup\$ – Daniel Mendel Aug 5 '15 at 10:15
  • \$\begingroup\$ Hey Dan! Do you have the original assets you used posted anywhere? Your demo links are inactive now, and wayback machine doesn't seem to cache the images. I've had your answer bookmarked for quite awhile, but never invested the time to study this. \$\endgroup\$ – Brandon Silva Jul 16 '18 at 21:51
  • \$\begingroup\$ Woot! I used httrack to save the files, those years ago. Found them! With your permission, I'll post them somewhere, or I can pass the files if you no longer have them, and you can save them in a repo, or something. \$\endgroup\$ – Brandon Silva Jul 17 '18 at 13:39
  • \$\begingroup\$ @BrandonSilva Yes you can post them, That would be great \$\endgroup\$ – Daniel Mendel Jan 21 '19 at 10:07
4
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$
  • 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).

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ What are 4&5 referring to? \$\endgroup\$ – Vaillancourt Jul 14 '15 at 21:56
  • \$\begingroup\$ The "Swirling smoke effects, the light in example 1 and the green/purple glow in example 2". I would guess that the distortion effect is either a canned animation of vertices moving or a procedural one changing them at runtime. Or it could be a shader with a texture sample bias introduced by a second UV scrolling texture. \$\endgroup\$ – Doug Jul 15 '15 at 0:43
0
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.