Question about animation using skeletons

svrart

Hi,

I have a web based animation editor.  I create the sprites manually.  So for a walk cycle, I create about 10 frames.  As time has gone by, the number of characters have increased.  I am now wondering if it may be worth it to introduce skeletons.  So, I create the 10 frames for the skeleton walk cycle and develop code to create the character animations based on these skeletons.  So if I introduce 20 characters, I just rig the skeleton properly in the character and run the code to create animations for the 20 characters.

Anyone have experience with this?  Questions I have:

Are there existing open source libraries that can do this?

If not, how do I handle the movements of the limbs?  Currently they are all in svg.  Say the elbow bends with a certain arc, in the movement how would I modify this arc?

Anything else I need to pay attention to?

Hopefully, what I wrote is clear.  If not, please let me know.

sharsein

If you're using Unity, they have a 2D skeletal system that comes with the engine. As long as the joint names are the same, the animation clip can play on multiple characters: https://www.youtube.com/watch?v=EZtpACxCTEE
Not open source, but Spine is pretty good for skeletal animation that you can export to other game engines: http://esotericsoftware.com/

svrart

Hi,

I want to implement the skinning on my own software, so I am looking to either modify existing opensource stuff or just write it myself.  Here is something I found but the description is so so.  https://blog.tensorflow.org/2020/05/pose-animator-open-source-tool-to-bring-svg-characters-to-life.html

RN

svrart said:

If not, how do I handle the movements of the limbs?  Currently they are all in svg.  Say the elbow bends with a certain arc, in the movement how would I modify this arc?

The first method that Toon Boom Harmony and other animation apps do to have bone animations is that you have the bones deforming the control points of the vector curves. So in the same way that you manipulated the control points of curves while designing your SVG art, the skeleton joints / bones would be transforming those points as well.

The problem is that Toon Boom also does its own rendering -- it rasterizes your vector art into bitmaps to make video frames.

This is why 2D skeletal animation in games needs to use the second method for this, more friendly to real-time rendering, which is mesh deformation: rasterize those SVGs into PNGs / TGAs with transparency, use them as textures of 2D meshes and then let the bones deform vertices of that 2D mesh. The software that support this, that I remember (there could be more), are:

- Live2D Cubism

- Spine (like @sharsein mentioned above)

- Dragonbones

- Moho

- Toon Boom Harmony (the mesh is internal, not shown to the artist)

- After Effects, OpenToonz etc.

This kind of deformation can be combined with shape keys (AKA morph targets) to create those smooth pseudo-depth effects that you see in the Spine WebGL demos, where the character features seem to change in depth, seen below:

There was also a really nice thread here in PC by @ADR with more examples of this: https://polycount.com/discussion/186360/animated-2d-portraits-gif-heavy

As for an actual game using this kind of tech, I think it would be Broken Age: http://www.brokenagegame.com/

About the implementation, a while ago I wrote a demo having 2D mesh skeletal animation using Lua and LÖVE, it shows how to deform the mesh either in software or with a skinning shader:

https://github.com/RNavega/2DMeshAnimation-Love2D

This 2D jellyfish model was created in Blender, which I forgot to mention is yet another program that you can use to create these animations, but keep in mind that it's a general 3D animation program so it needs more setup before being used for 2D, unlike those other programs that are specialized in this.

throttlekitty

https://www.youtube.com/watch?v=b3Kcz9MPGAw

Dragon's Crown is another example of a game using this technique. We had tried something similar using Spine, and it turned out to be a very long and painful process. Doing simple animations like old school flash style animations is easy though, and getting the 3d effects is real cool!

The big issue was that a character needed to house all the bones and sprites for all their animations/poses, which meant a lot of planning, iteration, and trying to get the art right the first time around. For example, some attack animation that needs three major poses for the body, legs, and arms and we use the joints for all the tweening. The art/joints/meshes need to be set up so when we move to the next art frame there's no bad skipping or gnarly deformations. So if something wasn't working and we needed to redo the art, joint placement, weights or even the whole mesh, and eventually get back to fixing the animations, it cost a lot of time.

Just some food for thought, our situation was a bit more complex I think.

I can't speak much for creating a custom implementation, though the concept is basic with meshes, joints and weights. You'll want to create some kind of control rig for animating, at the very least, some way to reset joints to their rest positions.

svrart

Hi RN and throttlekitty,

Thanks for you input.  Let me go through and digest it :-)