2D Bone animation in Unity
Updated 2 years ago
How to create a simple 2D animation with no experience at all! Fat Punch style!
Fat Punch is a game based on hardcore action, humour but mainly visuals, that are packaging all the aspects together. Top league is covered by the actual heroes and characters, where conflict of agitated animals and hungry butchers comes up to life in its full glory. Beat’em relies on clear communication of the moves. Communication of fists, in our case hooves, touching the face or any other part of the body deserving some pain.
But how about environments? They deserve some love as well, no? There are numerous ways to improve the feeling of vibrant surroundings that should tell story on its own. Our first move after getting static levels in is fairly simple - let’s animate shit! Before doing complex stuff, we have focused on small background items first by utilising fresh and still-in-development bone animation system.
2D bone animation tool delivered as a standalone package in Unity is very simple and approachable, which makes it one of the ideal tools. Its simplicity is the “selling” point as even non-artistic users are able to grab the sprite, skin it and start moving stuff around. Results of course depend on the philosophy and the level of skill, but we will give you a very quick walkthrough, made by someone who lacks any talent!

What do I need?

  • Unity with package support (tested on 2018.2)
  • 2D Animation package
  • 2D IK package
  • Any sprite of your choice

Let's start then!

Let’s move onto actual animation, our example will be ordinary tree in one of the initial levels, where we will prepare very basic animation of the plant moving in the wind.
  • Select any sprite in project viewer
  • Open the “Sprite Editor” in inspector
  • Open the “Bone Editor” in top left list
  • In the tool selection, select first “Create Bone”
  • Create 2 bones connected with each other
  • Hit “Apply”
  • Now switch to “Skin Weights and Geometry Editor” located in the same selection as “Bone Editor”
  • We will now generate a weight map that will allow us to add weight to certain parts of the sprite
  • In the geometry tab, hit “Generate” and define basic values for outline detail, alpha tolerance and subdivide
  • After pressing “Generate” you will see the generated mesh - next step is the weight map
  • Switch to “Weights” tab and Auto generate the weights - you can then manually tweak the distribution based on your preferences and requirements
  • After applying the changes, first step is done - your sprite is now ready to be further processed for the bone animation
  • Drag the sprite into the scene
  • In inspector, add the “Sprite Skin” component
  • On this component, hit “Create Bones” button, which will link the bones with the prefab
  • You want to animate? Don’t forget to add the Animator component
  • Create a dedicated folder for the animation clips and animator controllers
  • Right click in that folder and choose Create -> Animator Controller
  • Now drag the created controller to the animator of the prefab in the scene
  • Open “Animation” window, ideally by hooking it in the tray, so you can easily access it
  • Hit “Create New Clip…” and save the file, that you can start animating on
  • Activate keyframe recording (red dot) and move your cursor to the start of the timeline
  • Move one of the bones to the default starting position - this will generate first key frame for that bone
  • Move further down the timeline and move the bone to different position to create a motion transition
  • Since this is very simple animation, we will use third keyframe to return the sprite to original position - with Z axis value very close to start
  • Before viewing and other processing, don’t forget to disable the recording

Be careful though...

At the time of writing this article, there is still an issue with prefab losing the bones reference when cleaning the project Library or pushing the files to repository for your colleagues. This issue is yet to be resolved, however there is one general rule for any of these tools and components.
As long as the packages are in preview state, it’s not recommended to completely rely on these tools as they are still in development and many issues may arise on the way. We are looking forward to showing you more tricks that we have up our sleeves in Fat Punch!
Dying Pixel
Marek Vitvar