下载手机 APP

《求积分》星际歌姬：自研动画编辑器，一人量产128+角色

修改于04/28260 浏览

一句话介绍

星际歌姬是一款以大规模角色养成为核心的音游 RPG。为了解决"一个人怎么做出上百个活生生的角色"这个问题，我们没有选择接入 Spine 或 Live2D，而是从零搭建了一套引擎内置的 2D 网格变形动画编辑器。

未发布项目对话链接：TapTap 制造

horizontal line

horizontal line

为什么要自己做编辑器？我们的设计目标是 4 体型 x 8 气质 x 4 音色 = 128+ 角色模板。如果用传统流程（切图 → 外部编辑器布点 → 绑骨 → 导出 → 导入引擎 → 联调），单个角色保守估计 4-8 小时。128 个角色就是 500-1000 小时，一个人全职干也要半年。所以我们换了个思路：把编辑器直接做进引擎里，把手工活交给算法。结果：单个角色从切图到动画完成，平均 10 分钟。128 个角色 = 21 小时 = 3 天搞定。（这是塔拉拉说的，其实不可能真的三天，还要修图什么的。这是她自己夸自己的。。）

horizontal line

horizontal line

编辑器有什么功能？

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 角色动画的项目，欢迎交流。

猜你想搜

taptap 制造区域笔刷功能

TapTap 制造应用

9.8