摘要:像素画逐帧动画研究:马里奥

本文概览

  • 1、结论

  • 2、NES/FC(任天堂8位机):马里奥

  • 3、参考马里奥:制作3帧行走动画

1、结论

从马里奥入手,学习像素画逐帧动画

掌握FC游戏角色动画制作之后,再学习难度更大的SFC游戏角色动画,仍然以马里奥为案例。

这样你可以清晰的看到,同一款游戏主角随着游戏主机性能的提升,同一个像素画游戏角色,细节是如何进化的?品质又是如何提升的?

像素画的质量,很尺寸大小,颜色数量关系不大,但是和细节关系很大。

1.1、NES/FC和SNES/SFC的差别

在教程开始之前,先了解下NES/FC和SNES/SFC的差别:

主机分辨率颜色数量角色尺寸上限NES/FC 256x240像素 3个+透明色 8x8/8x16像素 SNES/SFC 256x224像素 15个 最小16x16像素

由此可知,像素画游戏角色的尺寸和登录的主机紧密相关。

2、NES马里奥

NES马里奥美术资源,可以在Sprites-resource.com上获取。

可以看到一张图片就包含了NES/FC马里奥角色所有的动画帧。

注意可以发射子弹的白色背带裤马里奥,以及2P绿色马里奥,都是通过替换颜色板数据来实现的,无需额外增加图片。

2.1、游戏角色基本动画

NES马里奥游戏角色基本动画包含:

  • idle:待机

  • walk/run:行走/奔跑

  • jump:跳

  • hurt:受伤

  • dead:死亡

  • squat:下蹲

  • up/down:爬上/爬下

  • swim:游泳

  • attack:攻击

  • slide:滑步(这个动作很细腻,模拟跑太快停止时的惯性)

  • 贴墙:水下贴墙动作

另外马里奥有2个形态:

small:正常形态 16x16像素

极简像素画,整个角色只有3个颜色(红、黄、绿)。

big:吃完蘑菇变大形态 16x32像素

所有需要2套动作图。如果你要做一个标准的像素画游戏,需要制作的角色动画只会多不会少。类似我昨天做的大鱼吃小鱼属于小游戏,动画就没那么多。

2.2、1帧动画

1帧动画=没有动画?

  • idle:待机

  • jump:跳

  • dead:死亡

  • squat:下蹲

  • slide:滑步

  • attack:攻击

上面6个都是1帧动画,但是不代表没有动画。因为可以用代码来移动这1帧产生动画。

比如跳,虽然只有1帧,当玩家按跳跃B键,马里奥就会在代码的作用起跳。如果起跳之前,正在按住A奔跑,则会跳的更高更远。

借用其他帧。

起跳和落地都借用了idle站立/待机帧。

  • hurt:受伤

受伤动画只会出现在马里奥的变大形态,被怪物或陷阱碰到,马里奥就会闪烁之后变小。严格来说受伤动画为0帧,只是在变大形态和正常形态之间闪烁,借用了2帧。

2.3、2帧动画

  • up/down:爬上/爬下

爬上爬下共用1个动画,有2帧,需要通过代码移动实现爬上爬下效果。

可以看到马里奥的头部是不变的,在制作像素画逐帧动画的时候,不变的身体部件可以复制粘贴,减少工作量。

2.4、多帧动画

大于2帧的都归到多帧动画。


  • walk/run:行走/奔跑

NES马里奥的行走/奔跑共用1个动画,只有3帧,但是效果是拉满的。几十年过去,现在看这个动画,依然是无懈可击的!完美!

swim:游泳

NES马里奥最复杂的动画是游泳!一共有5帧。

动的部分只有手臂和脚,头部,身体都是不动的,学到了。

3、参考马里奥:制作3帧行走动画

先按照马里奥的风格,画一个自己的极简小人(站立帧),只能使用3个颜色。

只有3个颜色,真的没有施展空间。

头发我想用红头发,想起樱木花道,红头发比较适合当主角。

皮肤是肉色,这样只剩1个颜色了,选1个篮紫色压一压,不然这个角色太轻飘飘了,而且眼睛用暗一些的颜色比较合适。(马里奥用的橄榄绿)

发型的话,其实我想画平头,留一撮毛在额头好了。

鞋子和裤子没啥创新的,和马里奥一样。

手臂我想露出来,衣服改成背心,再加一个红内衣。

站立帧有了,接着画行走帧。

3.2、行走动画小知识

打开网易新闻 查看精彩图片
迈腿帧
  • 迈腿帧,已迈出,单腿弯曲,此时角色高度最高

打开网易新闻 查看精彩图片
落地帧
  • 落地帧,迈出的腿落地,另一腿抬起,此时角色高度最低

打开网易新闻 查看精彩图片
过渡帧
  • 过渡帧,单腿站直,另一腿提起准备迈出,此时角色高度居中

这一步没啥说的了,参考马里奥,把刚才画好的小人行走帧画出来。