웹 샘플 빌드

[마지막 갱신일: 2020/01/30]

이 페이지에서는 Windows에서 Live2D Cubism SDK for Web과 함께 제공되는 TypeScript 샘플 프로젝트를 Visual Studio Code로 컴파일하기 전까지의 단계를 설명합니다.

※기사의 내용은 Cubism 4 SDK for Web R1을 사용한 것입니다.
Cubism SDK 버전에 따라 방법과 절차가 다를 수 있습니다. 

필요한 것

Live2D Cubism SDK for Web

SDK 본체입니다. 「공식 다운로드 페이지」에서 다운로드합니다.

Node.js

JavaScript 실행 환경입니다.

Visual Studio Code

이번에 사용하는 개발 환경입니다. 언어는 TypeScript를 사용합니다.

 

설치 작업

1. Visual Studio Code

Visual Studio Code를 설치하고 시작한 후 Cubism SDK for Web의 최상위 폴더를 열고 확장 프로그램으로 다음을 설치합니다.

・Debugger for Chrome

개발용 도구입니다.
Google Chrome에서 실행을 확인하는 데 사용합니다.

 

확장 프로그램 검색 창에 「@recommended 」를 입력하면 표시됩니다.

설치가 완료되면 확장 프로그램을 사용하도록 편집기를 다시 시작합니다.

 

2. Node.js

빌드에 필요한 각 패키지의 관리, JavaScript 실행 환경으로 Node.js를 설치합니다.
공식 사이트에 있는 설치 프로그램을 사용하여 설치합니다.
설치가 완료되면 명령 프롬프트를 열고

를 입력하여 npm 명령을 사용할 수 있는지 확인합니다.
버전 정보가 출력되면 성공입니다.

 

3. WebPack 등 빌드 및 실행에 필요한 각 패키지

Webpack Dev Server 배포, TypeScript, JavaScript 종속성 등을 해결하기 위해 필요한 패키지를 설치합니다.

Cubism SDK for Web 폴더를 연 Visual Studio Code에서 「ctrl+shift+P」를 눌러 「Tasks: Run Task」에서 「npm: install - Samples/TypeScript/Demo」를 선택하여 설치할 수 있습니다.

 

 

빌드

빌드를 실행할 때 Visual Studio Code에서 Cubism SDK for Web의 최상위 디렉토리를 열고

메뉴 바에서 Terminal > Run Build Task...  또는 「ctrl+shift+B」로 빌드 작업 목록이 표시되므로 「npm: build - Samples/TypeScript/Demo」 등을 선택하여 빌드를 실행합니다.

 

빌드 완료 후, Samples/TypeScript/Demo 폴더 내에 dist 폴더가 작성되어 안에 JavaScript 파일(bundle.js)이 출력됩니다.

 

실행

빌드가 성공적으로 완료되면 다음 단계를 수행합니다.

실행을 확인하려면 Cubism SDK for Web 폴더를 연 Visual Studio Code에서 「ctrl+shift+P」를 눌러 「Tasks: Run Task」에서 「npm: serve - Samples/TypeScript/Demo」를 선택하면
간단한 로컬 서버가 시작됩니다.

로컬 서버가 시작된 상태에서 F5 키를 누르거나 메뉴 바에서 Debug > Start Debugging을 선택하여 Debugger for Chrome을 시작하고 디버깅할 수 있습니다.
처음에만 구성을 선택하라는 메시지가 표시되면 remote web site with sourcemap을 선택합니다.

 

브라우저가 기동, 화면이 출현해 모델이 표시되면 성공입니다.

또한 모든 브라우저에서 [npm: serve로 표시된 주소]/Samples/TypeScript/Demo/를 방문하면 index.html을 확인할 수 있습니다.

이 때 포트의 경합 등이 있으면 접속이 거부되는 경우가 있으므로,
그 때는 「/Samples/TypeScript/Demo/package.json」 내의 "serve" 항목으로 지정하고 있는 포트 번호가 경합하고 있지 않은 것을 확인해 주세요.

또한 개발 용도로 Debugger for Chrome을 사용하는 경우에는 「/.vscode/launch.json」의 "url" 항목으로 연결 URL을 지정하고 있으므로, 그 쪽도 함께 확인하십시오.

© 2010 - 2022 Live2D Inc.