User Tutorials‎ > ‎

Expressing the movement of hair and clothing

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)






Tutorial Author  :       KAZUYA (URL: http://design-illust.blog.jp)

Graphic Designer.
Finalist of Live 2D Creative Aware 2014

Link: https://youtu.be/p_bcDg76fu4




The following tutorial will talk about movement of the hair and clothes lead by the wind.

This type of movement involves the use of looping animation. This method is suitable for depicting an imagery of ocean breeze. 

Contents
Step 1: Preparing the materials for adding the swaying motions
Step 2: Creating the deformation path (for hair, scarf)
Step 3: Using deformer tool to create the swaying motions (shirts, skirts)
Step 4: Fine tuning the motions using an animator


Sample files used for this tutorial can be downloaded from the links below. By using the file, you agree to read and accept User's Agreement. 

www.cynos.jp/tutorials/kazuya/Live2D_KamiYure01.cmox


www.cynos.jp/tutorials/kazuya/Anime_KamiYure01.canx



【User's Agreement
  • The provided materials are not for commercial use
  • Users may not redistribute the materials
  • Alternations are permitted for personal, testing uses only
Article & data, Copyright © 2015 KAZUYA





    Step 1. Preparing the materials for adding the swaying motions

【1】Drawing and separating the parts

Decide on the wind direction as you start drawing your model.
The strength of the wind can be decided later; however the direction of the wind will become the foundation of your product.
For this instance, the sample's wind travels from left to right.



TIPS
Curve of the hair

Try not to make the hair curves too rigid. Otherwise, it will be difficult to create a natural hair movement later.


パーツ分けと描き足し

絵を書き起こしたらパーツ分けて、
髪が揺れた時に見える部分も想定し描き足しておきます。
この作業は動きを作りながら後で足していく場合もあります。
(手前の青い髪の部分が動くと想定して、
後ろの髪や服も描いておく)

Parts Separation and Creating a Draft

Once you begin the picture, separate the parts.
Plan for movement of the hair and include it in your draft.
Some people may also prefer to go with the flow and adjust the movements as they go.

(For me, I planned the hair movement highlighted in blue, and also set up the hair and cloths at the back.)

   


スカートと足の重なり順

スカートなどは手前の面と奥の面で
足を挟むように画像を分けておきます。
これはスカートが揺れたときに、
手前も奥も見える範囲が変わるため、
作成しておく必要性があるからです。

The Layer Order of the Skirt and the Legs

Set up the layers so that the order of the layers would be: front of the skirt, then legs, and lastly the back layer of the skirt.

This is because when the skirt "moves", the front and the back would have different sets of movements. 

   

描き起こして、分けたパーツはこのようになります。
動く箇所は「髪」「マフラー」「スカート」「目の瞬き」です。

In general, the draft & separation would look something like the following.
Movement will affect the "hair", "scarf", "skirt" and "eye blink".




    ステップ2. 変形パスでの揺れの作成【髪の毛、マフラー】
    Step 2. Create movements using deform path 【Hair pieces and scarf】
では、作成した素材で髪やマフラーなどの揺れに有効な「変形パス」を使い、
髪の揺れのループを作成していきます

Alright, in this part of the tutorial we will use the prepared materials (Hair & Scarf) to create movement. We will learn to use the deform path, which is an effective tool to create movement to the hair pieces. 

【1】パスを付ける
【1】Add the path

まずは髪の動きをつけるための軸となるパスを付ける作業です。
動かしたい①オブジェクトを選択し、②変形パスのアイコンをクリックした後、
③髪の流れにそって変形パスを作成します。パスは髪のカーブが起こる箇所に合わせてポイントを作るようにします。

First and foremost we will set up the trail of the path that would lead the movement.
Select the object that you want to move, ②Click the deform path icon, then 
③Create the path along the flow of the hair. I chose to match the path to the hair by putting my points at the spot where hair curves occur.



※変形パスの基本操作の仕方は下記アドレスのチュートリアルでも確認できます。

※For the basic controls of the deform path, feel free to check out the following tutorial.

【2】髪に動きを付ける
【2】Adding movement to the hair

次に作成した変形パスに合わせて、髪に動きをつけていく作業に入ります。
①変形パスとオブジェクトの両方選択した状態で、②動かしたい箇所のパラメータを設定をクリック。
③パラメータのポイント数は決まっていませんが、ここでは5つ作成します。
ポイントはバーをクリックする事で作ることができます。

Next we will add movement to the air piece by matching it to the deform path.
①Select both the deform path and the object, ②Locate the parameter setting of the area which you wish to add movement to.
Once you select a point of the bar, you have now created movement. 




パラメータの作成ができたら、次はそのパラメータのポイントとに合わせ、髪の動きを付けていきます。
ループの動きを作るためには、最初と最後の絵が同じでないといけないので、ポイントの両端は動かしません。
今回は中の3つを使い髪を波打たせます。(右図の赤枠の部分が動かさないポイントです)

Once the parameter is created, we will move on to matching the parameter's point and add movement.
Since we are creating looping movements, the first and last frame must be the same. Thus, we will not move the first and last point on the bar. For this time, we will use the 3 points in the middle to create a wavy movement. (Right image: The dots boxed in red are the ones we do NOT move.)
    


【3】パスの動かし方

【3】How to move the path

パスの動かし方は、
①パラメータ内の「髪揺れ 後」などの動かしたいにポイントにカーソルを合わせ、右クリック、
その後②パスのポイントクリックしたまま移動する事で、動きを設定することができます。
赤枠の真ん中の3つを順に選択して、髪の動きをつけていきましょう。

For the path movement, 
①In the parameter panel, select the part where you want the movement. Match it with the "KA-SO-RU", right click, then ②Click and drag the point of path. That's how we set up the movements.
Let's begin with the 3 red boxed key points and begin to add some hair movements.

上記で作成した3つのポイント髪の動きをGIF動画で確認するとこんな感じになります。
Here's a GIF for you guys to double check the movement using the above settings.
http://www.cynos.jp/tutorials/kazuya/02-5_GIF01.gif

風は目に見えてはいませんが、わかりやすくするために青丸をつけてみました。
実際に存在する物体が通り過ぎることで髪が動いていると想像すると動きがつけやすいでしょう。

You wouldn't be able to see the wind by eye, so I added a blue circle that would show the movement of it.
I find that once you image an actual object that is passing through the area, it'd be much more easier to add movements to things.




同じ理屈で前髪やマフラーなども作成します。
理屈は同じですので、説明は割愛しますが、
根元は髪の毛が生えているのを想像し、
つむじの方から毛先に向かってパスをつけると良いでしょう。

Use the same method for the front bangs and scarf's movement. Since it's the same logic, I've skipped the details but the rule of thumb is to think about the hair piece's grow direction, how it would twirl - and then create the path. 
   

TIPS:髪やマフラーの根本は動かさない
TIPS: I can't move root of the scarf nor the hair.
基本的に髪やマフラーは根本は固定されているはずなので動かすことはありません
In general the root area of the scarf and the hair should be in a static position, thus we don't need to add movement to it.


TIPS:風の表現のコツ
TIPS: Hacks for the wind expression
風は目に見えませんが、実際は吹いている方向から物体として通過していると考えて髪に動きを付けると良いでしょう。
Even if you can't see the wind, picture an item that is moving through the designated object (Hair, etc) and plan the movement. That's something I'd recommend. 




    ステップ3. 曲面デフォーマでの揺れの作成【服、スカート】
    Step 3. Creating movement by using the curved deformer. 【Clothing, Skirt】

ここでは衣服などの揺れに有効的な
曲面デフォーマを使っての揺れのループを説明します。

From here we will talk about the curve deformer, which is an effective tool to add movement to clothing items. 
We will also work on using the curve deformer to create a vibration loop.
 【1】曲面デフォーマを作る
【1】Creating the curved deformer
 
①動かしたいオブジェクトを選択し、②「デフォーマを作成」のボタンを押す。
① Select the object for movement, and ②Click the "Create Deformer" button. 



①名前は任意のものをつけておいてください。
②曲面を選択、②分割数は決まっていませんが、ここでは5×5にしておきます。

①Name it whatever you want, but name it.
②Select the curved face, ③Decide the number of parts that you'd separate it to. For here I've prepared it to 5 x 5.




デフォーマが作成できたら、Ctrlキーを押しながら赤枠を動かし、デフォーマの形をスカートの角度や大きさに合わせます。
角度や大きさを合わせる事で、衣服の形状を活かした動きがつけられると思います。

Once you created the deformer, hold the CTRL key while simultaneously move the red boxed area, and match the deformer's shape to the skirt's angle and size.




 【2】曲面デフォーマにパラメータを設定する
 【2】Setting up the parameter values in the Curved Deformer.

続いて、作成した曲面デフォーマにパラメータを設定します。
デフォルトにはないスカートなど新しいパラメータを追加するには
パラメータパネルにある①「パラメータ設定」をクリックし、
②「新規値」をさらにクリックして③新規のパラメータを作成する必要があります。

Afterwards, we will now tweek the pararmeter values in the curved deformer.
By default, our skirt would have no parameter values. Thus it would be necessary to do the following steps - Go to the the parameter panel and get to ①Parameter Setting, and click②New values. Then begin to ③set up the new parameter values. 



新規でパラメータが作成できたら、
パス同様、パラメータのポイントの両端は動かさず、左から右へと風を意識して
曲面デフォーマのポイントを動かします。パスが線で動かすのに対して、曲面デフォーマ
は面として意識しながら動きをつけると良いでしょう。

Once you completed adding new parameter values,
Set the parameter points with the image of the wind moving from left to right. Similar to the path part of the tutorial, you do not need to move the two opposite ends of the points. Contrast to the path method, the curved deformer movement method is done better when imaged as the "face". 



作成したスカートの動きをGIF動画で確認するとこんな感じです。
The following is a GIF which demos the skirt movement.
http://www.cynos.jp/tutorials/kazuya/03-7_GIF01.gif


TIPS:スカートの揺れの作り方
TIPS:Skirt movement methods
スカートの揺れは髪と同様に風の流れを意識することに加え、風によってフワッと膨らむ感じを出すと良いでしょう。
Similar to the hair tutorial part - I think it's better the picture the flow of the wind, and adjust it depending on how the gust of wind should be like.
 
曲面デフォーマの使い方はこちらでも確認できます。

For those that are looking for a tutorial on using curved deformers, please see the following link.

これで揺れの動きの説明は終わりですが、これ以外にも目の瞬きなど必要に応じで、他の動きもつけておきましょう。
That's all for vibrating movements, however other than the above there's other movements that'd be needed to add to the model. Don't forget to add movements to other parts. 



    ステップ4. アニメーターでループする揺れを調整
    Step 4. Animator: Fine tuning the loop's vibration

最後にアニメーターで揺れができるだけ自然に見えるように調整をしていきます。
ループは作り方により、動きに変なリズムができてしまうので、ここの調整しだいでそれを緩和する事ができます。

Finally we will use the animator to fine tune the movements into a more natural look.
Depending how you've created the loop, the movement can look a bit strange. This is where we use the animator to smooth out things. 

 【1】アニメーターを使ってみる
 【1】Using the Animator
モデラーで設定したファイルをアニメーターで読み込み、
タイムラインの「Live2Dパラメータ」で、作成した
髪やマフラーなどに-1~1の数値を入れて動かします。

Load the file which was created in modeler to the Animator. 
Change the values of the items that were created by Live2D Parameter to the values of ~1
~1.
 
ここでは例として、0~29コマを使い1秒の動きを作りますが、
この後の工程で、前後合わせて8コマほど削るので、0~29コマ+8コマの合計
0~37コマ(1秒7コマ)を使い髪のループを作ります。

For example, here we have used 0-29 COMA to create 1 second movements. However the productions later on in total we deleted around 8 KOMAs. You now have a total of 
0~29KOMA plus 8 Koma (1 second per 7 KOMA) to create the loop of the hair movement.
 
揺れ開始は①0コマで-1、揺れの終わりは②1秒7コマで1を設定します。
Begin of the sway 


※このサンプルではマフラーの揺れのみ数値が逆になっています。
理由としてはあまりにも全部が同じ動きだと逆に不自然に見えるので、あえて動きを逆にしています。

アニメーターの使い方はこちらでも確認できます。
http://sites.cybernoids.jp/cubism2/beginner-tutorial/06
 
If you need refreshing on how to use the animator, please check out the following tutorial.
http://sites.cybernoids.jp/cubism2/beginner-tutorial/06
 

下図では髪、マフラー、スカートに揺れの動きがついています。
The following image has the swaying motion of the hair, scarf, skirt added.



アニメの基本はこれで完成ですが、これだけだとループ再生した時にカクカクした動きになるので、前後の数コマを削り自然な動きにします。
ここでは前後、各4コマ(合計8コマ)削っていますが、
削る数はものによって変わるので、自分なりの調整をしてみましょう。

This completes the basics of using the animator. 
However if you just use these values to play the movements, it'd appear a bit choppy. Cutting down some KOMA would make the movements much smoother. In terms how of many KOMAs to delete - this depends on what your desired image looks at, so tweek it to the way you want.


 【2】揺れの調整
【2】Tune up the sway motion

ワークエリアを縮めてループを確認し、削るコマ数やループそのもののコマ数など
調整していきます。
Here we will working shrinking the work area, checking the loop, deleted KOMA numbers and fine tuning the KOMAs values.

 
ワークエリア内でループ確認ができたら、表示の幅を実際使っている幅だけにします。
ここでは前後4コマずつ削ります。
Once you checked the loop inside the work area, change the display of the area to the area that you need to use.
Here I've removed 4 KOMAs  from the beginning and the end.

 
表示範囲の削り方は、端をつかんで移動させることで長さの調整ができます。
あと、矢印を移動させることで位置を変更できます。
To shrink up the display area, at each end there is a movement slider that can change the displayed length.


調整すると下図のような感じになります。(アニメの開始は0コマ、終わりは29コマ)
これで1秒のループの絵が完成です。


できたループをコピーして3つにします。
そのうちの1つにまばたきをさせ、髪やマフラーが3回揺れる間に、
1回瞬きのループ絵を作成します。

 
これは髪の1揺れに対して瞬きを1回にすると瞬きの回数が多くなり
絵が不自然になるのを防ぐために行うものです。
 
動きの作成が終わったら背景と合成し、フィルタなどをかけたら完成です。
サンプルは最終的にAdobeのAfterEffectsで合成し加工してますが、
使うツールは任意のもので構いません。
 
これでこのチュートリアルの動きは完成となります。


Aricle copyright © 2015 KAZUYA


<< 前へ
次へ >>