打开网易新闻 查看更多图片

像素画动画看着挺玄学的,别人做的角色跑起来行云流水,你自己上手就各种僵硬。

其实没那么复杂。

动画说到底就是一堆图片按顺序播放产生的运动错觉,你要做的事情就是让这堆图片看起来像那么回事。

打开网易新闻 查看更多图片

先说时间轴这个东西,Aseprite里面它就在底部。

每一列就是一张完整的画面,叫一帧,有个编号。

建新帧最简单的方式是按Alt+B,会在你当前帧前面插一个空白帧。

切换帧可以用逗号和句号键,或者直接点也行。

打开网易新闻 查看更多图片
打开网易新闻 查看更多图片

还有个预览窗口按F7打开,能实时看到动画效果,这个挺重要的。

快捷键记不住也没事,大部分人一开始也记不住,用鼠标在菜单里找一样能操作。

两种动画思路。

一种叫直线前进,就是从第一帧往后一帧一帧画过去。

另一种叫姿势到姿势,先把关键帧画好再把中间的补上。

打开网易新闻 查看更多图片
打开网易新闻 查看更多图片

新手入门的话直线前进会更顺手一些,脑子里不用想太多,跟着感觉走就行。

先做一个弹跳球入门吧。

建一个32x32的文件,先把第一帧画好,可以叫它静止帧。如果是游戏角色就是站立帧。

它决定了整个动画的风格走向,后面所有的帧都得跟它保持一致。

打开网易新闻 查看更多图片

画好之后复制这帧,按Alt+N就行,然后把它往上移4个像素。

接着继续复制,往上移3个像素、2个像素、1个像素,然后在最高点停一帧,再反过来往下掉。

打开网易新闻 查看更多图片
打开网易新闻 查看更多图片

这样你就有了个最基础的弹跳效果。

打开网易新闻 查看更多图片

不过说实话这个动画看着挺呆的,球像是被什么东西弹起来又落下去,没什么生命感。

接下来就是让动画变好看的关键了,调整时间节奏。

右键点击帧编号选帧属性,你可以设置每一帧的持续时间。

比如让球落地的时候多停一会儿,设成300毫秒,这样就有种球被地面弹起来的感觉。

打开网易新闻 查看更多图片

也可以一次选中多帧批量改时长,调整整个动画的快慢节奏挺方便的。

但光调时间还不够,真正让动画活起来的技巧叫挤压和拉伸

打开网易新闻 查看更多图片

原理其实挺直觉的,物体在运动方向上拉长,在垂直方向上压扁,同时保持总体积不变。

体积这个很重要,不然你的球会看起来忽大忽小的。

做法可以是在球弹起来之前加一帧挤压的,把它水平压扁一点垂直也缩短一点,这个叫预备帧,能让后面的弹跳动作看起来更有力。

打开网易新闻 查看更多图片

然后球落地的瞬间也加一帧挤压,这次可以夸张一些没问题。

打开网易新闻 查看更多图片

最后把球运动最快的那几帧在垂直方向拉长,水平方向压窄。这样整个弹跳动画就有了弹性,看着舒服多了。

打开网易新闻 查看更多图片

打开网易新闻 查看更多图片

做好的动画导出也有讲究。

发到网上的话存成GIF最方便,用文件菜单里的导出功能就行。

如果是给游戏用的,一般存成PNG格式的精灵图序列或者精灵图表,Aseprite自带精灵图表导出功能,参数可以调的东西挺多的。

做完这个弹跳球之后你可以再试几个简单的小动画,对时间轴的理解会加深不少。

刚开始学像素画动画的话,建议先从这种简单的东西上手,别一上来就搞角色行走循环,容易把自己搞崩溃。

打开网易新闻 查看更多图片

如果真想深入学习动画原理的话,Animator Survival Kit 这本书强烈推荐,基本做动画的人手一本。