User Tutorials‎ > ‎

Natural Eye Blinking

Compatibility: Cubism 2.0 or later
(The following guide is using Cubism Editor 2.0. The visual of the references may look slightly different from the latest version)


     Tips for making "Eye blinking" move

http://www.cynos.jp/tutorials/kuroi/OK.gif



Tutorial Author  : 黒井 (URL:http://ku6i.tumblr.com 
Freelance illustrator. Currently working in social game projects


    Step 1    Technique on model making    -    How to make the eye-closing motion

   Good  Bad
 Sample
http://www.cynos.jp/tutorials/kuroi/OK0501.gif


http://www.cynos.jp/tutorials/kuroi/NG.gif

 Explain
http://www.cynos.jp/tutorials/kuroi/OK_05.gif

This is how a smooth blinking motion looks. 
It is made of the following 4 frames in order:

            1    Fully opened eye
            2    Fully closed eye
            3    Half opened eye
            4    Fully opened eye

This is the method used in anime for a smooth eye blink.

http://www.cynos.jp/tutorials/kuroi/NG_05.gif

This is incorrect because the width of the eye is shorten when closed. 
The eyelash is shifted too high above. 
It appears as if the eye shrinks as it blinks.


【1】Dissecting the Eyelash


To improve the flexibility for animating the eyelash, we can separate the eyelash into 4 parts as shown above.
The horizontal line representing the eyelid should be a separate piece, too.



【2】Location and size of the closed-eye 


Referencing to opened-eye in the original drawing, the closed-eye's width should maintain the same. The position should anchor at original lower outline of the eye. 


Even when you have other poses and angles, the same guideline applies.
However, in some cases, it could be that the closed-eye's width determining the opened-eye's width in order to look more natural.

Displaying the guide image would help adjusting the position.


For facial feature such as the eyelash, utilize the Deform Path tool.
Adjust the position of the side eyelash and lower eyelash so to be overlapped completely by the upper eyelash.



Arrange the polygons of the upper eyelash as shown above.
To avoid white area take over too much space, using the triangular polygons helps with the adjustment.

※Regarding polygons

   

If you are using the PSD import feature, it is unlikely that the polygons are arranged ideally at first.
Especially parts that involve more movements, it is better to arrange the polygons manually.
Reference:    Method for manual polygon arrangement     (https://sites.google.com/a/cybernoids.jp/cubism2_en/beginner-tutorial/03/)


A tutorial video on polygon editing:




【3】Regarding "half-opened" eye


Fully-open or fully-closed eye is sufficient for the blinking animation.
However, adding a half-open eye at mid-point would give better result.
This in-between state bridges the two end states.

As seen on the image above, move the iris (eyeball) downwards along with the upper eye lid moves.
This method causes the animation to look smoother and more natural.



    Step 2    Key technique for making animation

This part is about key frame arrangement. The objective is to animate the model in anime style.
※Specifically, it is a referencing anime's "eye blinking while talking" type of motion.


In Animator, for the Scene Settings, set the value of Frame Rate to "24" fps. (Top menu > File > Scene Settings).
(This is the standard frame amount per second in Anime)


Assign the "Fully Open eye" value to the first frame. 


Assign the same "Fully-opened eye" value to 1 frame right before the character blinks.


At the next frame, assign the "Fully-closed eye" value.


Skip one frame, and then assign "Half-open eye" to the next frame.


Skip one frame, and finally assign the "Fully-open eye".


These are the steps to creating the Eye Blinking motion.


This is the end of the tutorial. Hope you find it useful.

Article copyright © 2015 kuroi

<< 前へ
次へ >>