Live2D로 드래곤을 움직이기

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






튜토리얼 작성자  : のしぷ (URL: http://noshipu.hateblo.jp/)

칸사이에 살고있는 게임 프로그래머.
스마트폰 게임 【うたってベルツノさん】의 제작자





Live2D라고 하면 미소녀를 움직이는 도구로 생각하기 쉽지만 사실은 뭐든지 움직일 수 있습니다.

몬스터도, 이펙트도, 배경이라도, 2D그림으로 3D적인 풍부한 표현을 만들 수 있습니다.
시험 삼아 이번에는 드래곤을 만들어 보았습니다.

다음은 튜토리얼입니다.



    단계 1. 기초 준비

【1】러프 스케치와 움직임의 이미지 만들기

먼저 캐릭터의 러프를 그립니다.



TIPS : 움직임의 이미지를 생각해둔다
이 시점부터 움직이고 싶은 파츠를 이미지 해두면 나중에 할 레이어 분리 작업이나 움직임을 만들 때 편해집니다!





【2】레이어 분리

하나의 그림을 그려나갈 때, 또는 1개의 그림을 끝낸 다음부터도 좋으므로 파츠별로 레이어를 나눠갑시다.
PSD 가져오기 기능을 사용해 가져올 때, PSD파일의 1레이어 = Live2D의 1 오브젝트가 되므로
그런 감각으로 움직이고 싶은 파츠를 분리해갑시다.

드래곤의 레이어 분리는 이런 느낌으로 (폴더는 없어도 괜찮습니다)

TIPS : 덧그리기는 지금 시점에
가동 범위를 고려해 관절 부분이나 눈의 뒷면 등의 움직일 때 필요한 부분을 미리 덧그립시다.
이후의 수정은 나름대로 시간이 걸려버립니다.

TIPS : 그림자나 광원을 움직여서 보다 풍부한 표현 만들기
이번 드래곤은 배의 그림자와 목의 그림자를 다른 오브젝트로 분리했습니다.
별개로 제어하면 보다 리얼한 움직임에 가까워질 수 있습니다.
※ 그림자 레이어에 대해
이번 드래곤은 곱하기 레이어를 사용해 그림자를 채색했지만
Live2D에서 곱하기 레이어는 아직 안정되지 않은 기능(2014/2/16)이기 때문에
이번에는 이미지의 투명도를 지정하는 방식으로 대응하고 있습니다.


준비 완료!




    단계 2. Cubism Modeler에서 움직임을 만들자

【1】PSD 가져오기

Live2D Cubism Modeler을 시작하고 [파일]->[PSD파일 가져오기]를 선택.


가져온 후, 그림자의 불투명도를 설정합시다.



【2】파츠를 나누자

오브젝트를 관리하기 쉽도록 Cubism Modeler에서 파츠를 나눠봅시다.
사람 이외를 만들 때는 기본 파츠 설정과는 달라지는 경우가 많기 때문에 직접 파츠 설정을 만듭니다.
[모델]->[파츠 설정]에서 변경할 수 있습니다.

드래곤의 경우는 이런 느낌으로


TIPS : 오브젝트 이름을 바꿔두자
PSD 레이어 이름이 오브젝트 이름이 되어 있으므로, 수정하고 싶으면 여기에서 수정해 둡시다.



【3】디포머 설정

준비한 파츠를 간단하게 움직일 수 있도록 설정합니다.

☆ 움직임의 종류는 3종류
 회전 디포머  곡면 디포머  폴리곤 직접 지정
 간접 레벨에서 움직이거나, 변형하지 않고 이동만 하는 것에 사용  변형하는 파츠 전반에 사용
Live2D의 독특한 표현은 이것으로 만들어지는 경우가 많다
 섬세한 움직임을 만들 때나, 섬세한 파츠에 사용.
눈 부분 등에 사용한다.
 
 
 

TIPS : 부모자식 관계
Live2D 공부를 시작하면 조금 헷갈리기 쉬운 부모자식 관계이지만 같이 움직이는 파츠라는 인식으로 OK입니다.
「목이 움직이면 머리나 눈도 같이 움직여야하니까 목의 자식이구나~」같은 느낌으로 부모자식 관계를 만듭시다.

TIPS : 잠금 기능
실수로 파츠를 움직일 때가 가끔 있으므로 잠금 기능을 사용해 수정할 파츠만 잠금 해제 해두면 편리합니다.



【4】파라미터 설정

파라미터에 따른 움직임을 디포머나 불투명도 등으로 설정합니다.

(예시)
 얼굴・왼쪽 향함  얼굴・정면 향함
           
 
 

TIPS : 폴리곤 분할로 미세 조정
PSD 읽어오기로 가져온 경우엔 폴리곤이 자동적으로 할당되지만, 움직이는 동안에 선이 거칠어지거나
좀 더 세밀하게 움직이고 싶을 때는 텍스쳐 편집에서 폴리곤 갯수를 늘리면 대응할 수 있습니다.


TIPS : 폴리곤 직접 움직이기
디포머 조정으로 대부분 할 수 있지만, 특정 부분을 미세하게 수정하고 싶은 때 등은
그리기 오브젝트의 폴리곤에 파라미터를 설정해서 세밀한 움직임을 만들 수 있습니다.


TIPS : 파라미터의 점은 너무 많이 설정하지 않는 것을 권장
기본적으로는 3점 이상의 점을 넣지 않는 것을 추천합니다. 생각한 대로의 외관은 나오지만
중간 부분의 모션이 어색해지거나 하고, 나중의 조정이나 관리가 상당히 귀찮아집니다.



    단계 3. Cubism Animator에서 모션 만들기

모델링을 만드는 단계에서 SDK에서 파라미터를 제어하는 것도 가능하지만
프로그램적이고 기계적이지 않은 모션을 만든다면 Cubism Animator으로 모션을 만드는 편이 좋습니다.

【1】cmoc 파일 읽어오기

단계 2 에서 만든 모델을 저장하면 cmoc파일로 내보내기 됩니다.
그 파일을 Live2D  Cubism Animator에 드래그&드롭하면 Animator로 불러올 수 있습니다.


【2】모션 만들기

애니메이션 작성은 타임라인에 Modeler에서 설정한 파라미터 키를 사용해 만듭니다.

TIPS : 커브를 사용
애니메이션 커브가 매우 편리하므로 사용해봅시다.


TIPS : 원 포인트 악센트
불을 뿜는 모션에 불꽃을 넣지 않았기 때문에 이번은 얼른 png 이미지를 준비해 Animator에서 제어합니다.
더 연출에 신경쓰고 싶을 때는 불꽃도 Cubism Modeler에서 만들어두면 좋을지도 모릅니다.



【3】애니메이션 내보내기

내보내기하면 Live2D SDK에서 취급할 수 있게되어 다양한 플랫폼에서 표현할 수 있게됩니다.




이상, 튜토리얼입니다.

Live2D에서는 몬스터나 배경 등도 풍부한 표현으로 움직일 수 있다는 것을 전할 수 있다면 좋겠습니다!

감사합니다.

Aricle copyright © 2015 noshipu


<< 前へ
次へ >>