关于制作出质量很高的横版战斗角色的方法

修改于05/12181 浏览开发心得 包含 AI 合成内容
其实全篇就一句话,角色为啥做起来这么好看,因为我一帧一帧K的。
在做角色之前,我们需要一个角色的设计稿,这个东西很简单,你把人设写好剩下的交给AI就行了,所有图片,序列帧都可以让AI绘制和处理,学会绘图是你要制作高质量游戏的第一课。
这里拿我在做的角色举例,他的参考图是这样:
TapTap
很朴实无华
当你拥有了一个角色以后,就要想办法让她动起来了。
那么如何让她动起来,答案是序列帧
TapTap
在此之前你需要知道,最容易出现一个误区就是,或许你以为只要把 9 张图、16 张图排在一起,就是序列帧。其实不是。很多图看起来像 sprite sheet,但真正放进游戏里会出问题:角色忽大忽小,脚底线乱跳,武器每帧都变,特效和攻击对不上,程序一裁图就裁到隔壁帧。
所以我们在做角色时,最核心的事情不是“生成一张好看的图”,而是把每个动作拆成一套能被游戏使用的序列帧。
也就是说,序列帧不是拼图,而是工作流。
(一个半成品角色做了一百多帧了,所以我说做起来很折磨😭)
TapTap
1. 先拆动作,不直接生成图片
做一个动作之前,我们不会只写:生成一个攻击动画。这样太模糊了。
AI 很容易给出几张“看起来像攻击”的姿势,但播放起来不一定是动作。我们会先把动作拆成帧。比如 R-13 的 Attack01 是收伞前刺。它不是简单“戳一下”,而是:帧内容F01战斗待机起点F02身体下压,伞向后收F03踏步准备前刺F04伞尖刺出F05命中停顿F06回收伞F07收招F08可接下一段F09回到待机(听起来可能有点墨迹),这样做的好处是,动作有节奏。玩家看到的不是九张姿势,而是:准备 → 出手 → 命中 → 收招这才是动画。
最好让一个动画保持9帧即可,在正方形图片生成3x3的角色网络,上下左右都要对齐,方便裁剪。
TapTap
2. 每一帧都要站在同一套规则里
序列帧最怕“每帧都单独好看”。单独看可能都不错,但一播放就会抖。所以每次做 sprite sheet,我们都会反复强调这些东西:same character、consistent proportions、consistent weapon size、consistent foot baseline、same canvas size、same pivot
翻译成人话就是:角色不能变。武器不能变。脚底线不能乱。
每一格画布必须一样大。R-13 这种角色尤其容易出问题。她有长白发、大裙摆、蝙蝠伞,任何一个部分乱跳,动画都会显得很脏。所以我们宁可让角色小一点,也要保证每一帧有足够空间。
TapTap
角色的闪避序列帧
3. 脚底线比你想的更重要
做横版动作角色时,脚底线几乎是生命线。如果脚底线不一致,角色进游戏后就会这样:
  • 待机时上下抖;
  • 攻击时像在滑;
  • 落地后不稳;
  • 动作切换时突然跳一下。
4. 3×3 和 4×4 不是随便选的
我常用两种格式:
3×3-9 帧普攻、受击、小技能、短动作
4×4-16 帧复杂待机、大动作、技能
排列方式固定:从左到右、从上到下
3×3 就是:
F01 F02 F03
F04 F05 F06
F07 F08 F09
4×4 就是:
F01 F02 F03 F04
F05 F06 F07 F08
F09 F10 F11 F12
F13 F14 F15 F16
这个规则看起来很简单,但它能让程序直接按固定网格裁图。一旦排列乱了,后面全都麻烦。
5. 每格之间一定要留缝
我们一开始也踩过这个坑。角色画得太大,伞尖、头发、脚、特效很容易碰到隔壁格子。
程序裁切的时候,就会把上一帧的边缘裁进来。所以现在做 sprite sheet 时会明确要求:每格上下左右留足空间
角色可以缩小一点
不要让武器和特效贴边
不要串行串列
尤其是 R-13 的伞非常长,攻击特效也会往右延伸。
如果右侧空间不够,伞尖和特效一定会被裁掉。序列帧不是海报,不能只追求填满画面。
它首先要能裁。
6. 动作和特效不要一开始画死在一起
这是我们现在最重要的一条经验。
最开始做攻击时,很容易想把角色动作和特效一起生成,这样看起来更帅。
但问题是,一旦动作和特效画死在同一张图里,后面很难改。
比如:
  • 动作对了,特效太大;
  • 特效对了,角色姿势不对;
  • 命中点偏了,但特效挪不了;
  • 程序想调透明度,也调不了;
  • 打击感不够,没法单独加强命中特效。
TapTap
7. 命中帧必须对齐
动作和特效最容易“看着不爽”的原因,通常不是画得不够华丽,而是命中帧没对上。一个攻击动作里,真正打到敌人的那一帧,应该同时满足三件事:
角色动作最用力
攻击特效最明显
判定盒最有效
比如一个 9 帧攻击:
TapTap
如果角色 F05 才打出去,但特效 F03 就爆完了,那玩家会觉得攻击是飘的。
哪一帧是特效最大帧?
哪一帧允许接下一段?
这比多画几个漂亮姿势更重要。
8. 武器必须稳定,尤其是 R-13 的伞
R-13 最大的问题一直是伞。她的伞不是普通雨伞,而是武器。
它有三个状态:状态用途收伞前刺、射击半开伞横扫开伞防御、缓降、冲击所以序列帧里必须看得出来:现在伞是什么状态?
伞柄是不是握在手里?
伞面是不是从伞杆自然展开?
伞的大小有没有变?我之前生成过几张图,问题就是伞柄和手没连上,或者伞杆从背后穿过去。
这种图单看可能还行,但一进游戏就很假。
TapTap
所以后面提示词里会特别写:
the parasol handle must be connected to the hand
the shaft must align with the hand and canopy center
no floating umbrella
no detached umbrella handle
这是为了保证武器可信。
9. 角色不能在动作里“变身”
AI 生成序列帧时,经常会出现这种情况:
  • 第一帧头发是这样;
  • 第五帧头发变厚了;
  • 第七帧裙子花纹变了;
  • 第九帧伞突然换形状了。
10. 绿幕是为了检查问题
我们现在大量用纯绿幕背景,不是因为它好看,而是因为它最适合做资源处理。绿幕能快速看出:
  • 边缘干不干净;
  • 有没有脏色;
  • 有没有半透明污染;
  • 特效是不是和背景混了;
  • 角色有没有被裁;
  • 相邻格子有没有串图。
但在生成和检查阶段,纯绿幕很实用。对我们来说,绿幕不是审美选择,是工作流程。
11. 生成完不是结束,还要检查
每次生成 sprite sheet 后,我们不会直接说“完成”。至少要检查这些:帧数对不对
排列顺序对不对
画布比例对不对
每格间距够不够
脚底线是否一致
角色比例是否一致
武器大小是否一致
伞柄是否连着手
动作是否能连续播放
命中帧是否清楚
特效有没有遮住角色
程序能不能按固定网格裁切
很多图第一眼看不错,仔细一看就会发现:
  • 有一帧多了一只手;
  • 有一帧伞反了;
  • 有一帧角色变大;
  • 有一帧脚底线高了;
  • 有一帧特效从错误位置飞出。
12. 我们怎么处理 R-13 的普攻三段
R-13 的普攻不是随便做三下。我们把它拆成了三个功能:
A1:刺
A2:扫
A3:开伞爆
具体是:动作伞状态作用A1收伞快速前刺,起手试探A2半开伞横扫,扩大攻击范围A3开伞终结冲击,击退或削韧这样三段不是重复伤害,而是有节奏:先点中,再扫开,最后收尾。
序列帧处理时也围绕这个来:
  • A1 的动作要快;
  • A2 的伞要明显半开;
  • A3 的伞要完全打开;
  • 每段的命中帧和 VFX 要不同;
  • 三段尾帧要能接下一段或回到待机。
13. 做 VFX 时也要按序列帧逻辑来特效也不是随便画几团红光。它也要有帧逻辑:出现
增强
最大
散开
消失
比如 A1 的前刺特效,不能一上来就是最大爆点。
它应该从伞尖开始,拉出深红刺线,然后在命中帧爆一下,再散成小蝙蝠和粒子。
TapTap
A2 是横扫,那 VFX 就应该是弧线。
TapTap
A3 是开伞冲击,那 VFX 就应该从伞面前方推出。特效的形状要跟动作来源一致。否则就会变成:角色在做一件事,特效在做另一件事。这种最影响手感。
(图整丢了,诶嘿)
14. 复杂动画也要先做干净版
比如大招和终结技。一开始很容易想做:
  • 镜头拉近;
  • 黑红背景;
  • 满屏裂痕;
  • 血蝠乱飞;
  • 敌人爆炸;
  • 角色特写。
做太多就会发现,很多东西实现起来过于复杂,这时候可能要借助AI视频掺杂动画K帧+特殊镜头(看我上篇视频)
15. 最后一定要进游戏测试
序列帧在图里看着顺,不代表进游戏就好。进游戏后还要看:
  • 攻击范围够不够;
  • 动作会不会卡;
  • 后摇会不会太长;
  • 特效会不会挡视线;
  • 命中反馈够不够;
  • 闪避能不能顺利取消;
  • A1 接 A2、A2 接 A3 是否舒服;
  • 回 Idle 是否硬切。
有些帧单独看很漂亮,动起来却很僵。所以序列帧最终必须以播放效果为准。
总结
我们处理序列帧的核心,其实就几句话:先拆动作,再画帧。
先做角色动作,再做特效。
脚底线、比例、武器、画布必须稳定。
命中帧、特效帧、判定帧必须对齐。
生成完要检查,最后必须进游戏测试。
序列帧不是把几张图排成格子。
它是一套给程序、动画、特效、手感共同服务的资源。
一张图可以只追求好看,但一套序列帧必须能裁、能播、能接、能打。
猜你想搜
taptap 制造横版角色制作
21
14
11