Live2D(応用)
実験的機能: Live2Dステージは動作しますが、PNGステージほどの安定性は保証されていません。まずはPNGで一通りの流れを把握してから試すことをおすすめします。
PNGとLive2Dの比較
| PNG | Live2D | |
|---|---|---|
| 品質 | イラストそのまま | 2Dアニメーション |
| ファイルサイズ | 軽い(数百KB) | 中程度(数MB) |
| 素材作成 | 画像のみ | Live2D Cubism が必要 |
| アニメーション | 瞬き・口パク・呼吸 | 物理演算・豊富な動き |
| 難易度 | 低 | 中〜高 |
| 安定性 | 安定 | 実験的 |
Live2D
必要な素材
- Live2D Cubism Editor で作成した moc3 ファイル一式
model3.json/.moc3/ テクスチャPNG /physics3.json(任意)
world.json での設定
type はワールドのトップレベルで指定します。
{
"type": "live2d",
"characters": {
"fox": {
"model": "characters/fox/fox.model3.json"
}
}
}
注意点
- Cubism Core はライセンスの関係上 npm で配布されていません。CDNから動的に読み込まれます。
- PixiJS v7 を使用します。
window.PIXIの手動設定が必要になる場合があります。 - テクスチャサイズ — 8192px のテクスチャはファイルサイズが大きく(7MB超)、帯域の無駄になります。4096px 程度への縮小を推奨します。高DPI端末での描画品質はCanvas解像度(
devicePixelRatio)の設定に依存します。 - パラメータ上書き — アイドルモーションが表情パラメータを上書きすることがあります。表情制御は毎フレーム設定し直す必要があります。
ステージの切り替え
ステージの種類は world.json のトップレベルの type で指定します。エンジンは指定に応じて適切なステージモジュールを動的に読み込みます。
Live2Dを使う場合でも、トーク記法やトリガーの仕組みはPNGと共通です。ステージが変わるのは表示部分だけで、シナリオの書き方は同じです。
VRMについて: エンジン内部にはVRM(3Dモデル)のステージも実装されていますが、未解決の課題が多いため、現時点ではガイドでの案内を見送っています。将来的に安定したら改めてドキュメントを追加する予定です。