Live2D Cubism 4 Editor で出力したモデルを表示するアプリケーションのサンプル実装です。
Cubism Web Framework および Live2D Cubism Core と組み合わせて使用します。
本 SDK を使用する前に、ライセンスをご確認ください。
本 SDK を使用する前に、注意事項をご確認ください。
.
├─ .vscode # Visual Studio Code 用プロジェクト設定ディレクトリ
├─ Core # Live2D Cubism Core が含まれるディレクトリ
├─ Framework # レンダリングやアニメーション機能などのソースコードが含まれるディレクトリ
└─ Samples
├─ Resources # モデルのファイルや画像などのリソースが含まれるディレクトリ
└─ TypeScript # TypeScript のサンプルプロジェクトが含まれるディレクトリ
モデルをロードするためのライブラリです。
当リポジトリではCubism Coreを管理していません。 こちらからCubism SDK for Webをダウンロードして、 Coreディレクトリのファイルをコピーしてください。
- [Node.js] と [Visual Studio Code] をインストールします
- Visual Studio Code で 本 SDK のトップディレクトリ を開き、推奨拡張機能をインストールします
- ポップアップ通知の他、拡張機能タブから
@recommendedを入力することで確認できます
- ポップアップ通知の他、拡張機能タブから
コマンドパレット（View > Command Palette...）で >Tasks: Run Task を入力することで、タスク一覧が表示されます。
- タスク一覧から
npm: install - Samples/TypeScript/Demoを選択して依存パッケージのダウンロードを行います - タスク一覧から
npm: build - Samples/TypeScript/Demoを選択してサンプルデモのビルドを行います - タスク一覧から
npm: serve - Samples/TypeScript/Demoを選択して動作確認用の簡易サーバを起動します - ブラウザの URL 欄に
http://localhost:5000/Samples/TypeScript/Demo/と入力してアクセスします - コマンドパレットから
>Tasks: Terminate Taskを入力してnpm: serveを選択すると簡易サーバが終了します
その他のタスクに関してはサンプルプロジェクトの README.md を参照ください。
NOTE: デバック用の設定は、.vscode/tasks.json に記述しています。
Visual Studio Code で 本 SDK のトップディレクトリ を開き、 F5 キーを入力すると Debugger for Chrome が起動します。
Visual Studio Code 上でブレイクポイントを貼って Chrome ブラウザと連動してデバックを行うことができます。
NOTE: デバック用の設定は、.vscode/launch.json に記述しています。
当リポジトリの変更履歴については CHANGELOG.md を参照ください。
- 15.11.0
- 14.16.0
- 12.21.0
- 10.24.0
| プラットフォーム | ブラウザ | バージョン |
|---|---|---|
| Android | Google Chrome | 88.0.4324.181 |
| Android | Microsoft Edge | 46.01.4.5140 |
| Android | Mozilla Firefox | 86.1.1 |
| iOS / iPadOS | Google Chrome | 87.0.4280.77 |
| iOS / iPadOS | Microsoft Edge | 46.1.10 |
| iOS / iPadOS | Mozilla Firefox | 32.0 |
| iOS / iPadOS | Safari | 604.1 |
| Linux | Google Chrome | 89.0.4389.72 |
| Linux | Mozilla Firefox | 86.0 |
| macOS | Google Chrome | 88.0.4324.192 |
| macOS | Microsoft Edge | 88.0.705.81 |
| macOS | Mozilla Firefox | 86.0 |
| macOS | Safari | 14.0.2 |
| Windows | Google Chrome | 88.0.4324.190 |
| Windows | Internet Explorer 11 | 20H2(19042.685) |
| Windows | Microsoft Edge | 88.0.705.74 |
| Windows | Mozilla Firefox | 86.0 |
Note: 動作確認時のサーバの起動は ./Samples/TypeScript/Demo/package.json の serve スクリプトを使用して行っています。