샘플 프로젝트에 모델 추가

최종 업데이트[2019/09/04]

 

이 페이지에서는 Live2D Cubism SDK for Native 샘플에 Live2D Cubism 모델을 추가하기 전까지의 단계를 설명합니다.
샘플은 미리 「샘플 빌드」를 참고로 빌드해 둡니다.

 

Editor, Cubism Viewer (for OW) 준비

모델을 프로젝트에 추가할 때 다양한 데이터 처리가 필요합니다.
Editor를 준비합니다. 설치하면 이번에 사용하는 「Cubism Viewer (for OW)」도 설치됩니다.

「Cubism Editor」

 

모델 준비

먼저 추가할 모델을 준비합니다.
이 튜토리얼에서는 샘플 모델의 「미아라」를 샘플 프로젝트에 추가합니다.

추가할 때에 샘플 프로그램에 맞춘 모델의 가공도 동시에 실시합니다.

 

당 판정 추가

샘플 프로그램에는 다음과 같은 요소가 있습니다.
・모델에서 「Head」라고 설정된 범위를 클릭하면 표정을 바꾼다
・모델에서 「Body」라고 설정된 범위를 클릭하면 랜덤으로 모션을 재생한다
샘플의 미아라에는 이들이 존재하지 않기 때문에, 머리와 몸통의 당 판정을 추가합니다.
Editor측에서의 조작은 「당 판정 설정 준비」를 확인해 주십시오.

다음과 같이, 당 판정용의 아트 메쉬를 2개 추가합니다.

1. 당 판정

2. 당 판정 2

 

유저 데이터 추가

Cocos2d-x를 사용한 샘플 프로그램에는 당 판정 외에, 유저 데이터의 영역을 표시하는 기능이 있습니다.
이번에는 유저 데이터를 추가하고 이 기능을 사용합니다.
유저 데이터를 설정하는 아트 메쉬를 만들고 다음과 같이 설정합니다.
유저 데이터 추가에 대한 자세한 내용은 「유저 데이터」를 확인하십시오.


요정의 빛 이펙트 부분에 'Wisp'라는 유저 데이터를 붙였습니다.

 

파라미터 설정 추가

미아라의 모델 데이터에는 눈 깜빡임용이나 립싱크용의 파라미터도 지정되어 있지 않습니다. 이들도 Editor에서 설정을 추가합니다.
설정 방법은 「눈 깜빡임 설정」을 확인해 주십시오.

이번에는 이하와 같은 설정을 실시했습니다.

 

 

 

표정용 모션 추가

미아라에는 보행과 액션 모션이 있지만, 표정용 모션이 없기 때문에 추가하겠습니다.
표정용 모션의 작성은 이하를 참고해 주세요. 3.1에서도 거의 같은 작업이 됩니다.

「Animator로 표정 만들기」

이번에는 아래의 3가지와 같은 표정을 추가했습니다.

happy normal sad

 

Cubism Viewer (for OW)로 작업

Framework에서 사용할 수 있는 모델의 데이터는 Editor뿐만 아니라 Cubism Viewer(for OW)로 작성하는 것도 있습니다.

 

HitArea 설정

Editor에서 아트 메쉬에 HitArea를 정의한 것만으로는 응용 프로그램 측에서 인식 할 수 없습니다.
응용 프로그램이 인식하도록 .model3.json 파일에 정보를 추가합니다.
Cubism Viewer (for OW) 기능을 사용하여이 정보를 자동으로 입력할 수 있습니다.

 

 

포즈 파일 추가

포즈 기능의 설정은 Cubism Viewer (for OW)에서 실시합니다.
포즈 기능에 대해서는 「포즈에 대해」「포즈의 설정」을 확인해 주십시오.
이번 모델에서는 전환하는 파츠가 없으므로 설정하지 않습니다.

 

표정 변환, 등록

방금 Animator로 만든 표정용 모션은 그대로는 표정 파일로 사용할 수 없습니다.
Cubism Viewer (for OW)에서 .exp3.json 파일로 변환해야 합니다.
표정용 파일을 만들려면 다음을 참고하십시오. 3.1 이후 버전에서도 거의 같은 작업이 됩니다.

「표정의 설정과 내보내기」

이번에는 양눈의 개폐를 곱셈 모드로 변경하고 있습니다.

 

모션 등록

모션 파일은 모델에 대해 프로그램에서 사용법을 등록합니다.
Cubism Viewer (for OW)에서 모션을 등록하는 방법에 대한 자세한 내용은 「모션 설정」을 참조하십시오.

이번 등록에서는 그룹 설정을 Scene1.motion3.json을 Idle,
Scene2.motion3.json과 Scene3.motion3.json을 TapBody라고 합니다.
다른 설정은 기본값으로 유지됩니다.

 

최종 모델 파일 출력

각 설정이 끝나면 모델 설정(.model3.json 파일)을 내보냅니다.
이때 저장되지 않은 .exp3.json이나 .pose3.json 파일 등은 동시에 내보내집니다.
자세한 내보내기 방법은 「모델 설정 파일 내보내기」를 확인하십시오.

샘플 프로그램 사양에 따라 파일 이름은 내보낼 폴더 이름과 동일해야 합니다.
이것은 폴더명의 캐릭터 라인으로 지정해, 폴더명.model3.json 파일을 읽어들이는 사양에 맞추어의 설정입니다.

 

내보내면 위와 같은 파일이 출력됩니다.

 

JSON의 내용보기

프로그램으로 옮기기 전에 model3.json 파일을 들여다 보자.
miara.model3.json을 텍스트 편집기에서 열면 아래 코드를 볼 수 있습니다.

설정은 모두 Json 형식으로 출력되며 각 설정의 서식을 지키면 텍스트 편집기로 작성 및 편집할 수 있습니다.
각 Json의 사양은 Github의 「CubismSpecs」에서 확인할 수 있습니다.

 

 

프로그램측 변경

먼저 완성된 모델의 폴더를 리소스 폴더에 추가합니다.

Cocos2d-x 샘플에 추가하는 경우
[루트]SamplesCocos2d-xDemoResources 폴더로

OpenGL 샘플에 추가하는 경우
[루트]SamplesOpenGLDemoResources 폴더로

추가하십시오.

그런 다음 LAppDefine.cpp의 ModelDir에 'miara' 문자열을 추가합니다.

이것으로 모델 추가 작업이 종료됩니다.
빌드하고 실행해 봅시다. 화면 오른쪽 상단의 톱니바퀴 아이콘을 ModelDir[]에 맞춘 횟수만큼 누르면 미아라가 화면 중앙에 나옵니다.

 

 

데이터 확인

Cocos2d-x 프로젝트라면 당 판정, Userdata의 범위를 시각화할 수 있습니다.

정말로 각종 데이터가 로드되고 있는지 확인해 봅시다.

먼저 LAppDefine.cpp의 DebugDrawRectEnable을 true로 변경합니다.

이 코드에서는, 당 판정과 유저 데이터가 있는 아트 메쉬의 범위가 표시되게 됩니다.

빨간색이 HitArea이고 파란색이 유저 데이터가 있는 범위입니다.

 

실제로 들어있는 정보는 맞습니까?
디버그 출력을 추가하고 확인해 봅시다.
LAppModel.cpp에 있는 LAppModel::GetUserDataAreas 함수에 다음과 같이 추가합니다.

범위 표시가 활성화된 상태에서 실행하면 VisualStudio의 출력 창에 유저 데이터의 내용이 출력됩니다.

 

 

CubismLogInfo는 디버그 출력용 매크로로 내부의 움직임을 꺼내 조사할 수 있습니다.

© 2010 - 2022 Live2D Inc.