前言
想不想将一个创意idea或者一张图片快速制作出相对应的序列帧动画呢？
没错，这里会介绍一套“黑科技”工作流快速生成Spine动画素材，比较适合于独立开发者。
先看成品：
Bilibili完整视频：视频链接
如何工作
由一张图或者一个创意借助于AI以及自研工具，快速转化为可被各种主流游戏引擎(Unity, Cocos, Godot) 使用的Spine动画。（全程无需Spine动画软件）
工作流使用到的工具：
工作原理
适用场景
-
制作“量大于质”的Spine序列帧动画(比如怪物，道具，特效等)
-
加速独立游戏游戏快速上线
-
游戏引擎中统一使用Spine动画系统
特别声明
这种方式制作的Spine动画确实已不能称之为骨骼动画了，更严格来说只是披着Spine外衣的序列帧动画（当然Spine本身就支持制作序列帧动画）。确实包体会变大，也没有了Spine的灵魂。
不过好处就是上手快。即使不懂Spine制作或者不打开Spine软件，也可以快速从创意到成品制作出相对不错的spine序列帧动画。
所以请各位自己考虑，所有方案都是有利有弊，得看从什么角度去思考。在开发游戏时最重要的是在成本和效率之间找到一个平衡点就好。对于我来说，游戏主角还是会老实的在Spine软件中k帧，绑骨骼，做网格变形；对于大批，动画简单的小怪等，则使用这套方案，算是相互结合着用。
一站式工作流
以下介绍整个工作流，并以一个实际的例子作为用例。
例子会以这种形式呈现
1. AI生成动画视频
现在的AI大模型一直在迭代中，出图出视频的效果也越来越棒。在这个的工作流中，使用的是豆包。豆包最大的优势是出图免费且质量还不错，而且每天有10次的免费视频生成，且视频中人物一致性做的相对来说还是很不错的。
1.1 文生图
我们在制作动画最开始，一般都是先从需求和灵感出发的，比如这个游戏的主题是修仙，像素风格等。所以这个时候就需要通过文字描述，让AI产生图片。当然如果你已经有了相关的人物设计稿，可以跳过这一步，直接到图生视频。
通过提示词来创建适合于制作视频的图片还是有一些讲究的，比如背景颜色，站姿（A-Pose），手脚摆放等。提示词的成熟度高低将直接决定了出图的质量，以及后续视频的质量。
鉴于此，我在豆包上制作了一个智能体（其实不是严格意义上的Agent），大家可以通过这个豆包智能体，直接产出相关的图片关键词。
使用时，只需要按照需要输入图片风格与人物描述，用逗号分开即可。可以多问几次，优中选优！
在智能体对话中，输入“复古动画，中国古代剑客”，然后智能体就会自动生成丰富的人物提示词用于后续的文生图。
在得到了满意的提示词后，拷贝粘贴到新开的一个豆包对话中发送即可，豆包将会生成4张相关的人物图片。当然了，还是可以多问几次，优中选优！AI生图就有随机性，所以可以考虑以下这些因素作为衡量图片质量的标准
-
A-Pose 侧身站立
-
人物无阴影或影子
-
背景颜色统一，无渐变
将刚才智能体生成的提示词，直接发给豆包，豆包就会直接按照要求生成4张人物图片,并最终选取这张动画人物设计图片。
Demo中选择的动画人物设计
1.2 图生视频
接下来是使用参考图生成视频。如果是自己的设计稿，切记保持背景纯色即可；如果是按上面步骤走下来，背景已经是纯绿色了。
在豆包中生成视频前，先上传参考图（豆包出图的直接点击图片），然后添加提示词。切记提示词需要出现以下重点：
-
人物
-
朝向
-
如何做
-
做什么
我想制作人物奔跑的动画，我就会写这样的提示词：让人物朝侧面原地不断快速奔跑。
由于AI产生视频还是有一定随机性，无法真正意义上的如臂使指，如果效果不够理想，可以重试几次。还有一点，不需要整个视频全流程动作流畅，只要其包含一组可闭环且流畅合理的动作即可。比如，我制作奔跑动画，只需要其中1-2秒，只要有片段满足从左脚踏地，到右脚踏地，再回到左脚踏地即可。
豆包默认生成的视频是5s，如果需要做一些复杂的动作，个人推荐使用火山方舟平台（豆包的底层图片视频大模型平台），去制作10s的视频，只不过用完免费额度后就需要自费了。
2. 视频转序列帧图片
当有了人物动画视频，就有了制作动画的基础了。接下里就需要用到我自研的第一个工具了，
工具名称：视频转序列帧图片生成器
工具介绍视频: bilibili视频链接
这款工具主要实现了几个功能：
-
导入/预览视频
-
视频片段选取
-
提取并选择连续关键帧图片
-
抠图以及去水印
-
缩放
-
生成序列帧图片
在经过这一系列操作后，就可以将视频制作成人物动画的序列帧图片了。下面按照操作顺序，一一介绍：
2.1 导入/预览视频
将上一步生成的视频，导入到工具网站上，这是就可以通过视频预览来查看整个动画。一般情况下，我们不需要将整个视频都制作成动画，而只是需要截取其中的“关键几秒”，所以这里可以通过预览仔细观察从几秒到几秒是包含关键动作。当然可以选择全部，不过会为后面选择关键帧图片徒增一些工作量。
我们发现其实从3s到5s包含了一个较为完成的跑步动画，所以就可以考虑将这段作为后面的视频片段。
2.2 视频片段选取
预览后明确了关键视频片段的起始和截止时间后，通过拖拽选择视频片段slider，来快速标注起始和结束时间，或者也可以通过点击预设的片段长度，来标注结束时间（起始时间+片段长度）。在所选片段预览中，会循环播放所选的视频片段。
选取3s到5s作为视频片段。
2.3 提取并选择连续关键帧图片
这是最重要的一步，所制作的动画效果如何，全看这步，它决定动画的丝滑度与完整度。
每秒提取关键帧这个参数决定了视频截图的快慢。这里预设值为20，即每秒内，每1/20=0.05s=50ms从视频中提取一帧图片。（所以如果想对视频无损截图，其实也可以使用这个工具。。。）
对于高速动画，希望体现细节，这个每秒提取关键帧就可以调高一些；对于一般动画，按照默认值即可。
点击开始提取帧，工具就会开始工作，并将提取出的所有帧图片展示在下方，默认是全选状态。
这时就可以通过使用快速预览选中的帧，来进一步做一次细筛。通过拖拽帧滑块，就可以快速预览所选序列帧动画了。看哪些帧适合放到到序列帧中，哪些帧不适合，就可以剔除掉。由于我们是通过AI生成的连续动作，所以一般只需要选择从第几帧开始到第几帧结束即可。
当然，这一步支持直接打包下载的功能，可以直接输出帧图片zip包。这样你可以自己做更精细化的抠图与去水印等功能。
我们可以看到，从第9帧开始是第一次右脚着地，然后是左脚着地，最后到第23帧右脚快要着地，这就形成了一个组连贯的，可重复的跑步动作。于是先选择全不选，点击9帧图片，按着Shift键点击23帧图片，就可以将第9到第23帧所有图片的快速选择。
2.4 抠图以及去水印
细筛后的序列帧图片还是无法直接使用，毕竟还带有背景颜色，AI生成视频还带有水印。所以，这一步需要做两个事：抠图以及去水印。
在配置完抠图参数与去水印参数后（也可直接使用默认值），就可以通过点击开始抠图对所选序列帧图片统一进行图片处理，在抠图时会实时将抠图成功后的png图片展示在下方，可以通过点击图片放大观察，看看抠图/去水印效果如何。如果不够理想，可以微调以下参数。
当然这一步也支持直接打包下载的功能，可以直接输出抠图后的帧图片zip包。
先用默认配置试试，看看抠图效果。这里通过反复调整抠图中的颜色容差，最终得到最满意抠图效果。
2.4.1 抠图
工具提供了两种抠图方法：
-
绿幕抠图（Chroma Key 算法抠图）
-
MediaPipe抠图（Google library）
如果背景颜色是纯色的话，个人感觉还是我自己实现的Chroma Key算法抠图效果好些。所以默认是设置的就是chroma Key的。也建议大家使用这个。
在Chroma key中，有一个重要参数颜色容差。可以这么理解，颜色容差 决定了抠图的力度，默认为0.2。
-
如果发现背景还有残留，可以把颜色容差稍微调大一些（严格，可能过度）；
-
如果发现主体人物部分也被扣掉了，就可以把颜色容差调整的小一些（宽松，可能残留）。
所以在抠图时，根据你的图片，通过微调这个参数，分别查看抠图后结果，选取效果最佳的抠图图片。
2.4.2 去水印
这里去水印的算法结合了区域选择。由于一般情况下水印会出现在四角，且比较小，所以默认情况下会勾选四个角，如果图片已经很明确水印出现在那个角的话，就可以直接选择相关的角。
检测区域大小，用于标识检测区域的大小，可以按照实际水印大小进行调整。
目前去水印算法相对来说有点暴力，效果也较好，所以如果预知到视频中比如武器会划过某个角的时候，就需要反扣选那个角，不然武器可能会在某帧中被裁掉。
比如下面这个去水印，由于没有去掉右上角去水印，所以动画中被部分帧被裁掉。
2.5 缩放
如果是按照上面推荐的AI软件豆包生成的视频的话，默认产出的分辨率为720 * 720，所以制作到这里的图片也应该是720 * 720。 但是作为游戏中使用的动画素材，一般不需要也不能够用这么高的分辨率，所以一般会需要缩放这个功能。（如果是像素风则会更低）
在这里可以直接使用默认的Pica library提供的缩放能力（也是缩放质量里默认的选项），底层其实用到了Lanczos3 算法，在保留最多高频细节和边缘锐度，使用 sinc 函数计算，有效减少模糊。
对于最终每张图片的输出大小，可以自定义缩放尺寸，如果不设置就是默认图片尺寸。旁边还有几个常用尺寸，可供选择，分别是64，128，256，512。在选择好尺寸和缩放质量后，就可以点击生成序列帧图片来产出一张的序列帧长图了，其中
宽度 = 选择宽度 * 帧个数
高度 = 选择高度
这里只需要256*256的尺寸的人物，所以通过点击预设尺寸按钮，设置尺寸，然后生成序列帧图片
2.6 生成序列帧图片
直接点击生成序列帧图片按钮，就可以生成序列帧图片了，在按钮上面还可以快速预览尺寸和像素。
生成的序列帧图片支持快速预览。最后，通过点击下载帧表图片按钮下载序列帧图片。
点击生成序列帧图片按钮，然后点击下载帧表图片按钮将图片下载到本地。
3. 序列帧图片转Spine动画
接下来下来会用到我自研的第二个工具，用来将上面生成的序列帧图片快速转化为Spine动画格式，方便快速引入到游戏引擎中。
工具名称：Spine序列帧动画生成器
工具介绍视频：bilibili视频链接
这款工具操作相对简单一些，主要就两步
-
添加动画组
-
生成/预览Spine动画
3.1 添加动画组
将上一步生成的序列帧图片拖拽到动画组里，就基本完成了第一组动画的导入。当然这里还有两个参数需要调整：
-
动画名称：这组动画的名字。（默认为图片名称）
-
帧率：期望以每秒多少帧图片播放这个动画。帧率越快则动画速度越快，反之亦然。这个值与序列帧图片的有关，所以可以多生成几次，预览查看效果。（默认为20）
支持设置spine事件，通过点击设置事件，打开事件设置panel，可以通过拖拽触发帧选择合适的帧注册Spine事件。注册很简单，只要填写事件名称即可。（其实这里有个小tips，即使不设置事件，也可以打开这个panel，通过拖拽触发帧滑块，快速预览上传的连续帧图片切分后效果）
支持添加多动画组，通过点击添加动画组按钮来实现。毕竟一个动画角色一般不止只有一种动作。
将上一步保存到本地电脑的序列帧图片，拖拽到动画组。修改动画名称为run，调整帧率为18
3.2 生成/预览Spine动画
填写文件名称，默认为animation，它将决定了之后这个动画的名称以及生成的Spine相关的三个文件的名称。在设置完文件名称后，点击生成Spine动画按钮，就可以快速生成Spine动画了。（当前的格式仅支持3.8.99，未来如果诉求多，我会考虑支持更多版本的。当前不支持生成.skel二进制文件）
然后就可以在小窗口进行Spine动画的预览，支持切换动画动作，支持切换背景颜色。
最后就是打包下载，zip包里包含了Spine的3个文件，分别是png,atlas和json。这样就可以直接将游戏素材导入到游戏引擎中，快速使用了。
这里将文件名称设置为jianke，然后点击生成Spine动画按钮，生成最终的Spine动画。效果还不错，直接点击打包下载按钮。截止此，从创意到成品Spine动画就这么一气呵成的制作完成了。
导入游戏Cocos Creator游戏引擎
生成的Spine动画素材就可以直接导入到Cocos creator游戏引擎中了。
以上是我以古代剑客这个人物形象制作了一个奔跑的动画，同理，在保持人物一致性的情况下，我还添加了这个剑客的其他几个动作：跳舞，摔倒，起剑。一下是在Cocos中导入后的效果展示。
- 奔跑
- 跳舞
- 摔倒
写在最后
工作流/工具都是自研的，主要目的是方便自己的游戏开发。分享给更多人，是希望听到更多有价值的反馈，方便进一步提升工作流。如果觉得有价值，那就收藏并用起来吧；如果觉得无意义，就不用浪费口舌了，你都对。
关于大家最关心的问题，整个工作流与工具目前都是免费的，前提是只要访问量不会超过当前服务器负载量。
开发过程中，也发现有很多可以进一步提高的地方，我也在持续改进中，也希望大家可以持续关注我，关注我的bilibili主页，工具最新的动态都会在那里发布。我也会继续在独立开发游戏的路上不断前进的！谢谢！
!!!