English / 日本語

---

Cubism Web Samples

This is a sample implementation of an application that displays models output by Live2D Cubism Editor.

It is used in conjunction with the Cubism Web Framework and Live2D Cubism Core.

License

Please check the license before using this SDK.

Notices

Please check the notices before using this SDK.

Compatibility with Cubism 5 new features and previous Cubism SDK versions

This SDK is compatible with Cubism 5.
For SDK compatibility with new features in Cubism 5 Editor, please refer to here.
For compatibility with previous versions of Cubism SDK, please refer to here.

Directory structure

.
├─ .vscode          # Project settings directory for Visual Studio Code
├─ Core             # Directory containing Live2D Cubism Core
├─ Framework        # Directory containing source code such as rendering and animation functions
└─ Samples
   ├─ Resources     # Directory containing resources such as model files and images
   └─ TypeScript    # Directory containing TypeScript sample projects

Live2D Cubism Core for Web

A library for loading the model.

This repository does not manage Cubism Core. Download the Cubism SDK for Web from here and copy the files in the Core directory.

Development environment construction

1. Install [Node.js] and [Visual Studio Code]
2. Open the top directory of this SDK in Visual Studio Code and install the recommended extensions
   • In addition to pop-up notifications, you can check the others by typing @recommended from the Extensions tab

Operation check of sample demo

Enter >Tasks: Run Task in the command palette (View > Command Palette...) to display the task list.

1. Select npm: install - Samples/TypeScript/Demo from the task list to download the dependent packages
2. Select npm: build - Samples/TypeScript/Demo from the task list to build the sample demo
3. Select npm: serve - Samples/TypeScript/Demo from the task list to start the simple server for operation check
4. Enter http://localhost:5000/Samples/TypeScript/Demo/ in the URL field of your browser to access it
5. Enter >Tasks: Terminate Task from the command palette and select npm: serve to terminate the simple server

For other tasks, see README.md of the sample project.

NOTE: Settings for debugging are described in .vscode/tasks.json.

Project debugging

Open the top directory of this SDK in Visual Studio Code and enter the F5 key to start Debugger for Chrome.

You can place breakpoints in Visual Studio Code to debug in conjunction with the Chrome browser.

NOTE: Settings for debugging are described in .vscode/launch.json.

SDK manual

Cubism SDK Manual

Changelog

Samples : CHANGELOG.md

Framework : CHANGELOG.md

Core : CHANGELOG.md

Development environment

Node.js

• 21.7.1
• 20.11.1

Operation environment

Platform	Browser	Version
Android	Google Chrome	122.0.6261.106
Android	Microsoft Edge	122.0.2365.86
Android	Mozilla Firefox	123.1.0
iOS / iPadOS	Google Chrome	122.0.6261.89
iOS / iPadOS	Microsoft Edge	122.0.2365.86
iOS / iPadOS	Mozilla Firefox	123.4
iOS / iPadOS	Safari	17.4
macOS	Google Chrome	122.0.6261.129
macOS	Microsoft Edge	122.0.2365.80
macOS	Mozilla Firefox	123.0.1
macOS	Safari	17.4
Windows	Google Chrome	122.0.6261.129
Windows	Microsoft Edge	122.0.2365.80
Windows	Mozilla Firefox	123.0.1

Note: You can start the server for operation check by running the serve script of ./Samples/TypeScript/Demo/package.json.

Contributing

There are many ways to contribute to the project: logging bugs, submitting pull requests on this GitHub, and reporting issues and making suggestions in Live2D Community.

Forking And Pull Requests

We very much appreciate your pull requests, whether they bring fixes, improvements, or even new features. Note, however, that the wrapper is designed to be as lightweight and shallow as possible and should therefore only be subject to bug fixes and memory/performance improvements. To keep the main repository as clean as possible, create a personal fork and feature branches there as needed.

Bugs

We are regularly checking issue-reports and feature requests at Live2D Community. Before filing a bug report, please do a search in Live2D Community to see if the issue-report or feature request has already been posted. If you find your issue already exists, make relevant comments and add your reaction.

Suggestions

We're also interested in your feedback for the future of the SDK. You can submit a suggestion or feature request at Live2D Community. To make this process more effective, we're asking that you include more information to help define them more clearly.

Forum

If you want to suggest or ask questions about how to use the Cubism SDK between users, please use the forum.

• Live2D Creator's Forum
• Live2D 公式クリエイターズフォーラム (Japanese)