Core とモデル

Cubism Core

同梱の Framework 5-r.5 アダプターには Cubism Core 5.3 を使用します。coreUrl を指定して読み込むか、アプリのコードより前にスクリプトを配置してください。Core を npm パッケージや公開 Issue に添付してはいけません。

<script src="/live2dcubismcore.min.js"></script>

モデルディレクトリ

書き出したモデルのディレクトリは、構成を変えずにそのまま配置します。モデルからは moc3、テクスチャ、モーション、表情、物理演算、ポーズ、ユーザーデータが参照されます。

• model3.json に記載された相対パスとファイル名の大文字・小文字を正確に保ちます。
• テクスチャやモーションを別オリジンから配信する場合は CORS を許可します。
• 描画できない原因を調べるときは、先に /inspect でモデルを検査してください。

アセットを安定して配信

バージョン付きモデルは、できるだけ同一オリジンの固定 URL から配信します。別オリジンの model3、moc3、テクスチャ、モーション、表情ファイルには CORS を設定してください。

public/
├─ live2dcubismcore.min.js
└─ models/avatar/
   ├─ avatar.model3.json
   ├─ avatar.moc3
   ├─ textures/
   └─ motions/

描画前に互換性を確認

Inspector または inspectModelSource() で、不足ファイル、外部 URL、未対応バージョンを先に検出します。公開 Issue に Core やモデルを添付せず、エラーコード、URL、HTTP ステータス、書き出しバージョンを共有してください。

モデルをキャンバスに合わせる

fit がモデルの大きさと位置を決めます。既定値の 'upper-body' はキャンバスの 2 倍に拡大して下中央を基準に配置し、'full' はモデル全体がキャンバスに収まる ように合わせます。

'upper-body' はキャラクターがキャンバスの縦を埋める全身リグを前提とします。 すでに上半身だけ描かれたリグは 2 倍でははみ出し、キャンバスの中央から外れて 描かれたリグは片側に寄ります。公式 Cubism サンプル 5 体のうち 2 体がこれに 当たります。model3.json にはキャンバスサイズしかなく、その中のどこに キャラクターが描かれているかは記録されないため、どちらの値でも自動では補正 できません。

モデルの見え方がおかしいときはまず 'full' を試してください。どちらも合わない 場合は配置オーバーレイを有効にしてドラッグします。貼り付け られる fit の値がそのまま表示されます。