Build Web Samples

[Last updated: 01/30/2020]

This page describes the steps to transpile the TypeScript sample project included in Live2D Cubism SDK for Web on Windows with Visual Studio Code.

* The content of this article is based on Cubism 4 SDK for Web R1.
The method and procedure may differ depending on the version of Cubism SDK. 

What you need

Live2D Cubism SDK for Web

The main body of the SDK. Download from the “official download page”.

Node.js

JavaScript execution environment.

Visual Studio Code

This is the development environment that will be used in this project. The language is TypeScript.

 

Installation process

1. Visual Studio Code

After installing and launching Visual Studio Code, open the top folder of Cubism SDK for Web and install the following as extensions.

• Debugger for Chrome

Development tools.
Use Google Chrome to confirm execution.

 

It can also be found by typing “@recommended” in the extension's search window.

After installation is complete, restart the editor to activate the extension.

 

2. Node.js

Install Node.js to manage each package required for the build and as a JavaScript execution environment.
Install using the installer available on the official website.
After the installation is complete, open a command prompt and input

and confirm that the npm command is available.
Success is indicated when version information is output.

 

3. Each package required to build and run, including WebPack

Install the necessary packages to install Webpack Dev Server and resolve TypeScript and JavaScript dependencies.

On Visual Studio Code with the Cubism SDK for Web folder open, press “ctrl+shift+P” and select “Tasks: Run Task“ to ”npm: install - Samples/TypeScript/Demo” and install.

 

 

Build

To build, open the Cubism SDK for Web top directory in Visual Studio Code and

select Terminal > Run Build Task... from the menu bar or “ctrl+shift+B” to display a list of build tasks, select “npm: build - Samples/TypeScript/Demo” etc. and execute the build.

 

After the build is complete, a dist folder will be created in the Samples/TypeScript/Demo folder and a JavaScript file (bundle.js) will be output inside.

 

Execution

If the build is successful, the next step is to execute the build.

To check the execution, press “ctrl+shift+P” in Visual Studio Code with the Cubism SDK for Web folder open, and from “Tasks: Run Task” select “npm: serve - Samples/TypeScript/Demo
to start a simple local server.

With the local server running, press F5 or select Debug > Start Debugging from the menu bar to start the Debugger for Chrome for debugging.
When asked to select a configuration for the first time only, select remote web site with sourcemap.

 

Success is indicated when the browser starts, a screen appears, and the model is displayed.

Also, on any given browser, access [address displayed by npm:serve]/Samples/TypeScript/Demo/ to check index.html.

If there is a port conflict at this time, the connection may be denied.
In that case, please check if the port number specified in the “serve” item in “/Samples/TypeScript/Demo/package.json” does not conflict with the port number specified in the ”serve” item.

If you are using Debugger for Chrome for development purposes, the connection URL is specified in the “url” item of “/.vscode/launch.json”.

© 2010 - 2022 Live2D Inc.