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

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

Wonder Unit Storyboarder - Free Storyboarding Software for People Who Can (or Can't) Draw

Wonder Unit Storyboarder.  As an independent and solo animator I'm always tempted to try and skip storyboarding my animated shorts because they're usually only single scene sketch comedy type jokes. As a result I have many unfinished projects that kind of petered out due to having no clear finishing line. Storyboarding your productions, no matter how small, gives you a step by step guide of every shot that needs to be completed (no planning shots as you animate). It also allows you to create an animatic that gives you a rough preview of the finished production. In short, you shouldn't skip storyboards as they, generally, increase the chance of the project being completed. Disclaimer - I'm Not a Fan of Storyboarder Upfront, Wonder Unit's Storyboarder  is not my preferred storyboarding software. However it's completely free, has a number of very compelling featu

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

Five AI Generative Image to Video Tools For Animation You Can Try Free Right Now

The Emo Girl Character created by Start Animating. A I generative video isn't new but it is the next big thing in the visual imaging space as various development teams work to perfect the generated output.  Just like generating still images AI video sometimes struggles with physics, arm and hand movement, and the general structure of things. However it is getting better and, as is the catch cry of all AI development, this is the worst it will ever be, because it's improving fast. If you're an animator one current potential use of generative AI video is to animate your key frames, as opposed to generating something entirely from a text prompt. Starting with an image helps to keep your characters and art style consistent across AI generations. With that in mind I tried five, free image to video AI generators to see what their potential might be and whether they can handle cartoon style characters well. Note all but the last entry on the list do not create any sound with the

Dollars Mocap: Full Body Webcam Motion Capture (Including Hands and Fingers) For iClone and Cartoon Animator

Even though I should be further away from the camera Dollars Mocap MONO still does a good job of  tracking my arms, hands and fingers. Ever since I wrote my series on becoming a VTuber , discovering it was possible to do full body motion capture, including hands and fingers, with just software and a webcam, I've been on the look out for any motion capture software that can bring that functionality to Cartoon Animator. Dollars Mocap is a low cost motion capture application with a free trial that I learned about through the YouTube Channel Digital Puppets  and their test video . It can record full body, upper body, arms and hands, and facial mocap from a live video source or pre-recorded video. Investigating further, I discovered not only does Dollars Mocap have a free iClone7, iClone8 character profile file download (look for it at the bottom of the main program download page), so you can use the saved motions with iClone8, they've also got a demo video for how to convert your

Animation Paper V5.0 Alpha 2 Pre-release

Animation Paper V5.0 Alpha 2 Pre-release. Animation Paper strives to be the best tool for digital hand drawn animation by not only recreating the traditional animator's table in a modern user interface, but also automating many of the more tedious processes so you can focus almost entirely on drawing. At the time of writing Animation Paper V5.0 is only available as an Alpha 2 Pre-release, and still does not have all of its features implemented, such as the ability to add audio (due to be part of the Alpha 3 release scheduled for the end of May 2020). Animation Paper has been completely redesigned and updated from th hand drawn animation app that was formerly known as Plastic Animation Paper (PAP) which, at the time, was easily one of the best apps for the sole purpose of creating hand drawn digital animation roughs. You can still download PAP completely free from the Animation Paper website . If you look past the extremely dated 90's interface it's still a great tool. I wr

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,