像素画逐帧动画研究：马里奥

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

本文概览

• 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、行走动画小知识
迈腿帧

• 迈腿帧，已迈出，单腿弯曲，此时角色高度最高

• 落地帧，迈出的腿落地，另一腿抬起，此时角色高度最低

• 过渡帧，单腿站直，另一腿提起准备迈出，此时角色高度居中

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