Frame vs. Mesh Animations

Hey all,

Evan Doody back again, as promised! I would like to start by thanking everyone for all the positive feedback on my last post and for sharing that post as well. It means a lot to us here. For those of you joining us for the first time here on the Wulverblade Blog, welcome! Last time I covered one of our primary animation systems, 2D Skeletal animation. Today we continue down a similar path as I cover frame by frame animation, mesh based animation, and some methods of optimization. This post will be slightly more technical than the last one, so I will try to break things down to the best of my ability for all readers.

Frame-by-Frame

Creating frame by frame animation can be a difficult and time consuming task. However, it adds a level of polish not easily replicated through other means while enhancing Wulverblade’s distinct art style. We use this form of animation for various effects including: blood, explosions, fire, water, smoke, and cloth.

As much as I love the look and feel of traditional animation effects, I have minimal experience in the creation of such work. For this reason we turn to the professionals. Ours goes by Denis. Denis is a traditional animator with a fantastic understanding of fluid motion and timing. Using Flash, Denis continues to brilliantly handle the massively varying tasks we throw at him.

  Wulverblade Frame Animations: Process

Upon receiving a request, Denis starts with a rough sketch to feel out the fundamentals of the animation at hand. When satisfied, he moves the basic forms through the laid out keyframes. Throughout the process, Denis checks in regularly to confirm the style with us. He adds in layers of detail until both parties are satisfied. When we have something looking and feeling great, Denis bumps the animation up to the appropriate frame rate of 24fps by creating the smooth in-between frames.

Wulverblade Frame Animations: Image Cycle

Each frame is exported from Flash at the appropriate resolution and brought into Unity. Here, we use 2D Toolkit to generate an atlas and cycle through each image at a desired frame rate. Traditional frame-by-frame animation is the least efficient in regards to texture size but allows for the greatest control over the final appearance. We use 2D Toolkit’s dicing feature to maximize texture space and remove unnecessary transparency, but that only goes so far. In the classic 2D games we admire, every pose of every character had to fit on an atlas to be cycled through. At modern resolutions, this would not be feasible. The introduction of skeletal animations helps reduce these texture sizes, and now mesh deformations have taken it one step further.

Mesh Deformations

Wulverblade Animations: Mesh Deformation

Mesh deformations are made possible by one of Spine’s more recent updates. It allows for a static 2D image to be broken down into customized polygons. These polygons can then be stretched or warped by the manipulation of each individual vertex. The ability to warp an image on a skeleton is immensely useful for creating secondary motion in an animation without requiring any additional textures. The vertices can also be skinned to multiple bones, allowing the mesh to follow and bend with the changing directions of a skeleton . The influence each bone has over a vertex can also be adjusted and smoothed.

A comparison between the warping animation shown above and it’s original counterpart can be seen here. Movements made with mesh deformation are often subtle but can take a 2D animation to the next level. More examples of mesh deformation can be found on the Spine forums. I’ve been excited about Spine’s mesh deformation functionality since I first saw their kickstarter campaign. It’s a tool that can be utilized far beyond the basic secondary motion shown above in the knife thrower and a feature I’m excited to use more often.

Mesh Animations

We want the world of Wulverblade to feel alive. Every scene and every view should draw the player into the beautifully dreary and intense world that was ancient Britannia. To accomplish this vital task, we turn to our traditional animator to create fantastically flowing environmental effects. Here, for example, we have a simple cloth doorway used in our village scene:

Wulverblade Animations: Cloth Doorway

These traditional effects turn the world into a living, breathing character of the game. Their sharp but fluid motion adds that “something special” that simply can’t be matched in our style by a particle system or cloth dynamic. We’re always excited when Denis sends us a new animation. However, because we work at a high resolution and a high frame rate, texture space can quickly become a problem.

Wulverblade Animations: Frame By Frame Atlas

Mike works at an extremely high resolution when creating his environment. His choice to do so pays off in the amount of detail he continually astounds us with. One of the more overwhelming aspects of this project has been maintaining Mike’s level of quality in a real-time interactive environment. Just opening his Photoshop files pushes our hardware to the limits. To maintain that fidelity, each frame of cloth needs to measure roughly 240 by 280 pixels. With 24 frames of animation, that subtle background movement we desire suddenly requires a 1024×2048 texture. This is a lot of texture space for just one of many elements of ambience. With each frame-by-frame environmental effect running similar in size, a single level could require multiple 4096 textures for background animations alone. I turned to Spine and it’s meshes to test a theoretical solution to this problem.

Wulverblade Animations: Mesh Atlas

The cloth doorway proved to be the perfect test for reducing a frame based animation into its most basic forms. It could be simplified into two images: the cloth and a black triangle for any strand and tear. If it worked, we’d be able to increase the resolution of cloth and reduce the entire animation down to a single 512×512 atlas with space to spare. Using the exported Flash animation as a template, I created a mesh I hoped would deform well. Maintaining the thick, sharp borders that define the Wulverblade style proved to be the primary challenge. I skinned the black strands to a chain of bones for speedy and smooth articulation. Once I was comfortable with my setup, creating the animation boiled down to tediously following the original to the best of my ability. A side by side comparison of both versions can be seen here.

Successfully recreating the frame by frame animation as a mesh animation was beneficial beyond saving texture space. As a mesh, the cloth image can be substituted and the animation re-used allowing for cheap and efficient visual variety. Additionally, meshes are capable of blending between two different animations. A flag is a good example of where this blending could utilized. By creating a swaying “Idle” animation and a “Wind Blowing” animation, we can match the blending of the animations with the sound of wind at run-time. Each vertex would appropriately translate to the correct position as we switch between animations. In my opinion, one of the best (and coolest) benefit of the mesh based animation is the removal of time restrictions.

Our ability to manipulate the flow of time during gameplay allows us to change how a player perceives the game. We can enhance the combat by slowing down the world to emphasizing a finishing blow. We can use time as a gameplay mechanic, giving the player a short burst of energy that slows down the rest of the world. We can create a feeling of crippling defeat through a “Chun-Li Death,” as it has come to be known around the office.

*Chun-Li Death – n. – A heart sinking feeling that occurs during the slow motion death sequence when Chun-Li is defeated in Street Fighter (specifically Super Street Fighter II Turbo). Often followed by a “You Lose” from the announcer when we play.

Frame based animations are limited to the frame rate they are created at.  We create these animations at 24-30 fps to guarantee smooth appearance in real-time. When we utilize slow motion effects these background elements tend to stand out as lower quality. These effects contrast the smoothly interpolating skeletal and mesh components on screen.

Wulverblade Animations: Fame vs. Mesh Time Warping

With an animated mesh, each vertex moves smoothly between each of its keyed positions. Due to this fact, the animations can be played at any speed without a stuttering appearance. Denis has to create his animations without the completed game environment available. What looks great as an individual animation can feel too fast or too slow when integrated with additionally animated characters and objects. Mesh based animation allows us to get the timing just right.

Thanks to mesh deformations we’ve been able to make smoother, less restricted, and more efficient animations while maintaining the feeling and quality of a traditional animator’s influence.

This post has become far longer than I anticipated, but only because it’s a topic that interests me. I was going to discuss character attack swipes in this post, but that will be an upcoming mini-post instead. Like always, I encourage any questions or thoughts you have to be shared in the comments! Our goal for the blog is to engage and interact with our current and future fans, in hopes that it will make the game better in the end.

Here is a reminder of the upcoming topics I’ll be writing about soon.

  • Swipes – Mini-Expansion on Mesh Deformations
  • Shadows – Problems, Solutions, and the next step
  • Advanced Skeletal Animation and Rigging – Sort Ordering, Faces, and IK Rigging
  • Blocking – Have Shield, Will Block
  • Level Building – Building the Beasts

Until next time, thanks for reading!
-Evan

  • Tim McKinstry

    Great post! I’m going to have to read it over again to take it in. That almost abstract flame is fab. And mesh animations for slow motion? I can’t wait to see this in the game!

  • Can you post a normal speed of the cloth animation?

    • Evan Doody

      The links tend to get lost in the rest of the text, but the comparison can be seen here: http://wulverblade.com/wp-content/uploads/2014/08/Blog-2-Link-2.gif . The final speed in game I believe is 75% or less of that.

      • Awesome, please add that below the slow motion gif to show the final product. That helps a lot in seeing the difference between animated motion and the mesh animation.

      • Figure 3 is hard to see the mesh deformations because there is so much movement, and there’s no comparison without. So it’s hard to see how it shows the effect, but this cloth helps a lot.

  • Really great post ! The mesh seems to help a lot, the results are really good, I’ll definitely play more with it ! I’ve used Spine and it was exactly what I needed, but Idk I think I didn’t gave to much attention to this tool. I’m curious, how are you making the gifs ? the ones from this post and the other one, I know this is not related with the subject, but I had some problems in creating gifs with my spine animations, using a background or other elements and a specific dimension for the gif, I think I’ve tried everything, but I didn’t quite get the same result and good quality, maybe my photoshop skills are not that good or my animations had to many frames idk, so I thought you might want to share the secret :D thanks btw every new post about the game, makes me want to see even more, so please don’t ever stop ! :))

    • Evan Doody

      Sorry about the delayed response! The meshes are extremely helpful and I have been using them more and more with each character. It saves so much texture space and creates that vital secondary motion. For the gifs posted here I have always used Photoshop. I export the frames from spine as a PNG sequence and bring those into Photoshop as layers. From there I can add the background, re-size, and all that general Photoshop goodness. After converting layers to a frame-by-frame animation, there ends up being a fair amount of tweaking in their “save for web” functionality to get the balance of quality and file size. Sometimes I do, however, export GIFs right from spine and haven’t run into too much trouble. Hopefully that helps and thanks so much for reading!

      • oh don’t worry ! Yes, I can see that now, the meshes are really great ! haha I’ve actually made the same thing with the gifs, still I’m not sure why the quality and speed wasn’t that good, I’ll look a little more on the ” save for web” option and yes exporting gifs form spine worked fine for me too, it’s just that you can’t have a specific dimension without a transparent background behind, but then you might loose the quality if you adjust the character dimension, I think it’s good for a fast preview, thanks for the tips Evan ! :)

  • graydove

    Thanks for this post. It was very informative, especially in regards to meshes. Question – is it possible to opacity fade in/out between animations using Spine? Instead of instantly jumping to the next animation, it instead does an opacity fade to it.

  • Bradley Stanley

    Hey this post helps me out quite a bit. While it is an interesting read, I’m using it as research towards an assignment I have been given. I’m looking into what animation technique I should go with, as well as what tool I should use.