Cubism Web Samples

Live2D Cubism 4 Editorで出力したモデルを表示するアプリケーションのサンプル実装です。

Cubism Coreライブラリと組み合わせて使用します。

注意事項

本SDKを使用する前に、注意事項をご確認ください。

こちら

ディレクトリ構成

.
├─ .vscode              # Visual Studio Codeのタスクや設定が含まれるディレクトリ
├─ Core                 # Cubism Coreが含まれるディレクトリ
├─ Framework            # レンダリングやアニメーション機能などのソースコードが含まれるディレクトリ
└─ Samples
   └─ TypeScript
      └─ Demo           # サンプルプロジェクトが含まれるディレクトリ
         ├─ Resources   # モデルのファイルや画像などのリソースが含まれるディレクトリ
         └─ src

Live2D Cubism Core for Web

モデルをロードするためのライブラリです。

当リポジトリではCubism Coreを管理していません。 こちらからCubism SDK for Webをダウンロードして、 Coreディレクトリのファイルをコピーしてください。

開発環境の構築方法

1. Node.jsをインストールします。

2. Visual Studio Codeをインストールします。

3. Visual Studio Codeの拡張機能として下記を追加します。

   • Debugger for Chrome
   • Live Server

ビルド方法

1. Visual Studio Codeでプロジェクトディレクトリを開きます。

2. ビルドに必要な物をインストールします。 ctrl+shift+P(macOSでは⌘+⇧+P)でTasks: Run Taskからnpm: installを選択、 または、package.jsonがあるディレクトリ上にてターミナル上でnpm installでサーバが起動します。

3. ビルドを行います。 ctrl+shift+B(macOSでは⌘+⇧+B)でビルドタスクを選択、またはターミナル上でnpmコマンドを実行してJavaScriptを生成します。

ビルドタスクの説明

コマンド	説明
npm: build-framework	フレームワークのみをビルドし、JavaScriptファイルを生成します
npm: watch-framework	フレームワークのみをウォッチし、変更が保存された際にJavaScriptファイルを再生成します
npm: build-sample	サンプルをビルドします
npm: watch-sample	サンプルをウォッチします
npm: build-all	フレームワークとサンプルをビルドします
npm: watch-all	フレームワークとサンプルをウォッチします

ローカルサーバの起動方法

ビルドした成果物はそのままファイルを開くだけでは正常に動作しないため、ローカルサーバを起動する必要があります。

開発時

Visual Studio Codeの画面下の水色のフッターから「Go Live」をクリックするとサーバが起動します。 ブラウザ上でindex.htmlのパスまで進むと動作を確認することが出来ます。

ファイルの更新が行われると自動でブラウザのリロードが行われます。 また、F5を押すとでDebugger for Chromeの拡張が起動してデバッグを行うことが出来ます。

検証時

ctrl+shift+P(macOSでは⌘+⇧+P)でTasks: Run Taskからnpm: serveを選択、 または、package.jsonがあるディレクトリ上にてターミナル上でnpm run serveでサーバが起動します。 ブラウザ上でindex.htmlのパスまで進むと動作を確認することが出来ます。

シンプルな構成のサーバのため検証時におすすめです。

SDKマニュアル

Cubism SDK Manual

変更履歴

当リポジトリの変更履歴についてはCHANGELOG.mdを参照ください。

動作確認環境

Node.js	バージョン
Latest	13.1.0
LTS	12.13.0

プラットフォーム	ブラウザ	バージョン
Android	Google Chrome	78.0.3904.96
Android	Microsoft Edge	42.0.4.3989
Android	Mozilla Firefox	68.2.0
iOS / iPadOS	Google Chrome	78.0.3904.84
iOS / iPadOS	Microsoft Edge	44.10.7
iOS / iPadOS	Mozilla Firefox	20.1
iOS / iPadOS	Safari	13.0.3
macOS	Google Chrome	78.0.3904.97
macOS	Mozilla Firefox	70.0.1
macOS	Safari	13.0.3
Windows	Google Chrome	78.0.3904.97
Windows	Internet Explorer 11	11.476.18362.0
Windows	Microsoft Edge	44.18362.449.0
Windows	Mozilla Firefox	70.0.1

Note: 動作確認時のサーバの起動は検証時の方法で行っています。

ライセンス

Cubism Web Samples は Live2D Open Software License で提供しています。

• Live2D Open Software License

  日本語 English

Live2D Cubism Core for Web は Live2D Proprietary Software License で提供しています。

• Live2D Proprietary Software License

  日本語 English

Live2D のサンプルモデルは Free Material License で提供しています。

• Free Material License

  日本語 English

  • ./Sample/TypeScript/Demo/Resources/Haru
  • ./Sample/TypeScript/Demo/Resources/Hiyori
  • ./Sample/TypeScript/Demo/Resources/Mark
  • ./Sample/TypeScript/Demo/Resources/Natori
  • ./Sample/TypeScript/Demo/Resources/Rice

上記のモデルをご利用になられる場合、こちらで各モデルに設定された利用条件に同意して頂く必要がございます。

直近会計年度の売上高が 1000 万円以上の事業者様がご利用になる場合は、SDKリリース(出版許諾)ライセンスに同意していただく必要がございます。

• SDKリリース(出版許諾)ライセンス

All business users must obtain a Publication License. "Business" means an entity with the annual gross revenue more than ten million (10,000,000) JPY for the most recent fiscal year.

• SDK Release (Publication) License