DARVA 活动助手:从毛毡手工到实时动画
DARVA 是一个迷人的动画机器人,旨在通过自然对话吸引与会者,减少活动工作人员的重复讲解。
概览
- 介绍与演示视频
- 实体机器人制作
- 设计数字化
- 虚拟助理开发
- 树莓派 4 部署
- DARVA 最终呈现
介绍与演示视频
DARVA 名称代表 Digitized Analog Robot Virtual Assistant。下方视频演示 DARVA 如何与客人互动,减轻活动人员重复性工作。
实体机器人制作
旅程始于手工实体模型。草图原型后,从毛毡剪裁组件,确保每部分可单独分离以便后续动画。缝合边缘赋予 DARVA 触感手工外观。双层毛毡增加耐用性同时保持轻量。
提示:剪裁前拍摄完整套件照片;这些图片可作为数字切片的统一背景。
设计数字化
实体模型完成后,将零件铺在对比背景上简化分割。拍摄单张高分辨率图保留比例。用图像编辑软件分离各组件,存为透明背景 PNG。Photoshop 快速选择工具特别有效,仅需少量手动微调。
数字素材就绪后,机器人即可动画化。
虚拟助理开发
为让 DARVA 在任何平台运行,我用 HTML canvas 和原生 JavaScript 构建轻量网页。为实现流畅跨浏览器动画,引入 Create.js 和 Tween.js。所有库本地打包,确保完全离线运行——这对网络不可靠的活动至关重要。
脚本处理:
- 加载 PNG 素材
- 在画布上缩放、旋转、定位
- 动画化动作与表情
- 每 5 秒变化的动态对话框
- 头部和腹部的交互触发器
随机眼部运动和仪表盘旋转增添真实感,计算动画保持呈现精致。
树莓派 4 部署
为便携低功耗运行 DARVA,我将网页部署在连接竖屏触摸屏的树莓派 4 上。虽 Pi 显示旋转可设为横屏,但触摸面板保持反向方向,故保持 Pi 横屏模式,改为旋转画布动画。此法简化布局调整并保留动画时间轴。
Chromium 初测偶有渲染卡顿;后续修复解决。Firefox 也能流畅运行,帧率略低。离线模式在两浏览器均完整工作。
DARVA 实战
所有组件集成后,DARVA 准备好迎接客人、回答常见问题、简化活动运营。项目展示了简单毛毡模型如何进化为复杂、自包含的数字助理。
来源:DARVA – The Event Assistant
制造工艺