@doki-land/live2d 0.0.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@doki-land/live2d",
+  "version": "0.0.0",
+  "keywords": [
+    "live2d",
+    "pixi",
+    "typescript"
+  ],
+  "description": "Live2D TypeScript runtime based on pixi-live2d-display",
+  "author": "Aster <192608617@qq.com>",
+  "license": "LGPL-3.0-or-later",
+  "type": "module",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.umd.js",
+      "import": "./dist/index.es.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "lib",
+    "src"
+  ],
+  "dependencies": {
+    "@pixi/interaction": "6.*",
+    "@pixi/ticker": "6.*",
+    "pixi-live2d-display": "^0.4.0",
+    "pixi.js": "6.*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

package/src/index.ts

@@ -0,0 +1,149 @@
+import { Live2DModel, MotionManager } from 'pixi-live2d-display';
+import * as PIXI from 'pixi.js';
+import { Live2dOptions } from './types';
+// @ts-ignore
+import * as Cubism2 from '../lib/cubism2.min.js';
+// @ts-ignore
+import * as Cubism5 from '../lib/cubism5.min.js';
+import { Ticker, TickerPlugin } from '@pixi/ticker';
+import { InteractionManager } from '@pixi/interaction';
+
+export * from './types';
+export { Live2DModel, MotionManager, PIXI };
+
+
+/**
+ * 创建Live2D模型
+ * @param options 模型配置选项
+ * @returns Promise<Live2DModel> 加载完成的Live2D模型实例
+ */
+export async function createLive2dModel(options: Live2dOptions): Promise<Live2DModel> {
+    const {
+        models,
+        element_id,
+        auto_fit = true,
+        auto_motion = true,
+        mouse_tracking = true
+    } = options;
+
+    // 初始化PIXI应用
+    const app = new PIXI.Application({
+        view: document.getElementById(element_id) as HTMLCanvasElement,
+        width: 300,
+        height: 300,
+        backgroundAlpha: 0,
+        autoDensity: true,
+        antialias: true
+    });
+
+    // 加载模型
+    const model = await Live2DModel.from(models[0]);
+
+    // 添加模型到舞台
+    app.stage.addChild(model);
+
+    // 自动适应大小
+    if (auto_fit) {
+        const scale = Math.min(300 / model.width, 300 / model.height);
+        model.scale.set(scale);
+
+        // 居中显示
+        model.x = (300 - model.width * scale) / 2;
+        model.y = (300 - model.height * scale) / 2;
+    }
+
+    // 启用鼠标跟踪
+    if (mouse_tracking) {
+        enableMouseTracking(model, app.view);
+    }
+
+    // 自动开始动画
+    if (auto_motion) {
+        await startIdleAnimation(model);
+    }
+
+    return model;
+}
+
+/**
+ * 启用鼠标跟踪功能
+ * @param model Live2D模型实例
+ * @param canvas 画布元素
+ */
+function enableMouseTracking(model: Live2DModel, canvas: HTMLCanvasElement) {
+    // 跟踪鼠标移动
+    document.addEventListener('mousemove', (event) => {
+        const rect = canvas.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+
+        // 计算鼠标位置相对于画布中心的偏移
+        const mouseX = (event.clientX - centerX) / rect.width;
+        const mouseY = (event.clientY - centerY) / rect.height;
+
+        // 更新模型的视线方向
+        if (model.internalModel) {
+            model.internalModel.focusController?.focus(mouseX, mouseY);
+        }
+    });
+}
+
+/**
+ * 开始空闲动画
+ * @param model Live2D模型实例
+ */
+async function startIdleAnimation(model: Live2DModel) {
+    // 尝试播放内置的动作组
+    try {
+        // 获取模型支持的动作组
+        const motions = model.internalModel?.motionManager.definitions;
+
+        if (motions) {
+            // 优先使用Idle动作组
+            if (motions.idle) {
+                await model.motion('idle');
+            } else if (motions.tap_body) {
+                // 如果没有idle动作，尝试使用tap_body动作
+                await model.motion('tap_body');
+            } else {
+                // 使用第一个可用的动作组
+                const firstMotionGroup = Object.keys(motions)[0];
+                if (firstMotionGroup) {
+                    await model.motion(firstMotionGroup);
+                }
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to start idle animation:', error);
+    }
+}
+
+/**
+ * 加载Cubism SDK
+ * 在使用Live2D功能前必须调用此函数
+ * @param cubismCore 可选的CubismCore对象，如果在非浏览器环境中使用，需要传入
+ */
+export async function initializeLive2D(cubismCore?: any) {
+    // 为 Live2DModel 注册 Ticker
+    Live2DModel.registerTicker(Ticker);
+    // 为 Application 注册 Ticker
+    PIXI.extensions.add(TickerPlugin)
+    // 注册 InteractionManager 以支持 Live2D 模型的自动交互
+    PIXI.extensions.add(InteractionManager);
+    // 注册Cubism SDK
+    // if (typeof window !== 'undefined' && window.Live2DCubismCore) {
+    //     Live2DModel.registerCubismCore(Cubism2);
+    // } else if (cubismCore) {
+    //     Live2DModel.registerCubismCore(Cubism5);
+    // } else {
+    //     console.warn('Live2DCubismCore is not loaded. Please include the Cubism SDK.');
+    // }
+}
+
+// 导出默认对象
+export default {
+    createLive2dModel,
+    initializeLive2D,
+    Live2DModel,
+    MotionManager
+};

package/src/types/Live2dOptions.ts

@@ -0,0 +1,30 @@
+import { ModelOptions } from './ModelOptions.ts';
+
+/**
+ * Live2D模型配置选项
+ */
+export interface Live2dOptions {
+    /**
+     * 要渲染到的HTML元素ID
+     */
+    element_id: string;
+    /**
+     * 模型配置选项
+     */
+    models: ModelOptions[];
+    /**
+     * 是否自动适应模型大小
+     * @default true
+     */
+    auto_fit?: boolean;
+    /**
+     * 是否自动开始动画
+     * @default true
+     */
+    auto_motion?: boolean;
+    /**
+     * 是否启用鼠标跟踪
+     * @default true
+     */
+    mouse_tracking?: boolean;
+}

package/src/types/ModelOptions.ts

@@ -0,0 +1,40 @@
+export type ModelOptions = ModelMainOptions & ModelMobileAdaptation;
+export interface ModelMobileAdaptation {
+    /**
+     * 移动端配置, 会覆盖 desktop 中的主配置
+     * @default null
+     */
+    mobile?: Partial<ModelOptions>;
+}
+export interface ModelMainOptions {
+    /**
+     * 模型JSON文件的路径
+     */
+    model_url: string;
+    position?: ModelPosition;
+}
+
+export interface ModelPosition {
+    /**
+     * 模型在画布中的缩放
+     */
+    scale?: number,
+    /**
+     * 模型在画布中的位置
+     */
+    anchor_x?: number;
+    /**
+     * 模型在画布中的位置
+     */
+    anchor_y?: number;
+    /**
+     * 画布宽度
+     * @default 300
+     */
+    width?: number;
+    /**
+     * 画布高度
+     * @default 300
+     */
+    height?: number;
+}

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export type { Live2dOptions } from './Live2dOptions.ts';
+export type { ModelOptions, ModelPosition, ModelMobileAdaptation, ModelMainOptions } from './ModelOptions.ts';