利益相关声明:作者与文中产品有直接的利益相关(开发者、自家产品等)

利益相关声明:本文介绍的 FramePacker 由作者开发。文中所有功能描述和使用体验均基于作者本人的实际开发和使用过程,优缺点判断力求客观。

 

作为一名游戏行业从业者,一直以来都有一个做独游的梦。但由于自己不会美术,身边的美术朋友工作也都很忙,所以一直难以实现。

直到这两年 AI 画图、视频生成的技术越来越强,角色生成的一致性也越来越好,才终于让我们这些苦于不会美术的独游爱好者有了实现梦想的机会。现在直接通过 AI 生成原画、动画视频,已经完全可以满足大部分 2D 游戏的开发需求。

但是,AI 生成出来的是动画视频 MP4,而游戏开发需要的是序列帧图片。从视频一步步处理到序列帧,其实过程还挺繁琐的。从 AI 视频到可用资产,这最后一公里比我想象的要远的多。
 

传统流程的问题

AI 动画到手之后,通常要做这几件事:从视频中选取想要的部分、拆成逐帧图片、去掉背景、去掉相似度较高的帧、寻找跳变帧和循环帧(如果是循环动画)、调整分辨率和缩放、打包成引擎认的格式。如果是手工做,流程大概是这样:

1、用视频抽帧工具逐帧导出

2、手动挑选相似帧、循环帧、选出最终要用到的帧

3、在专业影像软件里逐帧抠图,30 帧抠 30 次

4、手动调分辨率、裁切、居中

5、找软件打包(如果要使用Sprite Sheet图集的话)

4~5个步骤,好几个软件来回切。做一套 30 帧的角色动作,AI 生成 5 分钟,后续加工两小时起步。如果是新手还要挨个学每个软件怎么用。还没开始干活,自己的精力都先被烧没了。

我在网上也找过一些替代方案。在线工具普遍功能比较单一,抠图效果好的工具也很难找;专业影像软件功能全,但对「只是简单处理一下素材」的人来说,装一个几十 G 的软件本身就是门槛,再加上繁琐的操作界面也很让人头大。图片批量处理更是麻烦到不行,令人头秃。

我就想要一个简单的东西:浏览器打开,拖入视频,点几下,完成视频背景抠图,导出能用的精灵序列帧,兼顾操作便捷与灵活性,适应各种形式的视频到可用资产的处理。

实在找不到,那就只好自己上手了——于是 FramePacker 诞生了,一个一站式帧动画提取编辑工具。除了游戏序列帧(散图、Sprite Sheet)制作之外,后来和朋友交流时也发现同样的流程也非常适合动态表情包和游戏MOD制作,于是也添加了 GIF 支持。
 

它怎么做

FramePacker 的设计目的,就是打通从 AI 生成动画到可用资产的最后一步,包括序列帧与 GIF。整个流程收在三个步骤里:导入素材,编辑整理,选择格式导出。

下面会拿一段豆包生成的动画走一遍完整流程。

完整工作流

 

去背景:点一下就够了

首先在 FramePacker 里打开视频,设置好要提取的片段和每秒帧数,点提取,30 帧不到两秒提取完成。

然后打开换色工具(高级功能),点击画面中的背景色区域(为了方便抠图,我们都会在豆包生成的动画带上纯色背景)。点击后进入预览模式,调节容差和边缘清理滑条直到看到边缘干净,点确认。这样背景就清理干净了,看到棋盘格就代表背景现在是透明的。

这里专门说一下换色算法,市面上抠图效果好的工具其实很难找。FramePacker 的换色算法专门针对 AI 视频的纯色背景清理做了优化,不是简单的替换颜色。对比效果看一下:

抠图效果对比

去完背景之后,画面如果还有残留水印或者不需要的小元素,可以用矩形填充框选清除。

 

改一帧等于改全部

将一帧的背景清理干净之后,点击批量应用到所有帧,点确定,所有帧的背景就都干净了。

这是 FramePacker 的核心设计(高级功能):原生图片批量处理工具。你对某一帧做的所有编辑操作,都可以一键同步到工作集中的全部帧。刚刚的每一步实际手动操作,都会原样在每一帧上重放一遍。改一帧,就等于改全部。

不过正因为是这个原理,所以批量应用更适合背景清理的操作,不太适合逐帧精修。批量应用后,可以再逐帧过一下,如果还有需要补一下的就单独精修一下。

换色抠图 + 批量应用

 

自动找到动作切换点

动画处理还有一个隐形时间杀手:找循环 / 重复帧。比如一个角色走路动画的循环点,或者一段动画有哪些帧是比较相似的需要精简。传统做法是手动翻帧列表、一帧一帧肉眼比对。10 帧还好,30 帧以上眼睛就开始花了。

FramePacker 内置了三种智能检测:

- 跳变帧查找:自动标出动画中动作切换的位置。特别适合动作帧数多、不确定批量编辑有没有误清某些帧的场景。点一下,就会自动标出所有跳变点。

- 循环帧查找:自动找出可以与工作集内首帧无缝循环的帧。找到之后还可以一键移除后续帧,做循环动画从此不用动脑子。

- 智能去重:自动标记相似度较高的重复帧,从而一键移除,可以在动画质量影响较小的情况下,大幅降低动画帧数和导出文件的大小。

跳变帧查找
循环帧查找

 

导出:分辨率、格式、缩放,你自己说了算

处理完成后到导出页,有三种格式可选:PNG 逐帧序列散图(ZIP)、GIF 动图、Sprite Sheet 精灵拼图。

FramePacker是支持自定义分辨率的。市面上大多数在线工具导出时要么锁定原始分辨率,要么只能按固定比例缩放,而 FramePacker 可以任意调整。无论是需要 64×64 的像素精灵还是1920×1080 的高清动画序列,直接填分辨率。

缩放算法提供了两种:像素风格用「像素」模式保持锐利,非像素风格用「平滑」模式过渡更自然。

此外,还支持任意调节画面缩放偏移:如果角色不在画面正中间,拖一下偏移滑块就能精确控制构图,不需要再另找裁剪软件。

自定义导出

GIF 提供了非常丰富的画质选项,还支持半透明效果的模拟,可以满足大部分场景下的 GIF 剪辑需求。

导出GIF

Sprite Sheet 导出时可以自动处理布局和拼图,提供了两种格式的描述文件(包括 Godot 的 plist 文件),拖进游戏引擎就能当精灵图集用。

导出Sprite Sheet
成品Sprite Sheet

 

几个设计选择

在开发过程中有几个取舍值得展开说一下。

浏览器端处理,而非服务器处理。用户的视频不需要离开自己的设备。拖进去的视频在本地拆帧、本地编辑、本地导出。用户不用等上传,我也不用付带宽费。当然这也意味着处理能力受浏览器单线程和内存限制,几百帧以上的大规模导出速度会明显下降。但对于大多数处理几十帧动画素材的场景,这个取舍是绝对值得的,也能更好的保护用户的隐私。

原创换色算法。没有采用通用抠图算法,而是纯自研原创。市面上多数工具用的是经典色键抠图,对 AI 视频,尤其偏卡通动画的抠图效果一般。FramePacker 的换色算法设计时就瞄准了「AI 生成的卡通风格动画」这个特定场景,不追求通用性,而是追求在这个场景下比通用方案好用。

均衡便捷性和自由度。市面上有不少序列帧和 GIF 工具会追求一键抠图一键处理,而 FramePacker 选择了更灵活更自由的编辑器路线。因为高度定制化的处理管线是很难兼容不同动画的,会导致在面对具体现实情况时处理能力有限,也无法做到个性化的定制。FramePacker 设计为自由编辑 + 批量处理的模式,就是为了尽可能适应更多、更复杂的场景。「能不能做到」永远比「是不是一键」要重要。

 

目前还不足的地方

1、不支持复杂多图层合成。** 如果你需要把角色叠加到复杂背景上、调整层叠关系、做混合模式,FramePacker 帮不上忙。它是单图层工作的,设计目标就是处理「AI 视频 → 透明序列」这条链路的所有常用改图操作。对于较为复杂的修图改图需求,专业影像软件仍然是更好的选择。

2、帧数特别多的时候导出会慢。** 前面提到过,浏览器单线程的限制。处理 30-50 帧的素材通常很快,但如果拖进来几百帧、批量应用加导出同时跑,等待时间会明显变长,最高帧数也会受到浏览器内存的限制。做大型项目的话,建议分批处理。

3、目前只有 Web 端。** 没有桌面客户端,没有移动 App。换一个角度说,这也意味着不用装任何东西,浏览器打开就是最新版。但如果你习惯桌面软件的操作感,或者在没网的环境下干活,现阶段确实覆盖不到。
 

适合谁

如果你在做这些事情,那么 FramePacker 适合你:

- 用 AI 工具生成角色动画,需要导出透明序列帧或精灵图给游戏引擎

- 想把视频片段做成透明背景的 GIF 动图

- 想做动态表情包、为游戏 MOD 制作 GIF 素材

- 需要批量处理很多张图的去背景和统一导出

- 手上有一个 GIF,想编辑几帧后重新导出

- 日常简单改图,不想装专业软件,又希望有接近专业软件的便捷和自由度

如果你需要多图层合成、处理几百帧以上的影视级项目、或者习惯桌面端的专业工作流,目前它还不适合你。

 

*部分高级功能(自定义分辨率导出、换色工具、批量应用等)需付费激活,详情见网站内说明。


 

1
0