SDK 가져오기

업데이트： 2023/03/14

Cubism Editor에서 내보낸 임베디드용 모델 파일을 Cocos Creator 프로젝트로 가져와서 화면에 표시하기까지의 튜토리얼입니다.

준비할 것

Cocos Creator 및 Cubism SDK for Cocos Creator

Cubism SDK for Cocos Creator가 지원하는 Cocos Creator 버전은 v3.6.2 이상입니다.
v3.6.2 미만인 경우 SDK의 자산에 직렬화된 정보가 삭제될 수 있습니다.
Cocos Creator 설치에 대해서는 여기를 참조하십시오.

또한 Cubism SDK for Cocos Creator를 미리 다운로드하십시오.
여기에서는 zip 형식으로 배포하고 있습니다.
SDK는 Github에서도 공개하고 있지만 여기에는 Cubism Core 라이브러리가 포함되어 있지 않으므로 모델 임베디드 시 패키지를 사용하거나 패키지에 있는 Cubism Core 라이브러리를 같은 디렉토리에 배치하십시오.

Node.js

Cubism SDK for Cocos Creator를 사용할 때 npm 명령을 사용하여 모듈을 설치해야 합니다.
반드시 Cubism SDK for Cocos Creator와 호환되는 버전의 Node.js를 아래에서 설치하십시오.
Node.js
nvm 등 Node.js 관리 도구에서 설치한 것도 괜찮습니다.
설치와 동시에 npm을 실행할 수 있는 환경 변수를 설정합니다.

Cubism 모델 데이터

SDK에서 Live2D 모델을 처리하는 경우 편집용 .cmo3 또는 .can3 대신 임베디드용 모델로 내보내야 합니다.
임베디드용 모델을 내보내는 방법은「임베디드용 데이터」를 참조하십시오.
내보낼 데이터는 .moc3 파일, .model3.json 파일, 텍스쳐가 들어 있는 폴더입니다.
이들을 하나의 폴더에 정리해 주세요.

SDK를 프로젝트로 가져오기

• Cocos Creator의 새 프로젝트를 만듭니다.
• Cocos Creator의 새로운 프로젝트를 만드는 방법은 여기를 참조하십시오.

• Cubism SDK for Cocos Creator를 Extension에 추가합니다.
• Extension Manager를 엽니다. (Menu->Extension->Extension Manager)
• Extension Manager의 Project를 선택하고 Import Extension([+] 버튼)을 클릭합니다.
• Cubism SDK for Cocos Creator(.zip 파일)를 선택하고 엽니다.
• 가져오기가 완료되면 Cocos Creator를 닫습니다.
• ※Extension Manager를 사용하지 않고 탐색기로 프로젝트 루트에 extensions 폴더를 작성해, 거기서 zip 파일을 풀어도 문제없습니다.
• Extension 프로젝트를 빌드합니다.
• 위에서 추가한 Extension({프로젝트 루트}/extensions/{SDK 폴더})로 이동하여 명령 프롬프트 등에서 다음 명령을 실행합니다.
  • npm install
  • npm run build
• 빌드가 완료되면 프로젝트를 다시 엽니다.

모델 가져오기

Cubism Editor에서 내보낸 임베디드용 모델 모음을 폴더째로 Asset 패널로 드래그 앤 드롭합니다.

성공적으로 가져오기가 완료되면 SDK에 포함된 Cubism의 Importer가 자동으로 Prefab을 생성합니다.
※Prefab이 생성되지 않으면 model3.json 파일을 오른쪽 클릭하고 Reimport Asset을 클릭하십시오.

이 생성된 Prefab은 Live2D 모델을 Cocos Creator에서 처리할 수 있는 상태로 변환한 것입니다.
파라미터나 파츠의 표시는 이 단계에서 Hierarchy 패널로 조작이 가능한 상태가 되어 있습니다.

생성된 Prefab을 Hierarchy 패널 또는 Scene 패널에 추가하여 장면을 실행하면 모델을 배치할 수 있습니다.

Original Workflow 방식에 대하여

Original Workflow 방식으로 모델을 가져오려면 Project 창으로 드래그 앤 드롭하기 전에,
메뉴바에서 Live2D > Cubism > Original Workflow > Should Import As Original Workflow에 체크합니다.

Cubism SDK for Cocos Creator는 기본적으로 Original Workflow 방법으로 가져오기가 활성화되어 있습니다.
Original Workflow 방식을 사용하지 않는 경우 메뉴바에서 Live2D > Cubism > Original Workflow > Should Import As Original Workflow의 체크를 해제합니다.

여기에 체크가 표시된 상태에서 가져오면 생성된 Prefab에 추가로 OW 방식의 컴포넌트가 연결됩니다.