Animating using Anima2D in Unity.

Hello readers. I’m getting really bad with keeping promises from previous weeks. Last week I mentioned how to make a seemingless background, well that won’t happen this week! Instead… This post will be about how to add bones to 2D meshes and how the animation process is with the help of Anima2D(A Unity program found in the asset store).

As I just wrote, this week I have been rigging and animating our existing sprites to make them look more alive. I started out with dragging the sprite sheet with each part of the sprite. The team makes the sprites as a clip doll, meaning the body is one sprite, right/left arm/leg is another sprite etc, and in Unity you stitch them together to create the final sprite. Below you will find the sprite sheet with all the individual parts, the second picture is how the sprite is supposed to look like when you have stitched it together

combined.png
Sprite sheet to the left. Actual sprite to the right

 

When I’m done stitching all the individual parts together the rigging process begin. To rig a 2D sprite means you have to add bones to the mesh which will affect different points on the mesh itself. Here is an example of an arm with five different bones, hopefully the picture explains itself but if it doesn’t, here is a short explanation, each bone have its own color and the area with the same color will be affected when moving that bone.

bonesbinding.png
Picture from Anima2D’s SpriteMeshEdit
AnimatingSlingy.png
Complete sprite with all the bones.

From this point on there are several approaches for the animating process. I went with the way of making poses. A pose is where you put the bones in a specific position, give it a name and save it in the pose manager. Proceed to make different poses you would like to have animated. In order to make a very simple shooting animation you would need three different poses, one default state, one charged state and one fired state as seen below.

Poses.png

PoseManager.png
Pose Manager

Moving onto the animation. You load up the Default pose, move the timeline to 1.0 seconds and load up the Charged pose, move the timeline to 1.05 seconds and load up the Fired pose and to finish it up you move the timeline to 2.0 seconds and load the Default pose again. This will automaically generate all the keyframes between the poses to create a fluid animation. 

animator.png
Picture from Unity’s animation tool.

 

FrighteningMiniatureDragonfly.gif
Shooting animation in action. I just noticed it is a bit glitchy, it will be fixed soon™

And that is what I have been working on this week! Another thing I forgot to mention earlier is the pose of the character itself. We had to change the position of the legs because we wanted him to be a bit more compact!

For next week I have no idea what to write but I’m sure it will be something different than I would had promise here anyways!

Captain out.

Advertisements

2 thoughts on “Animating using Anima2D in Unity.

  1. Hi!

    Neat to see animations done with the pose manager. I’ve never used it myself because I used a different workflow for our animations, so it was interesting to see how poses could be used to create full animations. We too used Anima2d for our animations, but I went for a more manual way of making the animations by specifying each keyframe event in the timeline.

    You wrote very specific timings for each pose, and I wonder how you decided on those specific timings, how did you conclude that 1.00 is the best time for the “Charged” pose or 1.05 for the “Fired” pose? I don’t think there is anything that is particularly unclear in your post, even if I would like to know more about your thoughts about the timing of your animations. You have used images in a good way to demonstrate your process, they made it easy to understand how you created your animations, keep up the good work!

    -André (Team Pricolici)

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s