《求积分》星际歌姬：自研动画编辑器，一人量产128+角色
修改于昨天 17:48175 浏览创作资源申请
一句话介绍
星际歌姬是一款以大规模角色养成为核心的音游 RPG。为了解决"一个人怎么做出上百个活生生的角色"这个问题，我们没有选择接入 Spine 或 Live2D，而是从零搭建了一套引擎内置的 2D 网格变形动画编辑器。
未发布项目对话链接：TapTap 制造
为什么要自己做编辑器？我们的设计目标是 4 体型 x 8 气质 x 4 音色 = 128+ 角色模板。如果用传统流程（切图 → 外部编辑器布点 → 绑骨 → 导出 → 导入引擎 → 联调），单个角色保守估计 4-8 小时。128 个角色就是 500-1000 小时，一个人全职干也要半年。所以我们换了个思路：把编辑器直接做进引擎里，把手工活交给算法。结果：单个角色从切图到动画完成，平均 10 分钟。128 个角色 = 21 小时 = 3 天搞定。（这是塔拉拉说的，其实不可能真的三天，还要修图什么的。这是她自己夸自己的。。）
编辑器有什么功能？
1. 十层图层系统角色被拆分为 10 个图层：后发 → 人偶 → 身体 → 脖子 → 头 → 衣服 → 中发 → 眼睛 → 眉毛 → 前发。每层独立控制可见性、不透明度、网格和动画轨道。头发分三层（前/中/后），自然地穿插在脸部和衣服之间，不需要手动处理遮挡关系。
2. 智能自动网格生成这是我最得意的部分。传统编辑器需要美术手动在图片上一个点一个点地布网格，我们的做法是：
- Alpha 通道扫描：自动检测图片中有内容的区域
- Delaunay 三角化：Bowyer-Watson 算法自动生成高质量三角网格，无退化三角形
- 透明三角形过滤：自动剔除完全透明的区域，减少无效顶点
- 区域笔刷：拖拽范围内的顶点，权重按距离平滑衰减 (1-(d/r)^2)^2，过渡自然，不会出现硬边
- 选区拖动：先框选一批顶点，然后整体刚性平移，适合调整五官位置
- 单点移动：十字准星精确锁定最近的单个顶点，做最后的微调
- 区域笔刷：拖拽范围内的顶点，权重按距离平滑衰减 (1-(d/r)^2)^2，过渡自然，不会出现硬边
- 选区拖动：先框选一批顶点，然后整体刚性平移，适合调整五官位置
- 单点移动：十字准星精确锁定最近的单个顶点，做最后的微调
- 笔刷式框选（扫过即选中）+ 擦除笔刷（扫过即取消选中）
- 选区锁定：锁定后这些顶点不受笔刷影响，用来保护已经调好的区域
- 锁定状态下笔刷拖拽时，锁定点会刚性跟随（保持间距不变），不会被撕裂
- 区域笔刷：拖拽范围内的顶点，权重按距离平滑衰减 (1-(d/r)^2)^2，过渡自然，不会出现硬边
- 选区拖动：先框选一批顶点，然后整体刚性平移，适合调整五官位置
- 单点移动：十字准星精确锁定最近的单个顶点，做最后的微调
- 笔刷式框选（扫过即选中）+ 擦除笔刷（扫过即取消选中）
- 选区锁定：锁定后这些顶点不受笔刷影响，用来保护已经调好的区域
- 锁定状态下笔刷拖拽时，锁定点会刚性跟随（保持间距不变），不会被撕裂
- 笔刷式框选（扫过即选中）+ 擦除笔刷（扫过即取消选中）
- 选区锁定：锁定后这些顶点不受笔刷影响，用来保护已经调好的区域
- 锁定状态下笔刷拖拽时，锁定点会刚性跟随（保持间距不变），不会被撕裂
- 10 条并行轨道，每层独立
- 关键帧 = 时间点 + 全部顶点位置快照
- 线性插值平滑播放，支持播放/暂停/拖拽时间轴
- 每层有独立的轨道开关，方便单独预览某层的动画效果
- 区域笔刷：拖拽范围内的顶点，权重按距离平滑衰减 (1-(d/r)^2)^2，过渡自然，不会出现硬边
- 选区拖动：先框选一批顶点，然后整体刚性平移，适合调整五官位置
- 单点移动：十字准星精确锁定最近的单个顶点，做最后的微调
- 笔刷式框选（扫过即选中）+ 擦除笔刷（扫过即取消选中）
- 选区锁定：锁定后这些顶点不受笔刷影响，用来保护已经调好的区域
- 锁定状态下笔刷拖拽时，锁定点会刚性跟随（保持间距不变），不会被撕裂
- 笔刷式框选（扫过即选中）+ 擦除笔刷（扫过即取消选中）
- 选区锁定：锁定后这些顶点不受笔刷影响，用来保护已经调好的区域
- 锁定状态下笔刷拖拽时，锁定点会刚性跟随（保持间距不变），不会被撕裂
- 10 条并行轨道，每层独立
- 关键帧 = 时间点 + 全部顶点位置快照
- 线性插值平滑播放，支持播放/暂停/拖拽时间轴
- 每层有独立的轨道开关，方便单独预览某层的动画效果
- 笔刷式框选（扫过即选中）+ 擦除笔刷（扫过即取消选中）
- 选区锁定：锁定后这些顶点不受笔刷影响，用来保护已经调好的区域
- 锁定状态下笔刷拖拽时，锁定点会刚性跟随（保持间距不变），不会被撕裂
- 10 条并行轨道，每层独立
- 关键帧 = 时间点 + 全部顶点位置快照
- 线性插值平滑播放，支持播放/暂停/拖拽时间轴
- 每层有独立的轨道开关，方便单独预览某层的动画效果
- 10 条并行轨道，每层独立
- 关键帧 = 时间点 + 全部顶点位置快照
- 线性插值平滑播放，支持播放/暂停/拖拽时间轴
- 每层有独立的轨道开关，方便单独预览某层的动画效果
- 编辑模式用 NanoVG（CPU 矢量渲染）：方便绘制网格线、顶点手柄、笔刷光标等编辑器 UI
- 生产模式用 CustomGeometry（GPU 批渲染）：10 层角色只需 6 个 draw call
→ 分类：4 角全有 = 内部 / 0 角 = 空 / 1-3 角 = 边界
→ Delaunay 三角化
→ 过滤透明三角形
→ 完成
总采样次数约 4000 次 GetPixel，对比逐像素扫描的 26 万次，快了 65 倍。笔刷衰减函数w = (1 - (d/r)^2)^2
这个函数在中心 w=1，边缘 w=0，而且一阶导数在边缘也是 0，所以过渡非常平滑。比线性衰减 1-d/r 自然得多，也比高斯衰减计算量小。
当前进度
- [x] 10 层图层系统 + 三层头发
- [x] Alpha 四角采样自动网格生成
- [x] Delaunay 三角化
- [x] 三种笔刷子模式（区域/选区拖动/单点）
- [x] 选区系统（框选/擦除/锁定）
- [x] 多轨道时间线动画
- [x] 双渲染管线（编辑 NanoVG / 生产 CustomGeometry）
- [ ] 参数化方向变形（angle_x: 正面 ↔ 侧面）
- [ ] 批量角色模板生成
- [ ] 换装系统
最后它是一个独立开发者面对"128 个角色"这个现实问题时，被逼出来的解决方案。核心理念很简单：能让算法干的活，就不要让人干。如果你也在做需要大量 2D 角色动画的项目，欢迎交流。