Spritesheets to 2D Bones

Spritesheets to 2D Bones

So as the prototype lobby was finished and I was able to host and join a game, I went back to the player model, i.e. the shilouettes. I wanted to make use of some of the stuff I learnt while making the 1st iteration. I make them by recording a video of a person doing some movements (wearing dark clothes in front of snow), so I can easily extract the shilouettes. Then I repaint each frame of the shilouette and align the body’s centroid to a specific point of the sprite so that it can be looped nicely and smoothly. It was okay for the idle animation (20 frames) and the walking animation (40 frames). Then I did the jumping animation (20 frames), and moved on to the animation “idle to crouch transition” “idle crouching” and “crouching to idle transition” (a total of 60 frames). It took me about 20 hours for those. And certainly, the results are nice: The shoes bend correctly while walking, the hair is pushed upwards while the player is falling down. But it’s still not feasible: I recorded videos for about 10 states the player could be in and finished 4 states. One state is “throwing”. And it didn’t occur to me before the video session that players did not only want to throw stuff around while they were idle, but also while they were walking, crouching or maybe falling. So I’d have to record some more videos for Walking X Throwing etc.

The previous(?) spritesheet solution

But that is not easily possible. Given the means I have, there is no easy way to replicate the camera’s settings and my model’s position and “clothes configuration” (scarfs). The camera I have access to doesn’t have a strong zoom, so perspective is an issue, too. Adding another player animation state at a later time would require a redo of all the work or very extensive repainting. And I’m not really skilled nor fast at the latter.


So I had two options: Either I split the sprite in several compartments, so that I could have moving legs while the upper body would do something, e.g. throw stuff – or I’d take a look at different solutions. As chance would have it, I read a blog post at Unity’s a few days ago, where they announced that Anima2D, a previously paid solution for 2D bones + inverse kinematics, was acquired by Unity and is now free. Bones are a technique where you build a character’s “skeleton” that contraints its movements, and strap sprites (images) onto said skeleton that are moved automatically as the “bones” move. Anima2D also offers “skinning”, which basically allows you to add several bones to a single sprite, and warps part of the sprites so that it fits a single bone’s movement. Well, maybe I’m no good at explaining it.. but anyhow, I tried it out, and after some failed attempts and some frustration I managed to create a skeleton for my model that allowed somewhat natural movement!

Karate, crouching, falling, standing. Possible with a skeleton and only three pictures of the model which was separated into some body parts. 😉


Next step, which will hopefully work out sooner or later, is to create the animation based on this skeleton. I will study my previously recorded videos meant for spritesheeting to make it look as natural as possible. 🙂

Although some details will be missing – like bending shoes or hair that flutters in the wind – some others can be now added more easily – such as a flashlight beam that moves corresponding to the player’s movements.

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.