Disney 2D Animation Style Remade with Character Creator 4 – Part 2

José Antonio Tijerín

In this Part 2 tutorial, Digital Artist José Tijerín expounds on the workflow of sending cartoonish characters to iClone 8 and Unreal Engine 5 (UE5) for animation. From adding cloth physics, and overlapping animation to new facial expressions designed for the animated character.

José Tijerín is a digital illustrator, 3D sculptor, and creator of video games such as “Dear Althea” available on Steam. His content pack “We’re Besties” is currently for sale in the Reallusion content store.

Hi, I’m José Tijerín and this is the second part of a tutorial in which we are creating a cartoon character with Character Creator (CC) and iClone in the style of one of the first animated movies: Disney’s Snow White. Please check out the video here if you haven’t already.

Adding physics to the animated character

Making the character’s clothes move dynamically is a really simple and quick process. First, we need to prepare a grayscale texture that maps the physics according to the clothe’s UVs where white are areas most affected by physics and vice versa. In the Modify menu click on the Physics section, select the target model, and click the Activate Physics button. In the subsequent “Weight Map” request, provide the aforementioned grayscale texture that was prepared beforehand.

If we activate the Soft Cloth Simulation button at the top of the program and go to the timeline at the bottom, we can apply an animation to the character to check if the result is desirable. You can adjust the properties of the fabric or hair under simulation to your liking. It’s also possible to adjust the physics colliders of the character if the clothing or hair is going through the model. To do this, go to the character’s Attributes menu and click on the Collision Shape button. Within the floating pop-up window, select the collision capsule for the target part and increase its size.

Correcting facial expressions

Once modified, we can check if the result is as desired by applying it to the character again. These animations help enormously for finding errors and quality checking our character, with the facial expressions being one of the most important checks. In the latest version of Character Creator, we can correct and customize expressions to make the character feel alive.

Let me mention another character that will appear in “The Evil Furry”; his animation style is much more cartoonish and his expressions should follow suit. However, we see that the predefined morphs do not meet the requirements and fail to be applied to the character.

If we go to the Modify menu, enter the Motion Pose section, and click on the Facial Profile Editor button, a new window will appear on the left side of the screen with the same name as the button. Click on the Edit Expression button to unlock a long list of specific facial movements—these form the standard CC facial profile, but I recommend unlocking the extended version even for cartoon characters.

To unlock it, just click on the Traditional button below and the Extended option in the following pop-up window. Now we can edit facial expressions. Starting with the eye blinks, which is the most obvious mistake, and although it’s the most serious error, it’s also the easiest to fix as CC offers a specific function to solve this problem. Just find the Character in the top menu bar and click on Correct Eyeblink; we can see the problem is solved immediately and the faulty morph has also been corrected.

However, when the morph is at 50%, the eyelids do not cover the eyeballs and leave a strange appearance. To fix this, we don’t have to go very far, such as bringing the model into Maya. At the bottom of the menu we can click the Edit Mesh button that’s among a series of buttons under the Expression Tools section. We can then fix the eyelids by flattening them a bit and clicking on the Edit Mesh button on the right to exit the editing mode. Next we click on the lightning bolt symbol next to the morph target which is activated at 100%. This will register all deformations made to the character model (the character base can’t be edited while morphs are being adjusted).

Now that the morph works well from 0% to 100%, we can mirror this deformation to the other side of the face by clicking on the little symbol with two arrows pointing at each other. Granted, you can also edit morphs in a third-party application like Maya, but I recommend using the options right in front of you inside CC.

Adding cartoon facial expressions

Clicking on GoZ Expression for the morph we want to edit (in this case, “Open Mouth”) takes the character into Zbrush. Personally speaking, editing the character’s expression is the most important step after it’s created. Artists should work beyond just correcting mistakes in facial expressions.

The best advice I can give is to look for concept art references from films and series. Theoretically, I should have drawn inspiration from the earliest Disney movies, but I wanted the character to be more expressive and contemporary.

A good example is the art of the famous Jin Kim; one of the artists who left an indelible mark on Disney’s artistic style for animated 3D super productions. Even with characters expressing the same emotions, Kim was able to have them uniquely articulated. Jin Kim was not satisfied with giving carbon copy smiles to different characters.

When we examine the smiling expressions alone, we find that they are very different depending on the character’s anatomy, demeanor, and background. To design characters and bring them to life, however cartoonish and deformed they may be, you need to have some knowledge of anatomy; I recommend looking at the work of Anatomy For Sculptors to learn the anatomy behind facial expressions. Understanding when and why facial wrinkles form will allow you to create characters that feel real.

If your character is not human, you can look to other great Disney studio artists such as Borja Montoro and Cory Loftis for inspiration. They have an absolute mastery of human anatomy, but they also have an amazing mastery of animal anatomy and demonstrate it by humanizing their faces in a very appealing way. To end the topic of expressions, I would like to remind you that Character Creator allows you to add an infinite number of new expressions and the more you add, the more versatile your character will be.

Create overlapping animation

Before returning to character creation, I’ll take the opportunity to explain the use of the “Spring effect” to automate “overlapping” animation.

This consists of complementary and overlapping motion that is part of the twelve principles of animations identified by Frank Thomas and Ollie Johnson in their book The Illusion of Life: Disney Animation, which is considered one of the best animation books of all time.

First, we’ll bring a model into a 3D program for rigging and once the bones have been placed in the model, we’ll apply and tweak the skin binding. Keep in mind that bones need to be frugally placed and organized into hierarchies with proper x, y, z axes orientation—all factors that determine the final movement.

Then we export the object in FBX format and add it to the character by clicking on the Prop option under the Create menu to load it into CC. Once loaded, we can click on Edit Spring in the Modify menu to launch a window on the left side displaying all of the bones placed in the model. When we select one of the bones, the Translate and Rotate effect will become accessible on the right side of the application.

In my case, I’m going to apply the Rotate effect to some of the bones and in the group settings below, give very little Mass and Bounciness while maximizing Strength. You can add a test animation to the model to try out the settings and get the effect you desire.

Send to iClone

Now, let’s send our character to iClone. iClone specializes in working with motion capture, which is what I have deployed, and involves the recording of sensors placed on an actor’s body. Roughly speaking, the initial steps for professional animators (not counting layout artists) consist of block-outs and “step” animation. We can deploy the same methods using the Edit Motion Layer tool, but instead of entering the “spline” phase, we will generate a complete animation using key character poses instead.

This similar example shows why this method of animation was picked and just how fast and economical it can be because the new iClone tools make it happen in just a couple of steps. If we select the keyframes and click the right mouse button, a menu will appear; inside it, we click on the Transition Curve option. A window will appear where different curve types can be assigned from one key character pose to another with single clicks. This is ideal for works with a lot of cartoony animation, like video games.

To top it off, I have also added a Digital Soul animation layer to the face and the result is quite satisfactory. However, compared to the motion capture version, the movement is a bit artificial and progressively undesirable on increasingly realistic characters.

Left: Animated by keyframing with Digital Soul animation layer. Right: Animated by Motion Capture.

Having finished the character animations in iClone and before transferring it to Unreal, I noticed that the right hand, with a Reach Target to the broom, judders from time to time; and you’ll notice it particularly in slow motion. This often happens when a model has multiple Reach Targets and Pick Parents associated with it. The problem is solved once we select the constrained model (in this case, the broom) and click on the Flatten All Motion with Constraint option under the Animation menu.

Let’s go to Unreal Engine

Now we’ll talk about preparing the project in Unreal Engine. When we have a project open in Unreal, we must make sure that the following options are activated:

Settings > Plugins > iClone Live Link
Live Link > Window > Virtual Production
Cinematics > Take Recorder

Under the Live Link menu, click on + Source, select the iClone option and add the port number that will connect Unreal to iClone. We’ll have to do the same in iClone by activating the Unreal Live Link option in the Plugins menu, click on the Transfer File button in the subsequent pop-up menu, and wait for the whole scene to be exported to Unreal. Now that everything is imported, we can click on the Unreal Live Link > Link > Link Activated button to see the animations played in Unreal without clothes physics.

To get the physics simulation in Unreal, activate Edit > Project Settings > Global Physics Settings > Bake Animation, select a dynamic object (in this case, the skirt), and play the animation to register the simulation. When finished, we deactivate the physics and the Bake Animation option. Finally, we activate Simulate in Unreal.

At this point, I recommend adjusting the colliders to avoid strange effects—you can watch a whole tutorial about this on this Youtube channel. Now that everything is ready, go to the Take Recorder menu and drag in all of the motions we want to record. Clicking on the red circle button will start a countdown, and when it’s finished, we must click on the Play button to record the animation into the Unreal timeline—it’s as simple as that!

Making perfect cel shading in Unreal Engine 5

There are two ways to achieve the 3D cartoon effect. The first is by using effects on the object’s material to make the lines appear on the interior of the model. For example, you can download the free “Stylized Materials Pack” from Unreal to see how it works. The second way would be to use a post-processing effect that encompasses everything that appears on the screen and creates lines on the edges and surfaces of the models. We are going to use the latter cel-shading effect.

The first thing we will do in our Unreal project is to go to the Quickly Add to the Project menu and add a Post Process Volume from the Visual Effects sub-menu by dragging it into the viewport. With this element, we can easily and practically achieve any imaginable visual effect in Unreal. By default, this post-process cube will only affect a section of the scene when the camera is within its boundaries. To extend the effect to the whole scene, we only have to enable Post Process Volume Settings > Infinite Extent in the details of this element.

Improving the cartoon effect of Unreal 5

The toon shading effect is composed of two materials; one that is in charge of creating contour lines, and another that is in charge of the lighting which only has two, or in this case, one tone. Starting with the latter material, we will create and edit a “PPMM BaseColor” material. Enabling Material > Post Process will allow us to work with Emissive Color, and from that, I remove the “SceneTexture SceneColor” node. To remove the error message, we have to indicate to the node that we want it to use the “Filtered Base Color”.

Next, go back to the material and select Blendable Location > Post Process Material > Before Tonemapping. When we save the material and go back to the post-process cube, we can add this new material into the Post Process Materials section and immediately notice a loss of lighting. However, we can still see the textures which are ideal. We will now create an “Outlines” material for the second material.

We can directly go to the tutorial on dev.epicgames and download the project and its materials. Open the demo project and look for “Postprocess > Content Drawer > PPMM Outlines All” material. If we click on it, we will see a group called Polylines and another called Normal Lines.

I removed “Normal Lines” to get a cleaner and more controlled result, you can also remove this group for the “Outlines” material. All of these materials will be taken into our project. Once we add the materials we have created and select them, we can paste the nodes we have copied from the example project. To apply this material we go back to the PostProcessVolume menu we created and add one more array in Post Process Materials. We have to indicate that it is an “Asset Reference” and, to make it work, we have to put the “Outline” material above the “Basecolor” material.

However, the result could be better. The first thing we noticed is that you can hardly see the lines. If we reopen the “Outline” material and click on the first node on the left called “Polygon Outline thickness” we will see that in its details menu the “Default Value” is 1.

Let’s try to give it a value of 4 , and change Polygon Outline Quality > Polygon Outline Amount from 0.2 to 3. Now the effect looks better as it resembles a drawing, however, lines on the interior of the shapes are also formed where they should not. To solve this problem, we have to go back to the “Outline” material and duplicate the “SceneTexture”, “Mask”, and “Lerp” nodes from the “Blends Poly and Normal” group. Then duplicate the first two nodes again and connect the old “Lerp” node with the new one at the letter “B”. From the same, we connect the duplicated nodes to the new “Lerp” node, to the letter “A” to finally connect this new lerp to the material.

We only have to connect the “alpha” channel, but first, we are going to go to the “SceneTexture” node that we still have to connect and change its configuration. In this way, we repurposed metallic textures into masks where the black areas display contour lines and the white or “0” color prevents the formation of lines.

Now we are going to eliminate the “Mask” node which is connected to the Color channel and replace it with “1-x” node which we connected to a “Ceil” node which, in turn, will be connected to a “Clamp” node obtained by copying it from the same “Blends Poly” group. All this is connected to the Alpha channel of the Lerp and we have the material with the mask ready.

To see the result we are going to create a metallic texture for the face material. We have chosen metallic textures because, as we have a post effect that only shows the diffuse channel of the whole scene, there is no material that needs metallic textures.

The face mask will depend very much on your design and some testing will be needed to get the desired effect. The only thing left to do is to connect the metal texture to the material and apply the material to the face. As you can see the result is now much better and much more similar to the original sketch. Finally, we can rejoice now that our cartoon character is fully animated as if it was part of an authentic old-school 3D movie.

Thank you for reading this tutorial, it took a lot of work and I hope it will be useful for your projects. Remember that you can add my funny video game to your wishlist. And if you want more tutorials like this, don’t forget to subscribe to Reallusion’s official channel.