Build Web Samples
This page describes the steps to transpile the TypeScript sample project included in the Live2D Cubism SDK for Web on Windows with Visual Studio Code.
Note: The content of this article is based on the Cubism 4 SDK for Web R1.
The method and procedure may differ depending on the Cubism SDK version.
What You Need
The main body of the SDK. Download from the “official download page.”
This is the development environment that will be used here. The language is TypeScript.
1. Visual Studio Code
After installing and launching Visual Studio Code, open the top folder of the Cubism SDK for Web and install the following as extensions.
• Debugger for Chrome Development tools.
Use Google Chrome to confirm execution.
• EditorConfig for VS Code
This is used to unify code formatting.
This can also be found by typing “@recommended” in the extension’s search window.
After installation is complete, restart the Editor to activate the extension.
Install using the installer available on the official website.
After the installation is complete, open a command prompt and input the following.
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
In Visual Studio Code with the Cubism SDK for Web folder open, press “Ctrl + Shift + P,” select “npm: install – Samples/TypeScript/Demo” from “Tasks: Run Task,” and install.
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 press “Ctrl + Shift + B” and select “npm: build – Samples/TypeScript/Demo” etc., from the displayed list of build tasks.
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 select “npm: serve – Samples/TypeScript/Demo” from “Tasks: Run Task” to start a simple local server.
With the local server running, press the F5 key 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, in any 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” is in conflict.
// Specify the port number following -p "serve": "serve ../../.. -p 5000",
Also, if you are using Debugger for Chrome for development purposes, the connection URL is specified in the “url” item of “/.vscode/launch.json,” so please check that as well.