/CubismWebFramework

Primary LanguageTypeScriptOtherNOASSERTION

Cubism Web Framework

Live2D Cubism 4 Editor で出力したモデルをアプリケーションで利用するためのフレームワークです。

モデルを表示、操作するための各種機能を提供します。 モデルをロードするには Live2D Cubism Core ライブラリと組み合わせて使用します。

ビルドを行うことで、ブラウザで利用可能な JavaScript ライブラリとして利用することができます。

ライセンス

本 SDK を使用する前に、ライセンスをご確認ください。

開発環境

Node.js

  • 17.2.0
  • 16.13.1
  • 14.18.2
  • 12.22.7

TypeScript

4.5.2

開発環境構築

  1. [Node.js] と [Visual Studio Code] をインストールします
  2. Visual Studio Code で本プロジェクトを開き、推奨拡張機能をインストールします
    • 拡張機能タブから @recommended と入力することで確認できます
  3. コマンドパレット(View > Command Palette...)で >Tasks: Run Task を入力してタスク一覧を表示します
  4. npm: install を選択して依存パッケージのダウンロードを行います

コマンドパレットのタスク一覧から各種コマンドを実行することができます。

NOTE: デバック用の設定は、.vscode/tasks.json に記述しています。

タスク一覧

npm: build

ソースファイルのビルドを行い、dist ディレクトリに出力します。

tsconfig.json を編集することで設定内容を変更できます。

npm: test

TypeScript の型チェックテストを行います。

tsconfig.json を編集することで設定内容を変更できます。

npm: lint

src ディレクトリ内の TypeScript ファイルの静的解析を行います。

.eslintrc.yml を編集することで設定内容を変更できます。

npm: lint:fix

src ディレクトリ内の TypeScript ファイルの静的解析及び自動修正を行います。

.eslintrc.yml を編集することで設定内容を変更できます。

npm: clean

ビルド成果物ディレクトリ(dist)を削除します。

コンポーネント

effect

自動まばたきやリップシンクなど、モデルに対してモーション情報をエフェクト的に付加する機能を提供します。

id

モデルに設定されたパラメータ名・パーツ名・Drawable名を独自の型で管理する機能を提供します。

math

行列計算やベクトル計算など、モデルの操作や描画に必要な算術演算の機能を提供します。

model

モデルを取り扱うための各種機能(生成、更新、破棄)を提供します。

motion

モデルにモーションデータを適用するための各種機能(モーション再生、パラメータブレンド)を提供します。

physics

モデルに物理演算による変形操作を適用するための機能を提供します。

rendering

モデルを描画するためのグラフィックス命令を実装したレンダラを提供します。

type

フレームワーク内で使用する型定義を提供します。

utils

JSONパーサーやログ出力などのユーティリティ機能を提供します。

Live2D Cubism Core for Web

当リポジトリには Cubism Core for Web は同梱されていません。

Cubism SDK for Web からダウンロードしてください。

サンプル

標準的なアプリケーションの実装例は CubismWebSamples を参照ください。

マニュアル

Cubism SDK Manual

変更履歴

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

コミュニティ

ユーザー同士でCubism SDKの活用方法の提案や質問をしたい場合は、是非コミュニティをご活用ください。