Use the Web Edition SDK from JavaScript

[Last updated: 01/30/2020]

This page will guide you through the steps to use the Cubism 4 SDK for Web Framework from a JavaScript webpack project.


Add the necessary files to an existing JavaScript webpack project

Copy the following directories from Cubism 4 SDK for Web to your project.

  • Core Folder
  • Framework folder

Adding packages to an existing project

In an existing JavaScript webpack project, add the ts-loader package to build TypeScript.

Entering the following command on the project will add the package to package.json.

Change webpack settings for an existing project

Some additional configuration is required so that the Framework can be built in an existing JavaScript webpack project.

First, configure the following to add the TypeScript file to the webpack build target.

Next, add the following settings for webpack to convert TypeScript at build time.

You can now successfully build webpack.

Below is a sample of webpack.config.js.

Using the Framework from JavaScript

This is a way to use the TypeScript framework from JavaScript.

To import and use a module you wish to use, write as follows

Importing classes in the framework

Since the framework is wrapped in the Live2DCubismFramework namespace, multiple imports will result in duplication.
To resolve the duplication, a different name must be specified at import time, which can be resolved by specifying as [arbitrary name] after the namespace at import time.

In addition, an internal module can be defined with a different name by writing import [arbitrary name] = module name.

© 2010 - 2022 Live2D Inc.