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
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!