Skip to main content

Creating a 360 Head, Adding Spring Bones and Color Management - My Character Design Process for Puppet, Bone Rig 2D Animation in Reallusion's Cartoon Animator (Part 5 - Final)

Variations of Business-Bikini Rachael.

I realize writing a five part series over almost three months makes creating a G3-360 SVG vector character in Cartoon Animator 5 look like a long and drawn out process. However, I want to assure you that, once you've designed your character and divided up, or created the bare minimum of required sprites, the actual rigging process should maybe take an afternoon to a day at most - excluding testing and refining the rig.

Despite spending a lot of time debugging the Inkscape rigging template provided by Reallusion, I've also only been working on my character when I've sat down to write these articles every second week. (BTW, if you haven't read Part 1, Part 2, Part 3, or Part 4, just follow those links... it's been quite a process). I expect my next character will take no more than a couple of days to rig.

To continue on, this week I fix the final few character design issues, then I rig my character's G3-360 head, add spring bones, and set up the color management system.

Final Character Design Tweaks

Since bringing my Inkscape template into Photopea fixed everything I decided to continue using this free online graphics editor to finish off my character.

As it turns out Inkscape wasn't actually deleting folders and layers properly because all kinds of folders, both new and deleted, appeared in my template when I opened it in Photopea. Once I cleaned all these out, including my rogue earing bones, my template imported into Cartoon Animator with no issues.

Skirt shape element added to each of the character's thighs.
The selected light green shape
I added to both the character's
thighs so that her skirt would
'stretch' when she moved her
legs out to the sides. Obviously
I changed the green to match the
rest of her skirt.
I could also fix the Iris and Mask error, where eye sprites that didn't need either of these but CA5 gave me an error saying they were missing, simply by hiding the actual images (not the folders) in the template so they wouldn't show up in the final, imported character.

That just left my risque skirt design flaw which I fixed by adding some skirt elements to her thigh sprites. So long as the character doesn't lift either leg too high it fixes the problem.

Rigging the G3-360 Head

When rigging a G3-360 head I have a standard process I follow that utilizes only the existing sprites needed for a front facing, human head. 

I don't usually add extra sprites for side facing noses or mouths. You really only need those extra sprites on a human character if you have a fairly cartoonish design or you're turning the character's head to a full 90 degree side view.

Steps for setting up the character's G3-360 Head in Cartoon Animator.
Setting up the Character's G3-360 head.
The step numbers approximately match
the steps outlined in the article.
My steps are as follows:
  1. Once inside the G3-360 head set up tool, click the Quick Setup button and apply the default settings.
  2. Choose the middle left angle position and, using transforms, deforms, etc. make the head look correct for a 315 degree, side facing head. It's a good idea to start with the face shape sprite. Get that correct and then position everything else in relation to it. Don't be afraid to really deform sprites and make those that move further away slightly smaller etc.
  3. When you're happy with this view, mirror copy it to the right facing angle. Note - Make sure the sprite box is deselected or all your sprites will be mirrored and you'll have to flip them back.
  4. Switch back to the left middle angle and use the copy/paste button to copy the middle angle to the left top angle and the left bottom angle.
  5. Switch to the left top angle. Rotate the entire head about 40 degrees so the character is looking up. Make sure you move the head back on the neck a little so it doesn't look like the head detaches from the neck.
  6. Switch to the left down angle and rotate the head down about 15 degrees so it looks like the character is looking down.
  7. Repeat these steps on the right facing side (i.e. copy/paste the right facing head etc.).
  8. Switch to the middle top angle and work on this until it looks correct for the character looking up. Make sure you preview a lot with the left and right looking up angles to make sure everything moves in line as the head angle changes.
  9. Repeat for the middle bottom angle.
  10. Make any final tweaks to each angle and you're done.
Following these steps on a standard human shaped head means you really only have to set up three angles in any great detail. All the remaining angles can be copied, mirrored, and rotated.

Once you've finished setting up the head exit out of the head set up tool (you may want to save your head profile first just in case you need to update the character again and don't want to set up the head from scratch). You may want to check the character's layers to make sure the back hair sprite is sitting behind all other sprites. Check to make sure everything else is in the correct layer order too.

Spring Bones for the Hair

If your character has long hair then adding some spring bones to it is a no brainer. It may also be worthwhile experimenting with adding spring bones to any lose fitting clothing such as skirts (or body parts like a large belly etc.).

For mine I simply added some additional bones to the front and back hair sprites, grouped the bones into left and right sides in the Spring Bone editor while leaving the bones themselves on the default settings.

Remember, when you're grouping your spring bones leave the root (or base bone) out of the group. This bone serves as an anchor point for the physics of spring bones to react against. If you include it you may get an error or your spring bones just won't work.

Grouping the additional hair spring bones added to the character.
I divided my hair spring bones up into left and right sides, plus one center group on the fringe.
I left the actual spring bone settings on their default because I imagine my character
probably uses a lot of hairspray to keep that nice curl at the back!

Color Management

I'd always envisioned my character being capable of having her outfit modified through color management. Specifically being able to remove her business outfit so she could also show off her beach body in her swimsuit. Setting this up should be the last stage in rigging your character.

Color Management can be initially confusing, particularly if you've got a very detailed character with hundreds of vector shapes. I tried to keep mine simple which is why I used very minimal highlighting and shadow. Even so, I still had a lot of shapes to sort through.

When you first fire up the SVG Group Editor (which is how you group everything for Color Management through the SVG Color Adjustment tool) you have two sort options, by color or by Sprite Name.

I chose by Sprite Name as this at least gave me extra clues for where to look when trying to see each color because, even though selecting a color would cause that selection to flash on the character, you won't see the flashing color if it's hidden behind another layer. Note: There is a transparency button at the bottom of the group editor that makes everything temporarily transparent so you can see which area is flashing as 'selected'.

Setting up the color management system.
Although you can use one of the two default color management options and be done in a
single click, it's better to go through and sort everything into groups that you can easily
understand like 'Jacket', 'Skin', 'Skirt' etc. You'll thank yourself for it later.

It took me maybe a couple of hours to sort all my colors into groups I could easily understand, specifically making sure each item of clothing was in its own group so it can easily be switched on or off using the transparency setting.

This whole process of color management isn't hard but it is definitely made easier if you keep it front of mind when you're designing your characters. You'll definitely want to limit your color palette using only what is necessary for your character's design.

The finished G3-SVG, Character

I must admit this whole process took me far longer than expected, even for a first time vector character rigging experience.

This character is the first one in years that I've had to create all the face sprites for from scratch. When I create G3-PSD characters I have a project file that auto generates these from a morph based head.

I really did not expect to come up against so many issues with the Inkscape template. I'm hoping when Inkscape 1.3 is released some of the issues I experienced will be fixed (deleted folders not actually being deleted for one).

I'm almost tempted to change my vector editor to Photopea which gives me the best of raster and vector based graphics editing... except I just don't like editing graphics in a browser. Particularly when it rasterizers vectors on screen so they no longer look like vectors.

Despite that I will still be using Photopea to do a final pass on my templates if I keep having the same issues experienced making this character.

With all that now behind me I'm very happy with how the final character, who I'm calling Business-Bikini Rachael turned out. It's quite fun creating variations of her using the color management system. Check some of them out in the image below.

The character is available to buy from my Reallusion Store where you can see a short video of her in action.

Five variations of the same Business-Bikini Rachael character created using color adjustment settings.
Variations of Business-Bikini Rachael create just by adjusting
settings in the SVG Color Adjustment Tool.

Popular posts from this blog

Using Avatar Maker with Cartoon Animator - Free Vector Cartoon Avatar Creator with Four Art Styles

I'm always on the lookout for cartoon avatar makers of any kind, whether it be ones that 'cartoonify' your photo, or ones that let you build a cartoon likeness from a library of individual features.  Free Avatar Maker  falls into the latter category and can be used for making head and shoulder cartoon avatars. While it doesn't have an extensive library of character features (you may struggle to get a good likeness), uniquely it will make your avatar in four different art styles concurrently, allowing you to save the one you like most, or even all four.  I wasn't overly impressed how my TET avatar looked in the first two styles, but style three is quite possibly the coolest looking version of my avatar I've ever seen in a third party avatar creator. It's a very contemporary style. Style four, line art, is also not too bad. Avatar Maker's User Interface. Switch between the four different art styles shown across the top at any time. I particularly like the

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

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

Inochi2D - Free Open Source 2D VTuber Avatar Rigging and Puppeteering Software (Part 1)

Inochi2D Creator - Free Open Source VTuber Software. If you've been looking for a way to live perform as a 2D cartoon avatar on camera, whether it be for a live stream or for pre-recorded content like educational videos, then VTuber software is a low cost (or even no cost) option worth looking into. In my previous post, How to Become a VTuber - 2D and 3D Software for Creating and Controlling Your Avatar , I took a brief look at the relatively new but completely free and open source Inochi2D  which I thought showed great potential for my own needs of creating a live performance character rig for my own TET Avatar that I use for all my promotional materials. While it is possible to live perform my character using Cartoon Animator itself, Reallusion's MotionLive2D capture system isn't great - with lip sync in particular. More importantly though, I can't exactly teach people how to use Cartoon Animator if I'm using Cartoon Animator to control my Avatar. What is Inochi2D

Moho 14 Released - Still the Best 2D Animation Software for Indy Animators on a Budget

Moho 14 Released. Regular readers know I am a Reallusion, Cartoon Animator advocate through and through. Hands down I would recommend Cartoon Animator 5 first over Lost Marble's Moho 14 to anyone who is just starting in 2D animation, is a team of one, or just needs to animate as quickly as possible. However, feature for feature, Moho is, arguably, the best 2D animation software for the rest of us who can't justify a Toon Boom Harmony , or Adobe Creative Cloud subscription (and even with their applications Moho is very competitive on features). You can get started with Moho Debut for just USD$59.99 which is a cut down version of Moho Pro but it still has the most essential features needed for 2D animation. While Moho Pro is a whopping USD$399.99 (Cartoon Animator, which only has one version, is just USD$149.00) upgrades to new version numbers come down to a quarter of the price at USD$99.00. Even though Reallusion just released features like Motion Pilot Puppet Animation and

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

Reallusion Releases Cartoon Animator 5 - One Version, More Features, Lower Price!

If you're serious about producing 2D animation as quickly as possible, while still achieving professional results, Reallusion's Cartoon Animator 5 makes the most compelling case yet as your animation studio/tool of choice. Cartoon Animator's point of difference has always been its ease of use and accelerated workflow. Creating fast, 2D animation using puppet, bone rigged based characters and props, on a stage with 3D depth for easy scene parallax effects. As it has developed Reallusion has incorporated more advanced features like motion capture for both face and body as well as being able to export scenes to post production tools like After Effects with the addition of plugins. After moving away from Flash based vector image support for a few years, Reallusion is back with full .SVG (scalable vector graphics) support for resolution independent graphics. They've also added Spring Dynamic physics and Full Form Deformation tools, both of which make it ridiculously easy t