Skip to main content

Preparing for Rigging - My Character Design Process for Puppet, Bone Rig 2D Animation in Reallusion's Cartoon Animator (Part 2)

Composite image of my Bikini Girl Character in Inkscape half 'inked' and half showing the underlying, vector wireframe.

I'm not known for my super fast character design for Cartoon Animator. It's why I constantly look for short cuts in rigging characters because I get bored or distract... squirrel!

In this second post on rigging my first, complete G3-SVG vector character I'll run you through how I take my initial, 'inked' using Inkscape design, from part 1 of this series, and break it up into the key sprite body parts.

Marking the Joints

The main image for this post at the top of the article is a little deceptive as it shows a composite of my, mostly, complete character divided in half so you can see the underlying vector lines - totally for effect to create an interesting image.

Imagine this image is still just the half image I traced and colored from last time. The next step is to create a joint layer and mark where all my joints (i.e. bone points) will be with my semi-transparent circular crosshairs that you can see in the image. But only on one side, remember. All of this will be mirrored when complete.

Detail image of my characters arm showing the placement of my circular crosshair joint markers.
Detail image of my characters arm showing the placement
of my circular crosshair joint markers.

The purpose of these crosshairs is to mark the center point for the bone placement and then to create a circular region around the bone point that will create an almost seamless joint between each sprite.

The circular area, generally, should be as large as possible without going outside the boundary of the character's shape. Once the two sprites are pinned together the joint works like a hinge and should look fine in any natural pose of the character.

Note that I am designing this character to have bone hands but, as of writing this, each of the characters fingers are a full sprite. I've yet to separate them into the smaller joint segments.

Dividing Up the Body Into Sprites

If you recall I drew my character's body as one complete shape. My next step is to cut this up into sprites. It's a little tricky, and time consuming but I actually find this method easier than separating the character into sprites as I go.

Figure 1: Image sequence showing how I slice up my character's body shape into the various body part, sprite shapes.
Figure 1: Sequence showing how I
create my sprites joints.
It involves duplicating a line from my crosshairs that I use to cut the body sprite at the joint (see image 1 of Figure 1) using the 'Division' path function. Make sure you move the duplicate line to the same layer as the body shape if you're going to try this).

This slices the image in two where my crosshair line was (see image 2 of Figure 1). The crosshair line itself will vanish which is why I work with a duplicate.

Next I'll make a duplicate of the circle part of my crosshair, hide the section of the body I'm not working on just yet. In this case that's the upper leg (see image 3 of Figure 1).

I'll then color this circle with the same fill and line color of my body shape. I'll then make a duplicate of this circle that I'll use for the upper limb, once I've completed the lower limb (make sure the two circles are perfectly aligned).

Finally I'll combine my circle with the end of the body part I'm working on - in this case the right shank or lower right leg - by selecting the circle and the body part and executing a 'Union' path function on them (see image 4 of Figure 1).

This creates a perfectly round end to my sprite.

I'll then use the duplicate circle and combine that with the upper part of the same limb - in this case the right thigh - giving a perfectly round end to that sprite too.

Demonstration of how to create a joint when a character has outlines.
Figure 2 - Demonstration of how to create a
joint when a character has outlines that you
want to minimise the line break points.
I'll go around and do this for all my joints.

Note that if you're creating a character with outlines you can sometimes create the illusion of unbroken lines if you make one end of a sprite circular and the adjoining end flat but covering half of the circle (see Figure 2).

Adding Highlights and Shadows

Exploded, detail view of my character's sprites.
Detail view of most of my character's main sprites
with highlights and shadows added, and sprites
like the torso and face combined into one sprite.
Once I've divided up all my sprites I'll then go through and either add more highlights and shadows or fix any that I've already included so that they don't bleed over into my joint circle areas. 

Minimising shading or highlights around your joints will help prevent any unexpected lines when limbs start moving around. Although if you study figure 2 (in the previous section) and apply those principles for the outlines to shadows and highlights, it can work quite seamlessly.

Once these are done I'm ready to mirror the entire design so I have a complete character. This is simply a case of selecting all my character parts, duplicating and flipping them vertically.

After I've lined up the two halves of the character I'll join the two halves of the torso/hip sprite together with a Union path function. I'll do the same with the face, back hair, front hair, nose, and mouth.

Next Steps...

Although it looks like I'm close to rigging the character I still need to create all my eye and mouth sprite expressions. I'm hoping that won't take too long given how much easier it is to modify vectors into different shapes.

Hopefully in the next post I'll be able to put all my sprites into Reallusion's Front Facing Character template and complete a first test animation.

Popular posts from this blog

Can You Learn Reallusion's Cartoon Animator 5 for Free Using Their 137 Official YouTube Video Tutorials Sorted Into a Logical Learning Order?

Or you could just buy The Lazy Animator Beginner's Guide to Cartoon Animator . While Reallusion's Cartoon Animator is one of the easiest 2D animation studios to get up and running with quickly, learning it from all of the official, free, video tutorials can be more overwhelming than helpful. With more than 137 videos totaling more than 28 and a half hours of tutorials, spread across three generations of the software (Cartoon Animator 3 through 5) it's hard to know if what you're learning is a current or legacy feature that you either need to know or can be skipped. Many of the official tutorials only teach specific features of the software and don't relate at all to previous or later tutorials. As a result there are many features either not mentioned or are hard to find. To make your learning easier, on this page, I've collected together all of the essential, official, free video tutorials and sorted them into a learning order that makes sense. Simply start at

Artbreeder - Using AI created Character and Background Content in your Animations

A selection of User/AI generated images from Artbreeder. If you're looking for an endless supply of 2D character and background images for your animations then Artbreeder , an online Artificial Intelligence (AI) that generates image mash-ups you can tweak as much as you like, could be the ultimate content library. What is Artbreeder? Artbreeder is free to use though there are various paid plans, that give you additional features, such as higher resolution download images or more settings to play with. All images created on the site are Public Domain (CC0 License) and can be used in commercial projects. Using Artbreeder's online app you can generate head shot portraits, full body characters, landscapes, and other scenes simply by choosing two or more existing images to mash together then, using a series of sliders, to select which traits from each image you wish to lean toward in the final image. Photo Comparison - Top is my original uploaded photo. Bottom is Artbreeder's ap

Jarrad Wright, The Big Lez Show - Who Would've thought Animating with MS Paint Could Take You So Far?

A friend of mine recommended I should check out The Big Lez Show after I mentioned to him I make animations for living. He said the show's creator, Australian animator, Jarrad Wright , just makes episodes from his home using MS Paint. Somewhat shamefully I hadn't heard of The Big Lez Show, but the fact that it was being made with MS Paint absolutely hooked me into checking out. If you've never heard or seen the show then you, like I was, are probably thinking how good could it be? MS Paint has kind of a cult following of hardcore animators but no one would use it as their primary animation tool on a series, right? WARNING - before going any further, you need to know The Big Lez Show and its humor contains some pretty strong language. By strong I mean it's peppered very liberally with the 'F' and 'C' words and is very every day Aussie, blue collar speak. Unapologetically, all of that, is part of why it's so good. There's a good chance you've

AE Juice - Animation Presets, Motion Graphics, Templates, Transitions for After Effects, Premiere Pro, and Other Video Applications

Level up you video edits and animations with AE Juice's motion graphics and templates. Some days you just don't have the time to create flashy motion graphics for your latest video or animation. For some of us it's more a question of our own artistic abilities being a little less than the awesome we'd like them to be. Whatever reason a resource like AE Juice's animation presets, motion graphics, templates, and transitions packs for After Effects , Premiere Pro , and other video applications can really make your work stand out very quickly. AE Juice gives you access to an instant library of free, premade content elements and sound effects, which you can add to with additional purchases of various themed packs from their store. There are three ways to manage their content, all of which can be used in commercial projects . The AE Juice Standalone Package Manager makes it easy to browse previews of all your pack contents and to download and find just the elements yo

Eric W. Schwartz: Cartoonist, Animator and Amiga Die Hard

July 1992 Edition, CU Amiga Featuring Amy the Squirrel. American Cartoonist, Eric W. Schwartz , (whose unofficial Amiga Icon, Amy the Squirrel, is pictured on the July 92 edition of CU Amiga cover on the right) is my only real animation hero. Sure there are the big names like Disney , Chuck Jones , Tex Avery and even Preston Blair whose influences can all be seen in my own cartoons but Eric did what none of the others could. He showed that really great 2D computer animation was within my reach with little more than an Amiga Computer , a copy of Deluxe Paint and Moviesetter . This was at a time when computer based animation was in its infancy (outside of computer game animation) and Flash was something that lights did. There were many great Amiga artists but Eric was really the only one consistently making very funny, traditional style animations. His humor and drawing style is heavily influenced by classic Warner Brothers and Disney cartoons but he managed to build on this,

Make Disney/Pixar Style Characters with Reallusion's Character Creator and Toon Figure Bases

The Extraordinary Tourist Classic Coat outfit created using Reallusion's Toon Designer for CC3. I've talked before how I've wanted to get into 3D Disney/Pixar style character animation since I first saw the animated cutscenes for the very first Tomb Raider game back in 1996. It's why I initially bought Reallusion's iClone 3D studio app as soon as I could afford a computer that would run it. But then Reallusion released their 3D Character Creator (CC) for iClone and I wanted to create my characters with that (and I did try with Bat Storm ). But the focus of CC was realism, even with ToKoMotion's stylised body morphs . Now with Reallusion's Cartoon Designer bundle for CC3 which features two packs, Toon Figures , and Toon Hair , designing Disney/Pixar style 3D characters just got a whole lot quicker. The two packs are the bare essentials for creating Toon style characters. Five body morphs (2 male, 2 female, and one adolescent body morph that w

Eleven Mostly Free Comic Book/Strip Resources For Your Next Motion Comic

Created with Lywi.com Comic Maker. One really exciting use for Cartoon Animator and other animation software is to assist in the production of creating motion comics. If you're not familiar with motion comics just think of them as a kind of video comic book that typically features (but not always) all of the dialogue in each panel read by voice actors along with limited animation to make the still images more dynamic and visually interesting. Below is a demonstration motion comic I made many years ago when I reviewed Smith Micro's Motion Artist software (which has since been discontinued but, if you can find a copy, its entire purpose was to create motion comics and other motion graphics). Follow the link to the review if you want to see how this was made. The great thing about motion comics is that they're much easier to animate than an animated cartoon short. Often much of the animation will be moving a a static image of a character, panning the camera across a scene cre