Candy Live2D 管线 · 直连 4090

// idle (默认微笑) ParamMouthOpenY: 0.3, ParamMouthForm: 1.0 ParamEyeLOpen: 1.0, ParamEyeROpen: 1.0 ParamBrowLY: 0, ParamBrowRY: 0 // cheering (加油) ParamMouthOpenY: 0.6, ParamMouthForm: 1.0 ParamEyeLOpen: 1.2, ParamEyeROpen: 1.2 ParamBrowLY: 0.3, ParamBrowRY: 0.3 // excited (兴奋) ParamMouthOpenY: 0.8, ParamMouthForm: 1.0 ParamEyeLOpen: 1.0, ParamEyeROpen: 1.0 ParamBrowLY: 0.5, ParamBrowRY: 0.5 // euphoric (大奖!) ParamMouthOpenY: 1.0, ParamMouthForm: 0.5 ParamEyeLOpen: 1.5, ParamEyeROpen: 1.5 ParamBrowLY: 0.8, ParamBrowRY: 0.8 // tense (屏息) ParamMouthOpenY: 0, ParamMouthForm: -0.3 ParamEyeLOpen: 0.7, ParamEyeROpen: 0.7 ParamBrowLY: 0.4, ParamBrowRY: 0.4 // sad (难过) ParamMouthOpenY: 0.2, ParamMouthForm: -0.8 ParamEyeLOpen: 0.6, ParamEyeROpen: 0.6 ParamBrowLY: -0.5, ParamBrowRY: -0.5 // cozy (温柔) ParamMouthOpenY: 0.3, ParamMouthForm: 1.0 ParamEyeLOpen: 0.5, ParamEyeROpen: 0.5 ParamBrowLY: -0.2, ParamBrowRY: -0.2 // sleepy (困倦) ParamMouthOpenY: 0.7, ParamMouthForm: 0 ParamEyeLOpen: 0.3, ParamEyeROpen: 0.3 ParamBrowLY: -0.4, ParamBrowRY: -0.4

npm install pixi-live2d-display # 还需 Live2D Cubism Core # 下载 live2dcubismcore.min.js 放 public/ # index.html 里引入

// src/components/CandyController.ts import * as PIXI from 'pixi.js'; import { Live2DModel } from 'pixi-live2d-display'; export type EmotionState = 'idle' | 'cheering' | 'excited' | 'euphoric' | 'tense' | 'sad' | 'cozy' | 'sleepy'; export class CandyController { private model!: Live2DModel; private currentEmotion: EmotionState = 'idle'; private emotionTimer: number | null = null; private readonly DURATIONS: Record<EmotionState, number> = { idle: Infinity, cheering: 3000, excited: 4000, euphoric: 6000, tense: 500, sad: 8000, cozy: Infinity, sleepy: Infinity, }; private readonly PRIORITY: Record<EmotionState, number> = { idle: 0, sleepy: 1, cozy: 2, sad: 3, cheering: 4, tense: 5, excited: 6, euphoric: 7, }; async load(app: PIXI.Application, modelUrl: string) { try { this.model = await Live2DModel.from(modelUrl); this.model.scale.set(0.18); this.model.x = app.screen.width - 80; this.model.y = 80; app.stage.addChild(this.model); this.enableEyeTracking(app); } catch (err) { console.warn('Live2D failed:', err); this.fallbackToStaticImage(app); } } setEmotion(target: EmotionState) { if (this.PRIORITY[target] < this.PRIORITY[this.currentEmotion]) return; this.currentEmotion = target; this.model?.expression(`exp_${target}`); if (this.emotionTimer !== null) clearTimeout(this.emotionTimer); const duration = this.DURATIONS[target]; if (duration !== Infinity) { this.emotionTimer = window.setTimeout(() => this.setEmotion('idle'), duration); } } private enableEyeTracking(app: PIXI.Application) { app.stage.interactive = true; app.stage.on('pointermove', (e) => { this.model.focus(e.data.global.x, e.data.global.y); }); } private fallbackToStaticImage(app: PIXI.Application) { const sprite = PIXI.Sprite.from('/assets/candy_static.png'); sprite.width = 60; sprite.height = 60; sprite.x = app.screen.width - 80; sprite.y = 80; app.stage.addChild(sprite); } }

const candy = new CandyController(); await candy.load(app, '/assets/candy_v1/candy.model3.json'); spinButton.on('click', () => { candy.setEmotion('cheering'); showBubble('cheering'); startReelsSpin(); }); onReelsAboutToStop(() => candy.setEmotion('tense')); onSpinResult((result) => { if (result.multiplier >= 20) candy.setEmotion('euphoric'); else if (result.multiplier >= 5) candy.setEmotion('excited'); else if (lastNoBigWinStreak >= 5) candy.setEmotion('sad'); }); setupIdleDetector(60000, () => candy.setEmotion('sleepy'));