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.


Comments

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

Zack in Time - Support an Independent 2D Animated Series that is Creating Opportunities for New Talent

Z ack in Time is an independent, 2D animated series about a biracial 13-year-old  teen, who has trouble fitting in at his new school, until he finds a time-traveling watch developed by a secret government agency.  Created by Christian Haynes, who I featured in December of 2021 , and produced by Imhapie , the production has now launched a Kickstarter  (which runs until October 25th, 2024) to fund the development of the series pilot episode, as well as a full series, which is ready to produce. Why You Should Support Zack in Time Zack In Time is more than just another 2D animated series hoping to be successful, and is worth your consideration on two levels. Not only does the series hope to tell a fun and authentic story, showcasing unique characters but also, behind the scenes, the producers hope it continues to be a launching pad for young artists' careers.  A Relatable Story that Promotes Diversity and Representation The story of Zack in Time reflects the struggle that we all feel a

Glif (Alpha) - Make Your Own Tiny AI Powered Niche Image Generator Apps

I  first heard about Glif through a YouTube video that mentioned you could get access to Flux Pro (the latest 'game changer AI' generative image model) through the site for free. While I had a vague notion from the video of what Glif was, I wasn't expecting it to be so easy to get started with, and so good with my very first results. Glif is an easy to use, low-code platform for creating tiny AI-powered generators called Glifs. While that may not sound inspiring, what Glifs allow you to do is create a tiny app that niches down to a specific type of AI generation that the user modifies with their own inputs. The best way to really understand is with an example.  My First Glif I've recently been using VivaGo's AI platform  (free and unlimited at the time of writing) to consistently generate full body characters in a front facing T-Pose that I can rig as front facing characters in Cartoon Animator. Unfortunately it can be a bit hit or miss maintaining the T-Pose part

Krita AI Diffusion - Generative Image AI For Krita is Seriously Useful, Powerful and Free (If You Can Install it Locally)

Generative AI sequence of a woman in a business suit. From sketch to refined image using Krita AI Diffusion - by TET G enerative image AI, where you describe an image with a text prompt to an Artificial Intelligence model and it produces a new image based on your prompt, is gaining a strong hold as a tool for many artists. Krita AI Diffusion brings generative AI image tools right into your favourite free and opensource, graphics editor, Krita. Not only that, if you have a computer with decent specs (and at least 10GB of hard drive space), Krita AI Diffusion is completely free. What If I Don't Have a Powerful Computer? If you're in my situation, with a computer that was around before anyone in the mainstream had even heard of generative AI, you can still access Krita AI Diffusion for free, using a cloud based AI server, Interstice  and 300 tokens, to get you started. Once your initial tokens run out, purchase 5000 more for 10€ (approx US$11.00). Tokens never expire. I would

The Ultimate Independent Animator's App and Resource List - Animation and Video Life

Image created with Cartoon Animator 4. Being an independent animator is not like a studio animation job. There's so much more to do that is indirectly related to the actual task of animating. Over the years I've sought out many apps, tools, and services that can help me achieve that one single task, expressing myself through animation. Below is my Ultimate Independent Animator's Resource List for 2024 (last updated Oct 2024). It started out as a list of free or low cost apps that could help you in every stage of producing either 2D or 3D animation, and then just kind of grew from there. You may not have been looking for a Time Management App as much as you needed something to get you started in 3D animation but when those commissioned projects start coming in you'll have a head start on maximizing your time. All the apps and services on this list had to meet two main criteria: They had to be useful and relevant to an Indy Animator/artist. The base app/se

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