Live2D 튜토리얼 - 모델링 (1)

Posted by KimJa
2016. 1. 23. 02:24 Live2D



이제 이 개.. 를 만들어 보겠습니다.

물론 저것과 똑같이 만들지는 못할 테니 큰 기대는 안 하는 게 좋습니다.

wanko.rar

우선 첨부파일을 다운받아 편한 곳에 압축을 해제해주세요.

원본 모델에서 추출한 텍스쳐와 라이브2D에서 만든 원본 모델파일인 cmox파일, 그리고 제가 캡쳐 떠놓은 가이드 이미지가 나옵니다.

cmox파일은 모델링 과정에서 원본의 모델링은 어떻게 해놓았을까? 궁금할 때 참고하시라고 넣어뒀습니다.

그럼 우선 모델러를 켜고 bg.png 파일을 캔버스에 드래그해 끌어다 놓습니다.


그러면 이렇게 텍스쳐 파일로 사용할건지 가이드 이미지로 사용할건지 물어보는 창이 나옵니다.

텍스쳐로 사용하기 위해선 가로 세로가 2의 n승으로 되어있는 이미지 파일이 필요하기 때문에 가이드 이미지만 활성화가 되어있습니다.

OK를 눌러 이미지를 가이드 이미지로 삽입합니다.


그러면 캔버스에 반투명하게 이미지가 삽입되고 좌측에 보면 [Guide image] 파츠 하위 오브젝트로 추가가 된 것을 확인할 수 있습니다.

이제 이 이미지를 배경으로 놓고 각 부위별로 조립을 할 수 있게 되었습니다.


파츠창에서 이미지의 표시 여부와 잠금 상태를 조정가능하니 작업중에 편한대로 세팅을 바꿔가며 사용하시면 됩니다.

기본적으로 가이드 이미지는 그리는 순서(Draw Order)가 제일 높은 1000으로 설정 되어있으니 이미지 툴에서 최상위에 레이어를 배치한 것과 같습니다.

편한 작업을 위해서는 원하는 위치에 배치하고 투명도 조절 후 에 잠가놓아 클릭이 되지 않게 하는 것이 좋습니다.

가이드 이미지 배치가 끝났다면 이번엔 텍스쳐 파일인 image0.png를 캔버스에 끌어놓고 텍스쳐로 선택합니다.


텍스쳐를 선택하고 OK를 누르면 대뜸 편집창이 뜰텐데 일단은 그냥 OK를 눌러줍니다.

뭐라도 뜬걸 아무것도 안하고 넘겨버려 불안한 마음이 들겠지만 텍스쳐 목록창을 띄워보면 멀쩡하게 삽입된 모습을 확인할 수 있습니다.

이제 파츠를 준비해봅시다.


파츠창 우측 상단의 파츠 세팅을 누르면 파츠 세팅창이 나옵니다.

각 이미지가 들어갈 폴더를 미리 정리해둔다고 생각하고 파츠들을 정리하도록 하겠습니다.

개한테 없을만한 부위들(눈썹, 목 등)부터 컨트롤 + 클릭으로 일괄 선택 후 삭제 버튼을 눌러 지워버리겠습니다.

그리고 새 파츠를 눌러 새 파츠를 등록합시다.


친절하게도 무료 버전이므로 30개까지만 파츠를 사용할 수 있고 현재 11개의 파츠가 있다고 알려줍니다.

기본 파일엔 제공되지 않는 그릇 파츠를 추가합니다.

굳이 저와 똑같이 할 필요는 없으니 마음대로 하셔도 됩니다만

psd 파일을 삽입할때 몇개 없던 한글 레이어 글자가 다 깨지는걸 경험해보니 한글 사용은 추천하고 싶지않습니다.


대충 이 정도 갖추면 되는거 같습니다.

그리고 눈치가 빠른분들은 벌써 눈치 채셨겠지만 Name (Japanese) 가 실제 표시되는 부분이니 유의 하시면 되겠습니다.

프로그램은 영문으로 뜨는데 왜 일본어 표기를 보여주는지는 모르겠습니다.

OK를 눌러 파츠 편집을 종료하고 파츠별로 오브젝트를 만들어보겠습니다.


오브젝트를 만들때는 우선 오브젝트가 포함될 파츠를 선택하고 텍스쳐 편집을 눌러 만들도록 합니다.

이렇게 하면 선택한 파츠 아래에 오브젝트가 생성되기 때문에 일처리를 줄일 수 있습니다.


ㅁㄴㅇㄻㄴㅇㄻㄴㅇㄹㅇㅁㄴㄹ

편집할 텍스쳐 선택할 수 있도록 텍스쳐 리스트와 같은 창이 뜹니다.

쓸일이 생겼으니 설명하고 가겠습니다.

Select form files : 텍스쳐 '파일'을 불러와 텍스쳐 리스트에 추가합니다. Free버전에선 쓸일이 없을꺼같네요. ㄸㄹㄹ..

Preview Size : 현재 창에서 제공되는 미리보기 사이즈를 지정할 수 있습니다.

Export : 해당 텍스쳐를 파일로 내보낼 수 있습니다. 이 기능으로 원본 cmox파일에서 텍스쳐를 추출했습니다.

Replace : 해당 텍스쳐를 갱신합니다. 이 기능을 통해 이미지를 수정한 후 덮어쓸 수 있습니다.

Setting : 텍스쳐의 이름과 모델링된 캐릭터를 내보낼때 텍스쳐 출력 규칙을 정할 수 있습니다.

텍스쳐의 삭제는 텍스쳐 이름 우측의 X표시를 누르면 됩니다.

- - -

본론으로 돌아와서 우리에겐 하나뿐인 텍스쳐를 선택합니다.


처음보는 창은 아니지만 처음 사용하게 되는 폴리곤 편집창이 나타납니다.

또 각 버튼별 기능을 설명하고 가겠습니다. 단축키는 다 붙어있으니 생략하겠습니다.

Insert Point : 정점(Vertex)을 추가할 수 있습니다..

Edit Line : 정점과 정점을 연결해주는 선을 편집합니다. 3D 모델링에서 모서리(Edge)를 편집한다고 생각하면 됩니다.

Move : 이름 그대로 정점, 완성된 메쉬를 움직이거나 메쉬의 크기를 조절할 수 있습니다.

Add Point : '면'에 정점을 추가할 수 있습니다. 사실 저는 잘 이용을 안해봤네요.

Eraser : 지우개입니다. 정점을 브러쉬처럼 문질러서 지울수 있습니다.

Generate Line when Point : 이 항목이 체크되어 있다면 정점을 추가할때마다 자동으로 선을 연결해줍니다.

Divide polygon into four : 누를 때 마다 면을 자동으로 4등분 해줍니다.

Automatically generate polygon : 자동으로 폴리곤을 생성해줍니다.

Reconfigure Polygon : 폴리곤 자동 생성 기능을 사용할 때 기존의 폴리곤을 재구성할 것 인지 선택하는 항목입니다.

Maintain outer boundary : 외부 경계라인을 유지할것인지 선택하는 항목입니다.

Lock Click : 클릭 잠금을 설정합니다. 체크를 해제하면 정점 추가시 드래그가 가능해집니다.

Show Point Index : 체크하면 정점별로 인덱스를 표시합니다.

Seletion range when clicking.. : 툴이 스냅되는 범위를 조절할 수 있습니다. 저는 낮은값이 좋더군요.

폰트색이 연한 항목들은 저도 '정확히' 모르는 부분들이고, 사용을 많이 해보지 않은 기능입니다.

메뉴얼을 달달 읽어보고 한게아니라 그냥 막가져다 써보면서 터득하고 쓰는 글이니 그렇다 카더라~ 하는 정도로만 알고 계시면 될거같습니다.


다시 돌아와서 Bowl 파츠에 사용할 오브젝트를 만들어 보겠습니다.

그릇 앞면을 먼저 찍어내 보겠습니다.

예제로 올려놓은 움짤을 생각하면 그릇 부분은 딱히 '변형'이 일어나진 않는 부분입니다.

고로 만들때 별생각없이 대충찍으면 됩니다.

외곽을 따라서 스윽 폴리곤을 완성하고

Add Point 를 이용해 가운데에 점 세개정도 더 넣어주고 적당히 자리를 잡아줍니다.

Mesh를 만드는 것이기 때문에 면은 항상 삼각형을 이루게 만들어 주어야 합니다.

이 부분에 대해서는 제가 잘 설명할 자신이 없기 때문에 잘 설명된 글을 줏어왔습니다.

(출처 : http://gcland.tistory.com/140)


머리아픈 이야기는 둘째치고 오브젝트를 완성했으니 OK를 눌러줍니다.

호고곡.. 그릇이 찌그러져 있네요. 당황스런 상황입니다.

아마 이 글을 보시는분들은 높은확률로 이렇게 되셨을겁니다.

정점을 만드는 과정에서 정점 위치를 바꾼다거나 넣었다 뺀다거나 하는 경우 이렇게 오브젝트가 찌그러지게 됩니다.

물론 이럴 경우를 위한 방법이 있습니다.

오브젝트를 원래 모양으로 되돌려 주는 기능입니다. 후에 모양을 낼때도 자주 쓰이게 되죠.

maintain area는 모양만 되돌려 주고 original texture size는 텍스쳐에 있는대로 사이즈까지 돌아갑니다.

편집할땐 전자를 사용하고 처음 배치할때 가이드 이미지와 사이즈가 안맞을땐 후자를 사용합니다.

기본적으론 단축키가 안들어가 있습니다.

이렇게 단축키를 정해놓고 사용하면 매우 편리합니다.

저의 경우엔 아무래도 사이즈까지 되돌리는 기능보단 모양만 되돌리는게 더 자주쓰여 모양 되돌리기만 Shift키와 1옆의 `키를 조합해 사용합니다.


왜곡된 그릇을 원래대로 되돌렸다면 가이드 이미지에 맞춰 위치를 잡아줍니다.

이때 좌측 끝과 같이 가이드 이미지 파츠에 자물쇠를 물려 클릭이 안되게 바꾸고 작업을 진행하면 편리합니다.

위치를 잡아줄때는 포토샵처럼 화살표키를 이용해 미세 조정이 가능하니 참고하여 하시면 되겠습니다.

배치가 끝나면 Edit 창에 Name을 알아보기 편한 이름으로 정해주도록 합시다.


이제 그릇 뒷면을 뚝딱 만들어 봅시다.


헉.. 그릇 뒷면을 만들어서 붙이다보니 앞면과 겹쳐서 그려지네요.

눈치 빠른분들은 알아서 해결을 하셨겠지만 이럴때 필요한 것이 Edit창에 Draw Order 입니다.

Draw Order는 간단하게 그려지는 순서를 나타내는 값입니다. 이 값이 높을수록 앞면에 그려지게 됩니다.

Draw Order는 직접 숫자를 입력해 수정하거나 몇몇 툴에서처럼 값을 드래그 하거나 옆의 화살표를 클릭해 나오는 창을 이용하거나

캔버스 왼편의 Draw Order바를 이용하거나.. 많은 방법이 있으니 편하실대로 사용하면 됩니다.

일단은 이렇게 앞면과 1만 차이나도록 해도 문제가 해결이 될겁니다.

그릇 안에 멍멍이가 들어가 있어야 하므로 넉넉하게 뒷면의 Draw Order를 200까지 내려줍니다.


글이 길어져 멍멍이 모델링 과정은 다음 편에서 다루도록 하겠습니다.


- - -

wanko_touch.cmox 파일은 Live2D 라이브러리에서 주워 왔습니다.

http://library.live2d.com/


'Live2D' 카테고리의 다른 글

Live2D 튜토리얼 - 모델러 둘러보기  (1) 2016.01.17
Live2D 튜토리얼 - 소개  (2) 2016.01.15

Live2D 튜토리얼 - 모델러 둘러보기

Posted by KimJa
2016. 1. 17. 00:15 Live2D


- 들어가기에 앞서 이 글은 제가 맨땅에 헤딩하면서 익힌 툴의 입문자용 사용법을 그저 '한글'로 정리해본 글입니다.

코딩하는 공돌이인 글쓴이가 '취미'정도의 한도에서 접근을 했고

완벽한 설명서를 위한 게 아니라 한글로 된 튜토리얼은 보이지 않아서 써보는 글이니

부족한 내용이나 부정확한 내용이 있어도 엄격, 진지, 근엄하게 보지 않으셨으면 감사하겠습니다. -



소개편에서 Live2D와 큐비즘 에디터에 대해 간단히 소개하였으니 바로 툴을 보도록 하겠습니다..

큐비즘 에디터를 설치하셨다면 모델러, 애니메이터, 뷰어가 설치되어있는 걸 볼 수 있습니다.

다 제쳐두고 제일 중요한 모델러를 지금부터 알아볼 거예요.

_32, _64 두 가지가 있는데 각각 32비트, 64비트 버전을 말하는 것임으로 본인에게 맞는걸 선택해서 사용하시면 됩니다.

아무것도 모르겠다 싶으면 32비트 버전으로 하시면 됩니다.


일단은 켜지면 반가운 라이센스 확인 창이 뜹니다.

최하단 FREE 버전으로 시작하기 누르시면 되고.. 60일 체험하기 누르면 두 달동안은 안 뜰지 안 해봐서 모르겠습니다.

사실 매번 클릭해주는 게 좀 귀찮기는 합니다.


라이센스창을 재끼고 나면 여백의 미가 아름다운.. 모델러 창이 뜰 텐데요.

부위별로 뭐하는 놈들 인지 둘러보도록 하죠.


1. 메뉴바 : 컴퓨터를 쓰다보면 지겹도록 보는 메뉴바입니다. File을 누르면 새로만들기와 저장 등 을 할 수 있고.. 블라블라..

열어보고 딱 한눈에 들어오는 기능들 제외하고는 대부분은 일단 지금 몰라도 됩니다. 저도 다알고 있지는 않음.

2. Parts창 : 파트별로 '그릴 수 있는 오브젝트(Drawable Object)' 와 '변형틀(Deformer)'를 표시해주는 창입니다.

포토샵같은 그래픽툴에서 그룹으로 레이어 폴더 묶어놓는것과 비슷합니다.

앞으로는 제 편의상 Drawable Object -> 오브젝트, Deformer -> 디포머라고 쓰겠습니다.

3. Deformer창 : 파트창에서 파트별로 관리한 오브젝트와 디포머를 상속 구조로 관리할 수 있는 창입니다.

추후에 자세히 설명하겠습니다. 뒤로 보이는 로그창은 신경 안써도 됩니다.

4. Parameters창 : 모델러의 꽃인 파라메터를 조절할 수 있는 창입니다. 제일 많이 쓰게 될 부분입니다.

파라메터는 Live2D 모든 툴에서 볼 수 있는 중요한놈입니다.

5. Edit창 : 오브젝트와 디포머의 속성을 편집할 수 있는 창입니다. 오브젝트와 디포머가 포함되어 있는 파트와 디포머,

ID와 이름 클리핑 마스크, 그려지는 순서(Draw Order), 투명도(Opacity)를 수정할 수 있습니다.

6. Draw Order바 : 작업중에 Draw Order를 한눈에 비교해 볼 수 있게 해주는 녀석입니다.

파트나 디포머, 오브젝트를 선택하면 현재 선택되어있는 것의 Draw Order를 표시해줍니다.

파트나 디포머를 선택한 경우에는 하위에 포함된 오브젝트의 Draw Order를 보여줍니다.


1. Texture List : Live2D에서는 그림을 3D Mesh화 시키기 때문에 부위별로 조각내 놓은 그림을 텍스쳐라고 합니다.

텍스쳐의 목록을 볼 수 있습니다.

2. Edit Texture : 해당 파트에 새로운 오브젝트를 생성하거나 이미 만들어둔 오브젝트의 Mesh를 수정할 때 사용합니다.

오브젝트를 더블 클릭해도 같은 기능을 합니다.

기본 단축키는 Ctrl + T 입니다.

3. Create Deformer : 디포머를 생성합니다. 회전 디포머 표면 디포머 두가지를 선택할 수 있으며, 차후에 사용할 때 설명드리겠습니다.

기본 단축키는 Ctrl + G 입니다.

4. Edit Drawable Object : 오브젝트를 수정할 수 있는 도구입니다. 오브젝트를 선택하거나 Vertex를 수정할때 쓰입니다.

기본 단축키는 A 입니다.

5. Edit DeFormer : 디포머를 수정할 수 있는 도구입니다. 디포머를 선택하고 수정하는 작업은 이 도구만 가능합니다.

기본 단축키는 G 입니다.

6. Lasso Select : 아이콘부터 익숙한 올가미 도구입니다 Vertex들을 올가미 도구로 스윽 선택 할 수 있습니다.

기본 단축키는 S 입니다.

7. Soft Selection : Sai에서 선택 브러쉬 같은 도구입니다. 슥슥 문지르면 Vertex들이 선택 됩니다.

8. Deform Path : 오브젝트에 Path를 박아서 모양을 변형시킬 수 있습니다. 머리카락 움직임을 만들때 유용합니다.

기본 단축키는 E 입니다.


 캔버스 하단 도구들입니다. 써놓은 그대로입니다.

배경색은 네모칸을 더블 클릭하면 수정가능합니다.

우측에 괄호 쳐진 숫자들은 캔버스 좌상단(↖)을 기준으로 한 마우스 좌표입니다.



대충 이정도면 설명충의 시간은 끝난거같고..



다음번엔 이거 만드는걸 들고올께얌..


'Live2D' 카테고리의 다른 글

Live2D 튜토리얼 - 모델링 (1)  (2) 2016.01.23
Live2D 튜토리얼 - 소개  (2) 2016.01.15

Live2D 튜토리얼 - 소개

Posted by KimJa
2016. 1. 15. 03:17 Live2D




공허한 블로그에 뭐라도 채워보려고 이번에 맨땅에 헤딩한 Live2D 튜토리얼을 써볼꺼에양!

우선 공식 홈페이지 설명을 보자.

http://www.live2d.com/en/about/whats_live2d

그냥 대충 보면 알겠지만 '3D'모델링같은거 안하고 그린 그림으로 캐릭터 애니메이션을 만들수 있는 툴입니다.

사실 비슷하게 버텍스 찍어서 폴리곤 만드는 모델링 작업이 필요하다 ㅡㅡ.

비슷한 툴로는 E-mote랑 본(뼈대) 애니메이션을 사용하는 Spine2D가 있는데 그냥 스윽 봤을땐 Spine2D가 툴이 제일 잘 되있는거 같습니다.

저어는 둘다 만져볼 생각없으니 Live2D에 대해 써보겠습니다..

간단하게 Live2D에 대해 설명해보자면 2D 일러스트를 평면 3D Mesh로 만들어서 Vertex Animation으로 움직이게 만드는게 Live2D라는 물건입니다.


버텍스 애니메이션이 어려운 이야기 처럼 들리지만 간단하게 놓고보자면 간단하게 볼 수 있습니다.

예시로 제가 한 것을 보면 부분별로  조각낸 그림에 점(Vertex)을 박아 넣고 그걸 잡아당겨 움직임을 구현하는 겁니다.


Cubism Editor

Live2D 컨텐츠 제작에는 전용 툴인 Cubism Editor를 사용합니다.

↓ 영문으로 된 공식 홈페이지 설명 ↓

http://www.live2d.com/en/products/cubism_editor

캐릭터를 제작하는 모델러와 모션을 만드는 애니메이터 두 가지를 합쳐서 Cubism Editor 라고 부르네요.

큐비즘 에디터로 캐릭터와 애니메이션을 만들어서 SDK를 이용해 게임에 넣을 수도 있고 애니메이션 제작에 사용할 수도 있고

유료인 PRO 버전과 무료인 FREE버전 두 가지를 제공하고 있고 두 버전에 대한 비교는 공식 홈페이지에서 확인할 수 있습니다.

http://www.live2d.com/en/download/comparison

무료 버전으로 만들면서 가장 와 닿을 수 있는 부분만 집어보자면 캐릭터 모델 하나에 2048 x 2048 텍스쳐 1장 제한, 오브젝트 100개 제한인데

옷 여러 벌 만들고 할 거 아니면 그냥저냥 하나 만들 수 있는 거 같다.

상업용 라이선스에 관해서는 알아본 적이 없으니 여기 말고 딴데서 보면 됩니다.

툴의 권장 사양은 이렇게 된다.

거창하지만 Free라이선스 제한 안에서 하려면 대부분의 컴퓨터에서 그냥 무난하게 될 거 같아요.

윈도 버전 특이사항으로는 애니메이터에서 작업한 결과물을 동영상으로 뽑아내려면 퀵타임 플레이어가 설치되어 있어야 한답니다.

(OSX는 안 써봐서 몰라요..)

↓ 큐비즘 에디터 다운로드 ↓

http://sites.cybernoids.jp/cubism-editor2_e/download

사용하시는 OS에 맞게 설치를 해주시면 됩니다.





'Live2D' 카테고리의 다른 글

Live2D 튜토리얼 - 모델링 (1)  (2) 2016.01.23
Live2D 튜토리얼 - 모델러 둘러보기  (1) 2016.01.17