🎿

2D Animation Techniques in Games

Sprite Animation 精灵动画

notion image
游戏角色一帧一帧地循环播放,就是 2D 动画。
以前开发者非常聪明,例如马里奥的栗子走路,其实就是一张图左右左右地 flip。
notion image
Doom 为了表现 3D 的感觉,游戏在各个视角采了一系列动作,根据相机位置,去播放不同的 Sprite 动画。
notion image
虽然 Doom 这样的技术很古老,但在现代游戏引擎里面,就算是很高端的 3D 游戏引擎里面,这个技术没有完全消亡掉。比如 Particle System,粒子系统创造的烟里面,每一个粒子,不是静态的图,而是序列帧,这样可以看到一个烟球慢慢扩散的效果。
因此 Sprite Animation 还是非常广泛应用的系统。

Live2D

大家经常氪金的 2D 游戏,其实用了更高端的 2D 动画技术——Live2D。
 
博客也经常能看到 Live2D 的看板娘:
live2d-widget
stevenjoezhangUpdated Aug 11, 2022
notion image
💡
技术非常简单,但是给艺术家空间特别大。
一个图片通过变形、编辑就能形成 Live2D 动画。
如果做 2D 游戏时有充足预算和时间,可以考虑做 Live2D 动画。
notion image

思想

把一个角色上面的所有的元素,比如他的头发、他的眼睛、他的眉毛变成一个个的小图元,把这个图元拼在一起,变成一个大图元放进去。对于每个图元,进行旋转放缩和 Wrapping 变形。
📖
Wrapping 就是你给它套一个框架。当我们对那个框架各种拉伸的时候,它在每一个小的框架(三角形或者四边形)里,会进行一个反射变换。通过这种变换,我们就能够把它各种元素做出来,就能显得很鲜活。

做法

notion image
首先,会把所有的图源设置成各种的深度。深度可以定义出现的时机,和它们之间的层次关系。这样可以让它动起来的时候互相不会乱,不会穿插。
notion image
然后,它会把每一个图片元素生成一个控制网格。在这个网格上可以随机的加入控制点,当我们对那些点进行移动的时候,这个图元也就跟着去变。比如一个角色,开心不开心,眉毛一会皱、一会弯下来笑,其实就用这种简单的技术就能实现了。
实际上这种表达本身就已经非常的具有表达力。
notion image
📖
怎么去 K 一个动画? 这么多的图元,可以定义 Key frame。比如说第一帧这个角色眼睛是闭的,下一帧这个角色眼睛闭着,头动一下。再下一帧。再摇摇头。这三帧 Key Frame 串起来,就能看到非常鲜活的角色。
💡
这个工具非常符合艺术家的直觉,也是少有几个,不用非常复杂的理解 3D 变换、三角形、投影、矩阵、复杂的数学,就能做出一个很棒的游戏的这样的一个体系。包括像 unity、unreal 都会全面地支持 Live2D。
💡
2D 游戏引擎也是一个很值得大家关注的一个方向。因为实际上有些很前沿的游戏引擎 的 2D 这一块也做得非常的好。我们也看到一些非常优秀的作品,给我们的感觉非常的好,这里面其实有很多很有意思的技术在里面。