Marionette StudioMarionette StudioMarionette StudioMarionette Studio
  • Features
  • Pricing
  • Learn
    • Video tutorials
    • User guide
    • Videos
    • 2D Animations
  • Blog
  • Demo
  • Login
  • START ANIMATING
sprite sheet

Skeletal Based Animation

By Raluca | Uncategorized | 8 comments | 30 May, 2016 | 5

In this post I would like to give you an overview of what skeletal animation means and what you need to know in order to properly take advantage of it in your 2D/3D animations. If you are an animator, a game developer, an artist or just a reader this theoretical concepts will be helpful for your future work at some point.

Skeletal Animation

Skeletal animation or bone-based animation is a technique in computer animation in which the object being animated has two main components: a surface representation used to draw the object (skin, mesh, character) and set of interconnected bones used to animate the surface (skeleton, rig, set of bones).

Skeletal animation is often used for animating characters, but it could be also used to animate anything you might want. Once the two parts are defined, then the skeletal animation can be also used for animating cars, trees, doors, birds, etc. There is no restriction on using this animation approach.

I have found a few sources over the internet that deal with this subject where more detailed definitions could be found. Here are some of them:

  • Wikipedia
  • Cocos2d-X Documentation
  • Valve Documentation
  • Techopedia
  • Grafisk databehandling

Skeletal animation is based on building a simple skeleton that can fit the important parts of your animated object. Marionette Studio animation software is based on skeletal animation because is a relatively simple-to-use technique and can simulate any jointed object, from people to animals to machinery. Defining a skeleton for your character is basically the first step in the skeletal animation process. Image 1. shows how a possible skeleton can be identified in a such manner that can control the most important parts of your object.

Character skeleton

Image 1. How the skeleton can be created for a character

Skeleton

 

The skeleton is the most important object in a skeletal animation system. A skeleton is a set of bones that can be hierarchical organized. Usually an object has some important joints (vertexes). For instance, for a character the most important joints are the hip, the knee, the neck, etc. A bone connects two already defined joints and this can be viewed in Image 2.

Bone representation

Image 2. A bone connects two already defined joints

Creating a skeleton may be a bit complicated and sometimes is time consuming, but using it afterwards is very easy. More than that, there are some tools on the market that can help you to simplify even more your work. A very important step is how bones are connected between them. A very used method is connecting them as a hierarchy. This means that a a bone belongs to a parent, and each bone can have a child as per Image 3. 

Affecting a bone also affects all of its children. So, when setting up a skeleton, the first joint is called the root bone. Every subsequent bone will be connected to the root bone either directly, or indirectly through another bone.

Bone skeleton flow control

Image 3. Flow control for a set of interconnected bones

The benefit of the hierarchical structure is that you can take advantage of several controlling techniques such as forward kinematics, inverse kinematics, dynamical simulation, canned animation and more. These techniques are successfully used when complex natural movements are wanted.

Rigging

 

Once a skeleton is defined the rigging step comes in. Is recommended to place the bones exactly where they would be in a real world skeleton. Each defined bone must be attached to its belonging part of the object being animated. In this way the bones control the final movements.

Rigged skeleton

Image 4. A skeleton is rigged to the object being animated

Keyframes

 

A key frame in animation is a drawing that defines the starting and ending points of a smooth transition (source: Wikipedia). A sequence of key frames defines a sequence of movements the viewer will see in the final animation. In order to have a smooth transition between key frames other inbetween ones are inserted.

For obtaining a certain pose of your character you need to change the position of the bones. This can be done by using geometric transformations such as translation, rotation and scaling.

Walking animation cycle keyframes

Image 5. Walking animation cycle keyframes (source: http://gyulaokartali.wix.com/portfolio#!unit-5/c1bzo)

All skeletal animations have key frames. When speaking about game animations, they usually have animation cycles. An animation cycle contains all important keyframes that are needed in order to get a smooth transition between the last and the first keyframes. Image 5. shows a walking animation cycle with all needed keyframes. When working with skeletal animations, all frames inbetween keyframes are automatically generated and inserted in order to obtain the desired result.

 

Output

 

Once the key frames are setup and the animation looks good when playing in loop you are ready to use it anywhere your want. Images 6. & 7. show two different output formats for an animation: GIF and Sprite Sheet. Of course, an animation can be output into various formats and this will be covered into a future post.

Skeletal animation result in GIF format

Image 6: Animation result (GIF format)

 

Skeletal animation result in Sprite Sheet format

Image 7. Animation result (Sprite Sheet) (source: http://skyscream1.deviantart.com/art/Grimlock-by-Skyscream1-470726646)

 

Pro and Cons

 

Of course, this animation approach has its benefits and limitations. Here are some advantages and some disadvantages when working with skeletal animation.

Advantages / Benefits
  • Simple animation system – using a skeleton to animate objects is easy to use and very intuitive
  • Easy to create natural movements – inverse kinematics helps you create complex natural movements
  • Save time – by defining only the main keyframes you save a lot of time while animating
Disadvantages / Limitations
  • Bone rigidity – bones cannot be moved relative to each other
  • Single parent restriction – a bone can have only one parent, so meshes of bones cannot be created
  • Hierarchical structure of the skeleton – not suitable for animating liquids or gasses due it’s complexity

 

No tags.
Raluca

Raluca

More posts by Raluca

Related Post

  • skyppy-fox-running-and-falling-animated-video

    Engage your audience with animated videos

    By Sorin | 1 comment
    The best way of expressing your message in the digital world is through animated videos. Animation gives you the freedom to target your audience in a compelling, powerful and exciting way! You can express yourRead more

  • The Marionettes - 2D characters - Marionette Studio

    Meet The Marionettes !

    By Raluca | 0 comment

      We would proudly  like to introduce our newest characters, The Marionettes family. Having the touch of the retro style, our animated family will kick off the animation templates that will be introduced very soon inRead more

  • 3 essential tools to create an animation in 3 minutes

    3 Essentials Tools to create a successful animation in 3 minutes

    By Raluca | 6 comments
    Whenever you are part of marketing, media, advertising, entertainment, gaming or any other industry that requires expressing a message, animated content has become essential in grabbing people's attention. Giving you an answer on how toRead more

  • walk cycle animation tutorial - pass pose

    How to animate a Walk Cycle

    By Sorin | 0 comment
     Regardless of whether you are a non-experienced, a beginner or an professional animator, a walk cycle is something that every person needs to know. This type of motion is so natural as we, as humans, unconscious experience itRead more

  • Easing functions in the animation process

    Easing functions in the animation process

    By Raluca | 3 comments

    Complex animations are often difficult to make if there are no tools to help us. At some point we may want an object to realistically bounce or behave and this is pretty hard to acquire ifRead more

  • opacity function for 2d animation

    Quick 2D animation demo using image opacity

    By Raluca | 2 comments
    In this tutorial will present you a quick 2D animation demo of how to make a 2D animation using the opacity feature in Marionette Studio animation software. What is image opacity? First of all, IRead more

  • skeleton view

    Animating with Marionette Studio

    By Raluca | 21 comments

    In this tutorial we will focus on the animating part and you will learn how to bring your rigged character to life with Marionette Studio. Firstly, we will take a look at animation timeline toRead more

  • Marionette Studio - animation software sections

    Create a 2D game character with Marionette Studio

    By Raluca | 0 comment

    Before learning how to create your new character with Marionette Studio, you should know about the app sections: Views – create, open, save, export your scenes Tools and actions – pan, select, translate, rotate, scaleRead more

8 comments

  • abiya Reply July 12, 2016 at 6:48 am

    This is an awesome post.Really very informative and creative contents.Thanks to sharing these concept is a good way to enhance the knowledge.I like this site very much.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.

    • Raluca
      Raluca Reply July 12, 2016 at 7:23 am

      Thank you for reading it. More to come in the feature.

  • Abe Reply September 16, 2016 at 7:44 am

    I have a problem with sprite sheet rendering. I create the animations and i go rendering when i rendered the sprite sheet image, my pictures is wrong on sprite sheet. Because the animated bones generating a new canvas resoluton at rendering. I have only one choice PNG rendering and use fit to animations, and create sprite sheet from rendered png images. Sry for english. Can you help me?
    The program is an amazing, and very very good! Tank you!

    • Raluca
      Raluca Reply September 16, 2016 at 11:34 am

      Hello Abe!

      Thank you raising this with us.
      We are trying to figure out what happens there and we will come with an update here.
      You may also receive an email from feedback@marionettestudio.com with the solution for this problem.

  • Lelio Vieira Carneiro Junior Reply July 30, 2017 at 2:55 pm

    Very descriptive post, I loved that bit. Will there be a part 2?

    • Raluca
      Raluca Reply August 17, 2017 at 9:20 am

      Hello! Thank you for reading our post. Yes, more explaining posts to come.

  • Tealiah Reply February 27, 2018 at 6:52 pm

    This was really helpful thank you. But I am curious which animation programs you’d recommend for beginners wanting to create video games or to just animate images. I myself would love animating my hand drawn pictures and am deeply considering bone structure animation to help me. What do you think?

    • Raluca
      Raluca Reply March 2, 2018 at 7:59 pm

      Hi Tealiah,

      You can draw your images into any software you are confortable with. After that export them to .PNG and animate them with Marionette Studio.
      Here is a useful link from 2danimation101 that helps you indentify the software that fits you best: http://www.2danimation101.com/animation-software-choose-in-3-steps.html.

      Happy to discuss more on this!

      Thanks,
      Raluca

Leave a Comment

Cancel reply

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


Related Posts

  • What is cel animation?
    5 March, 2020
    0

    What is Cel Animation?

  • Halloween decor - the witch house - emojer
    26 October, 2018
    0

    3 Best Halloween decors for your stories

  • screen2-v2
    17 July, 2018
    0

    Announcing Emojer – Animated emoji with just one photo

  • skyppy-fox-running-and-falling-animated-video
    26 February, 2018
    1

    Engage your audience with animated videos

Categories

2D Animation 2D animation for games 2016 Trends Advertising Agile Game Development Algorithms Animation Animation for Dummies Animation techniques Animation tips Animation Tools for Marketers Characters Create character Creative work Design Digital Art Digital Design Features Finding FUN in games Freebies Game Development Team Game Planning Game Release Planning How To Indie Games Inktober Marionette Studio Marionette Studio Updates Marketing Project Management for Games Rigging Skeletal animation Sketches The Marionettes Theoretical Concepts and Observables Tutorial Uncategorized

Latest activity

  • Linwood on Animating with Marionette Studio
  • Raluca on 3 Essentials Tools to create a successful animation in 3 minutes
  • jameel on 3 Essentials Tools to create a successful animation in 3 minutes
  • Animation Training surat on Top 5 blogs to learn animation from
  • Ravali Reddy on Engage your audience with animated videos

MARIONETTE STUDIO

+1.408.769.5590
support@marionettestudio.com
3739 Balboa St # 1221
San Francisco, California, USA
94121

2D ANIMATION

Features
Pricing
Request a Demo
Contact Us
Software Change Log
Education Partner Program

LEARNING & DOCS

Showcase
Tutorials
User guide
Blog
Videos

FOLLOW US

Get the latest news & updates!
© 2018 Marionette Studio, Inc. Terms and Conditions | Privacy Policy | Cookies Policy
  • Features
  • Pricing
  • Learn
    • Video tutorials
    • User guide
    • Videos
    • 2D Animations
  • Blog
  • Demo
  • Login
  • START ANIMATING
Marionette Studio
By using this site, you agree to Marionette Studio's use of cookies to improve your experience. Learn more on our Cookie Information page. Accept Read More