← 作品展 CASE 04 / 05
Pixi 8 · R5 Core

Easy Live2D · Sprite 封装

easy-live2d

Pixi 8 + Cubism 5 R5 Core · 现代封装

模型变成 Sprite，await ready 后即可驱动。

easy-live2d 1.0 Pixi 8.22 WebGL 2 R5 Core
正在检测模型…
LIVE DEMO · 04
拖动角色 · 点击切换表情
操作：拖动 / 点击 / 按钮模型：Haru · 本地资源
01

实现要点

Implementation
  1. 异步初始化：Pixi 8 改为 await app.init()；easy-live2d 1.x 强制 WebGL 2，代码先做能力检测。
  2. Sprite 封装：new EasyLive2D.Live2DSprite({ modelPath, draggable: true })，await sprite.ready 之后才有可用尺寸。
  3. 画布留白换算：各模型画布尺寸与留白不同，先渲染一帧读回像素量出人物可见范围，再按可见范围等比缩放、贴底并水平居中，避免人物偏小或偏移。
  4. 交互与性能：onLive2D('hit') 命中 Head/Body 触发 TapBody；按钮随机动作/表情；页面隐藏时暂停 ticker。

运行条件

运行状态
可离线　esbuild 单包 + R5 Core + 官方模型，本地可跑；需要支持 WebGL 2 的浏览器。
依赖 / 资源
Pixi 8 + easy-live2d（js/live2d4.bundle.min.js）
Cubism 5 R5 Core（js/live2dcubismcore.r5.min.js）
7 个官方 Cubism 3/4 模型（models/）
入口文件
07-easy-live2d/live2D4.html
初始化
await app.init({ canvas, resizeTo: stage, preference: 'webgl' })，随后 new EasyLive2D.Live2DSprite({ modelPath: '../models/<id>/<id>.model3.json' }) 并 await sprite.ready。
02

关键代码

Code
JS 
const app = new PIXI.Application();
await app.init({ canvas, resizeTo: stage, preference: 'webgl' });

EasyLive2D.Config.MotionGroupIdle = 'Idle';
const sprite = new EasyLive2D.Live2DSprite({
  modelPath: '../models/' + id + '/' + id + '.model3.json', draggable: true
});
app.stage.addChild(sprite);
await sprite.ready;

sprite.onLive2D('hit', () => sprite.startRandomMotion({ group: 'TapBody' }));
03

注意

Caveats