很长一段时间里桌宠在大家心里的印象就是“桌面上的花瓶角色”模型很可爱会眨眼、会左右摇摆、会跟着鼠标飘来飘去但除了卖萌之外干不了太多实事。直到最近我把五笔输入法、RPA、live2d、bangocat 和文本呈现框串成一条链路才真正让桌宠从“看得见”变成“叫得动、干得完”。第 17 期就围绕这个组合展开。本文适合三类读者一是想给桌面角色接入对话气泡的桌宠爱好者二是想用 RPA 做桌面自动化又不想只写脚本的同学三是想理解“输入到前端角色再到自动化执行”完整链路的前端或 Python 开发者。读完你能掌握live2d 模型怎么加载、文本呈现框怎么实现、五笔输入法在输入层怎么配置、RPA 怎么接收桌宠指令并执行动作以及一整条排错思路。这篇文章不是纯科普而是一个可以动手的迷你项目。最终效果是你在桌宠面板里输入一个指令桌宠先弹出气泡说出意图再触发 live2d 动作最后驱动 RPA 脚本打开记事本并输入文字后续你完全可以把动作换成发邮件、整理文件、操作业务系统。1. 为什么要把桌宠做成“输入-呈现-执行”一条链路桌宠到底解决什么问题传统桌宠比如游戏本自带的天选姬桌宠、部分开发者喜欢折腾的 Codex 桌宠壳更多是“陪伴型”产物它在桌面上跑动、待机、卖萌。用户对桌宠的期待其实一直在提高——既然有了可爱的形象为什么不能让这个形象听懂指令、做出回应、甚至帮忙执行任务这就带出一个核心需求桌宠不仅要“会说话”还要“会干活”。一个能干的桌宠至少要包含四层能力输入层用什么样的方式把用户想法传给桌宠。可以是有线输入框也可以是语音本文用五笔输入法加文本输入框。解析层桌宠如何理解这句话。简单场景用关键词匹配复杂场景可以接大模型接口让模型返回结构化指令。呈现层桌宠如何反馈。用 live2d 负责角色动作和表情bangocat 作为事件桥文本呈现框负责对话气泡。执行层桌宠如何真正执行动作。用 RPA 接最后一棒打开应用、录入数据、处理文件都可以交给它。这个结构其实是很多“数字人助手”的通用结构。理解了这条链路之后你会发现桌宠开发并没有那么玄它就是把一个前端展示层、一个事件中间层、一个自动化执行器粘在一起。2. 技术选型live2d、bangocat、文本呈现框、五笔输入法、RPA 各自承担什么角色2.1 Live2D角色形象层Live2D 不是 3D而是通过网格变形让 2D 插画动起来的技术。Cubism 是它的核心编辑器导出到 Web 时一般会得到 .moc3 动作模型、textures 贴图、model3.json 入口配置以及一组 motion3.json 动作文件。我们常说的 Live2D v3 模型入口就是 model3.json里面记录了模型资源、动作分组、物理效果文件等关键信息。常见误区是很多新手把下载到的模型文件直接拖进浏览器结果白屏。原因通常有两个一是 file:// 协议下浏览器禁止加载本地纹理二是 model3.json 里的相对路径和实际目录不一致。解决办法也很简单用本地静态服务器启动项目比如python -m http.server 8080然后在http://localhost:8080访问页面。2.2 bangocat事件与语音桥bangocat 在不同桌宠项目里的定位不太一样有的偏向语音合成有的偏向消息事件分发。本文不把某个版本的 API 写成固定结论而是从职责上理解它负责把用户输入、系统状态、角色情绪转成 live2d 可以消费的动作事件以及桌宠气泡里展示的文本事件。一条典型的事件流是这样的输入框得到文本 - 解析层生成指令 - bangocat 中间层广播事件 - 文本呈现框订阅并显示气泡 - live2d 订阅并播放对应动作 - 需要执行时再发给 RPA这个中间层的好处是解耦气泡、动画、语音、执行器互不依赖新增一种反馈方式时不必改业务逻辑。哪怕你后面把 bangocat 换成别的语音库只要继续广播同样的事件前端和 RPA 都无感。2.3 文本呈现框对话气泡与状态展示文本呈现框就是桌宠嘴边的那个气泡。技术上不复杂一个绝对定位的 div圆角、阴影、小尾巴再配合 JS 打字机效果逐字显示。关键是它要能承载三类内容普通回复、指令确认、错误提示。后面实战部分会给出一个可复制的组件。这里要提醒一个细节气泡的宽高要有限制和自动换行否则指令太长时会把整个页面挤爆。另外气泡内容如果是用户输入的原文要注意转义避免把文本当成 HTML 渲染。2.4 五笔输入法为什么输入层选它看到这里你可能会问桌宠输入用拼音不行吗当然可以但五笔在指令输入场景有三个优势。第一编码稳定相同字词的重码率低输入“打开记事本”这类固定指令时反应快第二不依赖网络联想在离线自动化环境中也能保持一致性第三五笔输入法的候选位置通常固定长期使用后可以形成肌肉记忆。如果你已经在用五笔桌宠的输入框只是换了一个接收终端习惯不用改。如果你没用五笔直接用你习惯的输入法也完全可以输入层与后续链路是解耦的后面讲到的指令解析、气泡呈现、RPA 执行都不关心你用的是哪种输入法。2.5 RPA从“说话”到“动手干活”RPA 全称 Robotic Process Automation也就是机器人流程自动化。它擅长把重复的、基于规则的操作自动化打开应用、填表、点击按钮、读取 Excel、发送消息等。把 RPA 接入桌宠后桌宠就不只是“屏幕上的人物”而是“一个能被自然指令驱动的自动化入口”。当前市面上的 RPA 工具很多国产工具里影刀 RPA 使用率较高它提供了图形化流程编辑和组件市场也支持 Python 扩展。实际项目中有的团队会专门设置 RPA 工程师岗位负责流程开发和维护。这说明 RPA 并不只是“录个宏”而是需要工程化的组件封装、异常处理、日志、权限管理都要考虑。3. 环境准备与模型资源3.1 运行环境为了把链路跑通建议你准备如下环境操作系统Windows 10/11 或 macOSRPA 示例以 Windows 为例因为 notepad.exe 是 Windows 自带程序。浏览器或桌面壳推荐 Chrome/Edge 调试页面生产环境可以用 Electron 或 Tauri 封装。Python 3.8用于启动本地静态服务器和运行 RPA 脚本。Node.js可选如果通过 npm 管理前端依赖。Live2D 模型可以来自官方示例、第三方免费模型或你自行使用 Cubism 制作。版本需要根据你的项目实际情况调整本文示例以常见环境为例重点演示配置思路。不要照抄某篇文章里的固定版本号因为前端 live2d 相关库更新较快依赖版本不匹配是非常常见的报错来源。3.2 Live2D 模型资源如果你不想从零建模可以在 Cubism 官方示例、模型社区、部分免费模型站点获取公开模型。下载后注意三件事第一确认许可协议。有些模型允许个人使用但不允许商用商业项目要逐条核对。第二检查压缩包是否包含 model3.json、moc3、textures 三大件。缺少任何一个都可能加载失败。如果模型还有 physics3.json、motions 目录要一起保留。第三如果模型有 license 文件夹不要删掉。后续分发桌宠时要把许可文件一起保留这是对模型作者的基本尊重。3.3 项目目录规划本文实战会创建一个desk-pet-prototype目录结构如下desk-pet-prototype/ ├── assets/ │ └── models/ │ └── my-live2d/ │ ├── my-live2d.model3.json │ ├── my-live2d.moc3 │ └── texture_00.png ├── css/ │ └── desk-pet.css ├── js/ │ ├── main.js │ ├── bubble.js │ ├── command.js │ └── event-bus.js ├── rpa/ │ └── open_notepad.py └── index.html这是一个前后端不分离的轻量结构方便入门理解。生产项目可以再引入打包工具但核心逻辑是一样的。4. 实战搭建一个可交互桌宠原型4.1 model3.json 配置解析先看 Live2D v3 模型的入口配置。下面是一个简化后的my-live2d.model3.json需要放在assets/models/my-live2d/目录下{ Version: 3, FileReferences: { Moc: my-live2d.moc3, Textures: [ texture_00.png ], Physics: my-live2d.physics3.json, Motions: { Idle: [ { File: motions/idle_01.motion3.json } ], Tap: [ { File: motions/tap_01.motion3.json } ] } } }关键字段含义Version模型格式版本v3 模型通常写 3。Moc指向 .moc3 文件这是模型的几何与参数定义。Textures贴图列表可以有多个 png。Physics物理效果配置控制头发、裙摆等部位的自然摆动可选。Motions动作分组。Idle是待机循环动作Tap是点击或触发动作。动作名要和 JS 里触发时保持一致。如果某个模型没有 Physics 文件直接在配置里删掉Physics字段即可不用强行保留。4.2 页面与文本呈现框下面给出index.html的完整代码。页面结构分为三块live2d 画布、气泡、底部输入区。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDesk Pet Prototype/title link relstylesheet hrefcss/desk-pet.css /head body div idlive2d-container canvas idpet-canvas/canvas div idpet-bubble classpet-bubble styledisplay: none; span idpet-bubble-content/span /div /div div idcommand-panel input typetext idcommand-input placeholder输入指令例如打开记事本 autocompleteoff / button idsend-btn发送/button /div script srchttps://cdn.jsdelivr.net/npm/pixi.js/dist/browser/pixi.min.js/script script typemodule srcjs/main.js/script /body /html注意#pet-bubble默认隐藏只有收到回复时才显示。这里用 CDN 引入 PIXI.js 只是为了演示方便生产环境建议通过 npm 管理依赖并本地打包。4.3 气泡组件实现js/bubble.js实现打字机效果。为了避免连续触发多个定时器模块内部用typingTimer记录了当前定时器每次调用前先清除。let typingTimer null; export function showBubble(text) { const bubble document.getElementById(pet-bubble); const content document.getElementById(pet-bubble-content); if (!bubble || !content) { console.warn(bubble element not found); return; } // 清除上一次的定时器避免叠加 if (typingTimer) { clearInterval(typingTimer); } content.textContent ; bubble.style.display inline-block; let index 0; typingTimer setInterval(() { content.textContent text.slice(0, index 1); index 1; if (index text.length) { clearInterval(typingTimer); typingTimer null; // 停留 3 秒后自动隐藏 setTimeout(() { bubble.style.display none; }, 3000); } }, 40); }这里每一帧增加一个字符40ms 的间隔既能看出打字效果又不会让用户等太久。如果你希望气泡一直停留在屏幕上可以把最后的自动隐藏逻辑去掉。4.4 指令解析与事件中间层先写一个最简单的js/event-bus.js。它负责广播事件相当于本文架构里的 bangocat 职责简化版class EventBus { constructor() { this.events {}; } on(eventName, handler) { if (!this.events[eventName]) { this.events[eventName] []; } this.events[eventName].push(handler); } emit(eventName, payload) { const handlers this.events[eventName] || []; handlers.forEach((handler) { try { handler(payload); } catch (e) { console.error(event handler error: ${eventName}, e); } }); } } export const eventBus new EventBus();然后是js/command.js负责把输入文本映射成结构化指令const commandMap [ { keywords: [打开记事本, 记事本], action: open_notepad, bubble: 好的正在为你打开记事本, motion: Tap }, { keywords: [你是谁, 你好], action: intro, bubble: 我是你的桌宠助手可以帮你执行简单任务, motion: Idle }, { keywords: [输入文本, 打字], action: type_text, bubble: 收到准备开始输入, motion: Tap } ]; export function parseCommand(rawText) { for (const item of commandMap) { const matched item.keywords.some((keyword) rawText.includes(keyword)); if (matched) { return item; } } return { action: unknown, bubble: 暂不支持这个指令试试“打开记事本”, motion: Idle }; }keywords是匹配关键词列表用includes做包含判断。实际项目里可以改成正则或接入大模型意图识别让模型返回类似{ intent: open_app, appName: notepad }的结构化结果。4.5 Live2D 加载与主逻辑js/main.js负责加载模型、订阅事件、联动气泡和动作。这里引入了pixi-live2d-display的使用思路但不同版本初始化参数有差异需要根据你安装的库版本调整。import { eventBus } from ./event-bus.js; import { showBubble } from ./bubble.js; import { parseCommand } from ./command.js; // 按 pixi-live2d-display 的引入方式调整 // import pixi-live2d-display/cubism4; // import { Live2DModel } from pixi-live2d-display; const app new PIXI.Application({ view: document.getElementById(pet-canvas), backgroundAlpha: 0, resizeTo: window }); let model null; async function loadLive2DModel() { try { // 模型路径相对于页面访问路径 model await Live2DModel.from(./assets/models/my-live2d/my-live2d.model3.json); app.stage.addChild(model); model.scale.set(0.35); model.anchor.set(0.5, 1); model.x app.screen.width / 2; model.y app.screen.height - 20; } catch (e) { console.error(Live2D 模型加载失败, e); showBubble(模型加载失败请检查 assets 路径和静态服务器配置); } } function handleCommand(rawText) { const result parseCommand(rawText); // 1. 通过事件总线广播指令桌面壳或 RPA 桥可以订阅该事件 eventBus.emit(command, { raw: rawText, action: result.action, bubble: result.bubble }); // 2. 呈现层气泡显示回复 showBubble(result.bubble); // 3. 动作层尝试播放 live2d 动作 if (model result.motion) { try { model.motion(result.motion); } catch (e) { console.warn(动作触发失败请检查 model3.json 中是否配置了该动作分组, e); } } // 4. 执行层如果指令有 action交给外部桥或 RPA if (result.action window.rpaBridge) { window.rpaBridge.execute(result.action, rawText); } } document.getElementById(send-btn).addEventListener(click, () { const input document.getElementById(command-input); const text input.value.trim(); if (text) { handleCommand(text); input.value ; } }); document.getElementById(command-input).addEventListener(keydown, (e) { if (e.key Enter) { document.getElementById(send-btn).click(); } }); loadLive2DModel();这里要说明model.motion(Tap)中的动作名必须和 model3.json 里Motions的分组名一致否则会触发失败并打印警告。window.rpaBridge是桌面壳注入的桥接对象纯浏览器页面里没有这个对象所以不会影响演示。4.6 运行与验证在项目根目录启动静态服务器cd desk-pet-prototype python -m http.server 8080然后在浏览器访问http://localhost:8080输入“打开记事本”。预期效果1