• +0033 (0)290 568 348
  • contact@thehiveprojet.fr


This is a work in progress that if you are interested in you can follow along. I have been working on it over the Christmas period the objective of this project is to design 3D Characters for 2D games. I posted an article on 3D characters rendered as 2D images called the "HTML Canvas Element" this is an extension of this concept. You can comment or leave questions in the comments section, you must have an account to access this functionality. It is really simple to set up and makes the whole experience a lot more interactive!.

Maya's nCloth simulations:

When you create a nCloth node it creates a nucleus node (make sure if like in this example where there is nCloth simulations & nHair simulations in the same scene file they should be on two different nucleus nodes. Each sim nCloth/ nHair will need a passive collider (an example of this is the little girls fringe no collider would mean the fringe would pass through her forehead). It is good practice not to use the high polygon head geometry itself as the collision object but rather use a low poly proxy object and parent that to the master head bone so as it will follow along with your rig. The little boy rig has two versions of his hoodie one with the hood down the other with it up. For this, on the master controller, I will create custom character assets with a boolean SDK ON/ OFF on the geometries visibility attribute.

For the little girl character the dress will be nCloth, for this I have separated it into two pieces, the top half is skinned to the skeleton rig and the bottom half is nCloth using an nConstraint > point to surface and weld normally we should not see the join!.

Character topology:

There are a lot of reference images & tutorial videos on this subject online and it is vital to follow certain rules especially when it comes to the face!. It is all very well having a beautiful model but if you are going to be deforming it in any way afterwards facial expressions or mouth positions for lipsyncing then you have to think about the muscles underneath the skin. It is possible to build your own simplified muscle rig using a NURBS sphere as an influence object parent constrained at each end to the arms humerus & radius bones (upper & lower arm bones). Then when you animate it using the wrist control it will simulate the bicep muscle as the NURBS sphere will squash and stretch as the arm rig is articulated. This same behaviour could also be done using blend shapes, using an SDK keyable float 0 > 10. Model the blend shape model with bicep muscle inflated and key it at 10 then using either auto or custom attribute set up on the IK wrist controller, this method is also used a lot for what is called corrective blend shapes to correct imperfections in the characters bound skin. The images below show various methods that can be used on the back of the elbow and front of the knee adding more faces resulting in higher resolution for deforming geometry. This is easily achieved by selecting 4 faces and extruding them then using the scale tool to reduce the extruded faces and finally transforming forwards slightly. (added to this technique a double joint setup on the bound skeleton, parent a joint to the master knee joint and pull it forward a little). This technique can be used on all articulating joints it can help a lot on fingers for example!. Inserting double edge loops where you need more definition is seen here in the finger example. Notice how the characters mouth topology is built I have highlighted the polygon faces. They are going around the mouth in a certain way and as the edges get closer to the lip area they get closer together and the lips have a bend deformed applied to them in the modelling process that is removed afterwards as it is no longer needed it just helps to get those little dimples on each side of the mouth. Finally, always model the mouth in a neutral position shut as when you start deforming it remember you will be squashing it inwards creating the 'Oh' shape and stretching it outwards for various smiling shapes and this would be impossible if the mouth was too small or large!. In the last two images, I have highlighted the polygon faces showing where the smile & frown creases will be formed from, do you start to see the pattern forming in the polygon geometry topology?.

Learning the character's limitations:

I doubt if when you start posing the character everything works perfectly the first time!. As you can see in the images below crossed arms is difficult as the arms are too short (obviously in my character rig I have set up squash & stretch on the arms & legs and I can scale along the X-axis to make the limbs longer or shorter). This is fine if you are just posing the character which is what is going on right now as I am testing deformation and painting skin weights. If it is just posing characters for stills you can adjust accordingly to each of the little imperfections. This only becomes a real problem when you want to start animating with the rig! (very annoying for any animator to be handed a rig where they have to blend between two values each time to reach a pose!). It would look strange stretchy arms! squash & stretch is present but it is not really designed for that purpose. I had deformation problems with the shoes also as I had combined the geometry of the shoe but it was separate from the character leg this caused gaps to appear between the ankle and the shoe that I was not able to resolve even after painting skin weights so it was back to the drawing board for that problem. The Converse logo was a problem also so to solve it I will disconnect it from the combined shoe geometry and use a little MEL script called 'parentToSurface' (available to all on the public download page). 


Images above showing progress and some changes (1) the character's skin texture was altered as it was blotchy!. I could be using the 'VRaySkinMtl' for this but it has SSS integrated (subsurface scattering) which results in longer render times and as this character is designed with the intention of it becoming a 2d game character its final scale will be less than 200px by 200px and there is no GI (Global Illumination) in the scene so not worth it!. By the way, the characters have names now the little girl is called Florence & the boy Gaetan. (2) look closer at Florence smelling the flower notice anything?. Well done if you spotted it the idea I mentioned earlier to split the dress into two parts skinning the top half and the bottom piece would be nCloth I said we would not see the join, well apparently the nCloth > nConstraint > point to surface using weld can leave gaps when it is being simulated. I'm sure there is a way to overcome this problem but I decided to go with a complete nCloth dress and low poly proxy body collider.

Below is the first test walk cycle video 128 frames that equals 4x 32, 32 frames that is the length of the walk cycle for the final sprite sheet!. To the left, there is an obvious problem with the braided hair it is dynamic so the first and last frames are not the same this will not work as, as you can see when it reaches the last frame it will jump to the first and they are not the same!. So as to have more control over its movement the braided hair has been changed to an FK rig. Like this, we have 100% control over its movement and frames 1 & 32 are identical. The eye lighting experiment mentioned in the paragraph below has been tried out and it works out fine just one small problem the light rays affect the braided hair. To resolve this the braid will have to be de-selected from the geometry that the light influences. Another difference is the blink as the right side is 32 frames x4 loops that would equal 4 blinks way too many!. Maybe it would be possible to do a separate row on the sprite sheet with the blink included and use javascript's Math.random to include that row times on time...

On a mobile device? Using Chrome browser? Get a closer look zoom in on the videos using the finger gest...

Eye's & Eyebrows...

These two parts of the face rig are what bring your characters to life! alongside good body language. That little white dot in the eyes what is it? it is a reflection captured on a Phong or Blinn surface meaning there is no roughness on the material. Examples of such surfaces are PVC Transparent plastic, glass, water etc. The eye geometry for this character is made up of two spheres (1) Eye White, Iris & Pupil (2)Transparent sphere to catch reflections. So the normal way to go about doing this is to use Global Illumination in the scene and use an HDR (High Dynamic Range) spherical image. Basically, this is a sphere with an HDR image texture on the inner surface projecting lighting information into the scene, because the eye texture is enveloped by a transparent sphere with a glass material added to it this will capture reflections from the HDR image. But as I mentioned above this scene is not using GI so how can we reproduce the same effect artificially?. There are numerous answers to this question one would be to create the little white spot as actual geometry and constrain it to the surface of the eyeball geometry. This method works well for cartoony type characters and if the character is far enough away from the shot camera. If the shot is a close up it becomes obvious, Gaeton & Florence are stylized toon characters the fact that they have realistic hairstyles & eyebrows makes them a sort of hybrid between realist and cartoon. So I am going to try something a little different using a 'VRayLightRectangle' with direction turned on at 98% resulting in a very thin cylindrical light source. Creating a locator and parenting it to the eyeball skeleton bone joint so as it will always be at the centre of the eyeball sphere and then using an aim constraint on the light so it, in turn, is always pointing at the eyeball (with a little offset as the reflection is never centred). Ideally, it needs to be slightly overlapping the pupil. Will it work? TO BE CONTINUED...

What the project is aiming to achieve...

To get a better idea of what this project is aiming at check out this blog article HERE. This shows us a rabbit character on what is called the canvas (the canvas is an HTML element introduced in HTML5) it is very powerful and permits us to draw directly into the HTML page in real-time through the use of Javascript hence all the ingredients we need to build 2d games etc. The result is a sort of fake 3d and all the character moves needed for the game are pre-rendered and laid out on what is called a Sprite Sheet. The demo (proof of concept) on this page demonstrates 3 character movements (1) Walk (2) Run (3) Jump you can choose between them through the use of a drop-down list. So now we know it is possible any ideas for an epic 2d game featuring Gaeton or Florence with full 3d intro videos, splash screens, cinematics (cut scenes full 3d animated videos none interactive between game levels) leave your suggestions below in the comments. Since writing this article I received an email suggesting an interactive storybook rather than a 2d game aimed at young children maybe with multiple-choice questions to answer if answered correctly the story moves along... 

I like this concept and am presently turning some ideas over in my head. If there are any indie Javascript developers reading this that could help out with coding it would be much appreciated just get in touch if you are interested. I am imagining some kind of animated intro, turning page effect between questions and some nice little cinematics etc as the storybook and storytelling moves along all this using the HTML5 canvas element...

Character animations:

In the little video below I start testing character movements, here Florence is bouncing a ball. If you are just starting out animating you have probably followed a bouncing ball tutorial online, it's one of the first things to do to start understanding different key types and animation timing!. It might look simple but if you just key a frame for up and another for down you would see it does not look good at all. The ball will go down faster than it goes up due to gravity and the impact with the ground plane will need some kind of squash & stretch with volume maintained integrated into the ball control rig. Key the impact frame then the next frame squash it down following that on the next frame stretch it up and finally return it to its round state a couple of frames later, the rotation is optional but I added a red line around the ball to demonstrate it. (you can click on the video controls the 3 little dots and change the video speed to 0.25 to see more clearly what I just explained above). This concludes the Florence character rig I am happy with the hairstyle and results whilst it is being animated the braid will probably need the keyframes to be offset a little to make it smoother it is a little stiff in my opinion. Finally, for the eye setup, I went with the 3 piece method and the little white dot/ reflection is a separate piece of geometry constrained to the eye, the other way worked ok but it would have had to be connected to the blink system to go OFF when the eyes where shut doesn't make much sense to see it on the eyelid!. The dress is skinned to the skeleton and not nCloth as I originally imagined it, I will do some nCloth simulations on the other mini potes character Gaetan on his jacket. So that finalizes Florence she is now ready for the final project.

Another little cycled animation

This little video shows Florence skipping, looks easy you say, think again!. The skipping rope was a challenge to rig up as I started off thinking I could rig it using a dynamic joint chain, but I ran into problems parenting both ends the start of the chain was easy enough and could be simply point constrained to the hand controller but the other end with the IK handle was impossible to figure out!. I had to skin the rope geometry to something so what to do?. My solution was to use a motion path along a curve, this might seem a little odd at first but attaching locators along the curve at 0, 0.25, 0.5, o.75 and finally 1. Now if you were to select the curves control vertex the locators follow along. I then parented single joints under the locators and zeroed out their values so as they shared the world X,Y & Z values of the locators I then duplicated all the joints and parented them to themselves. For the controls, I created a Nurbs sphere and used its shape node first selecting the Nurbs sphere then the duplicated joint and using MEL parent -r -shape the shape node becomes the controller but it is actually a joint so I could skin to it. Voila, problem solved I have a rope with two end controllers (joints) that were then parented to each hand controller and would now follow the hand animation. I am left with 3 controllers to position/ animate the skipping rope. There is a curve at the origin of this setup that could also be manipulated using blend shapes by duplicating the curve and creating a blend shape connection between the duplicate and the original and deforming the duplicated curve, then using a custom attribute using 0 > 1 to get to the target shape this would be an alternative way of using the same rig setup but in a different manner. Anyway, the result is shown here in this video of Florence skipping...

Something like this...

An intro video based on the pop-up books for children. This is based on the idea sent to me for creating a storybook based game, I have no idea at the moment if mixing HTML5 canvas elements/ Javascript with videos (cinematics) is possible on a simple web page or whether it has to be some kind of full blown application. If anyone reading this has the answer or can point me in the right direction please get in touch. The basic skeleton idea as I mentioned above is that kids would be able to interact with the characters making them walk, jump, run etc maybe answering multiple-choice questions from videos (cinematics) to move forward in the story. keep following this blog article to discover how Gaetan is progressing. At present, I am working on some low poly modelling for creating the parallax background scenes and a skipping rope rig for Florence. SO LOTS GOING ON BEHIND THE SCENES, ALL THIS WILL BE COMING SOON...

The little boy character...

So how is Gaetan coming along? The little side by side video below shows I am still having problems with joins using the nCloth method (I switched from weld to elastic and solve each frame but it still does not seem to work) so I had to re-think my rigging solutions. The hood is now skinned to the skeleton rig using a dynamic joint chain with FK controls, in the walk cycle animation it does not have to move that much considering the heavy knitted jacket fabric but imagine a jump animation obviously there would be more movement!. There is also a problem with geometry underneath the jacket (T-Shirt) coming through near the shoulder this turned out to just be a skin weight problem and was solved by painting skin weights. Below the video are some images showing how to achieve textures for the materials used on the characters

Creating materials...

In Maya you will be using 3rd party render engines, for example, Arnold, Maxwell, VRay, Mental-Ray etc these will either be stand-alone or plug-ins designed to work inside of Maya. These are what create the final rendered image sequences for the animations. But first, you have to create the materials that you want to use, this can be simple to very complex texture networks depending on the material. You have to think about how the material would look in the real world? for example below is the texture used on the fabric on Gaetan's knitted jacket. Does the knitted fabric have reflections on it in the real world? the answer is no so you would not use a Blinn or a Phong for the base of the material as these are used for reflective surfaces. This texture is using a VRay ward material (the equivalent of a Maya Lambert) and you can see below it is a red knitted texture 2048px by 2048px resolution to get that crimped look at the bottom of the jacket without actually modelling it physically into the model geometry as this would make the characters poly count very high and slow down the rig. A texture called a Normal-map can be used instead this fakes the 3d effect of what happens when light hits the surface. How is it positioned correctly? well before you can create any materials for 3d models the models have to be flattened. The image below shows an example of the 3d jacket flat in UV space and it is clear to see where to position the crimping as the last image shows in a close-up the elastic effect at the bottom of the jacket as a normal map.

Human Inverse Kinematics (HIK)

Bonus features: These two 'Mini Potes' Gaetan & Florence can easily be hooked up to work with Maya's HIK system (Human Inverse Kinematics) and read Motion Capture data making animation tasks easier if you have the mocap data for all the player/ character moves like Idle, walk, run & jump etc. Here we are talking about a 2d game or storybook but don't forget these characters are 3d and could be used in 3d environments game engines such as unity or unreal. Unity is very interesting and I know my little characters would look cool wandering around in a little 3d world but at the same time, I like the simplicity of the HTML5 canvas using Javascript for programming...

You need to Login or Register to comment.

Comments (0)