react-live2d v1.0.31

Cubism Web Samples

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 のサンプルプロジェクトが含まれるディレクトリ

Live2D Cubism Core for Web

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

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

開発環境構築

1. Node.js と Visual Studio Code をインストールします
2. Visual Studio Code で 本 SDK のトップディレクトリ を開き、推奨拡張機能をインストールします
   • ポップアップ通知の他、拡張機能タブから @recommended を入力することで確認できます

サンプルデモの動作確認

コマンドパレット（View > Command Palette...）で >Tasks: Run Task を入力することで、タスク一覧が表示されます。

1. タスク一覧から　npm: install - Samples/TypeScript/Demo を選択して依存パッケージのダウンロードを行います
2. タスク一覧から npm: build - Samples/TypeScript/Demo を選択してサンプルデモのビルドを行います
3. タスク一覧から npm: serve - Samples/TypeScript/Demo を選択して動作確認用の簡易サーバを起動します
4. ブラウザの URL 欄に http://localhost:5000/Samples/TypeScript/Demo/ と入力してアクセスします
5. コマンドパレットから >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 に記述しています。

SDKマニュアル

Cubism SDK Manual

変更履歴

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

開発環境

Node.js

• 13.7.0
• 12.14.1
• 10.18.1

動作確認環境

Note: 動作確認時のサーバの起動は ./Samples/TypeScript/Demo/package.json の serve スクリプトを使用して行っています。

##此处是魔改者部分

根目录/食用方法

├─ Core                  # Cubism Core 核心库

├─ Framework            # 包含渲染和动画功能等的源代码的目录

└─ Samples              # 示例项目

   └─ Resources # 这里面放的是live2D的模型及动作导出的文件，需要添加自定义模型，请在此处添加，注意文件夹名字即为模型名字

   └─ TypeScript

      └─ Demo            # 直接在此处npm install后 npm run build:prod得到打包的bundle.js，按照index.html的引入方式引入到项目即可

         └─ src         

          └─ lappdefine.ts # 在添加自定义模型后，在该文件的变量ModelDir里添加自定义模型的名字