by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2021/07/game-animation/

动画是游戏中最基础的部分,所以要掌握游戏开发必须要清楚动画的一些基本常识。今天来介绍下常见的三种动画。

属性动画

大部分人对动画的印象就是位移,角色以一定的速度运动就完成了一个简单的动画效果。如下图所示

精通这3种游戏动画技术,月薪30000不是梦

每一帧将星球的Y坐标增加10个像素,这样星球就会一直向屏幕上方移动。同理,如果是改变X坐标,那么就会往屏幕左右方向移动。不仅能改变位置还能改变大小、透明度、旋转角度,这都是基于改变角色自身的属性。

精通这3种游戏动画技术,月薪30000不是梦

精通这3种游戏动画技术,月薪30000不是梦

精通这3种游戏动画技术,月薪30000不是梦

还有一种倾斜变换就不展开说明,总之可以通过改变角色的这些基本的属性完成动画效果。这几个属性还可以组合起来,让动画效果更加丰富。

缩放、透明度、旋转属性同时改变的效果如下: 精通这3种游戏动画技术,月薪30000不是梦

上面看到的动画效果都是线性的,改变效果是匀速的,但是现实生活中的动画大部分都不是这样。小汽车加油的时候有加速度,踩刹车的时候有减速度,皮球掉落在地上会反弹。因此通过数学计算公示可以来计算角色的一个补间动画,动画更加逼真。

业界也有非常成熟的库:tween,如果满足不了实际的需求,也可以自己计算。原理就是从A到B值计算出这段时间内的插值,在每一帧更新角色的属性。这个属性可以是上面提到的位移、宽高、透明度、旋转角度等。

上面讲述的都是基于角色的属性变化来完成的动画,而为了在游戏中有更加逼真的动画效果,仅仅上述变化是不够的。比如一个角色走路、打斗等动作就需要其他动画来完成。

逐帧动画

以前拍摄电影都是使用胶卷,将图像印在胶卷上,然后放映厅就是以固定的帧率播放胶卷上的图像,从而在视觉效果上表现出动画的效果。 精通这3种游戏动画技术,月薪30000不是梦

如果你的童年没那么枯燥,小人书看的应该不少,那么应该对这个不会陌生,这就是逐帧动画的完美表现。
帧动画小人书
逐帧动画也叫 Frame 动画,它的原理十分“复古”,和我们小时候看的动画片原理一致(注意是我们小时候),就是把一张张准备好的,一系列图片,按照指定的时间播放出来,从而达到动画的效果。

由于每帧的独立性使得这种技术很自由。在技术上的实现也非常的简单,在canvas画布上一张接着一张绘制,只要速度够快,肯定是流畅的动画。 精通这3种游戏动画技术,月薪30000不是梦

如上图一个角色的动作可以用几个特征动作图来表示。这种动画有个很明显的特点,就是前后相邻的动画,不能相差太大了,不然就有点跳跃,画面感会很鬼畜。

还有就是每帧需要一张图片会很耗费内存,相似图片越多动画过渡越平滑同时也带来了巨大的工作量。

因此这种动画只能运用在简单的角色造型上,而需要更加细腻和表现力且高效性能优良的动画需要用其他的技术:骨骼动画

骨骼动画

先来看下骨骼动画能做到什么地步,下面视频是骨骼动画与逐帧动画的对比,视觉上要细腻流畅,而且占用的内存空间要小。 骨骼动画与帧动画对比 它还能具备多个动作 多动作骨骼动画 还能变形,点击看变形坦克

那么这种动画的实现原理是怎样的呢?如下面这个美女角色,身体、头部以及手上的枪支都在晃动。 美女动作 本质上是骨架与顶点在时间轴的方向和位置变化。下图是角色的骨骼图,由若干个点和线段组成的基本骨架。 精通这3种游戏动画技术,月薪30000不是梦

但光有骨骼关节点还不够,像头发这种需要顶点来计算摇摆的位置,因此就有了下图的网格面。每个顶点可以绑定到一个至多个骨骼,动画播放时,顶点随着关节运动,顶点的最终变换就等于它所绑定的骨架变换的加权和。 精通这3种游戏动画技术,月薪30000不是梦

业内有两大知名制作骨骼动画的工具,但像unity本身也有自己的工具,而cocos和laya的工具并没有集成,但它们引擎是支持骨骼动画运行的。业内主要是dragonbonesspine 两款工具的对比也有人进行了分析:骨骼动画对比分析,参考看看spine-vs-dragonbones

骨骼动画的优点:

1、使用较少图片储存内存。

2、单位武器附件挂接,特效挂接非常方便。

3、单位换装系统非常方便。

缺点:

1、设计师的学习成本要高一些。

2、对cpu的占用会大,毕竟有大量的计算,而且顶点数越多耗时越长

总结

在实际的游戏开发过程中,肯定是要综合上述三种动画实现方案的。根据不同的场景选择合适的技术实现。掌握了这三种,基本上能够实现任意的2D游戏动画效果。

老铁既然都看到这了,原创不易,希望关注支持我

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2021/07/game-animation/

个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy

个人微信,如果有想交流的: 个人微信号

欢迎关注个人公众号,墨娱互动 墨娱互动