Live2DのWebSDKで遊んでみる

サンプルリポジトリ

git clone しただけでは build できない。

cd ./Samples/TypeScript/Demo/
npm run build

[tsl] ERROR in /home/dske104/D-ske104/CubismWebsamples/Samples/TypeScript/Demo/src/lappview.ts(9,34)
      TS2307: Cannot find module '@framework/math/cubismviewmatrix' or its corresponding type declarations.
 @ ./src/lappdelegate.ts 32:17-38
 @ ./src/main.ts 26:21-46

138 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.88.2 compiled with 138 errors in 1999 ms

Daisuke Kusatake

@framework/math/cubismviewmatrix のパスがさしているのは Samples/TypeScript/Demo/tsconfig.json で定義されてる。

Daisuke Kusatake

Frameworks/ 以下は何もない。

Daisuke Kusatake

Frameworks/ 以下はサブモジュールで管理されているよう。

サブモジュールとは

Daisuke Kusatake

サブモジュールを利用するには2つのコマンドを実行するらしい。

git submodule init
git submodule update

Daisuke Kusatake

サブモジュールがローカルリポジトリにインストールされるとビルドできるようになる。

npm run build

> build
> webpack --mode development

asset bundle.js 1.88 MiB [emitted] (name: main)
runtime modules 916 bytes 4 modules
modules by path ../../../Framework/src/ 430 KiB 44 modules
modules by path ./ 102 KiB
  ./src/main.ts 1.7 KiB [built] [code generated]
  ./src/lappdelegate.ts 10.9 KiB [built] [code generated]
  ./src/lappdefine.ts 2.17 KiB [built] [code generated]
  ./src/lapplive2dmanager.ts 5.92 KiB [built] [code generated]
  ./src/lapppal.ts 986 bytes [built] [code generated]
  ./src/lapptexturemanager.ts 4.14 KiB [built] [code generated]
  ./src/lappview.ts 7.34 KiB [built] [code generated]
  + 5 modules
webpack 5.88.2 compiled successfully in 3191 ms

Daisuke Kusatake

ローカルサーバーが建ちあげられる

npm run serve

Daisuke Kusatake

ローカルサーバーでlive2dの実行サンプルが見られる。

http://localhost:5000/Samples/TypeScript/Demo/