머리카락이나 옷의 「흔들림」의 움직임을 표현

대응 버전 : Cubism 2.0 이상
(설명에서는 Cubism Editor 2.0를 사용하고 있기 때문에 최신 버전 소프트웨어와 외형, 조작이 약간 다를 수 있습니다.)






튜토리얼 작성자 : KAZUYA (URL: http://design-illust.blog.jp)

영상 관련 디자이너.
「Live2D Creative Award 2014」에서 파이널리스트.





여기에서는 바람이 불었을 때 머리카락이나 옷의 흔들림을 설명합니다.

루프에서의 사용을 고려했으므로 계속 바람이 불고있는 씬이나
응용 방법에 따라 바닷속의 씬 등에 사용할 수 있을 것 같습니다.

 
-목차
단계 1 : 흔들림을 넣을 소재의 준비
단계 2 : 변형 패스에서의 흔들림 만들기 [머리카락, 머플러]
단계 3 : 곡면 디포머에서의 흔들림 만들기 [옷, 스커트]
단계 4 : 애니메이터에서 루프하는 흔들림을 조정


이 튜토리얼에서 만들어진 파일의 샘플은, 아래 버튼에서 다운로드 할 수 있습니다. 
다운로드 했을 때는 아래의 [이 데이터의 이용 조건]에 동의 한 것으로 간주합니다.

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


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


【이 데이터의 이용 조건】
● 상업적 이용 : NG. 할 수 없습니다.
● 재배포 : :NG. 할 수 없습니다.
● 변형:개인적 이용, 테스트 용도만 OK입니다.

Article & data, Copyright © 2015 KAZUYA





    단계 1 : 흔들림을 넣을 소재의 준비

【1】생각해서 그리기와 파츠 분리

바람이 부는 방향을 결정해서 그림을 그립니다.
바람의 세기에 따라 다르지만, 바람이 부는 방향을 정하면 그에 따라 그림을 그려갑니다.
이번 샘플은 왼쪽에서 오른쪽으로 인식하고 있습니다.



TIPS
머리카락의 곡선

머리카락의 곡선은 너무 심하지 않는 편이
다음 과정에서 컨트롤하기 쉽습니다.
곡선이 심하면 흔들렸을 때에
자연스러운 움직임을 만들기 어려워집니다.

파츠 분리와 덧그리기

그림을 그렸으면 파츠를 분리해서
머리카 흩날렸을 때 보일 부분도 고려해 덧그립니다.
이 작업은 움직임을 만들면서 나중에 보충하는 경우도 있습니다.
(앞의 파란 머리카락 부분이 움직인다고 가정하고
뒤의 머리카락이나 옷도 그려둔다)
   


스커트와 다리의 겹치기 순서

스커트 등은 앞면과 뒷면으로
다리를 감싸듯이 이미지를 분리해둡니다.
이것은 스커트가 흔들릴 때에
앞면도 뒷면도 보이는 범위가 변하기 때문에
만들 필요가 있기 때문입니다.
   

그려서 나눈 파츠는 이런 식으로 됩니다.
움직이는 부분은 「머리카락」「머플러」「스커트」「눈의 깜빡임」입니다.




    단계 2 : 변형 패스에서의 흔들림 만들기 [머리카락, 머플러]

그러면, 만든 소재로 머리카락이나 머플러 등의 움직임에 효과적인 「변형 패스」를 사용해서
머리카락 흔들림의 루프를 만들어갑니다.

【1】패스를 만든다

우선 머리카락의 움직임을 넣기 위해 축이 될 패스를 만드는 작업입니다.
움직이고 싶은 ①오브젝트를 선택, ②변형 패스 아이콘을 클릭한 다음
③머리카락의 흐름에 따라 변형 패스를 만듭니다. 패스는 머리카락의 곡선이 생기는 부분에 맞춰 포인트를 만들도록 합니다.


※ 변형 패스의 기본 조작 방법은 아래 주소의 튜토리얼에서도 확인할 수 있습니다.



【2】머리카락에 움직임을 넣는다

다음으로 만든 변형 패스에 맞게 머리카락의 움직임을 만들어가는 작업에 들어갑니다. 
①변형 패스와 오브젝트를 모두 선택한 상태에서 ②움직이고 싶은 부분의 파라미터 설정을 클릭합니다. 
③ 파라미터의 점 갯수는 정해져 있지 않지만 여기에서는 5개를 만듭니다. 
점은 막대를 클릭하여 만들 수 있습니다.




파라미터를 만들었으면, 다음은 그 파라미터의 점에 맞게 머리카락에 움직임을 넣습니다.
루프의 움직임을 만들려면 맨 처음과 맨 끝의 그림이 같아야하므로 점의 양 끝 부분은 움직이지 않습니다.
이번은 중간의 3점을 이용해 머리카락을 움직입니다.
(오른쪽 그림의 빨간 테두리 부분이 움직이지 않는 점입니다.)
    


【3】패스 움직이는 방법

패스를 움직이는 방법은
①파라미터 안의 「머리흔들림 뒤」등의 움직이고 싶은 점에 커서를 맞추고 오른쪽 클릭,
그 다음 ②패스의 포인트를 클릭한 채로 이동하면, 움직임을 설정할 수 있습니다.
빨간 테두리 가운데의 3점을 순서대로 선택해서 머리카락 움직임을 만들어갑시다.


위에서 만든 3점의 머리카락 움직임을 GIF 동영상으로 확인하면 이런 느낌이 됩니다.
http://www.cynos.jp/tutorials/kazuya/02-5_GIF01.gif

바람은 눈에 보이지 않지만 알기 쉽게 하기위해 파란 동그라미를 넣어 보았습니다.
실제로 존재하는 물체가 지나가서 머리카락이 움직이는 것이라고 생각하면 움직임을 만들기 쉽습니다.




같은 원리로 앞머리나 머플러 등도 만듭니다.
원리는 같으므로 설명은 생략합니다만,
근원은 머리카락이 생겨나는 것을 생각하고
가마에서부터 머리 끝을 향해 패스를 만들면 좋습니다.
   

TIPS : 머리카락이나 머플러의 근원은 움직이지 않는다
기본적으로 머리카락과 머플러의 근원은 고정되어 있을 것이므로 움직이지는 않습니다. 

TIPS : 바람 표현의 요령

바람은 눈에 보이지 않지만, 실제로 불어오는 방향에서 물체로써 통과하고 있는 걸 생각하고 머리카락에 움직임을 넣으면 좋을 것입니다.




    단계 3 : 곡면 디포머에서의 흔들림 만들기 [옷, 스커트]

여기에서는 의복 등의 흔들림에 효과적인
곡면 디포머를 사용한 흔들림의 루프를 설명합니다.

 【1】곡면 디포머 만들기
 
①움직이고 싶은 오브젝트를 선택하고 ②「디포머 작성」버튼을 누릅니다.



①이름은 임의로 지어주십시오.
②곡면을 선택, ②분할 수는 정해져있지 않지만 여기에선 5×5로 합니다.




디포머를 만들었으면 Ctrl키를 누르면서 빨간 테두리를 움직여, 디포머 형태를 스커트의 각도나 크기에 맞춥니다.
각도나 크기를 맞추면 옷의 형태를 살린 움직임이 만들어진다고 생각합니다.




 【2】곡면 디포머에 파라미터를 설정

이어서, 만든 곡면 디포머에 파라미터를 설정합니다.
기본값에는 없는 스커트 등 새로운 파라미터를 추가하려면
파라미터 패널에 있는 ①「파라미터 설정」을 클릭하고
②「새 값」을 클릭, ③새 파라미터를 만들어야 합니다.



새 파라미터를 만들었으면 패스와 마찬가지로,
파라미터 점의 양 끝은 움직이지 않고 왼쪽부터 오른쪽으로 바람을 의식해서
곡면 디포머의 포인터를 움직입니다. 패스가 선으로 움직이는 반면,
곡면 디포머는 면으로써 의식하면서 움직임을 만들면 좋습니다.



만든 스커트의 움직임을 GIF 동영상에서 확인하면 이런 느낌입니다.
http://www.cynos.jp/tutorials/kazuya/03-7_GIF01.gif


TIPS : 스커트의 흔들림을 만드는 방법
스커트의 흔들림은 머리카락과 마찬가지로 바람의 흐름을 의식하는 것에 더해, 바람에 의해 부풀어 오르는 느낌을 내는 것이 좋습니다.
 
곡면 디포머의 사용 방법은 이쪽에서도 확인할 수 있습니다.

이제 흔들림의 움직임에 대한 설명은 끝이지만, 이외에도 눈의 깜빡임 등 필요한 경우에 다른 움직임도 만들어둡시다.



    단계 4 : 애니메이터에서 루프하는 흔들림을 조정

마지막으로 애니메이터에서 흔들림이 가능한 자연스럽게 보이기 위한 조정을 합니다.
루프 만드는 방법에 따라 움직임에 이상한 리듬이 만들어지기 때문에, 여기의 조정 여하에 따라 완화시킬 수 있습니다.

 【1】애니메이터를 사용해보자
모델러에서 설정한 파일을 애니메이터에서 불러와서,
타임 라인의 「Live2D파라미터」에서
만든 머리카락이나 머플러 등에 -1~1 사이의 수치를 입력해 움직입니다.
 
여기에서는 예시로써 0~29프레임을 사용해 1초의 움직임을 만들지만
이 다음의 과정에서 앞뒤 합쳐서 8프레임 정도 감소하므로 0~29프레임+8프레임의 합계
0~37프레임(1초 7프레임)을 사용한 머리카락의 루프를 만듭니다.
 
흔들림 시작은 ①0프레임에서 -1, 흔들림의 끝은 ②1초 7프레임에서 1을 설정합니다.


※ 
이 샘플에서는 머플러의 흔들림만 수치가 반대로 되어 있습니다. 
이유는 전체가 너무 같은 움직임이면 반대에 부자연스럽게 보이기 때문에, 굳이 움직임을 반대로 하고 있습니다.

애니메이터의 사용법은 이쪽에서도 확인할 수 있습니다. 
http://sites.cybernoids.jp/cubism2/beginner-tutorial/06
 

아래 그림에서는 머리카락, 머플러, 스커트에 흔들리는 움직임이 적용되어 있습니다.



애니메이션의 기본은 이걸로 완성이지만, 이것 뿐이면 루프를 재생했을 때 각진 움직임이 되므로 전후의 몇 프레임을 없애서 자연스러운 움직임으로 합니다.
여기에선 앞뒤로 각 4프레임(합계 8프레임) 줄이고 있지만
줄이는 수는 경우에 따라 다르므로 나름대로 조정해봅시다.


 【2】흔들림 조정

작업 영역을 줄여서 루프를 확인하고, 줄인 프레임 수나 루프 자체의 프레임 수 등
조정해 갑니다.


 
작업 영역에서 루프를 확인했으면 표시 폭을 실제 사용하고 있는 폭만큼 합니다.
여기에서는 앞뒤 4프레임씩 없애고 있습니다.

 
표시 범위를 줄이는 방법은 모서리를 잡고 이동하면 길이 조정을 할 수 있습니다.
그 다음, 화살표를 이동시켜 위치를 변경할 수 있습니다.


조정하면 아래와 같은 느낌이 됩니다.(애니메이션 시작은 0프레임, 끝은 29프레임)
이것으로 1초 루프 그림이 완성됩니다.


완성된 루프를 복사해 3개로 만듭니다.
그 중 1개에 눈 깜빡임을 넣어, 머리나 머플러가 3번 흩날렸을 때
1번 눈을 깜빡이는 루프 그림을 만듭니다.

 
이것은 머리카락이 한 번 흩날릴 때마다 눈을 깜빡이면 깜빡이는 횟수가 많아져서
그림이 부자연스러워 지는 것을 막기위한 것입니다.

움직임 만들기가 끝났으면 배경과 합성해 필터 등을 넣으면 완성입니다.
샘플은 최종적으로 Adobe의 AfterEffects에서 합성해 가공하고 있지만
사용하는 도구는 어떤 것이라도 상관 없습니다.

이것으로 이 튜토리얼의 움직임은 완성입니다.


Aricle copyright © 2015 KAZUYA


<< 前へ
次へ >>