北京
摘要：像素画逐帧动画研究：马里奥
本文概览
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、行走动画小知识
迈腿帧
迈腿帧，已迈出，单腿弯曲，此时角色高度最高
落地帧落地帧，迈出的腿落地，另一腿抬起，此时角色高度最低
过渡帧过渡帧，单腿站直，另一腿提起准备迈出，此时角色高度居中
这一步没啥说的了，参考马里奥，把刚才画好的小人行走帧画出来。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
