Mesh deformation, not paper dolls
Most quick animation tools cut a character into stiff pieces that rotate at the joints. This tool wraps your whole image in a fine triangle mesh. Every point of the mesh follows a blend of nearby bones, so a knee bends like a knee, a belly squashes when the character breathes and the shoulders follow the arms. That is the same idea Spine and Unity 2D Animation use, done for you in one click.
How the automatic setup works
Mesh. The tool lays a grid over the solid pixels of your image and turns it into triangles. Higher detail bends more smoothly. Skeleton. It finds the head, hips, arms and legs from the shape of your character and places a humanoid skeleton. Weights. Each mesh point gets its influence from the bones it can reach by walking inside the character, not through empty space. That keeps the left leg from pulling the right leg, even when they stand close.
One image or several part images
One image is the quickest start. The tool needs a gap to tell an arm from the body, so an arm drawn across the chest moves less and the upper body leans into the swing instead. For full arm motion, export the character as separate PNG parts from Photoshop, Aseprite, Krita or Procreate: back arm, back leg, body, front leg, head, front arm and weapon. Keep every part on the same canvas size and position, and number the files in drawing order, back to front (01_back_arm.png, 02_back_leg.png and so on). Drop all of them at once. Each part gets its own mesh. Arms and legs get a bone chain laid along them, the body and head bend only with the spine, and a weapon or a hat stays rigid and follows the hand or head it touches. Because the parts are separate, an arm can swing over the body without stretching it.
Tips for a clean result
Use a full body character with a transparent background. If yours has a solid background, clean it first with the Image to Game Asset Converter. Leave a little space between the arms and the body, and between the legs. Parts that overlap in the image move together. Side view works best for walk and run. Front view works best for idle, hit and jump.
Using the sprite sheet
| Engine | How |
|---|---|
| Unity | Import the sheet, set Sprite Mode to Multiple and slice by cell size, or use the single frame PNGs. |
| Godot 4 | Copy the sheet PNG and the .tres file to res:// and load the .tres into an AnimatedSprite2D. |
| Phaser, PixiJS | Load the sheet with its JSON as a texture atlas. |
| GameMaker | Import the strip as a sprite and set the frame count. |
Is my art uploaded?
No. The mesh, the skeleton and the animation are all computed in your browser with WebGL. Your character never leaves your device.